Objective Create a movie discovery web application that allows users to search for movies, view details about them, and save their favorite movies. You’ll be consuming data from the TMDB API. Requirements

1. User Interface: Create a responsive and visually appealing user interface for the application. Here's the link to the design you're expected to replicate: https://www.figma.com/file/tVfgoNfhYkQaUkh8LGqRab/MovieBox-(Community)?type=design&node-id=1220-324&mode=design&t=6998DWtjQrxz8mOf-0 You should list the top 10 movies on the homepage. They should be displayed in a grid layout with their movie posters. The Card component should display the movie title and release date. card - [data-testid: movie-card] movie poster - [data-testid: movie-poster] movie title - [data-testid: movie-title] movie release date - [data-testid: movie-release-date]
2. Movie Search: Implement a search feature that allows users to search for movies by title. Display search results, including movie posters, titles, and release dates. Show a loading indicator while fetching search results.
3. Movie Details: When i go to to /movies/:id route (where :id is the id), I should see the movie details page. I should see title - [data-testid: movie-title] release date (in UTC) - [data-testid: movie-release-date] runtime (in minutes) - [data-testid: movie-runtime] overview - [data-testid: movie-overview] API Integration: Consume the TMDB API to fetch movie data. Use the following API endpoints: Fetch movie details by ID: https://api.themoviedb.org/3/movie/{movie_id} Error Handling: Implement error handling to display meaningful error messages to users in case of API failures or other issues. Submission: Host your frontend application on a platform of your choice (e.g., GitHub Pages, Netlify). Provide clear instructions on how to run your project locally in your README.md file. Ensure that the code is well-documented and organized. This frontend challenge requires you to build a dynamic movie discovery app that interacts with a real API to fetch and display movie data. PS: You MUST use react or Next js

MovieBox App

MovieBox is a web application that allows you to explore and discover movies.

Click on the movies and you will be directed to the page you can click on play where you would watch the movie.