Interview task (React)

Task.md

Interview task (React)

Popular Movies

Overview

The main aim is to create a simple UI using React and The Movies DB API.

ToDo

• Fetch data from the API using API URL: https://api.themoviedb.org/3/movie/top_rated?api_key=a1f4f5937052531c5e69edf80a8e2e14

You'll receive the next response:

{
  "page": 1,
  "total_results": 10000,
  "total_pages": 500,
  "results": [
    {
      "popularity": 5339.267,
      "vote_count": 127,
      "video": false,
      "poster_path": "/7D430eqZj8y3oVkLFfsWXGRcpEG.jpg",
      "id": 528085,
      "adult": false,
      "backdrop_path": "/5UkzNSOK561c2QRy2Zr4AkADzLT.jpg",
      "original_language": "en",
      "original_title": "2067",
      "genre_ids": [
        878,
        53
      ],
      "title": "2067",
      "vote_average": 5.8,
      "overview": "A lowly utility worker is called to the future by a mysterious radio signal, he must leave his dying wife to embark on a journey that will force him to face his deepest fears in an attempt to change the fabric of reality and save humankind from its greatest environmental crisis yet.",
      "release_date": "2020-10-01"
    },
  ],
}

• Store only that piece of data you need using React state
• Use mockups for basic understanding of the UI needs
• Add ability to search through the movies
• Add ability to mark movie as favorite
• Add ability to filter only favorite movies

Notes

• you should work only with the first page of results (first 20 movies); you don't need to do any other requests; only one - to get the initial data
• to get a full poster URL use the next prefix https://image.tmdb.org/t/p/w500
• UI isn't really important; more important is high quality and well-structured code
• you may use any libraries you want, but don't overuse them; pure JS implementations are preferred