/zone-tmdb

Primary LanguageJavaScript

Movie listings challenge

API Key

Create a .env file in root (see example.env) and add your TMDb API Key.

Installation

$ npm install

Express

$ node index.js

or

$ npm run start

Starts a server at http://localhost:3000

Notes

TODOs

  • Add elements to UI
    • Poster Image
  • Add range input
  • Add 'Match all genres' checkbox

Original Instructions

Part of Zone Frontend

This is not a test! Seriously, try and have fun with it, make it your own!

Introduction

  • 🤨 Take your time but limit yourself to 3hrs. Feel free to use a starter kit like create React app or Vue CLI to save time.
  • 😭 Run out of time? No worries, just think about what you are leaving out and make sure you have enough time to write up your notes.
  • 🤩 Feel free to use a framework, we use React, Vue and plain JavaScript here but use what you’re most comfortable with.
  • 🤗 UI is great but a clean layout and typography will do.
  • 🧐 We’re most interested to see problem solving and your approach… also ES6 please.
  • 😇 Keep it simple, keep it DRY, but don’t over complicate or over engineer, comment and test as much as possible.
  • 🤓 Commit your code to a public Git repository and provide us with the URL.
  • 😬 Provide a README with a simple way to run the project and any notes about your solution.

Brief

Using the TMDb API display a list of now showing movies allowing the user to filter by genre and rating.

Note: You’ll need an TMDb account to request an API key. Once you are registered, go to account settings and click API in sidebar.

Input

  • TMDb Movies Now Playing API
  • TMDb Movie genres API
  • Minimum rating input with a range between 0 and 10, increments of 0.5 and a default set to 3.
  • 'Match all genres' checkbox. If checked the results should only display movies explicitly assigned to the selected genres.
  • Multiple genres input (checkboxes). Must only contain genres from the TMDb API that are in the returned movie result set.

Output

  • Display a list of movies, each showing their title, genres and poster image.
  • The movies should be ordered by popularity (most popular first).
  • Movies should be filterable by multiple genres, the user should have the ability to toggle movies depending on all or some of its assigned genres. For example if 'Action' and 'Drama' genres are selected:
    • With 'Match all genres' checked: Listed movies must have both 'Action' and 'Drama' genres assigned
    • With 'Match all genres' unchecked: Listed movies can have either 'Action' or 'Drama' genres assigned
  • Movies should also be filterable by their rating. i.e If rating was set to 5, you would expect to see all movies with a rating of 5 or higher.
  • The input API's should only be called once.