Trade Binder

A modern Magic: The Gathering marketplace and collection management platform where players can buy, sell, and organize their card collections in digital binders.

Features

• 🃏 Card Marketplace - Buy and sell Magic: The Gathering cards with other players
• 📚 Digital Binders - Create and organize your personal card collection in customizable binders
• 🔍 Advanced Search - Find cards quickly with powerful filtering and search capabilities
• 🌐 Multi-language Support - Available in multiple languages
• 🌓 Dark Mode - Toggle between light and dark themes for comfortable viewing
• 📱 Responsive Design - Seamless experience across desktop, tablet, and mobile devices

Tech Stack

• Framework: Next.js 16 with App Router
• Language: TypeScript
• Styling: Tailwind CSS
• Database: PostgreSQL with Slonik SQL
• API: tRPC for type-safe API routes
• Card Data: Scryfall API integration (Self-hosted, periodically refresh w/ their API)
• Package Manager: pnpm
• Monorepo: Turborepo

Getting Started

Prerequisites

• Node.js 20+
• pnpm 9+
• Docker (or Podman)

Installation

1. Clone the repository:

git clone https://github.com/yourusername/trade-binder.git
cd trade-binder

2. Install dependencies:

pnpm install

3. Start developing:

pnpm dev

That's it! The pnpm dev command will automatically:

• Create a .env file with default database configuration (if it doesn't exist)
• Start a PostgreSQL database in Docker
• Run database migrations
• Start the development server

Open http://localhost:3000 to see your application.

Manual Database Setup

If you need to set up the database separately:

pnpm setup-db    # Start database + run migrations

Or use the individual commands in apps/web/:

pnpm start-docker      # Start only the database container
pnpm migrate           # Run migrations
pnpm migrate:status    # Check migration status
pnpm migrate:rollback  # Rollback last migration

Development

Available Scripts

Root (monorepo):

• pnpm dev - Start database, run migrations, and start dev server
• pnpm build - Build for production
• pnpm lint - Run ESLint
• pnpm setup-db - Start database and run migrations only

Web app (apps/web/):

• pnpm dev - Start development server (without database setup)
• pnpm start-docker - Start PostgreSQL container
• pnpm restart-docker - Restart PostgreSQL container
• pnpm migrate - Run database migrations
• pnpm import-cards - Import card data from Scryfall

Project Structure

trade-binder/
├── apps/
│   └── web/              # Next.js application
│       ├── src/
│       │   ├── app/      # App router pages
│       │   ├── components/  # React components
│       │   ├── lib/      # Utilities and configurations
│       │   └── server/   # tRPC routers and database
│       └── public/       # Static assets
├── packages/             # Shared packages (if any)
└── turbo.json           # Turborepo configuration

License

MIT License

Acknowledgments

• Card data provided by Scryfall
• Built with Next.js
• Font optimization with Geist

---

Note: This project is not affiliated with or endorsed by Wizards of the Coast.