SvelteKit Course: Build a Complete Netflix Clone Web Project

Create your first SvelteKit component in the lib/components folder as a single file component, then render, export, and style it with script and style tags.

Master importing and binding images in SvelteKit using lib/assets, alias paths, and alt attributes, plus the shorthand binding for same-name properties to simplify and clarify code.

Learn SvelteKit reactivity by using assignments, reactive declarations, and reactive statements to keep the DOM in sync with a count updated by a click.

Discover how to implement reactivity for arrays in SvelteKit by updating the array immutably with spread and assignment, avoiding push or splice so the DOM updates when you add numbers.

Learn how to declare and pass props in SvelteKit, use default props, handle optional values, and spread props to share dynamic data across components.

Master file-based routing in svelte kit by creating slash and home routes and custom 404 pages. Navigate between routes using href or the go to function from $app/navigation.

Explore how to use layouts and slots in SvelteKit to share a navbar across routes, implement a global layout, and render dynamic pages through component composition.

Master dynamic routes in SvelteKit by turning the blog section into a slug-based route, using a single page to render various blog posts and a button to navigate to /blog/{id}.

Create nested routes and layouts in SvelteKit by building department and course paths with dynamic routes, slug parameters, and slots, then render child routes within a course layout.

Master dynamic and wildcard (catch-all) routing in SvelteKit. Use the load function to read params and search params and pass them to the page component.

Learn to manage state in SvelteKit apps using writable, readable, and derived stores, subscribe to global values, and update them with an increment function.

Learn how derived stores in sveltekit derive value from other stores to track time elapsed on a webpage, using writable, readable, and derived patterns with real-world examples.

Discover data fetching in SvelteKit by creating a user route, using the load function and fetch to offload API calls to the server and preload data for rendering.

Learn how to fetch data in a sveltekit app using the load function and server-side rendering, including server and client fetch offloading, page.server.ts, and server hooks.

Explore how to build and test api routes in SvelteKit, creating server.ts files, handling get, post, put, delete, and dynamic routes with request bodies and validation.

Learn to implement and consume SvelteKit API routes by creating routes, fetching data with load, handling post requests, and wiring calls from pages and buttons.

Create and handle forms in a SvelteKit project by building a /forms route, wiring inputs for name and email, and using two-way binding with bind:value to capture payload on submit.

Learn to handle form submissions with SvelteKit api routes by creating a post endpoint, posting json payloads, logging form data, and returning a json response.

Explore client-side form validations in a SvelteKit project by building an errors object for name, email, and date of birth, with regex-based email checks and submission handling.

Implement third-party form validation with Yup by building a form schema, validating name and email, handling errors asynchronously, and displaying messages in the dom, with Zod as an alternative.

Explains the benefits of server side rendering in SvelteKit, including default SSR, faster initial loads, SEO advantages, and how to implement it with routes and a load function.

Build a Netflix-style clone from scratch with SvelteKit, Tailwind, CSS, and TypeScript, featuring a custom video player, movie detail models, search, favorites, trailers, and Vercel deployment with GitHub sync.

Create a SvelteKit Netflix project by initializing in a new folder with wheat bundler, enabling TypeScript and Tailwind CSS, and launching the dev server to preview the app.

Learn to structure a sveltekit netflix clone by organizing source/lib with wrappers, apis, and a dynamic routes setup plus a public folder, and obtaining tmdb api key with docs.

Configure shared styles for the Netflix clone by importing fonts, setting a dark background, and building a header component with sticky behavior and a logo from public images.

Builds a responsive header navbar in SvelteKit with items like home, TV shows, movies, news, and my list, plus a toggleable search bar using lucid svelte icons.

Design a responsive header search in a SvelteKit Netflix clone by binding input to a search query, adding placeholder and aria label, and handling on keydown with a handleSearch function.

Learn to build a header with a toggleable search bar by defining a search container, applying active class styles, and using transitions to animate width, background color, and input opacity.

Implement toggle search with stop propagation and attach scroll listeners to make the header sticky past 50, with white text and a gradient background.

Learn to implement a responsive header for a netflix clone by adding a hamburger menu that toggles a mobile navigation and hides icons on small screens.

Master header responsive styling in CSS for a Netflix clone by implementing a mobile menu overlay, toggle logic, and transitions using transform and translate, with z-index layering.

Implement a generic tmdb api wrapper in a SvelteKit project, loading api keys from environment variables, building requests with endpoints and params, and handling errors server-side.

Test your API wrapper by fetching TMDB popular movies, then verify data flow and endpoint handling on the server side with SvelteKit load and the framework fetch.

Learn how to fetch popular movies with an API wrapper, store results in a Svelte writable global store, and pass data to a hero section component via subscription.

Select a random movie from the 20 fetched to power the hero section banner, then update the global state and render its poster and backdrop via TMDB URLs.

Create a movie hero with gradient overlays that show either poster or trailer based on availability, featuring the title, overview, and play and more info buttons for responsive layouts.

Build the Netflix-style hero section in a SvelteKit project by wiring a button to a dynamic watch page using movie.id, including type-aware routing and a rating with volume controls.

Define a movie interface in a new types file with id, title, backdrop path, and overview, then create movie details types and map API data to TypeScript types.

Define a global tmdb state with now playing, popular, top rated, trending, and genre-based movie lists. Fetch genre-specific results using a generic tmdb response and type-safe interfaces.

Fetch popular, top rated, and trending movies and genres in the SvelteKit page server using Promise.all, with a try-catch and ssr fetch, then log and validate data.

Map genres to movies by genre, define a movies-with-genre interface, fetch movies per genre using genre id and name, and prepare movie data and trailer for cards display.

Design a carousel from scratch in a SvelteKit project by building a Carousal component with a wrapper, container, and left/right navigation, without third party libraries.

Hook up a custom carousel in a SvelteKit Netflix clone by exporting title and a movies array, managing scroll position, and implementing left and right scrolling with smooth behavior.

Build a Netflix clone carousel in SvelteKit by wiring scroll left/right, rendering item backdrops with base URL and 300px width, and mapping movies by genre.

Build a Netflix-style carousel and card component in Svelte with conditional arrow visibility. Pass item props, render backdrops, and implement hover interactions for movie cards.

Implement an on error image fallback by exporting a helper function in lib/utils/helpers.ts that swaps a failing image's source with a public 404 fallback image.

Create a reusable video player component in a Svelte project using the plyr HTML5 player, enabling hover popups for cards, modals, and the watch section.

Complete the custom video player in the SvelteKit Netflix clone by implementing browser checks, config options, YouTube-specific flags, events, and cleanup on destroy.

Implement a toggle mute function for the video player, dispatching mute and unmute events across components. Fetch trailer videos from TMDB by ID and pass the video key to play.

Create a server-side movie trailer API in a SvelteKit project by building a get movie trailer function, fetching data, filtering for YouTube trailers, and handling missing trailers.

Build a secure trailer fetch flow in SvelteKit by creating a helper that calls a server API route to fetch a movie trailer by ID, safeguarding the API key.

Parse the trailer ID with parseInt and return JSON responses in a SvelteKit Netflix clone, wiring the video player to the trailer URL and handling errors.

Bind a player ref to expose exported functions like toggle mute, then implement handle mute and handle unmute for external components to control the player's volume.

Design a hoverable pop-up card component in a SvelteKit Netflix clone, implementing dynamic positioning, show/hide animations, and trailer and icon integration with Tailwind CSS and TypeScript.

Define a popover card with external and internal hover booleans and a show popover state, controlled by mouse enter and leave, with lucid svelte action buttons.

Designs a popover card that toggles mute and shows either a trailer player or a poster image. Handles image errors and mouse enter events.

Showcases a hover-activated popover card in a svelte layout, positioned at x=100, y=100 with z-index 1000, revealing movie info, 79% match, duration, HD, and tags.

Implement pop over card styles in a SvelteKit project, adding gradient backgrounds, border radius, shadows, and transitions; manage visibility with state and hover interactions, prepping for global state.

Build a global card state in SvelteKit to track hover status, card position (x, y), dimensions, and content, updating a popover card on mouse enter and mouse leave.

Position a popover card on hover in a SvelteKit Netflix clone by managing hover state, stopping propagation, and updating the card’s position from its bounding rect.

Override the popover's default transition with a custom transform and opacity. Bind data from card state (image url, poster or backdrop path, title) and fix clipping.

Fetches and displays the movie trailer for the active card in a pop-up, updating on hover via a trailer helper and card state, and cleans up on unmount.

Wire the play icon to navigate to the watch route by movie id, load the trailer URL, and render a fullscreen video player with loading and error states.

Implement an async function to fetch the trailer from the api route using the video ID, handle loading and errors, and set the trailer URL.

Implement add-to-favorite functionality in a SvelteKit Netflix clone by toggling icons, saving a favorites list to local storage, preventing duplicates with a helper function, and preparing a my list route.

Create the my list route, load favorite movies from local storage on mount, display cards or a 'no movies in your list' message, and refresh via a favorite list toggle.

Fix a popover card bug by binding a window scroll listener that hides hover state, the popover, and trailer, and remove the listener on destroy to prevent movement during scroll.

Build a modal component in a SvelteKit app with overlay, responsive width, and accessible controls; show movie data when a video id exists and navigate to watch via movie id.

Define and style a modal overlay and content in a SvelteKit project, importing the modal, applying overlay and content classes, and refining layout for a responsive, scrollable content.

Build and style a modal component in a SvelteKit Netflix clone, adding a custom close button, an overlay, and play and add to favorites controls.

Build a modal component for a Netflix clone, set panel heights to 100% and 90vh, and add playback controls, a thumbs-up button, and a mute toggle with dynamic icons.

Move the mute toggle outside the container and render the video player only when a video id exists, while mapping movie data to a gradient overlay with fallbacks.

Map and render movie details in a modal, including adult rating, runtime conversion from minutes to hours, formats like HD/4K, genres, and spoken languages, with state handling.

Create a modal that maps movie genres and spoken languages, opens from outside, shows up to three genres, lists available languages, and displays the movie overview with fallbacks.

Define and initialize modal global state in a SvelteKit Netflix clone, including isOpen, video ID, movie ID, movie data, loading, and error, using a writable store and bounce up/down animations.

Open the modal from external clicks by exporting a modal function that accepts a video ID and a movie ID. Set isOpen to true and provide a close modal action.

Learn how to fetch movie data in a modal with a cache to avoid redundant API calls, using a SvelteKit API route to retrieve details and update the modal state.

Add a movie by id api route to fetch movie details using fetch with the tmdb api key, and update the api path.

Open a modal to play the trailer and bind the video id, then fetch similar movies via the get similar movies API route and render them as cards.

Fix the modal gradient bleed by adding a 20-pixel height, bind a mute toggle to the video player, and implement a local-storage favorites flow with similar movies displayed as components.

Implement modal animations, hide the scrollbar, and map similar movies with loading and error states, then design a responsive custom card grid for up to 12 items.

Build a similar movie card in a SvelteKit project using TypeScript props for title, image URL, and duration. Implement responsive layout, image fallback, and gradient overlays.

Build and style a similar movies component in a SvelteKit Netflix clone, add a play button with movie ID prop, and show a responsive modal with truncated description.

In SvelteKit, connect the header search to trigger on enter, navigate to a /search route, fetch movie results from TMDB, and render results with no results handling.

Explore implementing search results with no-results handling, render card components from data as items, and apply responsive layout classes, then build a custom error and not-found page before deployment.

Create a custom 404 error component in a SvelteKit app by adding +error.svelte, styling with tailwind-like classes, displaying 'page not found' and a go home link, and testing responsive layout.

Deploy a SvelteKit Netflix clone to Vercel, configure login, environment variables, and production settings, and verify the deployed app with build logs, domain, and interactive features.