Task Description

Using the The Movie Database (TMDB) API, create a React + TypeScript application with the following features:

Requirements

1. Landing Page:

   • Display a list of movies.
   • Each movie item should include:
     • Poster image
     • Movie name
     • Release date
   • Implement pagination to navigate through different lists of movies.

2. Movie Details Page:

   • When a movie is selected from the landing page, navigate to a details page.
   • Fetch and display detailed information about the selected movie using a different API endpoint than the landing page.

3. Responsive Design:

   • Ensure the application is fully responsive and looks good on different screen sizes.

Bonus Section

1. Search Functionality:

   • Implement a search bar on the landing page to filter movies by name.
   • Update the movie list dynamically based on the search query.

2. Animations:

   • Add subtle animations to enhance user experience, such as hover effects on movie items and smooth transitions between pages.

3. Unit Testing:

   • Write unit tests for components using a testing library like Jest.

Resources

• TMDB API Documentation
• Create React App Documentation

Notes

1. UI & animation libraries are not allowed.
2. Frameworks like Next.js are not allowed.
3. Utility CSS classes like Tailwind are allowed.
4. Components should be designed to be reusable.
5. The solution should provide a README including the following items:
   • Brief description of the solution.
   • Reasoning behind your technical decisions.
   • Trade-offs made, if any.
   • Example usage snippet(s).
   • Possible future improvements.