Hi!
We would like you to complete a brief code challenge in order for us to get an understanding of your approach to UI development.
Your task will be to build the page layout shown in the design PDF's provided.
- Fork this repo (this contains all assets required, as well as a data.json file to serve as a mock API)
- Generate a new React application (Create React App is fine for time restraints)
- Using Storybook (or similar), build and style the card component to replicate the design as accurately as possible
- The card must be able to accept any one of the card data objects provided in data.json
- Include functionality for a user to provide a rating using the stars (Follow Task 1 provided below)
- Once complete, upload your project to your Github/Bitbucket account and provide us with a link to review. Please include in your README.md any necessary instructions to run your project locally
The most important aspects that we will be reviewing are your attention to detail and how you manage data. This will include your ability to replicate the design.
Please refrain from using any third-party CSS libraries such as Boostrap or Material Design.
If you have any questions, please feel free to contact us!
We understand time restraints - so the following are completely optional
- Unit tests
- Use of TypeScript
- Accessibility checks (and variation on design to meet standards)
- Display all the card data at once, horizontally, wrapping the row as needed
- Update the average rating when the user provides a rating (Follow Task 2 provided below)
Task 1
As a: End user
I want to: Be able to provide a rating of the item by interacting with the stars
So I: Can show other users how much I liked the item
Task 2
As a: End user
I want to: Be able to see the the average rating accurately update when I provide my rating (The rating must display to 1 decimal place (4.2))
So I: Can see the most up to date rating