NetflixClone

cloning netflix(non-commercial) using MERN stack.

Getting Started:

• Go to the each of 3 directories and hit npm install to install all the dependencies.
• Go to BackEnd/ and hit nodemon index.js to start the server and connect to Local database(localhost/netflix).
• Then, Go to admin or frontend of our choice whether you want to log in as a user or admin respectively, and then hit npm start to start react's dev server. Each has different functionalities.

Tech Stack:

• Node.js,Express.js for Server side, creating REST APIs.
• MongoDB for storing the information of models.
• React.js for Client side rendering.
• Comfortable working with CSS preprocessor like sass for large scale styling.

Description:

• Server side:

  • Models: Created User,Movie and List Models.
  • Routing: In server side, I created all routes and mainly classified into 4 types, auth(authorization routes), users(CRUD), Movies(CRUD), Lists(CRUD).
  • REST API: Created Rest APIs by sending HTTP requests and getting back responses, manuplation of data(MongoDB) through mongoose.
  • Authorization: Generated a JWT when the user is logged in , and set that to header of each requests, which authenticates the requests.Enhanced authorization if the user is an admin.
  • Password Encryption: Used AES method of Crypt-js module to encrypt the password by passing secret key and store it in DB. When verifying, again decrypting by passing the same secret key.

Note: Postman's Documentation For my REST APIs Created by server is available here.

• Client Side:

  • Styling: Made it responsively by using flex box and working comfortably with CSS preprocessor sass for large scale styling.
  • Routing: Used React Navigation for making this app dynamic systematically through URLs.
  • Pages: Made 4 pages
    • Home - Homepage only when user is logged in.
    • Login - Login page for entering user's credentials.
    • Register - Register page is to sighn up the user by their credentials.
    • watch - for watching particular movie.
  • Components: Made 4 components: Featured(For displaying the featured movie on top of page), list(for displaying a list of movies with same genre), listitem(for each movie), navbar(for navigation).
  • Authorization: Used Context API (Context, Actions,Reducer) for controlling events by React State and Hooks.Stored the token generated by logging in will be stored in the LocalStorage of application and setting headers always before a Http request from Client.
  • Special Authorization -The Admin: If u want admin functionalities, Then you should start the admin react app and view it by logging in as admin only.This has many special features like CRUD on Movies, Users,Lists from Client!. And also we can view all the stats, and much more! currently, working on it.