- *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
Demo: Link
- Home Page
- Jumbotron Component
- Accordion Component
- Footer Component
- Sign Up Page
- Sign In Page
- Profile Page
- Landing Page
- Collection of Movies and Series
- Feature Component (Overview,Vote Average, Rating, Category)
- Trailer Component
- 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
- 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.
- 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)
!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 |
|---|---|
| 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 |
- install dependencies
npm install
- start the project
npm start
Application will be serving on http://localhost:3000
- Build
npm run build
- refer firebase docs for deployment
firebase login
Firebase will ask for your login details
- deploy to firebase
firebase deploy
- Prem Balaji B
- Licencesed under PremBalaji B
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent