Netflix Clone
React, Router, Style-Component, Firestore, Auth
About
This project is part of youtube tutorial video which I'm following and also github repo . As going through the project I am learning and code my own touch on the way.
Preview
TODOs
Task Need To Be Done
- Overview/demo
- Architecture
- Project dependencies
- Installing create react app
- Project cleanup
- Yarn/npm port tip
- Creating files/folders
- Creating the Jumbotron component
- Styled components GlobalStyles
- Implementing Normalize.css
- Installing ESLint, Prettier
- Item component
- Item component direction prop
- Container derivative component
- Modules, errors
- Footer component
- Accordion component
- useContext for Compound Components
- VSCode tip for importing
- Accordion component body
- Accordion component review
- Opt-form component creation
- Opt-form component review
- Constants - routes
- Pages: Home, Browse, SignIn, SignUp
- Creating React Router Routes
- Header component
- Template review
- Firebase connection
- React Context for Firebase
- SignIn Page
- Firebase top level authentication
- Firebase console authentication
- Debugging error auth (if user is in the db or not)
- SignUp Page
- Registration page, routes debugging
- Navigation
- Helpers: routes (React router auth)
- Protect routes
- Creating an auth listener (custom hook)
- Tip around authentication state changing
- Helpers routes review
- Browse page (categories films & series) component
- Custom hook:browse page
- Utils directory and setup
- Browse container
- Profiles container
- Profiles component
- Loading profile component
- Spinner review
- Header profile
- Header profile: dropdown, chevron
- Header search styling
- Header play button style
- Card list (categories, slides) - films & series logic
- Entities logic start
- Player component and Card component styling
- Movie recommendations
- Feature component (showing)
- Passing props into our Feature (item obj)
- More styling on the card style
- Debugging the slides
- Debugging play button and card
- Player component
- Review player video
- Live search using Fuse.js
- Review our project!
- Testing setup
- Player test
- Footer test
- Accordion test
- Card test
- Feature test
- Form test
- Opt form test
- Player test
- Loading test
- Profile test
- Jumbotron test
- Header test
- Home page test
- Profiles test
- Adding test-ids to Profiles
- Selection filter test
- SignIn Test
- SignUp Test
- We are done! Review and sign off!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent