BoardForge — No-Code Board Game Design Studio

A no-code, web-based studio for designing board game cards, generating print-ready prototype files, and exporting digital playtest packages — without Photoshop, scripting, or print-production expertise.

Screenshots

Screenshots coming soon — run npm run dev to see the app in action.

Features

🎨 Visual Card Designer

• Drag-and-drop layer editor with text, shapes, images, and icons
• Real-time card preview with front/back toggle
• Resize handles, snap guides, and grid snapping
• Bleed zone and safe zone visual guides
• Card dimension presets: Poker, Bridge, Tarot, Mini, Custom
• 50-step undo/redo with keyboard shortcuts (Cmd+Z / Cmd+Shift+Z)
• Autosave every 3 seconds

📄 Template Library

• 8 professionally designed card templates:
  • Classic Fantasy RPG, Minimalist Modern, Trading Card, Hex Grid Strategy
  • Nature/Druid, Sci-Fi Space, Horror Gothic, Children's Game
• Component templates: Action, Resource, Character, Event cards
• Category filtering (RPG, Strategy, Abstract)

📊 CSV Data Import

• Drag-and-drop CSV file upload
• Auto-detect columns and field mapping UI
• Map CSV columns to template placeholder fields ({{name}}, {{cost}}, etc.)
• Preview first 12 generated cards
• Row-level validation

🖨️ Export & Manufacturing

• Print-and-Play PDF: Cards arranged on A4 pages with cut lines
• TTS Export: Tabletop Simulator JSON package download
• BOM Export: Bill of Materials CSV with cost breakdown
• Share Link: Copyable share URL
• Cost Estimator: The Game Crafter pricing integration
• Export history with status badges

📸 Version Snapshots

• Create named snapshots of template state
• Restore any snapshot with confirmation dialog
• Tracks card count at snapshot time

📋 Dashboard

• Project cards with mini template previews
• Create project modal with template selection
• Rich demo seed dataset available via npm run seed
• Loading skeleton states
• Empty state with CTA

Tech Stack

Technology	Purpose
Next.js 14	React framework with App Router
TypeScript	Type-safe development (strict mode)
Tailwind CSS	Utility-first styling
better-sqlite3	Embedded SQLite database
React useReducer	Editor state management

Getting Started

Prerequisites

• Node.js 20+ (see .nvmrc)
• npm

Setup

# Install dependencies
npm install

# Set up environment variables
cp .env.example .env.local

# Start development server
npm run dev

# Open in browser
open http://localhost:3000

The database is automatically created on first API call. Run npm run seed to load the rich demo dataset.

Available Scripts

Command	Description
npm run dev	Start development server with hot reload
npm run build	Create optimized production build
npm start	Start production server
npm run lint	Run ESLint checks
npm run typecheck	Run TypeScript type checking
npm run format	Format code with Prettier
npm run format:check	Verify code formatting (CI)
npm run seed	Refresh the rich demo dataset (12 projects, 300+ cards)
npm run migrate	Run database migrations

Build for Production

npm run build
npm start

Architecture Overview

src/
├── app/                          # Next.js App Router pages
│   ├── layout.tsx               # Root layout with navigation
│   ├── page.tsx                 # Landing page
│   ├── dashboard/               # Project list & creation
│   ├── templates/               # Template library browser
│   ├── projects/[id]/
│   │   ├── editor/              # Interactive card designer
│   │   ├── csv/                 # CSV data import
│   │   ├── export/              # Export & manufacturing costs
│   │   └── snapshots/           # Version snapshots
│   └── api/                     # REST API route handlers
├── components/
│   ├── ui/                      # Reusable UI primitives
│   │   ├── Button, Modal, Toast, Skeleton, Badge
│   ├── editor/                  # Card editor components
│   │   ├── CardCanvas           # Main canvas with drag/drop
│   │   ├── LayerList            # Layer management sidebar
│   │   ├── PropertiesPanel      # Layer property editor
│   │   ├── EditorToolbar        # Top toolbar
│   │   └── LayerRenderer        # Individual layer rendering
│   ├── dashboard/               # Dashboard components
│   └── templates/               # Template library components
├── lib/
│   ├── db.ts                    # SQLite connection & schema
│   ├── seed.ts                  # Seed data builders (12 projects, 300+ cards)
│   └── utils.ts                 # Helpers (ID gen, CSV parsing, pricing)
└── types/
    └── index.ts                 # Shared TypeScript type definitions

API Routes

Method	Route	Description
GET	/api/projects	List all projects with card counts
POST	/api/projects	Create new project
GET	/api/projects/[id]	Get project details
PUT	/api/projects/[id]	Update project
DELETE	/api/projects/[id]	Delete project
GET	/api/projects/[id]/templates	List project templates
POST	/api/projects/[id]/templates	Create template
PUT	/api/projects/[id]/templates/[templateId]	Update template
POST	/api/projects/[id]/cards/generate	Generate cards from data
GET	/api/projects/[id]/cards	List generated cards
DELETE	/api/projects/[id]/cards	Delete all generated cards
GET	/api/projects/[id]/snapshots	List snapshots
POST	/api/projects/[id]/snapshots	Create snapshot
GET	/api/projects/[id]/export	List export jobs
POST	/api/projects/[id]/export	Create export job
GET	/api/templates	List library templates

Database Schema

projects        — id, name, description, template_id, card_width, card_height, card_back_layers
card_templates  — id, project_id, name, face, layers (JSON), background_color
generated_cards — id, project_id, template_id, data (JSON)
snapshots       — id, project_id, label, card_count, state (JSON)
export_jobs     — id, project_id, type, status, result_url
_migrations     — id (migration tracking, auto-managed)

Database file: ./data/boardforge.db (auto-created on first run)

Seed Data

Load the demo dataset with:

npm run seed

The seed routine is transactional, idempotent, and guarded against accidental production use. It refreshes only the managed demo projects and preserves unrelated local work.

Seed coverage includes:

• 12 projects across new, in-progress, and complete stages
• 305 generated cards across poker, bridge, tarot, mini, and custom dimensions
• Template variety spanning TCG, Euro tableau, character, item, sci-fi, horror, and cozy market styles
• Multiple CSV-generated decks with 20+ cards each
• Snapshot/version history for iterative design milestones
• Export history entries with completed, pending, and failed states
• Edge cases: empty projects, a 108-card project, unicode-rich card text, and max-length project/card names

If you intentionally need to seed while NODE_ENV=production, set ALLOW_PRODUCTION_SEED=true for that run.

Layer Data Model

Cards are composed of layers, each with position, size, and type-specific properties:

• Text Layer: Content (supports {{placeholder}} tokens), font, color, alignment
• Shape Layer: Fill, stroke, border radius
• Image Layer: Source URL, object-fit
• Icon Layer: Emoji/unicode icon, color, size

Security Notes

⚠️ No authentication is included. BoardForge is designed for local development and single-user use. All projects are accessible to anyone with network access. Before deploying to a shared or public environment, add an authentication layer (e.g., NextAuth.js).

License

MIT — see LICENSE for details.

Contributing

Contributions are welcome! See CONTRIBUTING.md for guidelines on getting started, coding conventions, and submitting pull requests.