Skip to content
This repository has been archived by the owner on Apr 10, 2022. It is now read-only.

Latest commit

 

History

History
27 lines (19 loc) · 4.04 KB

CODING_EXERCISE.md

File metadata and controls

27 lines (19 loc) · 4.04 KB
Raw

React Coding Exercise

This project contains a newly bootstrapped application created with create-react-app. You can find the original README generated by CRA in README_CRA.md. You can run the app by running yarn start. It supports most ES6 syntax, comes with bootstrap, and will live-reload while developing.

We recommend you use Node version 6.14.4

We have added a little bit of code to the App component to show a sample call to ProPublica Congress API. You can review their documentation for more info on the structure of congressperson data.

Your Assignment

Implement a simple list view which contains for each congressperson: a full name, social media links, party, their district/state, and the next year in which they are up for election. Additionally, you should implement the following functionality:

  • An input for searching for Senators or Representatives by name.
  • UI for filtering congresspeople by various characteristics (e.g. party, year of next election, gender, etc)
  • Simple client-side pagination (optional: make the # of results per page configurable)
  • A way to change the parameters that are being passed to the API -- i.e. chamber (house or senate) and congressional session (the default should be the current, 115), and reload the list with the new data.
  • Show some sort of loading UI while data is being fetched from the API.
  • Some of the data points are ranges or percentages, like total_votes or votes_with_party_percentage. Create a slider UI that allows the user to drag along a scale to hide/show congresspeople who satisfy the criteria.
  • We are limited to only 5000 API calls a day, and we don't expect the API to change frequently. Can we cache some of the data on the device so that we don't need to make redundant calls to the API for data we have fetched previously?
  • The API provides an office address for each congressperson. Create a detail view (how this is implemented is up to you) which uses the a mapping API like Google Maps to show a map with a pin for the office location when the user clicks on a specific list item.
  • The API provides an api_url for each congressperson. Create a detail view (how this is implemented is up to you) which calls the detailed API for that congressperson and shows additional information on their roles/committee membership when the user clicks on a specific list item.
  • Ideally, we'd be able to share a particular slice of the data with others. Implement some routing mechanism so that each search property is encoded in the URL, such that we can refresh the page and still see the same result.
  • CRA comes packaged with the jest testing library. It also sets up a sample test file in App.test.js and you can run the tests using yarn test. You can find additional info on testing in CRA here. Add new tests for the components you setup that verify that they work the way we'd like. We've setup some code to help stub out the ProPublica API request so that we don't actually hit the API when running tests, but you may need to update it so that your components receive the data they are expecting.

You may use Google and Stack Overflow freely, but please do not directly copy large chunks of code from the web. You may also use any open source libraries (remember to use yarn add <project_name> instead of npm install --save <project_name>) which you think are helpful, but keep in mind that we want to see how you design the app, so try not to use libraries which greatly simplify core functionalities we want you to implement.

Finally, feel free to organize and refactor the code, including any of the boilerplate we've provided, however you see fit. We're intentionally starting with a very unopinionated skeleton app because we want to leave this up to you.