A fictional client, Lonely Hearts, wants to create a dating service for its customers. Your job is to create a page that can query the Lonely Hearts database and display a list of potential matches. This exercise is expected to take around 3-5 hours of coding, but you are free to use as much time as you need.


A sample page has been provided for you. Run npm install followed by npm start to display the current page. Your goal is to populate the #searchResults div with a list of potential matches. These matches can then be filtered through the #userPreferences pane. Each match lists the candidate's photo, name, and age. Clicking on a match's contact button should display a dialog listing the match's phone number, cell number, and e-mail.
A web API is available to retrieve raw user information. Sample API usage can be found at Random User API. This raw information will need to be transformed to match the display requirements below.
A single match can be obtained via: https://randomuser.me/api/?nat=US
This API's data can be used to retrieve all relevant match details.
These results should be displayed, unfiltered, to the user. The user can then filter these returned results by both gender and age. If you are applying for a role involving a specific framework, please implement your solution for the search results using that framework. You are free to refactor the existing filtering controls to use this framework as well, but are not required to do so.
PS: Please take some time and write some unit tests. You can use Jest which is preinstalled, triggered by npm test, or you can replace with your favorite unit test library.

Further Instructions

A basic package.json file has been provided, which you are free to modify or completely overwrite. If using React, we've provided a more complete version with package.react.json. This file will allow you to use npm install to scaffold the application and npm start to launch the application. If you use your own build pipeline, please include documentation on how your application should be run and/or tested.

This project requires Node 6.11+.

NOTE: Consider the scaffolding provided as a rough approximation of what the client is looking for. Feel free to modify (or completely rewrite) the markup or functionality in whatever ways you see fit.
Completed Project

User Stories