SvelteKit Course: Build a Complete Netflix Clone Web Project

Name: SvelteKit Course: Build a Complete Netflix Clone Web Project
Rating: 4.0 (15 reviews)

Learn SvelteKit by building a Netflix clone with TypeScript, Tailwind CSS, and public APIs. A complete hands-on project!

Created byVapa Academy

Last updated 12/2024

English

What you'll learn

How To Build A Fully Functional Netflix Clone Web App From Scratch Using SvelteKit.
Integrate The TMDb API To Fetch Real-World Movie And TV Show Data Dynamically.
Recreate Netflix’s Exact User Interface Design, Including Carousels, Animations, And Layouts.
Implement Core Netflix Functionalities Like Search, Genre Filtering, And Personalized Recommendations.
Develop Responsive Designs That Ensure The App Works Seamlessly On All Devices, From Mobile To Desktop.
Utilize TypeScript For Writing Clean, Type-Safe, And Scalable Code.
Master Tailwind CSS To Create Modern, Maintainable, And Efficient Styling.
Structure Your Project Code Effectively For Readability And Maintainability.
Debug And Troubleshoot Issues To Create A Production-Ready Web App.
Deploy The Netflix Clone To Vercel For Live Hosting And User Accessibility.
Use GitHub For Version Control, Collaboration, And Showcasing Your Project Portfolio.
Learn Best Practices For Working With APIs, Including Fetching, Handling, And Displaying Data Dynamically.
Understand How To Create Reusable Components To Speed Up Development And Maintain Consistency.
Gain Practical Experience In Building Advanced Real-World Web Applications With Modern Tools And Technologies.
Enhance Your Portfolio With A Professional-Grade Project That Demonstrates Your Ability To Replicate Complex, Real-World Applications.

Course content

9 sections • 91 lectures • 11h 5m total length

Benefits of Svelte Kit Part - 13:30
Overview of Svelte and Svelte Kit Part - 23:36
Compare svelte, a single component language for web apps, with sveltekit, a meta framework offering routing, static site generation, and api endpoints.
Setting Up Dev Environment Create Svelte-Kit Project Part - 34:38

Svelte-kit Netflix Clone Project - Source Code0:03
Netflix Clone Project - Live Demo2:19
Project Initialization Part - 14:38
Get TMDB API Key Part - 24:41
Setting Common Styles and Header Part - 38:23
Header Navbar Part - 47:20
Header Search Part - 55:44
Header Custom Styles Part - 67:26
Header Scroll Styles Part - 74:26
Implement toggle search with stop propagation and attach scroll listeners to make the header sticky past 50, with white text and a gradient background.
Header Responsive Part - 810:54
Header Responsive CSS Part - 98:15
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.
Custom API Wrapper Part - 1011:35
API_Testing With Custom Wrapper Part - 117:32
Passing Data To Components Part - 129:37
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.
Mapping Data In Hero Section Part - 138:05
Hero Section Design Part - 1413:04
Hero Section Final Design Part - 154:55
Creating Types Part - 167:31
Setting Up Additional TMDB API Part - 1710:55
Using Additional TMDB API Part - 183:36
Mapping Additional TMDB API Data Part - 197:43
Designing Custom Carousel Part - 208:56
Custom Carousel Functionality Part - 217:05
Custom Carousel Map Data Part - 229:34
Enhance Custom Carousel Function and Card Component Design Part - 239:39
Image Fallback Helper Design Part - 243:21
Custom Video Player Design Part - 258:19
Custom Video Player Implementation Part - 2610:30
Custom Video Player Custom Events Part - 276:33
Get Trailer API Part - 286:45
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.
Get Trailer API Helper Part - 2910:55
Custom Player Trailer Map Part - 305:31
Custom Player Volume Control Part - 317:54
PopOver Card Component Design Part - 327:56
PopOver Card Additional Buttons Part - 338:46
PopOver Card Component Design V2 Part - 346:45
PopOver Card Test Part - 356:13
PopOver Card Styles Part - 366:46
PopOver Card State Part - 375:44
PopOver Card Positioning Part - 386:41
PopOver Card Data Map Part - 396:18
PopOver Card Trailer Part - 4010:26
Watch Page Part - 417:28
Watch Page Functionality Part - 426:31
My List Functionality Part - 4313:12
My List Page Part - 4410:23
Popover Card Bug Fix Page Part - 452:43
Modal Component Part - 469:25
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.
Modal Component Structure Part - 477:05
Modal Component Styles Part - 488:30
Modal Component Functionality Part - 495:05
Modal Component Data Map Part - 508:37
Modal Component Data Map v2 Part - 518:22
Modal Component Data Map v3 Part - 526:37
Modal Component Custom Animations Functionalities Part - 5310:44
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.
Modal Component State Part - 544:47
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.
Modal Component Fetch Movie Data Part - 557:14
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.
Modal Component Fetch Movie API Route Part - 564:49
Add a movie by id api route to fetch movie details using fetch with the tmdb api key, and update the api path.
Modal Component Fetch Similar Movie API Route Part - 5711:12
Modal Component Buttons Functionality Route Part - 589:18
Modal Mapping Similar Movies Part - 597:15
Similar Movies Component Part - 6012:44
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.
Similar Movies Component Styles Part - 617:37
Search Functionality Part - 6212:00
Testing Search Functionality Part - 632:09
Custom 404 Component Part - 646:55
Deploy To Vercel Part - 655:10

Requirements

Students Don't Need To Have Any Prior Knowledge To Take This Course; They Will Learn Everything From It.

Description

Welcome to the SvelteKit Course: Build a Complete Netflix Clone Web App Project, where you will learn to build a fully functional and visually identical Netflix clone using modern tools and frameworks like SvelteKit, TypeScript, and Tailwind CSS. This course offers hands-on experience, guiding you through the process of creating a Netflix clone that replicates the original app’s design, features, and responsiveness.

We’ll leverage the TMDb (The Movie Database) API to power the application with real-world movie and TV show data. This course is perfect for anyone looking to learn API integration, responsive design, and deployment strategies while working on a real-world project.

Key Features of the Netflix Clone Project:

TMDb API Integration: Use the TMDb API to fetch and display trending movies, TV shows, and genres in real time.
Netflix UI Recreation: Rebuild Netflix’s user interface with the exact same design, layouts, and animations.
Responsive Design: Create a Netflix clone that looks and works seamlessly across all devices, from mobile to desktop.
Core Functionality: Implement essential features like search, carousels, user-specific recommendations, and content previews.
Modern Tech Stack: Utilize SvelteKit, TypeScript, and Tailwind CSS for clean, maintainable, and scalable code.

What You’ll Learn:

Best practices for writing high-quality code in TypeScript.
How to deploy your Netflix clone project to Vercel for live hosting.
Version control using GitHub to manage and showcase your project.

By the end of this course, you will have a professional-grade Netflix clone web app in your portfolio, showcasing your ability to build advanced, real-world projects with cutting-edge web technologies. Enroll now and take your skills to the next level!

Who this course is for:

Aspiring Web Developers Who Want To Build Real-World Projects Using Modern Technologies Like SvelteKit And TypeScript.
Frontend Developers Eager To Recreate Netflix’s Exact Design And User Experience.
Frontend Developers Looking To Enhance Their Skills With Advanced Styling Using Tailwind CSS.
Beginners Interested In Learning How To Build A Complete Web Application From Start To Finish.
Students And Professionals Seeking To Expand Their Portfolios With A High-Quality Netflix Clone Web App.
API Integration Learners Who Want Hands-On Experience Working With Real Data From TMDb API.
Freelancers Who Wish To Master Responsive Web Design For Any Device.
Developers Interested In Learning How To Host Applications On Platforms Like Vercel.
GitHub Users Who Want To Practice Version Control And Code Deployment For Collaborative Projects.
Technology Enthusiasts Excited About Exploring The Potential Of SvelteKit For Building Scalable Web Applications.

SvelteKit Course: Build a Complete Netflix Clone Web Project

What you'll learn

Explore related topics

Course content

Benefits of Svelte-kit and Create Svelte-kit Project3 lectures • 12min

Svelte Kit Component2 lectures • 4min

Svelte Kit Reactivity2 lectures • 10min

Svelte Kit Props1 lecture • 6min

Svelte Kit Routing5 lectures • 35min

Svelte Kit Stores2 lectures • 13min

Fetch API in Svelte Kit Server and Client Side4 lectures • 41min

Forms in Svelte Kit5 lectures • 39min

Svelte-kit Netflix Clone Project-167 lectures • 8hr 25min

Requirements

Description

Who this course is for: