Netflix Clone Svelte

Nyasper
1

Netflix clone built with Svelte and SvelteKit, developed as a learning project with custom implementation.

🎬 Netflix Clone

A full-featured Netflix clone built with Svelte 5 and SvelteKit, featuring a modern UI, video playback, search, and a personal watchlist — all powered by a real movies/TV API.

📖 Description

This project is a personal take on a Netflix-style streaming platform, developed while following a Udemy course but implemented from scratch with my own design decisions and architectural choices. It replicates the core Netflix experience: browsing a catalogue, viewing movie details in a modal, playing trailers, searching content, and managing a personal list.

🎓 Based On

This project was built using as a foundation the Udemy course SvelteKit Masterclass – Build 20 Complete SvelteKit Projects.

However, the original course project was built with Svelte 4, so I took the opportunity to fully migrate and adapt it to Svelte 5, adopting the new runes-based reactivity model ($state, $derived, $effect, etc.) and updating the codebase to reflect my own design and implementation decisions.

✨ Features

🏠 Home Page – Hero banner with featured content and categorized movie/show rows
🔍 Search – Real-time search across movies and TV shows
🎥 Video Player – Full-featured video playback using Plyr
📋 My List – Add and manage a personal watchlist
🪟 Preview Modal – Quick-peek modal with movie details, trailer preview, and action buttons
📱 Responsive Design – Fully responsive layout across all screen sizes

🛠️ Tech Stack

Technology	Purpose
SvelteKit 2	Full-stack framework & routing
Svelte 5	UI components with runes
TypeScript	Type safety
Tailwind CSS 4	Utility-first styling
Plyr	Video player
Lucide Svelte	Icon library
Bun	As the package manager
Vite	Build tool & dev server

🚀 Getting Started

Prerequisites

Node.js ≥ 22 or Bun(recommended)
A TMDB API key (see Environment Variables)

Installation

# Clone the repository
git clone https://github.com/Nyasper/netflix-clone-svelte.git
cd netflix-clone-svelte

# Install dependencies
bun install

Environment Variables

Create a .env file in the root of the project and add your API key:

TMDB_API_KEY=your_tmdb_api_key_here

You can get a free API key from The Movie Database (TMDB).

Running the Development Server

bun run dev

Then open http://localhost:5173 in your browser.

Build for Production

bun run build
bun run start

📁 Project Structure

src/
├── lib/
│   ├── components/     # Reusable UI components (Modal, Player, Navbar, etc.)
│   ├── server/         # Server-side API helpers
│   ├── stores/         # Svelte stores (my list, etc.)
│   ├── types/          # TypeScript type definitions
│   └── helpers.ts      # Shared utility functions
└── routes/
    ├── +page.svelte    # Home page
    ├── search/         # Search page
    ├── watch/          # Video player page
    ├── myList/         # Personal watchlist page
    └── api/            # SvelteKit API endpoints

📸 Screenshots

Hero Section

Movie Catalogue

Watch Page

Top categories