A responsive web application that displays a virtualized list of movies from The Movie Database (TMDb) API. The app shows top movies for each year and users can filter by genre.
Please visit for -> Live Preview in CodeSandbox
Or you can scroll to GIFs to get a glance
used React + React Virtuoso + CSS
- Enhanced rendering performance by implementing virtualized rendering for large data sets.
- Implemented smooth scrolling behavior to load more movies as the user scrolls in any direction (from 2010 to currentYear)
About List virtualization About virtualized-rendering
Prerequisite:
- vs code
- node v18
Steps to Run The Project
- Open terminal/cmd at project location and run command:
git clone https://github.com/MNaushad97/movieFlix97.git - move to folder movieFlix97 using command:
cd movieFlix97 - Make sure you have the .env file intact with
REACT_APP_API_KEY - To install dependencies run command:
npm install - Now run app using command:
npm start - The project will get hosted at url: http: localhost:3000
Features Covered ✅ :
- Created custom UI components for the app, using React
- Displays a list of movies sorted in descending order of popularity.
- Shows information card for each movieCard.
- Load a total of only 20 movies for each year
- Implemented smooth scrolling behavior
- Implemented virtualised rendering maintaing infinite scroll feel
- Interaction is smooth and doesn’t cause any jitters.
- Allows users to filter movies by genre.
- Multiple Genre selection implemented
- loading movies of previous year when user scrolls up (logic commented / removed )
Encountered scroll jump issues while trying to load the previous year's movie list. To ensure a smoother and more responsive user experience had to optimize the code by streamlining certain logic and reducing unnecessary computations related to the movie list retrieval and rendering.
Allow the image to load
