Jigsaw

Turn any image into a jigsaw puzzle and solve it live with a friend. Next.js 16 + React 19 on the front, Supabase (Storage, Postgres, Realtime) on the back — there is no custom server.

Running locally

npm install
npm run dev

Create .env.local with your Supabase project's origin and anon key:

NEXT_PUBLIC_SUPABASE_URL=https://<project-ref>.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon key>

Use the bare origin — not the /rest/v1 URL the dashboard shows. (The client strips any path just in case.)

Supabase setup

• A public Storage bucket named puzzle-images, with an insert policy for anon. Set a file-size limit on the bucket (the client downsizes to 2048px, but the bucket should enforce its own cap).
• The puzzles table from DESIGN_AND_IMPLEMENTATION.md §4.1, with select and insert policies for anon.
• Realtime enabled (broadcast + presence are used; no Postgres changes).

How it fits together

Path	Role
src/app/page.tsx	Upload + piece count → Storage + puzzles row → redirect to /play/<id>
src/app/play/[puzzleId]/page.tsx	Loads the puzzle, name prompt, lobby, mounts the game
src/components/canvas/Stage.tsx	Canvas engine: pieces, drag/pan/zoom, snapping
src/stores/usePuzzleStore.ts	Zustand state; auto-saves to IndexedDB
src/hooks/usePuzzleMultiplayer.ts	Supabase Realtime relay (cursors, moves, merges, board sync)
src/utils/boardGenerator.ts	Deterministic tabs + scatter from the puzzle seed

Every client generates the same starting board from the seed stored in the puzzles row; afterwards moves are relayed peer-to-peer as absolute positions, and anyone joining late asks the room for a snapshot.