Netflix Clone using React, Typescript, Material UI

Overview

The stack that is being used: React (custom hooks, context, portals), Firebase (Firestore/auth), Compound & Styled components!

Hey! I finally finished this Netflix clone (took me more time than I expected 😅 ). My idea was to make everything static (movies, series, tv shows, ...) but then I found this really cool TMDB API which you can pull most popular movies, top rated shows, what's trending, collections, lists and muuuch more. Really worth checking the effort made.

First use the Firebase App api key of your's as the project's api keys has been removed and you can add them in /lib/firebase.prod.js file and tmdb api key also needs to be changed, which is present in request.js file under the project directory.

With Youtube Trailers Embeded

Getting Started with Create React App

This project was bootstrapped with Create React App.

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.

You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

You might also like...
Custom React hook for building an accessible Carousel component.

Build an accessible React Carousel component with usePony

 Easy to use, responsive and customizable carousel component for React Projects.
Lightweight carousel component for react

Lightweight carousel component for react

 Rerousel is the simplest and the lightest infinite carousel package made for React.
Rerousel is the simplest and the lightest infinite carousel package made for React.

Rerousel is the simplest and the lightest infinite carousel package made for React. Simple Set up your carousel in the blink of an eye. You only have

Touch and drag slider carousel component for React
Touch and drag slider carousel component for React

react-touch-drag-slider Touch and drag slider carousel component for React Touch friendly on mobile Responsive to viewport resizing Supports mouse dra

Items Carousel Built with react-motion and styled-components

react-items-carousel Installation $ npm install react-items-carousel --save Demos Example import React, { useState } from 'react'; import ItemsCarous

A react carousel/slider like component for sequentially displaying slides or sets of slides

react-whirligig demo repo A carousel/slider-like component for sequentially displaying slides or sets of slides. Basic Usage const Slider = ({ slideIn

Animate Banner React Component
Animate Banner React Component

rc-banner-anim React BannerAnim Component Browser Support IE 10+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔ Development npm install

React simple infinite carousel with lazy loading and responsive support

react-leaf-carousel React simple infinite carousel with lazy loading and responsive support. Installation npm install react-leaf-carousel Example impo

Owner
topsecretdev0602
I believe that people should do things in which they are good at or in which their heart lays. That’s why I chose freelance web development as my career.
topsecretdev0602
Easy to use and TypeScript compatible carousel component

Carousel Component for React Easy to use and TypeScript compatible carousel component. Installation To install the library you can run npm install @se

Sefa İlyas Öz 6 Oct 13, 2022
Flipping Cards for your React Projects. React-Flippy allows you to create flipper event with your content.

React-Flippy React-Flippy allows you to create flipping cards in React projects. It can be used as controlled or uncontrolled component. Live Demo How

Berkay Aydın 308 Dec 24, 2022
🍃 React Slidy - Minimalistic and smooth touch slider component for React ⚛️

React Slidy ?? React Slidy - Minimalistic and smooth touch slider component for React ⚛️ Features ??️ 1:1 slider for any content ?? Optimized for mobi

Miguel Ángel Durán 121 Dec 25, 2022
React image carousel is a React component for building image galleries and carousels

React image carousel is a React component for building image galleries and carousels

ChingChing Yeh 13 May 25, 2022
React Swift Slider is a simple image/picture slider for react

React Swift Slider React Swift Slider is a simple image/picture slider for react. Demo Demo-1 Example Repo on how to use react-swift-slider https://gi

Muzikayise Flynn Buthelezi (zuluCoda) 7 Nov 18, 2021
Better React Carousel - React responsive carousel component w/ grid layout

Better React Carousel - Typed React responsive carousel component w/ grid layout to easily create a carousel like photo gallery, shopping product card

Dev Panther 17 Nov 25, 2022
React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders. 🖥️ 📱

React Awesome Slider v3 [NEW fullpage navigation HOC] react-awesome-slider is a 60fps, extendable, highly customizable, production ready React Compone

Rafael Caferati 2.6k Jan 3, 2023
React.js Responsive Carousel (with Swipe)

React Responsive Carousel Powerful, lightweight and fully customizable carousel component for React apps. Important I don't have any time available to

Leandro Lemos 2.3k Jan 4, 2023
React carousel component

react-slick Carousel component built with React. It is a react port of slick carousel Documentation Installation npm npm install react-slick --save ya

Kiran Abburi 10.8k Jan 2, 2023