take-home-exercise: A JavaScript repository from jvgomg

This is the technical task for the front-end / full-stack position at Stepsize. Please don't spend more than 3 hours on this task, do as much as you can in the allocated time. Email me at matt@stepsize.com if you have any questions, comments or feedback.

The goal of this task is to implement an SPA which displays a set of data. The data is served by a mock server (instructions on how to get it running later in the document).

Data to display

The data returned by the mock server can be found in the data.json file. It is a JSON-formatted JS object consisting of mock GitHub pull request objects. Each of these pull requests contain the following fields:

Field	Type	Description
title	`string`	Title of the pull request
body	`string`	Body of the pull request
tags	`Array<string>`	Tags of the pull request
timestamp	`Date`	Timestamp of the pull request
author	`{ avatarUrl: string; username: string }`	Author's username & url to avatar
relevancy	`number`	Relevancy score of this PR to the user's search

Requirements

You should create an SPA that does the following:

On load, the results should not be displayed. Instead you should display a login page with an email and password field, and a "login" button. There is no need to implement any kind of validation on the email and password.
When clicking on this button, the app should send a POST request to http://localhost:4000/data and with the username and password in the body in the JSON format. Make sure that the mock server is running first, see the set-up instructions further down.
The server doesn't do any kind of verification on the payload, and always returns the results.
After the user has submitted their username and password, the app should display the results returned by the server, ranking the results by relevancy (from highest relevancy to lowest relevancy).
Once results are displayed, users should be able to rank the results by relevancy, or by timestamp. The default should be by relevancy.

Design

I've pushed a screenshot of what the results screen should look like (see results-screen.png). Please try to reproduce that screenshot (even though i'm aware it's still a bit rough around the edges). For the login screen, use your creativity to implement something which is coherent with the design of the results screen.

Set-up instructions

Clone this repository
Run npm install (or use yarn if you are familiar with it) to install dependencies
To run the mock server, run npm run boot-server (or yarn boot-server). This will boot a mock server at the following URL: http://localhost:4000 (I am running Node version 8.9.4 locally in case that's useful information).

Hand-in instructions

Send in a zip file with all the code required to run your solution
Please provide all instructions to be able to run your solution. Note that your solution will be tested on MacOS or Linux

Other instructions