Implement Movie Categories Page with Details

[ahmedalsanadi]

Summary

This pull request introduces the Movie Categories Page with dynamic movie details functionality. The page displays different movie categories (Popular, Top-Rated, Upcoming, and Now Playing) and allows users to click on individual movie cards to view detailed information about the movie. Key components were modularized for better reusability and maintainability.

Main Features Implemented

1. Movie Categories Page (CategoryMovies Component):

   • Displays movies in a grid layout for a specific category.
   • Categories include: Popular, Top-Rated, Upcoming, and Now Playing.
   • Movies are fetched dynamically using the Movie Database API.
   • Each movie is displayed in a card format with a clickable link to view its detailed information.

2. Card Front Side Component (CardFrontSide):

   • Represents the front side of each movie card.
   • Displays the movie poster, title, and has smooth hover transitions.
   • Clicking on the card redirects the user to the movie’s detail page via a dynamic URL: /movie/[id].
   • Uses the Next.js Link component to make each card a clickable link.
   • Integrated the Movie Database API to display poster images dynamically.

3. Card Back Side Component (CardBackSide):

   • The reverse side of the movie card, visible on hover.
   • Displays movie details such as a brief overview, release date, and rating.
   • Ratings are visually represented using a star-based system.

4. Star Rating Component (StarRating):

   • Dynamically calculates the movie rating based on the API data.
   • Displays filled stars corresponding to the rating, with a maximum of 5 stars.

Detailed Changes

1. CategoryMovies Component:

   • Displays movie cards based on the selected category.
   • Wrapped each movie card with the CardFrontSide component for modularity.
   • Filter section placeholder added (to be implemented in the future).

2. CardFrontSide Component:

   • Each movie card is wrapped with a Link component to redirect to a dynamic URL (/movie/${data.id}).
   • On hover, the card flips to reveal the back side (CardBackSide), which displays movie details.
   • Handles display logic for movie posters (with a fallback if no poster is available).

3. CardBackSide Component:

   • Displays additional information such as the movie’s overview, release date, and rating.
   • Uses the StarRating component to visually represent the movie’s rating out of 5 stars.

4. StarRating Component:

   • Renders a dynamic number of filled stars based on the movie's rating.
   • Accepts the movie rating as a prop and calculates how many stars to display.

5. CSS for Card Flip Animation:

   • Added CSS to enable smooth perspective-based card flip animations when hovering over the movie cards.
   • The front side rotates 180 degrees, and the back side rotates to the front.

Key Improvements

• Dynamic Routing: Each movie card links to a unique movie details page via dynamic routing using Next.js.
• Reusable Components: Components such as CardFrontSide, CardBackSide, and StarRating are modular and reusable across other sections of the application.
• Responsive Design: Ensured that the layout works well on different screen sizes, with responsive grid and card scaling.
• Hover Effect: Created an engaging UI where movie cards flip to show details on hover, improving user interactivity.

Next Steps

• Implement filter options to allow users to sort or filter movies based on different criteria (release date, rating, etc.).
• Improve loading states and error handling to handle API calls more robustly.
• Integrate pagination or lazy loading for large movie datasets.

---

This pull request sets the foundation for a clean, dynamic movie browsing experience and ensures scalability for future features such as filtering, pagination, and better state management.