This is a React-based movie app that allows users to browse and search for movies. It includes features such as lazy loading, infinite scrolling, search functionality, redux-toolkit, skeleton loading, circular progress bar, custom hooks, a custom carousel/slider, and state management with React hooks.
To install the app, clone the repository and run the following command:
npm install
To start the app, run the following command:
npm start
This will start the app on http://localhost:5173.
Live : Movie App.
...
...
...
...
The app uses lazy loading to only load images when they are needed. This improves the app's performance by reducing the amount of data that needs to be loaded at once.
The app uses infinite scrolling to load more movies as the user scrolls down the page. This provides a seamless browsing experience without the need for pagination.
The app includes a search bar that allows users to search for movies by title. The search is performed in real-time, and the results are displayed immediately.
The app uses redux-toolkit to manage its state. This provides a centralized location for storing and managing data, making it easier to maintain and debug.
The app uses skeleton loading to display a placeholder UI while data is being fetched. This provides a better user experience by giving users immediate feedback that the app is working.
The app includes a circular progress bar that is displayed while data is being fetched. This provides visual feedback to users that the app is working.
The app includes custom hooks that encapsulate complex functionality, making it easier to reuse code and maintain consistency throughout the app.
The app includes a custom carousel/slider that allows users to browse through a selection of movies. This was implemented without the use of any external libraries, making it lightweight and customizable.
The app uses React hooks to manage its state, making it easier to build and maintain complex UIs.
The app uses Axios to fetch data from a REST API. This provides a scalable way to retrieve data and makes it easy to swap out the backend if needed.