Welcome to Film Fanatic
Film Fanatic is a premium, full-stack media discovery and tracking platform built for the modern cinephile. Experience seamless movie and TV show exploration with real-time tracking, powered by a state-of-the-art tech stack.What is Film Fanatic?
Film Fanatic combines the power of The Movie Database (TMDB) with cutting-edge web technologies to deliver an immersive experience for discovering, tracking, and managing your film and TV journey. Whether you’re exploring new releases, managing your watchlist, or tracking episode-by-episode progress, Film Fanatic provides a premium user experience with local-first performance and cloud synchronization.Key Features
Precision Discovery
Intelligent Search
Real-time, multi-category search across movies, TV series, and people with advanced filtering by rating and type.
Rich Media Context
Immersive detail pages featuring trailers, cast/crew insights, high-definition galleries, and curated collections.
Smart Recommendations
Discover your next favorite film with context-aware suggestions based on what you’re viewing.
Seamless Tracking and Watchlist
Hybrid Storage
Local-first performance with localStorage for guests, seamlessly synchronized to the cloud via Convex for authenticated users.
Granular Episode Tracking
Mark individual episodes as watched. Progress automatically calculates show completion percentage.
Advanced Statuses
Manage your journey with progress statuses: Want to Watch, Watching, Finished. Express your feelings with reactions: Loved, Liked, Mixed, or Not for me.
Premium User Experience
Aesthetic Design
A stunning, responsive UI built with Tailwind CSS 4.0, featuring glassmorphism, smooth transitions, and high-fidelity posters.
Optimistic UI
Actions feel instantaneous thanks to optimistic updates and TanStack Query caching.
Universal Access
Fully responsive layout optimized for everything from ultra-wide monitors to mobile devices.
Identity Management
Secure and simple authentication powered by Clerk.
Technology Stack
Film Fanatic leverages modern technologies to deliver exceptional performance and developer experience:| Layer | Technology | Purpose |
|---|---|---|
| Framework | TanStack Start | Full-stack React framework with Nitro and React 19 |
| Backend | Convex | Real-time database with serverless functions |
| Authentication | Clerk | User authentication and identity management |
| Styling | Tailwind CSS 4.0 | Utility-first CSS with modern features |
| UI Components | Radix UI + shadcn/ui | Accessible, composable component primitives |
| Data Fetching | TanStack Query | Async state management and caching |
| State Management | Zustand | Lightweight client-side state |
| Optimization | React Compiler | Automatic React optimization |
| Images | @unpic/react | Optimized image loading |
| Code Quality | Biome | Fast linter and formatter |
Architecture Overview
Film Fanatic follows a modern full-stack architecture:Frontend Layer
Built with TanStack Start and React 19, providing SSR, file-based routing, and optimized rendering.
Data Layer
TanStack Query manages server state with intelligent caching, while Zustand handles client-side state.
Backend Layer
Convex provides real-time database operations with serverless functions, eliminating the need for traditional API routes.
Project Structure
The separation of frontend (
/src) and backend (/convex) code provides clear boundaries and enables seamless deployment to different platforms.What’s Next?
Quick Start
Get Film Fanatic running locally in under 5 minutes
Installation
Detailed setup guide with prerequisites and configuration