Netflix React+Firebase App

Live on: https://netflix-app-69791.web.app

Technology:

• JavaScript

• React JS

• Styled Components

• Firebase

• Context API

• Jest Testing

---

Architecture:

Additional packages:

• firebase - backend library
• fuse.js - search library
• normalize.css - to reset default css
• react-router-dom - to setup routes
• styled-components - to manage styled components
• prettier - to format code during development

---

ToDos

Project configuration

• Architecture overview
• Installation Create React App
• CRA boilerplate cleanup
• Initialization GIT
• Adding GitHub remote repository
• Creating folders for architecture structure

Project work:

• Creating Jumbotron component
• Creating GlobalStyles styled component
• Implementing Normalize.css
• 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:

• 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