{"id":20763310,"url":"https://github.com/tinspham209/netflix-clone","last_synced_at":"2026-04-11T15:37:49.466Z","repository":{"id":42662116,"uuid":"301592496","full_name":"tinspham209/netflix-clone","owner":"tinspham209","description":"Netflix Clone: Home, Browse (which uses Firebase authentication), sign in, and sign up, live search, lists of series, films, and watch video.","archived":false,"fork":false,"pushed_at":"2023-12-15T05:54:01.000Z","size":19169,"stargazers_count":0,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-11T17:55:06.210Z","etag":null,"topics":["context-api","custom-hooks","firebase","firebase-authentication","firestore","fusejs","normalize-css","portals","react","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tinspham209.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-06T02:24:44.000Z","updated_at":"2020-10-09T01:20:55.000Z","dependencies_parsed_at":"2024-11-17T10:43:49.398Z","dependency_job_id":"41451f22-2dde-4474-b492-5ed7bf363434","html_url":"https://github.com/tinspham209/netflix-clone","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tinspham209/netflix-clone","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2Fnetflix-clone","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2Fnetflix-clone/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2Fnetflix-clone/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2Fnetflix-clone/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tinspham209","download_url":"https://codeload.github.com/tinspham209/netflix-clone/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tinspham209%2Fnetflix-clone/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31686140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context-api","custom-hooks","firebase","firebase-authentication","firestore","fusejs","normalize-css","portals","react","styled-components"],"created_at":"2024-11-17T10:43:43.802Z","updated_at":"2026-04-11T15:37:49.438Z","avatar_url":"https://github.com/tinspham209.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Project: Netflix Clone\n\n## Date: 5 ~\u003e 9 - Oct - 2020\n\n### Functions\n\n- This React project has multiple pages: Home, Browse (which uses Firebase authentication), sign in, and sign up.\n- 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.\n- I build this app using React and uses Styled Components for all the styling we implement.\n- I use Fuse.js for live search.\n- and Im test all our components using React Testing Library.\n- And of course we will use React router for navigation!\n\n### Screenshot\n\n\u003cimg src=\"https://i.imgur.com/wedzMRI.png\" alt=\"netflix-clone\"/\u003e\n\u003cimg src=\"https://media.giphy.com/media/V6Wqs2kjsXcgE7KhGA/giphy.gif\" alt=\"netflix-clone-gif\" /\u003e\n\n### Deploy\n\nhttps://netflix.tinspham.info/\n\n### Plan Of Action\n\n- Initial project 🎉\n- Architecture 🎉\n- Project dependencies 🎉\n- Installing create react app 🎉\n- Project cleanup 🎉\n- Creating files/folders 🎉\n- Creating the Jumbotron component 🎉\n- Styled components GlobalStyles 🎉\n- Implementing Normalize.css 🎉\n- Installing ESLint, Prettier 🎉\n- Item component 🎉\n- Item component direction prop 🎉\n- Container derivative component 🎉\n- Footer component 🎉\n- Accordion component 🎉\n- useContext for Compound Components 🎉\n- Accordion component body 🎉\n- Opt-form component creation 🎉\n- Constants - routes 🎉\n- Pages: Home, Browse, SignIn, SignUp 🎉\n- Creating React Router Routes 🎉\n- Header component 🎉\n- Firebase connection 🎉\n- React Context for Firebase 🎉\n- SignIn Page 🎉\n- Firebase top level authentication 🎉\n- Firebase console authentication 🎉\n- Debugging error auth (if user is in the db or not) 🎉\n- SignUp Page 🎉\n- Registration page, routes debugging 🎉\n- Helpers: routes (React router auth) 🎉\n- Protect routes 🎉\n- Creating an auth listener (custom hook) 🎉\n- Helpers routes review 🎉\n- Browse page (categories films \u0026 series) component 🎉\n- Custom hook:browse page 🎉\n- Utils directory and setup 🎉\n- Browse container 🎉\n- Profiles container 🎉\n- Profiles component 🎉\n- Loading profile component 🎉\n- Spinner review 🎉\n- Header profile 🎉\n- Header profile: dropdown, chevron 🎉\n- Header search styling 🎉\n- Header play button style 🎉\n- Card list (categories, slides) - films \u0026 series logic 🎉\n- Entities logic start 🎉\n- Player component and Card component styling 🎉\n- Movie recommendations 🎉\n- Feature component (showing) 🎉\n- Passing props into our Feature (item obj) 🎉\n- More styling on the card style 🎉\n- Debugging the slides 🎉\n- Debugging play button and card 🎉\n- Player component 🎉\n- Review player video 🎉\n- Live search using Fuse.js 🎉\n- Review our project! 🎉\n- Deploy to firebase 🎉\n- Add custom domain 🎉\n- Add SLL to domain 🎉\n\n### After this project\n\nNext Steps:\n\n- Testing setup\n- Player test\n- Footer test\n- Accordion test\n- Card test\n- Feature test\n- Form test\n- Opt form test\n- Player test\n- Loading test\n- Profile test\n- Jumbotron test\n- Header test\n- Home page test\n- Profiles test\n- Adding test-ids to Profiles\n- Selection filter test\n- SignIn Test\n- SignUp Test\n- We are done! Review and sign off!\n\n### Application architecture\n\n\u003cimg src=\"https://i.imgur.com/74aUrpq.png\" /\u003e\n\n### Directory Structure\n\n\u003cimg src=\"https://i.imgur.com/fRZnRWd.png\" /\u003e\n\n## Installation Guide\n\n### Tech-Stack\n\n- React( custom hooks, context, portals)\n- Firebase (Firestore/auth)\n- styled-components\n- fuse.js\n- normalize.css\n\n### Production\n\n- Clone this project\n\n```\ngit clone https://github.com/tinspham209/netflix-clone\n```\n\n- Install dependencies\n\n```\nnpm install\n```\n\n- Start the server\n\n```\nnpm start\n```\n\n### Development\n\n- Clone this project\n- Install dependencies\n\n```\nnpm install\n```\n\n- Start packager\n\n```\nnpm start\n```\n\n### Components function:\n\n- **accordion**:\n- **card**:\n- **feature**:\n- **footer**:\n- **form**:\n- **header**:\n- **jumbotron**:\n- **loading**:\n- **NotFound**:\n- **opt-form**:\n- **player**:\n- **profiles**:\n- **Spinner**:\n\n### How to name a folder and a file\n\n- Folder name: - Ex: `card`\n- Components structure\n  \u003cimg src=\"https://i.imgur.com/lcXRnAB.png\" /\u003e\n\n### How to import and export module?\n\n- Import:\n\n```js\n//import every thing\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\n\n//for default export\nimport InfoSection from \"./InfoSection\";\n\n//for named export\nimport { InfoSec, InfoRow } from \"./components\";\n```\n\n### How to style for each component?\n\n- Create a styled-component file. Ex: `src/components/card/styles/card.js`\n- Import to `src/components/card/index.js` file\n\n```js\n// InfoSection.jsx\n\nimport { InfoSec, InfoRow } from \"./styles/card.js\";\n```\n\n### How to style for Global?\n\n- Open file `src/global-styles.js`\n- Edit on function `GlobalStyles`\n\n### How to connect to firebase\n\n- go to https://console.firebase.google.com/\n- create new project\n- Get the config of firebase project\n- After that, copy to `src/lib/firebase.prod.js`\n\n### How to setup Firebase Authentication\n\n- go to Firebase ~\u003e click on `Authentication` and setup.\n- Enable Email/Password (Sign-in method)\n\n### How to update new data of films\n\n- go to Firebase ~\u003e click on `Cloud Firestore` and setup database in test mode (Everyone can edit database).\n- After that, open file `src/seed.js`\n- edit information that you want\n- After that, go to `src/lib`\n- uncomment line 4 \u0026 line 20\n\n```js\n// 4\nimport { seedDatabase } from \"../seed\";\n\n// 20\nseedDatabase(firebase);\n```\n\n- Reload the page, new data will import to Firestore\n- After that, comment again line 4 \u0026 line 20.\n\n```js\n//4  import { seedDatabase } from \"../seed\";\n//20 seedDatabase(firebase);\n```\n\n### How to update new image of films\n\n- go to `public/images`\n- select type of films: `films` or `series`\n- import image to it\n- Each films must have 2 images: `large.jpg` \u0026 `small.jpg`\n\n### How to deploy to firebase\n\n- go to Firebase ~\u003e click on `Project settings`\n- copy Project ID. Ex: `netflix-clone-8b12f`\n- open file `deploy-firebase`\n- update project ID in line 11\n\n```js\nfirebase use project_ID\n```\n\n- open cmd\n- Login firebase\n\n```\nfirebase login\n```\n\n- Initial firebase project:\n\n```\nfirebase init\n```\n\n1. Are you ready to proceed? `Y`\n2. Choose `Hosting`\n3. What do you want to use as your public directory? `build`\n4. Configure as a single-page app `Y`\n\n- Deploy\n\n```\nnpm run deploy\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinspham209%2Fnetflix-clone","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftinspham209%2Fnetflix-clone","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftinspham209%2Fnetflix-clone/lists"}