A clone of netflix.com where users can authenticate themselves, select viewer profiles, browse films and series, and watch vidoes online.
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
- React
- styled-components
- React Router
- Firebase
- Design Pattern - Compound components
To get a local copy up and running, follow these simple steps.
- npm
or
npm install npm@latest -g
npm install --global yarn
-
Clone the repo
git clone https://github.com/DeepakSuryaS/netflix_clone.git
-
Install NPM packages
npm install
or
yarn install
-
Start the development server
npm start
or
yarn start
Open http://localhost:3000 to view it in the browser.
We authenticate users using an email address and a password with Firebase.
We have used Firestore to store our films and series data. We hydrate Firestore by importing data from src/seed.js that produces two collections of the film and series. Each entry of a collection has a genre property. To display data categorically, we filter each collection by genre of each entry which looks like this:
{
series: [
{
title: 'Documentaries',
data: [{}, {}, {}],
},
{
title: 'Comedies',
data: [{}, {}, {}],
},
],
films: []
}
We have adopted the CSS-in-JS approach to style this application and used styled components. It helps us to encapsulate the styles within the components. Styled components also give us out-of-the-box CSS support like nesting styles and variables with exceptional theming support.
We have built a component library using compound components design pattern. It helps us to encapsulate most of the component-related logic within the components.
We have enabled application routing using React Router's BrowserRouter that uses HTML5 history API.
We have used Context API for global state management and sharing states between the parent and children within compound components.
The challenge with the video player was it lives deep in the DOM, but we needed to bring it on top of all other DOM nodes whenever the user decides to play a video preserving its position in the React hierarchy. We have accomplished this via React Portal.
.
├── app.js
├── components
│ ├── accordion
│ │ ├── index.js
│ │ └── styles
│ │ └── accordion.js
│ ├── activityIndicator
│ │ ├── index.js
│ │ └── styles
│ │ └── activityIndicator.js
│ ├── card
│ │ ├── index.js
│ │ └── styles
│ │ └── card.js
│ ├── feature
│ │ ├── index.js
│ │ └── styles
│ │ └── feature.js
│ ├── footer
│ │ ├── index.js
│ │ └── styles
│ │ └── footer.js
│ ├── form
│ │ ├── index.js
│ │ └── styles
│ │ └── form.js
│ ├── header
│ │ ├── index.js
│ │ └── styles
│ │ └── header.js
│ ├── index.js
│ ├── jumbotron
│ │ ├── index.js
│ │ └── styles
│ │ └── jumbotron.js
│ ├── opt-form
│ │ ├── index.js
│ │ └── styles
│ │ └── opt-form.js
│ ├── player
│ │ ├── index.js
│ │ └── styles
│ │ └── player.js
│ └── profile
│ ├── index.js
│ └── styles
│ └── profile.js
├── constants
│ └── routes.js
├── containers
│ ├── browse.js
│ ├── faq.js
│ ├── footer.js
│ ├── header.js
│ ├── jumbotron.js
│ └── profile.js
├── context
│ ├── firebase.js
│ └── themeContext.js
├── fixtures
│ ├── faqs.json
│ └── jumbo.json
├── global-styles.js
├── helpers
│ └── routes.js
├── hooks
│ ├── index.js
│ ├── use-auth-listener.js
│ └── use-content.js
├── index.js
├── pages
│ ├── add-profile.js
│ ├── browse.js
│ ├── home.js
│ ├── index.js
│ ├── signin.js
│ └── signup.js
├── seed.js
├── theme
│ └── schema.json
└── utils
├── index.js
└── selection-map.js
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Deepak Surya S - @ideepaksuryas - [email protected]
Project Link: https://github.com/DeepakSuryaS/netflix_clone