Frontend Movie Search Task: Patrick Alvarez

[Patchalv]

Overview

This frontend technical task required creating a simple movie search application that had 2 views:

1. Default - containing a paginated list of movies aswell as a search bar that would search on typing completion.
2. Movie detail page - displaying the details of the movie that the user clicked on from the paginated list.

The movie data should be retried from TheMovieDb using their API.

Requirements: Included using React and TypeScript, and implementing at least one component test.

You can see a live version here: https://mews-movies-kappa.vercel.app/

Implementation

Technologies Used:

• React
• Typescript
• Next Js (Chosen for it's quick spin-up, built in routing and general optimization)
• React Tanstack Query
• Tailwind CSS (I know in Mews you use Styled Components, but for this quick simple app I chose to use Tailwind as quickly implemented with Next Js and have easy familiarity with as using in current job).

Required Features:

1. Search

Implemented Search input bar that handles the search using a debounced callback function that waits to execute after the the user stops typing.

2. Paginated List

The paginated lists is implemented by implementing a infinteQuery to return a paginated list. Rather than implementing a paginated list with a numbered page system or some kind of load more button, I decided that displaying the list of movies in an infiniteList that automatically fetched the next page on scroll down was a better UI solution.

3. Movie Detail

I created a seperate page using next js' file-based routing so that the route would be /[movieId] where the movieId is that of the movie in the api. When a user heads to that page, the movieId is extracted from the url and is then used to fetch the movie details from the api.

4. Tests

Considering this was a small application and not for production use, I was asked to at least to implement some tests to show that I could use the. I created unit tests for the MovieCard and SearchBar components. Obviously, this app is sorely missing many many more tests...