Skip to content

Latest commit

 

History

History
78 lines (75 loc) · 3.27 KB

ASSESSMENT.md

File metadata and controls

78 lines (75 loc) · 3.27 KB
Raw

React Coding Challenge

The goal of this coding challenge is to give you an opportunity to showcase your knowledge and show us how you work on a real-life project. We are intentionally not forcing you to use any particular library (other than React) so you don't have to learn something new just for a code challenge, but please take into account that even when we are not expecting a production ready app we do expect you to be able to explain why you picked those dependencies for the job. Also, please be mindful about not adding features outside of the scope of this code challenge so you don't end up investing more time than it's needed.

Introduction

Your local movie theater is in dire need of attracting new audience. To do this, they're asking you to build a simple web application that allows users discover new movies and search for them. Since they don't have a backend service, the first version of the application will be built using the public api https://developers.themoviedb.org/3

Features

The movie theater is requesting the following features for the first version

Discover

Upon opening the web application, users should be able to see a list of movies suggested by the application and sorted by popularity.
Pagination is not required for this version.

Search

In the discovery view, add a search bar at the top to allow users to query information about movies.
If the search field is empty, show the discovery results

Filter by rating

The rating is a value between 0 and 10.
Add a rating filter in the form of five stars like here.
When selecting a star, all the stars to the left should be selected as well.

The range of each star is 2, so, if the first star is selected, only movies with rating 0-2 should appear. If the second star is selected, only movies with rating 2-4 should appear, and so on.
If the star clicked is the currently active, disable the filter.
Do this filtering on the client side.

  • Rating field in the movie model: vote_average

Detail view

Upon clicking, a detail view must be shown, displaying more information about the movie.

Design

We do not require jaw dropping designs.
A clean, minimal UI will do.
We do want to see the movie images provided by the API.

[Here's](https://dribbble.com/shots/1682568-Flixus-Homepage- WIP/attachments/266476) a design suggestion, but it's up to you.

Development requirements

  • Use create-react-app for this project
  • Use React 16.8 version
  • Provide all the steps necessary to launch the application

Deliverables

  • The project's codebase delivered somehow (you pick).
  • Anything else you consider is important for understanding the application.

FAQ

  • Do I need to add tests?
  • No.
  • Do I need to use some specific dependency?
  • Other than React, use what you feel comfortable with and what you feel is necessary for this project
  • What kind of React features can I use?
  • No restrictions here, show us what you know. We love React, and we love to use the latest features.
  • Do I need to follow the designs?
  • No, feel free to build the UI as you like. We only care about the code.