Master React by Building a Netflix Clone: Firebase, Styled Components & More!

Unlock the power of ReactJS by building a Netflix clone in this comprehensive tutorial. Learn how to integrate Firebase for authentication and database functionalities. Explore Styled Components for styling your React applications.

Modules & Components: From a Home page to a Browse section that uses Firebase auth, Sign In, and Sign Up pages — this tutorial covers it all. You'll learn how to connect to Firebase, use higher-order JavaScript functions like map, filter, reduce, and find, and employ Fuse.js for live search functionality.

? Pre-requisites:
- Basic knowledge of React (useEffect, useState, useContext)
- Familiarity with JavaScript functions like map, filter, reduce, and find
- Testing: Each React component is meticulously tested using React Testing Library, ensuring robust and error-free code.
- Navigation: Learn how to use React Router to manage navigation within your application seamlessly.

? What You Will Learn
- React Fundamentals: Custom hooks, context, portals
- Firebase Integration: Firestore & Authentication
- Styling with Styled Components: Create visually appealing UI
- Component Testing: Leverage React Testing Library for robust components
- Navigation: Seamless navigation with React Router
- Live Search: Implementing live search with Fuse.js

⌛Timestamps
00:00:00 - Overview/demo
00:04:30 - Architecture
00:08:08 - Project dependencies
00:10:30 - Installing create react app
00:13:03 - Project cleanup
00:21:41 - Yarn/npm port tip
00:24:35 - Creating files/folders
00:29:54 - Creating the Jumbotron component
00:55:19 - Styled components GlobalStyles
00:57:51 - Implementing Normalize.css
00:58:55 - Installing ESLint, Prettier
01:01:33 - Item component
01:03:59 - Item component direction prop
01:05:20 - Container derivative component
01:07:22 - Modules, errors
01:12:00 - Footer component
01:30:28 - Accordion component
01:34:37 - useContext for Compound Components
01:43:29 - VSCode tip for importing
01:55:59 - Accordion component body
02:00:07 - Accordion component review
02:04:14 - Opt-form component creation & review
02:22:06 - Constants - routes
02:28:57 - Pages: Home, Browse, SignIn, SignUp
02:31:04 - Creating React Router Routes
02:33:23 - Header component
03:09:10 - Template review
03:10:16 - Firebase connection
03:24:14 - React Context for Firebase
03:28:56 - SignIn Page
03:54:52 - Firebase top level authentication
04:00:25 - Debugging error auth (if user is in the db or not)
04:01:51 - SignUp Page
04:09:22 - Registration page, routes debugging
04:14:42 - Navigation
04:16:00 - Helpers: routes (React router auth)
04:26:21 - Protect routes
04:36:24 - Creating an auth listener (custom hook)
04:40:00 - Tip around authentication state changing
04:44:19 - Helpers routes review
04:47:18 - Browse page (categories films & series) component
04:49:32 - Custom hook:browse page
04:58:02 - Utils directory and setup
05:05:39 - Browse container
05:07:19 - Profiles container
05:12:34 - Profiles component
05:22:06 - Loading profile component
05:31:54 - Spinner review
05:43:19 - Header profile
06:10:50 - Header profile: dropdown, chevron
06:15:45 - Header search styling
06:29:55 - Header play button style
06:35:00 - Card list (categories, slides) - films & series logic
06:55:33 - Entities logic start
06:58:18 - Player component and Card component styling
07:00:58 - Movie recommendations
07:01:01 - Feature component (showing)
07:03:49 - Passing props into our Feature (item obj)
07:06:16 - More styling on the card style
07:20:17 - Debugging the slides
07:30:18 - Debugging play button and card
07:33:07 - Player component
07:48:25 - Review player video
07:49:00 - Live search using Fuse.js
07:53:09 - Review our project!
07:56:44 - Testing setup
08:02:39 - Player test
08:16:04 - Footer test
08:20:19 - Accordion test
08:27:44 - Card test
08:37:24 - Feature test
08:41:24 - Form test
08:49:24 - Opt form test
08:52:04 - Player test
08:52:39 - Loading test
08:57:09 - Profile test
09:01:29 - Jumbotron test
09:06:04 - Header test
09:23:19 - Home page test
09:32:44 - Profiles test
09:34:24 - Adding test-ids to Profiles
09:35:39 - Selection filter test
09:45:24 - SignIn Test
09:55:49 - SignUp Test
09:59:29 - We are done! Review and sign off!

✅ Subscribe for more developer tips and tricks: https://bit.ly/CognitiveSurge
? Stay in the loop on Twitter: https://twitter.com/karlhadwen

? Liked the video?
- Give it a thumbs-up ?
- Share it with your network ?
- And don’t forget to SUBSCRIBE for more top-notch developer content! ?

? Thanks for tuning in! See you in the next episode where we continue to make tech easy and accessible for everyone! ✌️

? react tutorial,reactjs tutorial for beginners,react firebase tutorial,styled components,firebase tutorial,react hooks tutorial,building todoist,react js project from scratch,react crash course,react context tutorial,react router dom,react tutorial for beginners,react js full course,reactjs tutorial for beginners 2021, clever programmer