DataScience's Frontend Code Test

This is an at-home exercise that we use as part of our standard interview process for frontend and full-stack developers.

Instructions

• Clone this repo
• Complete the exercise and submit either a zip of the solution or a link to a new repo
• You may use any resources, frameworks, libraries, etc and style the markup however you like.

Requirements

Using the provided JSON data representing a collection of meal recipes, create a micro frontend application that meets the following criteria:

• Display a list (or table) of recipes.
• Allow filtering of recipes by a single ingredient.
• Add checkboxes to allow selection of multiple recipes.
• Show an alphabetically ordered list of distinct ingredients for the selected recipes. This should update as recipes are selected / unselected.
• Persist the selections locally and regenerate the view on page refresh.
• In a README note any required setup to be able to run the app, such as modifying hosts file, etc.

Running

A live version of the site is available here

This app was bootstraped with create-react-app. Most of this is straight from the project's README. Make sure you have node version of 4.x or higher. First install all dependencies by running

npm install

Once install is completed you can use any of the following scripts.

npm start

Runs the app in development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will see the build errors and lint warnings in the console.

npm test

Runs the test watcher in an interactive mode. By default, runs tests related to files changes since the last commit.

To run all test press a when prompted

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.