Skip to content

A Netflix Clone App with TMDB movies and series. User can able to register and sign in in to application. User can able to view the overview, rating, vote average and category and play the Trailer of the movies and series

Notifications You must be signed in to change notification settings

Prem3997/Netflix-Web-App-Clone

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Netflix Clone

  • *A Netflix Clone App with TMDB movies and series. User can able to view the overview, rating, vote average and category and Trailer of the movies and series

Quick Links

Demo

Tech Stack

Implementation Hightlights

Getting Started

Deployment

Author


Demo

Live Site Demo

Demo: Link

Project Screenshots

  • Home Page

image

  • Jumbotron Component

image

  • Accordion Component

image

  • Footer Component

image

  • Sign Up Page

image

  • Sign In Page

image

  • Profile Page

image

  • Landing Page

image

  • Collection of Movies and Series

image

  • Feature Component (Overview,Vote Average, Rating, Category)

image

  • Trailer Component

image


Tech Stack

  • React
  • Redux
    • web client & client data management
  • Node.js
    • Web server & services in service oriented architecure
  • Styled Components
    • Visual primitives for the component age.
    • Use the best bits of ES6 and CSS to style your apps without stress
  • Firebase
    • Firebase helps you build and run successful apps
  • Axios
    • Promise based HTTP client for the browser and node.js
  • Fuse.js
    • Fuse.js is a lightweight fuzzy-search, in JavaScript, with zero dependencies.
  • react-youtube
    • Simple React component acting as a thin layer over the YouTube IFrame Player API
  • movie-trailer
    • Fetch Youtube trailers for any movie
    • Return one or many trailer URLs
    • Use anywhere, browser or Node - UMD (Browser Support)
    • Async/await, Promise and Callback APIs
  • tmdb
    • A list of Movies and Series Database

Implementation Highlights

  • single page application web client with React & Redux & context
  • home page with one recommended movie or series on loading is displayed
  • service oriented architecure backend
  • scrape raw movie data or a series data from tmdb database through api calls
  • provides processed tmdb movies data with our movie service API
  • persisted search for movie's database for optimized searching capability using fuse.js
  • provides youtube trailer link for tmdb movies data with our movie-trailer service API
  • firebase for user's database and authentication.

User Stories

  • users can register and log in to their account
  • attractive home page where users can able to register themselves for new account
  • users can able to sign in and sign out from the application
  • landing page has collections of movies and series for recommendations, Trendig Now, Top Rated
  • landing page recomends a random movie or series on each reload
  • users can search for movies and series through a set of 13 categories each
  • users can select and view details of a movie and series such as vote average, ratings, category and a overview.
  • users can able to play the selected movie or series trailer when clicked on play button (if availble in movie-trailer db)

Getting Started

Prerequisites

!important .env file is required for setting up environment variables for this project
an example of .env file is located at root directory !important firebase.prod.js is required for setting up firebase environment for authentication, variables for this project
an example of firebase.prod.js file is located at src/lib directory !important request api key is required for setting up tmdb database. variables for this project
an example of request.js file is located at src/service directory

Tools & Versions

Tools Versions
react 6.1.0
npm 6.1.0
axios 0.21.1
firebase 8.6.7
fuse.js 6.4.6
movie-trailer 17.0.2
react-youtube 7.13.1
styled-components 17.0.2

Running Project

  • install dependencies
npm install
  • start the project
npm start

Application will be serving on http://localhost:3000

Building Application

  • Build
npm run build

Application will be built on build folder

Deployment

  • refer firebase docs for deployment
firebase login

Firebase will ask for your login details

  • deploy to firebase
firebase deploy

Author

  • Prem Balaji B

License

  • Licencesed under PremBalaji B

About

A Netflix Clone App with TMDB movies and series. User can able to register and sign in in to application. User can able to view the overview, rating, vote average and category and play the Trailer of the movies and series

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages