Implement Movie Page for Popular, Top-Rated, Upcoming, and Now Playing Movies with Movie Details - Githubissues

Mosnad-Web01 / oldversion

0 stars 0 forks source link

Implement Movie Page for Popular, Top-Rated, Upcoming, and Now Playing Movies with Movie Details #20

Open ahmedalsanadi opened 1 month ago

ahmedalsanadi commented 1 month ago

Description

Create a new page in the Next.js application that displays popular, top-rated, upcoming, and now-playing movies. This page will serve two purposes:

1. Display Categories of Movies:

The page will fetch and display four different categories of movies using the Movie Database API:
- Popular Movies
- Top-Rated Movies
- Upcoming Movies
- Now Playing Movies
Each category will display movie cards (with thumbnails, titles, and release dates).

2. Movie Details:

When a user clicks on a movie card, they should be redirected to a detailed page for that specific movie.
The URL should include the movie’s ID (e.g., /movies/[id]).
The details page should display the following information:
- Movie poster
- Title
- Overview/description
- Release date
- Genre
- Rating (e.g., 4.5/5)
- Any other relevant information
Use the Movie Database API to fetch the details for the selected movie.

Additional Notes:

The page should be responsive and utilize client-side rendering where appropriate to ensure a smooth user experience.
Use the existing dark/light mode feature to ensure the page is styled properly in both modes.
Ensure proper error handling (e.g., displaying a message if data can't be fetched).
Include a loading indicator when fetching data.

Tasks:

[ ] Fetch and display movies in four categories (Popular, Top-Rated, Upcoming, Now Playing).
[ ] Create a clickable card component for each movie.
[ ] Implement a dynamic movie details page that shows more detailed information when a movie card is clicked.
[ ] Ensure the page is responsive and properly styled.
[ ] Implement error handling and loading states.