Spell Binder

A self-hostable web application for cataloging and managing your Magic: The Gathering card collection. Built with React and PocketBase for easy deployment and management. This project is my first stab at trying vibe coding. The frontend is mostly generated by Claude.

Features

• 📱 Responsive web interface for desktop and mobile
• 🔍 Search and add cards to your collection
• 📊 Collection statistics and dashboard
• 🏷️ Track card condition, quantity, and notes
• 🐳 Docker support for easy deployment
• 💾 Self-hosted with PocketBase backend

Quick Start

Development Setup

1. Clone the repository

   git clone <repository-url>
   cd spell-binder

2. Open in VSCode Developement Container

3. Start the development servers

   Run the VSCode task "Start Pocketbase"

   In a terminal, start the React development server:

   npm run dev

4. Access the application

   • React app: http://localhost:3000
   • PocketBase admin: http://localhost:8090/_/

Docker Deployment

1. Using Docker Compose (Recommended)

   docker-compose up --build

2. Using Docker directly

   npm run docker:build
   npm run docker:run

3. Access the application

   • Application: http://localhost:8080
   • PocketBase admin: http://localhost:8080/_/

Development

Environment Variables

Copy .env.example to .env and configure:

# PocketBase Configuration
PB_ENCRYPTION_KEY=your-encryption-key-here

# Development Configuration
VITE_POCKETBASE_URL=http://localhost:8090

License

This project is licensed under the MIT License - see the LICENSE file for details.