- git clone this repository onto your machine
git clone https://github.com/Coops023/adichallenge.git
- ensure you have docker installed and run
docker-compose up
in root directory cd challenge
to change diretory to the react-app.npm install
to install dependecies.npm run start
to start the react-app This will let you use the app and the api locally.
My initial solution to these errors was to use a google chrome extension called allow CORS. However after coming to the conclusion that these errors maybe intentional, i realised a google chrome extension is not a suitable solution. This is because when running the app on other browsers the error's would still show. So my next solution was to use the http-proxy-middleware package. This package allowed me to create a middleware that proxies both API end points, and therefor resulted in no CORS error's.
When making a GET request to the /product
API endpoint, data sent back contained duplicates. I solved this by passing the data received through a variable called uniqueItems
on line 29 of ProductList.jsx
.
After referring to the mdn documentation i found that Map
maintains key uniqueness, meaning that there can be no more than one key-value pair with the same key. Airing on the side of caution i chose this approach rather than to use the API endpoint delete
/product/{id}
to delete duplicates. I believe deleting data this way in a real world application could result in unwanted data loss.
I chose to try to mimic the design of the adidas webpage in terms of colour's and spacing. Though due to time restraints this resulted in a fairly basic design as i took a functionality first approach to the project. Given more time i would add more content suitable for an eCommerce platform and replace the page pagination for a product carosel.
Currently when making a review the newest review gets pushed to the last page of the reviews. given more time i would fix this by either using the Array.reverse()
method or another potential solution.