Skip to content

Latest commit

 

History

History
296 lines (228 loc) · 6.28 KB

README.md

File metadata and controls

296 lines (228 loc) · 6.28 KB
Raw

Project: Netflix Clone

Date: 5 ~> 9 - Oct - 2020

Functions

  • This React project has multiple pages: Home, Browse (which uses Firebase authentication), sign in, and sign up.
  • The sign in will connect to Firebase when a user tries to sign in, and when a user signs up, we will use Firebase auth to store the user in the Firebase auth database.
  • I build this app using React and uses Styled Components for all the styling we implement.
  • I use Fuse.js for live search.
  • and Im test all our components using React Testing Library.
  • And of course we will use React router for navigation!

Screenshot

netflix-clone

netflix-clone-gif

Deploy

https://netflix.tinspham.info/

Plan Of Action

  • Initial project 🎉
  • Architecture 🎉
  • Project dependencies 🎉
  • Installing create react app 🎉
  • Project cleanup 🎉
  • 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 🎉
  • Footer component 🎉
  • Accordion component 🎉
  • useContext for Compound Components 🎉
  • Accordion component body 🎉
  • Opt-form component creation 🎉
  • Constants - routes 🎉
  • Pages: Home, Browse, SignIn, SignUp 🎉
  • Creating React Router Routes 🎉
  • Header component 🎉
  • 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 🎉
  • Helpers: routes (React router auth) 🎉
  • Protect routes 🎉
  • Creating an auth listener (custom hook) 🎉
  • 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! 🎉
  • Deploy to firebase 🎉
  • Add custom domain 🎉
  • Add SLL to domain 🎉

After this project

Next Steps:

  • 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!

Application architecture

Directory Structure

Installation Guide

Tech-Stack

  • React( custom hooks, context, portals)
  • Firebase (Firestore/auth)
  • styled-components
  • fuse.js
  • normalize.css

Production

  • Clone this project
git clone https://github.com/tinspham209/netflix-clone
  • Install dependencies
npm install
  • Start the server
npm start

Development

  • Clone this project
  • Install dependencies
npm install
  • Start packager
npm start

Components function:

  • accordion:
  • card:
  • feature:
  • footer:
  • form:
  • header:
  • jumbotron:
  • loading:
  • NotFound:
  • opt-form:
  • player:
  • profiles:
  • Spinner:

How to name a folder and a file

  • Folder name: - Ex: card
  • Components structure

How to import and export module?

  • Import:
//import every thing
import * as React from "react";
import * as ReactDOM from "react-dom";

//for default export
import InfoSection from "./InfoSection";

//for named export
import { InfoSec, InfoRow } from "./components";

How to style for each component?

  • Create a styled-component file. Ex: src/components/card/styles/card.js
  • Import to src/components/card/index.js file
// InfoSection.jsx

import { InfoSec, InfoRow } from "./styles/card.js";

How to style for Global?

  • Open file src/global-styles.js
  • Edit on function GlobalStyles

How to connect to firebase

How to setup Firebase Authentication

  • go to Firebase ~> click on Authentication and setup.
  • Enable Email/Password (Sign-in method)

How to update new data of films

  • go to Firebase ~> click on Cloud Firestore and setup database in test mode (Everyone can edit database).
  • After that, open file src/seed.js
  • edit information that you want
  • After that, go to src/lib
  • uncomment line 4 & line 20
// 4
import { seedDatabase } from "../seed";

// 20
seedDatabase(firebase);
  • Reload the page, new data will import to Firestore
  • After that, comment again line 4 & line 20.
//4  import { seedDatabase } from "../seed";
//20 seedDatabase(firebase);

How to update new image of films

  • go to public/images
  • select type of films: films or series
  • import image to it
  • Each films must have 2 images: large.jpg & small.jpg

How to deploy to firebase

  • go to Firebase ~> click on Project settings
  • copy Project ID. Ex: netflix-clone-8b12f
  • open file deploy-firebase
  • update project ID in line 11
firebase use project_ID
  • open cmd
  • Login firebase
firebase login
  • Initial firebase project:
firebase init
  1. Are you ready to proceed? Y
  2. Choose Hosting
  3. What do you want to use as your public directory? build
  4. Configure as a single-page app Y
  • Deploy
npm run deploy