React exercise

by @Alex Alexandrescu and @Sanjin Cabaravdic

What is this?

The following instructions and requirements in this repository represent a step in the Match community onboarding process. It's a (hopefully) simple take home exercise to be later used as a conversation starter in our technical discussion. It should also help us in reducing the number of technical challenges a client wants you to go through.

What it is not?

It is not meant to be an evaluation of your full skills as a professional. It is also not a blocker in progressing through our onboarding (but please keep in mind if you have time to do it is helpful for us and this might give you an advantage over other candidates when applying for jobs). Also this is not in any way an assurance of a positive outcome of our internal or the clients onboarding process, it's just a stage.

Exercise brief

We would like you to build a React app that connects to a movie and/or tv show open api that:

allows me to search for the title of their favorite show or display a list of all results
allows users to sort the results and to filter
users should be able to favorite some shows and have them available after they restart the browser.

Requirements

Must use latest version of React
Must use CSS/SCSS to style component (use of a CSS framework is allowed and encouraged)
API keys should not be hardcoded in the JS/TS files
Project should contain linting config
As a user I should be able to search for a title
As a user I should be able to filter by year of release and by genre
As a user I should be able to sort by name, year of release
As a user I would like to be able to favorite a number of titles and I would like those favorite to persist in the browser (local is sufficient, no need for external APIs)
My favorites should be accessible on a different route

Nice to haves

Unit tests
Show movie poster
Multi user (local) system
Custom styling
A favicon
Github pages script and branch

Deliverables

A Github repository that one our domain experts can clone, install, build and run locally. You can expect a domain expert to have a git client, NodeJS and NPM/Yarn installed and properly configured, no other dependencies should be required.

Miscellaneous

The following choices are up to the person doing the exercise:

Yarn or NPM
CSS or SCSS
State manager
UI Framework
Movie/Shows API provider
Typescript or Javascript (please take into account what the role you are applying for has as a requirements)

How long do I have to do this?

If it takes you more than a day please let us know, in our estimates it should only take a couple of hours

What languages should the interface be in?

English only

Who do I contact when I'm done?

The person from Match that initially gave you the exercise link or email us at [email protected] and we will pick it up from there.

Who do I contact if I have questions?

Feel free to use Slack, Discord, Email, Linkedin or carrier pidgeon to get in touch with Alex or Sanjin from Match or emails us at [email protected]

Will this code be shown to the client?

Assume yes. Should also help us in reducing the time by clients evaluating profiles.

ahmedzaky030 / match-react-exercise Goto Github PK

match-react-exercise's Introduction