Netflix - Clone

A Netflix clone MERN (MongoDB, Express.js, React.js, Node.js) application is a web-based platform designed to mimic the functionality and user interface of the popular streaming service, Netflix. The MERN stack is utilized to build this application, combining MongoDB as the database, Express.js as the backend framework, React.js for the frontend, and Node.js as the runtime environment.

Weblink: Live Website

Note : The server API is deployed at free version of Render. So, by the time you are seeing the live website it may not work. Kindly clone the project into your machine and try to run it by using following steps.

Some Images:

Desktop

Mobile

Table of Contents

• Introduction
• Features
• Technologies Used
• Installation
• Usage
• Contributing
• License

Introduction

This Netflix clone aims to replicate key features of the original Netflix platform, such as user authentication, dynamic content rendering, and an intuitive user interface. Users can register, log in, browse a catalog of movies and TV shows, and stream selected content. The application typically includes features like user profiles, search functionality, and a responsive design for seamless user experience across various devices.

Features

• User Authentication: User registration and login functionalities to allow users to create accounts and access personalized content.
• Content Catalog: A dynamic catalog of movies and TV shows that users can browse, search, and filter based on genres, ratings, or other criteria.
• Streaming Capabilities: Video playback functionality to stream movies and TV shows directly within the application.
• User Profiles: Personalized user profiles that store watch history, preferences, and recommendations.
• Responsive Design: A responsive and user-friendly design that adapts to various screen sizes, providing a seamless experience on desktops, tablets, and mobile devices.
• Multiple Device Support: Compatibility across different devices and platforms, ensuring users can access the application on smartphones, tablets, and desktops.
• Admin Dashboard: An admin interface to manage content, user accounts, and monitor application analytics.
• Payment Integration: Integration with payment gateways for subscription-based models if the application includes premium content.

Technologies Used

• React.js: A JavaScript library for building user interfaces.
• HTML5 & CSS3: Markup and styling languages for building web pages.
• JavaScript: A programming language for adding interactivity to web applications.
• NodeJS: Node.js is an open-source, cross-platform JavaScript runtime environment that allows developers to execute JavaScript code server-side.
• ExpressJS: Express.js is a minimal and flexible web application framework for Node.js.
• JWT: JWT stands for JSON Web Token. It is a compact, URL-safe means of representing claims between two parties.
• Style-Components: A CSS framework for creating responsive and mobile-first designs.
• Git: A version control system for tracking changes and collaborating on projects.
• Vercel: A platform for hosting and deploying web applications.
• Render: A platform for hosting and deploying web applications.
• Firebase: Firebase is a comprehensive storage platform provided by Google.
• Material UI - A CSS framework that provides various pre defined components and icons.

Installation

To run this portfolio locally, follow these steps: Clone the repository: git clone https://github.com/John12356/Netflix-Clone-MERN-.git

Frontend

1. Navigate to the project directory: cd client
2. Install the dependencies: npm install
3. Create a .env file & add
   1. VITE_SERVER = http://localhost:8080
4. Start the development server: npm run dev
5. Open your browser and visit: http://localhost:5173

Backend

1. Navigate to the project directory: cd server
2. Install the dependencies: npm install
3. Create a .env file & add
   1. MONGO_URL = your mongodb url
   2. SECRET_KEY = any key for jwt
4. Start the development server: npm start
5. Open your browser and visit: http://localhost:8080

Admin (Refer : Admin Dashboard)

Through admin dashboard you can add, delete, edit movies series and add it into the list with desire names. The same is goes for the user details. (Only Registered admin can access this page)

1. Navigate to the project directory: cd admin
2. Install the dependencies: npm install
3. Create a .env file & add
   1. VITE_SERVER = http://localhost:8080
4. Start the development server: npm run dev
5. Open your browser and visit: http://localhost:5174

You can add movies and series here by mentioning the type and upload your images and videos to firebase. Then firebase will will give the URL for images and videos and store it in the Database.

By selecting the movies you can add it into the home page list.(Featuring).

Usage

The usage of a Netflix clone MERN (MongoDB, Express.js, React.js, Node.js) application would typically align with the functionalities and features it offers, mirroring those of the original Netflix platform

Contributing

Contributions are welcome! If you'd like to contribute to My Netflix clone, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix: git checkout -b my-feature
3. Commit your changes: git commit -m 'Add some feature'
4. Push to the branch: git push origin my-feature
5. Open a pull request.

License

This project is licensed under the MIT License.

Contact

For any queries [email protected]