This project was created using React and CSS.
Below is a picture of the designs I created in Figma to improve the visual design of the application.
Given more time there is A LOT I would improve. This is not a product I would ship as is but found this to be a good stopping point for the coding challenge.
Here are some of the things I would improve given more time:
- Fix a few bugs found within the written code.
- Pay closer attention to accessibility and ensure the widget is screen-reader friendly.
- Follow my designs even closer (i.e. including the help text, styling the drop-down menu, etc.)
- Use SCSS variables within the CSS file so the UI can remain scalable.
- Create design tokens.
- Create options lists by dynamically pulling the options from the JSON file rather than hardcoding lists.
- Parse through the JSON data using another filter or map instead of explicitly looking at the first indexed item ([0]).
- Remove the "Calculate price" button and have the application listen for all fields to be filled before calculating the price.