A Next.js application for managing your BoardGameGeek collection with collaborative game picking features.

• Syncs your BGG collection using the official XML API v2
• Displays game covers, titles, year, player count, and playtime
• Responsive grid layout (6 columns on desktop, 2 on mobile)
• Print-optimized CSS with proper page breaks
• Real-time collaborative game sessions with Socket.IO
• Multiple collection support

• BGG_TOKEN: A BoardGameGeek API token is required. Register an application at BoardGameGeek to obtain one.

1. Install dependencies:

   npm install

2. Set up environment variables:

   cp .env.example .env.local
   # Edit .env.local and add your BGG_TOKEN

3. Set up the database:

   npx prisma migrate dev

Run the development server:

npm run dev

Open http://localhost:3000 to view your collection.

Build for production:

npm run build
npm start

docker pull ghcr.io/blackjid/board-game-collection:latest

docker run -d \
  --name board-game-geek \
  -p 3000:3000 \
  -v bgg-data:/data \
  -e BGG_TOKEN=your-token-here \
  ghcr.io/blackjid/board-game-collection:latest

This will:

• Start the app on port 3000
• Persist the SQLite database in a Docker volume called bgg-data
• Automatically run database migrations on startup

When building the Docker image, you can set the base URL:

docker build --build-arg NEXT_PUBLIC_BASE_URL=https://games.example.com -t my-bgg-app .

For local network testing (e.g., testing on your phone):

NEXT_PUBLIC_BASE_URL=http://192.168.1.100:3000 npm run dev

Mount a host directory instead of a Docker volume:

docker run -d \
  --name board-game-geek \
  -p 3000:3000 \
  -v /path/to/your/data:/data \
  -e BGG_TOKEN=your-token-here \
  ghcr.io/blackjid/board-game-collection:latest

docker logs -f board-game-geek

docker stop board-game-geek
docker rm board-game-geek

1. Open the site in your browser
2. Click "Print Collection" or press Ctrl+P / Cmd+P
3. The print styles will hide navigation and optimize the grid for paper

The BGG username is configured via the Settings page in the app. Navigate to /settings to set your BoardGameGeek username and other options.

├── app/
│   ├── page.tsx          # Main collection grid page
│   ├── layout.tsx         # Root layout with metadata
│   └── globals.css        # Styles including print CSS
├── components/
│   └── GameCard.tsx       # Individual game card component
├── lib/
│   ├── bgg/              # BGG API client (XML API v2)
│   ├── games.ts          # Game data access layer
│   ├── sync.ts           # BGG collection sync logic
│   └── prisma.ts         # Database client
├── prisma/
│   └── schema.prisma     # Database schema
└── types/
    └── game.ts            # TypeScript interfaces

• Next.js 16 - React framework
• Tailwind CSS v4 - Styling
• Prisma - Database ORM (SQLite)
• Socket.IO - Real-time communication
• TypeScript - Type safety