Exercise

The goal of this exercise is to create a simple page that displays a CSV file as a visual database.

You should cover:

• Fetching the CSV file.
• Parsing the CSV file into a data structure.
• Rendering the data to match the provided Figma mockup.
• Searching the database across all device sizes.
• Delivering the final exercise as a Git repo with clear installation instructions.

Recommended time:

• While we will not be tracking your time, we've designed this exercise to take approximately 2 hours and do not expect you to work beyond that timeframe.

Resources

Design

You'll need to be logged in to Figma in order to inspect the mockup.

https://www.figma.com/file/IMBFNjGyWDN7mZIB0Ez4Bc

Data

https://gist.githubusercontent.com/simonlast/d5a86ba0c82e1b0d9f6e3d2581b95755/raw/f608b9b896dd3339df13dae317998d5f24c00a50/edu-scorecard.csv

Fonts

We're keeping this simple with a system font stack:

Arial, Helvetica, sans-serif

Evaluation Criteria

These are the exact criteria we'll use to evaluate your exercise.

Design

• Does the page match the provided design?
• Does the typography match the design?
• Does the layout match the design?
• Does the page look good and work well across all device sizes?
• Is there a high level of craft?

Functionality

• Does typing a search query accurately limit results to items matching the query?

Engineering (CSS)

• Does your CSS render well in Chrome?
• Do you write modern CSS?
• Is your CSS scalable?

Engineering (HTML)

• Is your code semantic and easy to read?
• Is your code accessible?

Engineering (JS/TS)

• Your exercise is provided as a link to a Git repository or zipped folder.
• It is easy to download your project, install dependencies, and run the page locally.
• Can you successfully parse a CSV into usable data and render a design with it?
• Is the chosen method of implementation appropriate for the design?
• Is your code written in a clean and scalable way?
• Are you able to articulate your engineering decisions?