The main goal of this exercise is for you to produce a web application, demonstrating your understanding of the core elements in frontend engineering. We are specifically interested in your ability to write clean, well structured, testable JavaScript, as well as your ability to create a pleasant and error free user experience.
Utilising the current setup built with NextJs/React, TypeScript and Jest build a listing page to display product cards on and a singular product view page that can be accessed via the listing page / or a direct url.
Product Listing Page Requirments:
- Using the provided API fetch the products.
- Display the two products as per Figma designs:
- Style product cards appropriately including before & after price.
- Page should be responsive
Product Display Page:
- Using the provided api fetch the relevant product based on id.
- Display the product imagery as per Figma designs.
- Page should be responsive
The designs for both Product Listing and Product Display pages are in figma and be previewed here: Figma Designs Try and replicate the design as best as possible the images are placeholder and we would like you to utilize the relevant media object within the api response to display within the grid.
Your application must be web based and must run in a browser via a URL you provide as part of the submission to us.
Please also send us your code via a publicly accessible git repository, GitHub or similar is fine, and deploy your application to an online environment so that we can access it and test your application.
We look forward to receiving your application!
- Experiment with product tags and product fits to improve the product card
- Implement tests for any components or services that you have built
- Improve accessibility of the user journey by enabling keyboard navigation
- Improve the overall aesthetic of the user journey with smooth transitions or micro-interactions
yarn
yarn dev
yarn test
This application comes with two api endpoints which can be viewed within /src/pages/api/products
GET /api/products/
curl -i -H 'Accept: application/json' http://127.0.0.1:3000/api/products
HTTP/1.1 200 OK
Date: Thu, 17 Jun 2021 14:27:03 GMT
Status: 200 OK
Connection: keep-alive
Content-Type: application/json; charset=utf-8
Content-Length: 36
[{ product }, { product }]
GET /api/products/[id]
curl -i -H 'Accept: application/json' http://127.0.0.1:3000/api/products/1
HTTP/1.1 200 OK
Date: Thu, 17 Jun 2021 14:32:23 GMT
Status: 200 OK
Connection: keep-alive
Content-Type: application/json; charset=utf-8
Content-Length: 36
{ product }