The app deployed on Heroku.
The aim of this assignment is to build fast and simple web app for a clothing brand to use in their warehouse. To do their work efficiently, the warehouse workers need a fast and simple listing page per product category, where they can check simple product and availability information from a single UI.
- React
- Materiaul UI
The app uses two different APIs, after which information combined and displayed to table.
- Responsive UI
- Fast and simple navigation
- Quick filtering products by name, color and manufacturer
- Pagination
- Possibility to quickly add a new category by adding category name to array in
categories.js
file
GET /products/:category
- Fetches a list of products in a given category
- Request parameter category - the name of the category product
- Sample of the response
[
{
"id": "some1id",
"type": "category",
"name": "Some Name",
"color": [
"yellow",
"red"
],
"price": 200,
"manufacturer": "manufacturer"
},
{
"id": "some2id",
"type": "category",
"name": "Another Name",
"color": [
"black"
],
"price": 256,
"manufacturer": "manufacturer"
}
]
GET /availability/:manufacturer
- Fetches a list of availability of products by manufacturer
- Request parameter manufacturer - the name of the manufacturer
- Sample of the response
{
"code": 200,
"response": [
{
"id": "SOME1ID",
"DATAPAYLOAD": "<AVAILABILITY>\n <INSTOCKVALUE>INSTOCK</INSTOCKVALUE>\n</AVAILABILITY>"
},
{
"id": "SOME2ID",
"DATAPAYLOAD": "<AVAILABILITY>\n <INSTOCKVALUE>OUTOFSTOCK</INSTOCKVALUE>\n</AVAILABILITY>"
},
{
"id": "SOME3ID",
"DATAPAYLOAD": "<AVAILABILITY>\n <INSTOCKVALUE>LESSTHAN10</INSTOCKVALUE>\n</AVAILABILITY>"
}
}
-
One API gives some random error which we can reproduce by providing request header:
x-force-error-mode
. Result of the error is responding with status code 200, but instead of array of availability information response contains string"[]"
. Error was handled by repeating request several times. -
Both APIs have an internal cache of about 5 minutes. The app refreshes availability information 5 minutes after the request.
- Set up server side for retrieving information from APIs. It would remove all complex logic from the frontend.
Also with backend, I could compare eTag headers to see if information changed by sending
If-None-Match
header with the eTag for the current version of resources. - Use Redux for managing data.
- Run command
npm install
to install all dependencies - Run command
npm start
to start the app in development mode - Run command
npm test
to run unit tests