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.
Data
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?
