/TestTechnique-Movies-App

Primary LanguageTypeScript

TestTechnique-Movies-App


Logo

Front-end Developer Technical Test

Front-end project developed as part of a technical assessment for a recruitment process.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents
  1. Exercise Description
  2. Instructions
  3. Expected Deliverables
  4. Evaluation Criteria
  5. Resources
  6. Choices Building Application

Exercise Description

This exercise consists of implementing a web application that displays a list of movies based on the provided Figma mockup and a given API Endpoint.

(back to top)

Instructions

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Retrieving data from the API Endpoint and displaying it in the movie list

You must retrieve the data from the provided API Endpoint, then display it in the movie list of your web application as follows:

  1. The header section of the application's homepage should display the 4 most recent movies from the complete list in a horizontal scrollable list.
  2. The rest of the section should display the list of all other movies in a vertical scrollable list.

Search by movie title

Users should be able to search for movies (by title only). The search results must be displayed in a modal and sorted alphabetically. The choice of search algorithm is up to you (e.g., fuzzy).

Displaying movie details in a modal

When a movie is selected, its details should be displayed in a modal.

Application adaptability

The application must be designed as "Mobile First" and responsive, ensuring an optimal user experience on all screen sizes for smartphones and tablets.

(back to top)

Expected Deliverables

  1. The source code must be hosted in a public GitHub repository.
  2. A README file must be present at the root of the repository. It should summarize all the details and choices made in building the application, as well as the link to the hosted application (see below). The application must then be hosted on a hosting platform of your choice (Netlify, GitHub Pages, Firebase Hosting, etc).
💡 Make sure the repository and hosted application are accessible for the test evaluation.

(back to top)

Evaluation Criteria

  1. Justification of technological choices: We will evaluate the relevance of the choices made for the framework (if applicable) and external packages, as well as the candidate's ability to explain and justify their choices.
  2. Quality of implementation: We will evaluate the quality of the application's implementation, the quality of the code, the application's structure, and the quality of the user interface, particularly its adaptation to different resolutions and formats of phones and tablets.

(back to top)

Resources

Figma Mockup

💡 A Figma account is required to inspect the mockup

Fonts

Data Response Format

[ { "title": string, "type": string, "date": string, "description": string, "duration": string, "thumbnail": uri, "cover": uri, } ]

(back to top)

Choices Building Application

  1. I decided to build my project with Vite.js to quickly start coding and take the opportunity to explore this tooling solution.
  2. The project is built using vanilla JavaScript with TypeScript, as I am not familiar with any frameworks, and it didn't seem particularly useful for this integration project.
  3. I used fuzzy.js as the library for the movie search algorithm, and axios for HTTP requests to simplify the syntax and familiarize myself with the library.

(back to top)