Stop wasting hours deciding what to watch. Organize your cinematic life with an interface that actually feels like a theater.
| Feature | Description | |
|---|---|---|
| 🎞️ | Personal tracking | Complete history of your movies, shows, and episodes across every season |
| 📺 | Episode-level tracking | Track every episode — never ask "did we watch this one?" again |
| 🔍 | Smart exploration | Browse 700k+ titles from the TMDB catalog with intelligent regional filtering |
| ⭐ | Ratings & reviews | Rate on a 1–10 scale and write reviews visible on your public profile |
| 📁 | Playlists | Create themed collections and share them publicly |
| 👥 | Friends & community | Send friend requests, follow friends' watchlists and reviews |
| 🎭 | Actor profiles | Full filmographies, biographies, and credits for every actor |
| 📱 | Installable PWA | Works on iPhone, Android, Mac, Windows, and Linux — no app store required |
| 🌍 | Native bilingualism | Instant EN/FR switching with server-side language detection |
| 🔒 | Privacy controls | Per-section visibility: public, friends only, or private |
| Layer | Technology |
|---|---|
| Frontend | Next.js 16.2.6 (App Router) + React 19 |
| Styling | Tailwind CSS 4 (token-based design system) |
| Auth & DB | Supabase (PostgreSQL + RLS) |
| Media data | TMDB API |
| Streaming | Watchmode API |
| PWA | Serwist (Service Worker + precaching) |
1. Prerequisites
- Node.js 24+ and pnpm
- A TMDB Read Access Token
- A Supabase project
- A Watchmode API key
2. Clone & install
git clone https://github.com/TheSawkit/watchlist.git
cd watchlist
pnpm install3. Environment variables — create .env.local:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
TMDB_READ_ACCESS_TOKEN=your_tmdb_read_access_token
WATCHMODE_API_KEY=your_watchmode_api_key
NEXT_PUBLIC_BASE_URL=http://localhost:30004. Database setup
Run the SQL migrations in order from your Supabase SQL Editor:
supabase/migrations/001_profile_features.sql— createsuser_profiles,privacy_settings,reviews,playlists,playlist_items,friendshipswith RLS policies.
5. Launch
pnpm devwatchlist/
├── app/ # Next.js App Router
│ ├── actions/ # Server Actions (all mutations)
│ ├── movie/[id]/ # Movie detail page
│ ├── tv/[id]/ # TV show + season pages
│ ├── actor/[id]/ # Actor detail page
│ ├── explorer/ # Browse & search
│ ├── library/ # User watchlist
│ ├── dashboard/ # User dashboard
│ ├── settings/ # Profile, privacy, preferences
│ ├── manifest.ts # PWA Web App Manifest
│ ├── service-worker.ts # Serwist Service Worker
│ └── globals.css # Design tokens (@theme inline)
├── components/
│ ├── media/ # WatchButton, EpisodeCard, MediaBanner…
│ ├── ui/ # shadcn/ui primitives
│ ├── navigation/ # Navbar, NavLinks
│ ├── profile/ # Reviews, playlists sections
│ └── settings/ # Settings sub-components
├── lib/
│ ├── tmdb/ # TMDB API clients
│ ├── supabase/ # Server & client Supabase helpers
│ ├── i18n/ # Translations + language context
│ ├── providers/ # App Store icon provider
│ ├── metadata.ts # Shared OG metadata builder
│ ├── format.ts # formatDate, calculateAge
│ └── mappers.ts # TMDB → MediaItem mappers
├── types/ # Global TypeScript types
├── hooks/ # useAsyncAction
├── tests/
│ ├── unit/ # Vitest unit tests
│ └── e2e/ # Playwright E2E tests
└── supabase/migrations/ # SQL schema migrations
| Command | Description |
|---|---|
pnpm dev |
Start dev server with Turbopack |
pnpm build |
Production build |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm test |
Unit tests (Vitest) |
pnpm test:watch |
Unit tests in watch mode |
pnpm test:e2e |
E2E tests (Playwright) |
pnpm test:e2e:ui |
E2E tests with Playwright UI |
| Fonctionnalité | Description | |
|---|---|---|
| 🎞️ | Suivi personnel | Historique complet de tes films, séries et épisodes, saison par saison |
| 📺 | Suivi par épisode | Suis ta progression réelle — plus jamais "on en était où ?" |
| 🔍 | Exploration intelligente | 700k+ titres du catalogue TMDB avec filtrage régional pertinent |
| ⭐ | Notes et avis | Note de 1 à 10 et écris des critiques visibles sur ton profil public |
| 📁 | Playlists | Crée des collections thématiques et partage-les |
| 👥 | Amis & communauté | Envoie des demandes d'amis, suis les listes et critiques de tes amis |
| 🎭 | Profils d'acteurs | Filmographies complètes, biographies et crédits pour chaque acteur |
| 📱 | PWA installable | Fonctionne sur iPhone, Android, Mac, Windows et Linux — aucun store requis |
| 🌍 | Bilingue natif | Bascule EN/FR instantanée avec détection de langue côté serveur |
| 🔒 | Contrôle de confidentialité | Visibilité par section : public, amis uniquement, ou privé |
| Couche | Technologie |
|---|---|
| Frontend | Next.js 16.2.6 (App Router) + React 19 |
| Styles | Tailwind CSS 4 (système de tokens) |
| Auth & DB | Supabase (PostgreSQL + RLS) |
| Données média | TMDB API |
| Streaming | Watchmode API |
| PWA | Serwist (Service Worker + précaching) |
1. Prérequis : Node.js 24+ et pnpm.
2. Clone & install
git clone https://github.com/TheSawkit/watchlist.git
cd watchlist
pnpm install3. Variables d'environnement — crée un .env.local :
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key
TMDB_READ_ACCESS_TOKEN=your_tmdb_read_access_token
WATCHMODE_API_KEY=your_watchmode_api_key
NEXT_PUBLIC_BASE_URL=http://localhost:30004. Base de données : Exécute les fichiers supabase/migrations/*.sql dans l'ordre depuis ton dashboard Supabase.
5. Lancer : pnpm dev
Built with 🍿 by SAWKIT