Full-featured movie & TV show discovery platform powered by the TMDB API.
Live: flix.codinggeh.com · Repo: github.com/codinggeh/flixgeh
FlixGeh is a Netflix-inspired cinematic discovery app that exhaustively consumes the TMDB API. Browse trending titles, explore genres, dive into cast & crew profiles, watch trailers, and discover critically-acclaimed movies and TV shows — all wrapped in a sleek, dark UI with fluid GSAP animations.
Built as a premium technical showcase by codinggeh.com, it runs as a full SvelteKit SSR/SSG hybrid so every page loads fast and is SEO-friendly.
- Stack: SvelteKit 2, Svelte 5 (runes), TypeScript 5, Tailwind CSS 4, GSAP 3, Vite 7
- Data: The Movie Database (TMDB) API v4
- Deploy:
@sveltejs/adapter-netlify— deployed on Netlify
- Hero Section — Auto-rotating backdrop from trending titles with trailer CTA
- Trending — Toggle between daily and weekly trending, with hover-to-preview
- Content Sections — Trending, Now Playing, Coming to Theaters, Critically Acclaimed, Popular, Binge-Worthy TV, Airing Today, Currently On Air, Top Rated TV
- Genre Browser — Browse all movies & shows by genre with chip/tag navigation
- Title Detail (
/title/[id]) — Full detail page: metadata, trailer embed, cast carousel, image gallery, video gallery, audience reviews, similar & recommended titles - Cast & Crew (
/person/[id]) — Actor/director profile with filmography - Genre Page (
/genre/[id]) — Paginated listing filtered by genre - Search — Instant overlay search via
/api/searchwith debounce - Animations — GSAP, scroll reveal, parallax, tilt, drag-scroll carousels
- SEO — JSON-LD (WebSite, WebPage), Open Graph, Twitter cards, canonical meta
- Accessibility — Semantic HTML, ARIA labels, keyboard-navigable
- Responsive — Mobile-first layout across all screen sizes
| Category | Technology |
|---|---|
| Framework | SvelteKit 2 |
| UI | Svelte 5 (Runes) |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4 |
| Build | Vite 7 |
| Animation | GSAP 3 |
| Data | TMDB API v4 (Bearer token) |
| Adapter | @sveltejs/adapter-netlify |
├── src/
│ ├── app.css # Global styles, Tailwind base, CSS variables
│ ├── app.html # HTML shell
│ ├── app.d.ts # SvelteKit type augmentations
│ ├── lib/
│ │ ├── actions/ # Svelte actions: dragscroll, parallax, scrollReveal, tilt
│ │ ├── assets/ # Static assets imported via Vite
│ │ ├── components/ # Reusable UI components
│ │ │ ├── BackToTop.svelte
│ │ │ ├── CastCard.svelte
│ │ │ ├── Footer.svelte
│ │ │ ├── GenreChips.svelte
│ │ │ ├── Hero.svelte
│ │ │ ├── ImageGallery.svelte
│ │ │ ├── MediaCard.svelte
│ │ │ ├── MediaCarousel.svelte
│ │ │ ├── Navbar.svelte
│ │ │ ├── ReviewCard.svelte
│ │ │ ├── SearchOverlay.svelte
│ │ │ ├── SkeletonLoader.svelte
│ │ │ └── VideoGallery.svelte
│ │ ├── constants/
│ │ │ ├── site.ts # SITE_CONFIG: titles, sections, meta, developer info
│ │ │ └── tmdb.ts # TMDB image/URL helpers
│ │ ├── services/
│ │ │ └── tmdb.server.ts # All TMDB API calls (server-only)
│ │ ├── stores/
│ │ │ └── search.ts # Search overlay state
│ │ └── types/
│ │ └── tmdb.ts # TMDB response type definitions
│ └── routes/
│ ├── +layout.server.ts # Loads genres for nav
│ ├── +layout.svelte # Root layout: Navbar, Footer, SEO meta, JSON-LD
│ ├── +page.server.ts # Home: trending, sections, genres
│ ├── +page.svelte # Home page composition
│ ├── +error.svelte # Custom error page
│ ├── api/
│ │ └── search/
│ │ └── +server.ts # GET /api/search?q=... → TMDB multi-search
│ ├── disclaimer/
│ │ └── +page.svelte # TMDB disclaimer page
│ ├── genre/
│ │ └── [id]/
│ │ ├── +page.server.ts
│ │ └── +page.svelte # Genre listing page
│ ├── person/
│ │ └── [id]/
│ │ ├── +page.server.ts
│ │ └── +page.svelte # Cast/crew profile page
│ └── title/
│ └── [id]/
│ ├── +page.server.ts
│ └── +page.svelte # Title detail page
├── static/ # Static public assets
├── .env.example # Environment variable template
├── netlify.toml # Netlify deployment config & security headers
├── svelte.config.js
├── vite.config.ts
├── tsconfig.json
├── package.json
├── README.md
├── README_ID.md
└── LICENSE
- Node.js 18+ (recommended: 22 LTS)
- npm (or pnpm / yarn)
- A free TMDB account to obtain an API key
- Sign up at themoviedb.org
- Go to Settings → API → copy the API Read Access Token (the long JWT — not the short API key)
git clone https://github.com/codinggeh/flix-geh.git
cd flixgeh
npm installcp .env.example .envEdit .env and paste your TMDB token:
TMDB_API_KEY=your_tmdb_api_read_access_token_herenpm run devOpens at http://localhost:5173.
npm run build
npm run preview # preview the production build locally| Script | Description |
|---|---|
npm run dev |
Start dev server with HMR |
npm run build |
Production build |
npm run preview |
Preview production build |
npm run check |
svelte-check + TypeScript validation |
npm run check:watch |
Same, in watch mode |
npm run lint |
ESLint |
npm run format |
Prettier |
| Variable | Required | Description |
|---|---|---|
TMDB_API_KEY |
✅ Yes | TMDB v4 API Read Access Token (Bearer JWT) |
See .env.example for reference.
FlixGeh is configured for Netlify using @sveltejs/adapter-netlify.
- Push to your Git repo (GitHub / GitLab / Bitbucket)
- Connect the repo in Netlify Dashboard
- Build settings are auto-detected from
netlify.toml:- Build command:
npm run build - Publish directory:
build
- Build command:
- Add
TMDB_API_KEYin Site Settings → Environment Variables - Deploy! 🚀
Security headers (CSP, X-Frame-Options, etc.) are configured in netlify.toml.
Live deployment: flix.codinggeh.com
This product uses the TMDB API but is not endorsed or certified by TMDB.
Movie and TV show data, images, and metadata are provided by The Movie Database.
Licensed under the MIT License. See LICENSE for details.
- Engineered by: codinggeh.com
- Data powered by: The Movie Database (TMDB)
- Live: flix.codinggeh.com
Cinematic experience engineered by codinggeh.com.