Cardboard - Expandable Cards UI

A modern web application built with Svelte, PocketBase, and TailwindCSS featuring smooth expandable card animations.

🚀 Tech Stack

• Frontend: SvelteKit with TypeScript
• Backend: PocketBase (self-hosted)
• Styling: TailwindCSS
• Deployment: Kubernetes (kk0s homelab)
• Domain: https://cardboard.07c.me

📁 Project Structure

cardboard-app/
├── svelte/              # SvelteKit frontend
│   ├── src/
│   │   ├── routes/      # SvelteKit routes
│   │   ├── lib/         # Shared components and utilities
│   │   └── app.html     # HTML template
│   ├── static/          # Static assets
│   ├── package.json     # Node.js dependencies
│   ├── vite.config.js   # Vite configuration
│   └── tailwind.config.js # TailwindCSS configuration
├── pocketbase/          # PocketBase backend
│   ├── migrations/      # Database migrations
│   └── pb_hooks/        # PocketBase hooks
└── README.md           # This file

🎯 Features

• Expandable Cards: Smooth animations for expanding/collapsing cards
• Responsive Design: Mobile-first design with TailwindCSS
• Real-time Updates: PocketBase real-time subscriptions
• Persistent Storage: All data stored in PocketBase
• Auto-deployment: Git-based deployment with live reload

🛠️ Local Development

# Frontend development
cd svelte
npm install
npm run dev

# Backend development
cd pocketbase
./pocketbase serve --dev

📦 Deployment

This application is designed to run in the kk0s Kubernetes homelab. The deployment process:

1. Code is pushed to this GitHub repository
2. Kubernetes container automatically pulls and builds the app
3. Svelte frontend is compiled and served by PocketBase
4. SSL certificate and domain configuration handled by kk0s

🌐 Access

• Live Application: https://cardboard.07c.me
• Admin Panel: https://cardboard.07c.me/_/
• API: https://cardboard.07c.me/api/collections

🔐 Authentication

Uses the kk0s unified credential system:

• Username: admin
• Password: Configured in kk0s environment

Built with ❤️ for the kk0s Kubernetes homelab