scrimba
Netflix in React JS
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
PricingCoursesLog in
For TeamsWhy Scrimba?
Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.
Pricing
PricingCreate Account
Log in
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Courses
All coursesAI PathFrontend Path

Not sure where to start?

Let us help you find your perfect course.

Karma

DashboardConnect to DiscordFind a courseSettingsNew scrim
Log out

Netflix in React JS

Using React, Styled Components and Firebase to re-build Netflix from scratch!

This playlist contains 57 interactive scrims.

Netflix in React JS

57 lessons6 hours 33 min

1. Building a Netflix clone - Module Intro
2:10
2. Welcome to Building Netflix!
6:51
3. Technologies Overview
4:08
4. Compound Components
2:29
5. Application Architecture
5:51
6. Application Structure & Dependencies
9:46
7. Building the Jumbotron Component
12:09
8. Styling the Jumbotron Component
14:24
9. Housing our Jumbotron within a Container
15:32
10. Component Library Tree Shaking 🌳
8:01
11. Implementing Global Styles With Styled Components
5:20
12. Building the Footer Component
11:35
13. Styling the Footer Component
5:12
14. Building the Accordion Component
12:08
15. Styling the Accordion Component
8:43
16. Accordion Context & State
7:53
17. Building the Opt-Form Component
5:39
18. Styling the Opt-Form Component
7:52
19. Adding a Routes Constant File
1:30
20. Building out the Header Component
12:47
21. Styling the Header Component
6:37
22. Building out the Feature Component
7:15
23. Styling the Feature Component
3:15
24. Hooking our Application up to Firebase
4:22
25. Connecting our Application to Firebase
4:28
26. Building the Form Component & Sign In Page
12:10
27. Styling the Form Component & Sign In Page
9:56
28. Managing Form Validation on the Sign In Page
2:47
29. Adding the Footer to the Sign In Page
1:40
30. Creating the Sign Up Page
8:27
31. Architecting the Browse Page
8:19
32. Building out the Profile Component & Container
11:44
33. Styling the Profile Component
3:24
34. Firebase Auth Setup
1:40
35. Adding Firebase Sign Up Functionality
6:32
36. Adding Firebase Sign In Functionality
4:19
37. Adding our Header to the Browse Container
6:48
38. Adding a Feature to Our Header Component
5:27
39. Adding a Search Box to Our Header Component
6:26
40. Adding a Dropdown (Profiles) to Our Header Component
8:03
41. Profiles to Browse Page Loading Spinner
9:23
42. Hydrating Our Firestore with Data
1:48
43. Creating a Custom Firebase useContent Hook
5:00
44. Creating a Data SelectionMap Utility
4:09
45. Architecture of The Card Component
3:55
46. Adding the Card Component Skelton to Our Container
6:43
47. Building out the Card Component
13:27
48. Data Driven Card Component with Styling
16:59
49. Implementing Live Search Using Fuse.js
5:28
50. Building out the Player Component
9:29
51. Styling the Player Component
6:10
52. Creating a Custom Auth Listener Hook
6:22
53. Implementing our Custom Auth Listener Hook
1:10
54. Modifying Our App Routes to Be Protected
8:24
55. React State Update on an Unmounted Component
4:23
56. Course Conclusion
5:36
57. You have completed Module 13! 🥳
1:00

HomePlans & PricingTeacher talent program

Community

Explore the communityPodcastYouTubeGet Scrimba emails

Courses

All courses Self-paced BootcampFree coursesPro courses

Company

About usSupport centerTermsPrivacy

Built with Imba