Sveltekit Masterclass: Build 20 Complete Sveltekit Projects

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

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.

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!

Overview

Section 1: Svelte-kit Netflix Clone Project-1

Lecture 1 Svelte-kit Netflix Clone Project - Source Code

Lecture 2 Netflix Clone Project - Live Demo

Lecture 3 Project Initialization Part - 1

Lecture 4 Get TMDB API Key Part - 2

Lecture 5 Setting Common Styles and Header Part - 3

Lecture 6 Header Navbar Part - 4

Lecture 7 Header Search Part - 5

Lecture 8 Header Custom Styles Part - 6

Lecture 9 Header Scroll Styles Part - 7

Lecture 10 Header Responsive Part - 8

Lecture 11 Header Responsive CSS Part - 9

Lecture 12 Custom API Wrapper Part - 10

Lecture 13 API_Testing With Custom Wrapper Part - 11

Lecture 14 Passing Data To Components Part - 12

Lecture 15 Mapping Data In Hero Section Part - 13

Lecture 16 Hero Section Design Part - 14

Lecture 17 Hero Section Final Design Part - 15

Lecture 18 Creating Types Part - 16

Lecture 19 Setting Up Additional TMDB API Part - 17

Lecture 20 Using Additional TMDB API Part - 18

Lecture 21 Mapping Additional TMDB API Data Part - 19

Lecture 22 Designing Custom Carousel Part - 20

Lecture 23 Custom Carousel Functionality Part - 21

Lecture 24 Custom Carousel Map Data Part - 22

Lecture 25 Enhance Custom Carousel Function and Card Component Design Part - 23

Lecture 26 Image Fallback Helper Design Part - 24

Lecture 27 Custom Video Player Design Part - 25

Lecture 28 Custom Video Player Implementation Part - 26

Lecture 29 Custom Video Player Custom Events Part - 27

Lecture 30 Get Trailer API Part - 28

Lecture 31 Get Trailer API Helper Part - 29

Lecture 32 Custom Player Trailer Map Part - 30

Lecture 33 Custom Player Volume Control Part - 31

Lecture 34 PopOver Card Component Design Part - 32

Lecture 35 PopOver Card Additional Buttons Part - 33

Lecture 36 PopOver Card Component Design V2 Part - 34

Lecture 37 PopOver Card Test Part - 35

Lecture 38 PopOver Card Styles Part - 36

Lecture 39 PopOver Card State Part - 37

Lecture 40 PopOver Card Positioning Part - 38

Lecture 41 PopOver Card Data Map Part - 39

Lecture 42 PopOver Card Trailer Part - 40

Lecture 43 Watch Page Part - 41

Lecture 44 Watch Page Functionality Part - 42

Lecture 45 My List Functionality Part - 43

Lecture 46 My List Page Part - 44

Lecture 47 Popover Card Bug Fix Page Part - 45

Lecture 48 Modal Component Part - 46

Lecture 49 Modal Component Structure Part - 47

Lecture 50 Modal Component Styles Part - 48

Lecture 51 Modal Component Functionality Part - 49

Lecture 52 Modal Component Data Map Part - 50

Lecture 53 Modal Component Data Map v2 Part - 51

Lecture 54 Modal Component Data Map v3 Part - 52

Lecture 55 Modal Component Custom Animations Functionalities Part - 53

Lecture 56 Modal Component State Part - 54

Lecture 57 Modal Component Fetch Movie Data Part - 55

Lecture 58 Modal Component Fetch Movie API Route Part - 56

Lecture 59 Modal Component Fetch Similar Movie API Route Part - 57

Lecture 60 Modal Component Buttons Functionality Route Part - 58

Lecture 61 Modal Mapping Similar Movies Part - 59

Lecture 62 Similar Movies Component Part - 60

Lecture 63 Similar Movies Component Styles Part - 61

Lecture 64 Search Functionality Part - 62

Lecture 65 Testing Search Functionality Part - 63

Lecture 66 Custom 404 Component Part - 64

Lecture 67 Deploy To Vercel Part - 65

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.