Multiplayer Starter Template

A production-ready starter for 2 or more player realtime games with room codes, chat, timer state, and auth.

Built for shipping quickly on Next.js + tRPC + Prisma + Supabase + PartyKit.

What You Get

• Realtime room flow: create, join, leave, chat, timer sync
• Server-authoritative game state via tRPC + Prisma
• PartyKit transport for room and lobby sync events
• Supabase authentication (email/password + OAuth support)
• Modern Next.js App Router stack with TypeScript
• UI baseline with reusable components for rapid feature work

Stack

• Next.js 16 (App Router)
• React 19 + TypeScript
• tRPC 11 + TanStack Query
• Prisma + Postgres (Supabase)
• Supabase Auth
• PartyKit + PartySocket
• Tailwind CSS 4

Quick Start

1. Install dependencies

pnpm install

1. Create .env

NEXT_PUBLIC_SUPABASE_URL="https://YOUR_PROJECT.supabase.co"
NEXT_PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_ANON_KEY"
NEXT_PUBLIC_SITE_URL="https://YOUR_DOMAIN"

DATABASE_URL="postgresql://postgres.[PROJECT_REF]:[PASSWORD]@aws-0-[REGION].pooler.supabase.com:6543/postgres?pgbouncer=true&connection_limit=1"
DIRECT_URL="postgresql://postgres:[PASSWORD]@db.[PROJECT_REF].supabase.co:5432/postgres"

NEXT_PUBLIC_PARTYKIT_HOST="YOUR_PROJECT.YOUR_NAME.partykit.dev"
# Optional local fallback:
# NEXT_PUBLIC_PARTYKIT_URL="http://localhost:1999"

1. Push schema to database

pnpm db:push

1. Start app + realtime server

pnpm dev

The dev script starts Next.js and PartyKit together.

Auth Provider Setup

Enable providers in Supabase Auth and set callback URLs:

http://localhost:3000/auth/callback
https://YOUR_DOMAIN/auth/callback
https://*.vercel.app/auth/callback

Also set in Supabase Auth URL Configuration:

Site URL: https://YOUR_DOMAIN
Redirect URLs:
  http://localhost:3000/auth/callback
  https://YOUR_DOMAIN/auth/callback
  https://*.vercel.app/auth/callback

Provider secrets stay in Supabase settings. No extra OAuth secrets are required in this repo.

Scripts

pnpm dev          # next + partykit in parallel
pnpm dev:next     # next dev
pnpm dev:party    # partykit dev

pnpm typecheck
pnpm lint
pnpm check

pnpm db:push
pnpm db:generate
pnpm db:studio

pnpm deploy:party
pnpm deploy:web
pnpm deploy

Deploy (Vercel + PartyKit)

1. Deploy PartyKit worker

pnpm deploy:party

1. Set NEXT_PUBLIC_PARTYKIT_HOST in Vercel

2. Set NEXT_PUBLIC_SITE_URL in Vercel to your production domain (for example https://YOUR_DOMAIN)

3. Deploy web app

pnpm deploy:web

Project Layout

src/
  app/
    components/
      GameClient/
        index.tsx
        Lobby.tsx
        Messages.tsx
        RoomInfo.tsx
        TimerControl.tsx
  server/
    api/
    modules/
      game/
        GameRoomRouter.ts
        GameRoomService.ts
        GameRoomService/
          player-label.ts
          room-id.ts
          timer.ts
    realtime/
      partykit.ts
partykit/
  server.ts
prisma/
  schema.prisma

Extend This Starter

• Add game rounds, scoring, and win conditions in GameRoomService
• Add additional realtime event types in PartyKit
• Swap room capacity and matchmaking strategy
• Add profile system and richer player presence

Notes

• If Prisma errors with prepared statement "s1" already exists, verify DIRECT_URL points to the direct (non-pooler) Supabase host.
• Vercel Analytics is already wired in the root layout.

Images