VISIT LINK OF PROJECT :

https://nikkflix-movie-webapp.netlify.app/

STEP BY STEP TO CREATE THIS PROJECT :-

In this article, we will explore the process of creating an IMDb clone using React.js, Redux, RTK-Query, Bootstrap, and React Router. Our project includes multiple pages, implemented using React Router, with private routing to restrict access to unauthorized users. We will store registration data in local storage and fetch movie data from a third-party API. To enhance user experience, we'll use Axios for data fetching, and Formik with Yup for form validation. Let's dive into the details!

Setting Up the Environment:

1. Install Node.js and npm.
2. Create a new React.js project with Create React App.
3. Install dependencies: Redux, RTK-Query, Bootstrap, React Router, Axios, Formik, Yup, and other required packages.

Implementing Navigation with React Router:

1. Set up React Router to enable navigation between multiple pages.
2. Define routes for popular movies, top-rated movies, upcoming movies, registration, and login.
3. Utilize private routing to restrict access to authenticated users only.

Managing User Registration and Local Storage:

1. Implement a registration form to capture user data.
2. Use Formik and Yup for form validation.
3. Store registration data in local storage for persistence.

Fetching Movie Data with RTK-Query and Axios:

1. Utilize RTK-Query to handle data fetching from a third-party API.
2. Define endpoints for popular movies, top-rated movies, and upcoming movies.
3. Leverage Axios to make HTTP requests to the API.

Displaying Movie Information:

1. Design components to showcase movie details, including titles, images, ratings, and descriptions.
2. Utilize Bootstrap to create a visually appealing and responsive movie display.

Conclusion:

In this article, we explored the process of building an IMDb clone using React.js, Redux, RTK-Query, Bootstrap, and React Router. By implementing React Router, we enabled smooth navigation between different pages, while private routing ensured restricted access for unauthorized users. We stored registration data in local storage and fetched movie data from a third-party API using RTK-Query and Axios. By incorporating Formik and Yup, we achieved efficient form validation. Additionally, Bootstrap facilitated the creation of visually appealing movie displays. By mastering these techniques, you can develop an impressive IMDb clone that provides a seamless user experience. Happy coding!

SCREENSHOTS