Live: movie-db-one-psi.vercel.app | Code: github.com/pnsw123/Movie-DB
Browse 7,400+ real films and 2,800+ TV series, rate them, write reviews, build watchlists, and run your own SQL queries against a live database.
| Browse | Search |
|---|---|
 |
 |
| Movie Detail | Sign In |
|---|---|
 |
 |
| Tool | Role |
|---|---|
| Next.js 15 + TypeScript | Frontend framework — server-rendered pages, App Router |
| Tailwind CSS | Styling |
| Supabase (PostgreSQL) | Database + authentication + Row-Level Security |
| TMDB API | Source of all movie & TV data — posters, trailers, metadata |
| Google Stitch | UI design & prototyping before any code was written |
| GitHub Actions | Nightly cloud sync — fetches new movies every night at 3 AM UTC |
| Vercel | Hosting — auto-deploys on every push to main |
| Python | Data pipeline — seeds and syncs 10,000+ titles from TMDB |
All titles, posters, backdrops, and trailers come from TMDB — the same API used by Plex and Letterboxd.
TMDB API → Python scripts → Supabase (PostgreSQL) → Next.js app
A Python script fetches movies and TV shows and loads them into the database. A GitHub Actions cron job runs this automatically every night at 3 AM UTC — no computer needed.
KHAYAL/
├── khayal/ ← Next.js frontend (everything users see)
│ └── src/
│ ├── app/ ← Pages: /browse /search /movies/[slug] /profile…
│ ├── components/ ← movie-card, shelf, rate-widget, trailer, nav…
│ └── lib/ ← Supabase clients, auth helpers
│
├── scripts/ ← Python data pipeline
│ ├── daily_sync.py ← Nightly sync (runs on GitHub Actions cloud)
│ ├── test_daily_sync.py← 54 automated tests
│ └── seed_tmdb.py ← Initial bulk load from TMDB
│
├── supabase/migrations/ ← All SQL schema changes in order
└── .github/workflows/ ← daily-sync.yml — cloud cron job
12 tables total.
| Table | Contents |
|---|---|
movies |
7,400+ films — title, poster, runtime, age rating, trailer |
tv_series |
2,800+ shows — same fields + status (ongoing / ended) |
movie_ratings |
One rating (1–10) per user per movie |
tv_series_ratings |
Same for TV series |
movie_reviews |
User reviews for movies with spoiler toggle |
tv_series_reviews |
Same for TV series |
user_lists |
Watchlists — public or private |
user_list_movies |
Movies inside each watchlist |
user_list_tv_series |
TV series inside each watchlist |
profiles |
One row per signed-in user |
recommendations |
Pre-computed similar titles |
saved_queries |
User's saved SQL queries from the explorer |
Security: Row-Level Security (RLS) ensures users can only edit their own data. The SQL explorer tab only allows SELECT — no one can modify the database from the browser.
Google Stitch is a Google Labs AI design tool that generates full UI screens from text prompts — color systems, typography, layouts, and components in one shot.
The KHAYAL design system and landing page variations generated inside the Stitch canvas.
Every night GitHub's servers automatically:
- Fetch movies released in the last 2 days from TMDB
- Skip anything already in the database
- Insert new titles with posters and metadata
- Run 54 tests to confirm nothing broke
No local machine needed — fully independent of any computer.
KHAYAL uses the TMDB API but is not affiliated with TMDB.
خيال (khayāl) — Arabic for imagination