ChronoBoard

Spoiler-aware digital investigation boards for tracking complex TV show characters, eras, theories, and relationships.

Stack

• Next.js App Router with TypeScript
• Tailwind CSS
• React Flow for board canvas, draggable cards, edges, labels, zoom, pan, and minimap
• Zustand for board UI state, undo/redo, filters, and save status
• Supabase Auth, Postgres, Storage, and RLS
• Local demo mode with localStorage when Supabase is not configured or no user is signed in
• Google Custom Search JSON API or SerpAPI for image search through /api/image-search

Spoiler Safety Limits

ChronoBoard is best-effort, not a spoiler-proof verifier.

• Search queries include show title, character name, requested year/era, optional actor, and character portrait.
• Results are checked for blocked words in title, snippet, and source URL.
• Risky source domains get warnings.
• The app never auto-selects the first result.
• The user must manually approve images.
• Search result images may still contain spoilers or copyrighted material.

For maximum safety, use manually approved images or uploads you are allowed to use.

Local Setup

npm install
npm run dev

Open http://localhost:3000.

Without environment variables, the app runs in local demo mode and stores boards in browser localStorage.

Environment Variables

Create .env.local:

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

# Server-only keys. Do not prefix with NEXT_PUBLIC_.
GOOGLE_CSE_ID=
GOOGLE_API_KEY=
SERPAPI_KEY=

Image provider priority:

1. Google Custom Search JSON API when GOOGLE_CSE_ID and GOOGLE_API_KEY are present
2. SerpAPI when SERPAPI_KEY is present
3. Manual image URL and upload fallback

Supabase Setup

1. Create a Supabase project.
2. Run supabase/migrations/0001_initial_schema.sql.
3. Add Supabase URL and anon key to .env.local.
4. Confirm the board-images Storage bucket exists.
5. Start the app and use magic-link auth from /boards.

The migration enables RLS so users can only manage their own private boards. Shared boards are read-only through /share/[token].

Scripts

npm run dev
npm run build
npm run typecheck
npm run lint

Vercel Deploy

1. Push the repo to GitHub.
2. Import it into Vercel.
3. Add the same environment variables in Vercel Project Settings.
4. Run the Supabase migration before using Supabase-backed boards.
5. Deploy on the free Hobby plan.

MVP Features

• Create/list/delete boards
• Local demo mode without login
• Supabase-backed mode with auth when configured
• Character/event/place/object/mystery cards
• Actor, year/era, image, notes, tags, accent color, spoiler status
• React Flow drag, connect, zoom/pan, minimap
• Colored labeled edges with style, direction, confidence, spoiler visibility
• Node and edge inspector
• Duplicate/delete cards
• Timeline/year filters and era lanes
• Saved manual layout views
• Image search route with provider abstraction and spoiler warnings
• Manual image URL and upload fallback
• JSON import/export
• PNG screenshot export through html-to-image
• Read-only share-link route