This is a clone of the Netflix website built using React.JS as a front-end and Firebase as a back-end. It’s not a replica, and it doesn’t have all the features of the Netflix website. It’s a similar version of Netflix with my own design touch, showing my abilities in React.JS to build something advanced like Netflix. It contains the home page, sign-in page, sign-up page, browse page, and a movie player.

Take a look at the live version here: https://react-netflix-clone-beta.vercel.app

Table of Contents

• Project Walk-Through
• Home Page
• Sign-in Page
• Sign-up Page
• Browse Page
• Live Demo
• Technology Used
• How To Use
• Show Your Support
• Acknowledgments
• License

Project Walk-Through

Home Page

The Home Page consists of five main sections:

• Header: Includes the logo (redirects to the home page) and a sign-in button.
• Optform: A text input field and button to redirect to the sign-up page.
• Jumbotron: Displays advantages of Netflix with data from jumbo.json.
• Frequently Asked Questions: An accordion for FAQs sourced from faqs.json.
• Footer: Contains useful links for users.

The page is fully responsive to all mobile devices, even the small ones.

Sign-in Page

The Sign-in Page features three main sections:

• Header: Includes the logo that redirects back to the home page.
• Sign-in Form:
  • Email and password input fields.
  • Sign-in Button with validation to disable empty fields.
  • Error handling function and link to the Sign-up page.
• Footer: Contains useful links.

Again, the page is fully responsive to all mobile devices, even the small ones.

Sign-up Page

The Sign-up Page consists of three sections:

• Header: The logo that redirects to the home page.
• Sign-up Form:
  • Input fields for first name, email, and password.
  • Sign-up Button with validation to ensure fields are filled.
  • Error handling and link to the Sign-in page.
• Footer: Contains useful links for users.

The page is fully responsive to all mobile devices, including smaller screens.

Browse Page

The Browse Page includes:

• Header:
  • Logo (home page redirect).
  • Category links that filter displayed movies.
  • Featured Movie Title and Description.
  • Play Button to launch the video player.
• Movies Slides: Displays movies based on genres fetched from Firebase.
• Movie Card: Represents a movie that expands on hover.
• Card Feature: Expanded view of a movie with additional info and play button.
• Video Player: Full controls for video playback.
• Footer: Contains additional user links.

As with previous pages, it’s fully responsive across devices.

Live Demo

Take a look at the live version here: https://react-netflix-clone-red.vercel.app

Technology Used

This project utilizes the following tools and techniques:

• React.JS
• React Router
• React Forms
• React Hooks
• Firebase
• And more…

How To Use

To use this React app in a local development environment, follow these steps:

1. Install Git and Node.js.
2. Create a project on Firebase.
3. Clone the repository:

   git clone https://github.com/AhmedTohamy01/React-Netflix-Clone

4. Navigate to the repository and install dependencies:

   cd react-netflix-clone
   npm install

5. Create the file .src/lib/firebase.prod.js and configure it with your Firebase project details.
6. Seed your Firebase database using the provided .seed.js file.
7. Run the app with:

   npm start

Happy Hacking!

Show Your Support

Give a ❤️ if you like this project!

Acknowledgments

Hat tip to everyone who helped me learn the techniques used in building this project.

License

MIT License.

Troubleshooting

If you encounter issues while building or running the application, consider the following troubleshooting steps:

• Ensure that you’ve installed all the necessary dependencies.
• Double-check your Firebase project configurations in firebase.prod.js.
• If you face authentication issues, make sure your Firebase rules are set correctly to allow access.
• Refer to the console for any error messages that can guide you towards a solution.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.