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