NextToBinge

Discover movies, dramas, and anime — save them into personal watchlists.

Built with Next.js 16 (App Router), Clerk, Supabase, Drizzle ORM, TMDB, AniList, and shadcn/ui.

Features

• Browse trending and popular movies, TV dramas, and anime
• Search across all three categories at once
• View detailed pages with cast, ratings, genres, and related content
• Sign in securely with Clerk (Google, GitHub, email, etc.)
• Create and manage multiple watchlists
• Add any title to a watchlist and track its status: Plan to Watch, Watching, or Watched
• Remove items and rename or delete watchlists

Tech Stack

Layer	Technology
Framework	Next.js 16 (App Router, React 19)
Auth	Clerk
Database	Supabase (Postgres)
ORM	Drizzle ORM
Content — Movies/Dramas	TMDB API (free)
Content — Anime	AniList GraphQL API (free, no key needed)
UI	shadcn/ui + Tailwind CSS v4
Language	TypeScript

Getting Started

1. Clone and install dependencies

git clone https://github.com/your-user/nexttobinge
cd nexttobinge
bun install

2. Set up environment variables

Copy the example file and fill in your keys:

cp .env.example .env.local

Variable	Where to get it
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY	Clerk dashboard → API Keys
CLERK_SECRET_KEY	Clerk dashboard → API Keys
CLERK_WEBHOOK_SECRET	Clerk dashboard → Webhooks → your endpoint → Signing secret
DATABASE_URL	Supabase → Project Settings → Database → Connection string (Transaction mode, port 6543, host …pooler.supabase.com). Not the direct db.<ref>.supabase.co string: that host is IPv6-only and fails with ENOTFOUND on IPv4 networks and on Vercel
TMDB_API_KEY	TMDB → API → Developer
SITE_URL	Optional. Your public origin, e.g. https://nexttobinge.com. Used for canonical URLs, the sitemap and link previews. Defaults to Vercel's production URL, then http://localhost:3000
GOOGLE_SITE_VERIFICATION	Optional. Search Console → Add property → HTML tag method → the content value. Not needed if you verify with a DNS record
NEXT_PUBLIC_SENTRY_DSN	Optional. Sentry → Project Settings → Client Keys (DSN). Error monitoring is off without it
SENTRY_ORG, SENTRY_PROJECT, SENTRY_AUTH_TOKEN	Optional, build-time only. Upload source maps so Sentry shows readable stack traces. Sentry → Settings → Auth Tokens

AniList requires no API key.

3. Set up the database

Migrations are managed by Drizzle Kit. With DATABASE_URL in your shell:

bun run db:migrate

This applies everything in lib/db/migrations/ that the database hasn't seen yet. After changing lib/db/schema.ts, run bun run db:generate to write a new migration, review the SQL, then migrate.

You can also paste lib/db/migrations/0000_baseline.sql into Supabase's SQL Editor, but then Drizzle doesn't know it ran. Follow "Already have a database?" in SUPABASE_MIGRATION.md afterwards.

4. Run the development server

bun dev

Open http://localhost:3000 to see the app.

Project Structure

app/
  (auth)/           Sign-in and sign-up pages (Clerk hosted UI)
  (main)/           Main app layout (Navbar + content)
    page.tsx        Home — trending content
    browse/         Movies, Dramas, Anime browse pages
    search/         Unified search across all types
    media/          Detail pages for movie, tv, anime
    watchlists/     Watchlist management pages
  api/watchlists/   REST API routes (CRUD for watchlists and items)
components/         Shared UI components
lib/
  db/               Drizzle schema, client, and migrations
  tmdb.ts           TMDB API helpers
  anilist.ts        AniList GraphQL helpers
proxy.ts            Clerk auth — only watchlists require sign-in; browsing is public

Available Scripts

bun dev           # Start development server
bun run build     # Production build
bun run lint      # Run ESLint
bun run typecheck # Generate route types, then run tsc
bun run test      # Authorization and routing tests (in-memory Postgres, no setup)
bun run db:generate   # Generate Drizzle migrations from schema
bun run db:migrate    # Apply migrations to the database
bun run db:studio     # Open Drizzle Studio (visual DB browser)

Deployment

The app is ready to deploy on Vercel. Add the same environment variables from .env.local to your Vercel project settings, then push to deploy.

Every pull request runs CI (.github/workflows/ci.yml): lint, typecheck, tests and a production build. Everything that needs your accounts before launch (Clerk production, Vercel, Sentry, Search Console) is in LAUNCH_CHECKLIST.md.

Docs

• LAUNCH_CHECKLIST.md: the account and dashboard steps to do before and after launch
• ROADMAP.md: features by phase, why each one attracts users, and what was built
• DEVOPS_LESSONS.md: the DevOps lessons from building it, by topic, with a self-test
• IMPLEMENTATION.md: file-by-file reference
• SUPABASE_MIGRATION.md: database setup and migrations