Giter VIP home page Giter VIP logo

adichallenge's Introduction

Product reviews challenge

Set up instructions

  1. git clone this repository onto your machine git clone https://github.com/Coops023/adichallenge.git
  2. ensure you have docker installed and run docker-compose up in root directory
  3. cd challenge to change diretory to the react-app.
  4. npm install to install dependecies.
  5. npm run start to start the react-app This will let you use the app and the api locally.

Main challenges

CORS Error's when making request's to API

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.

Duplicate data

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.

What i would improve with more time

Design

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.

Reviews

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.

adichallenge's People

Contributors

coops023 avatar pedrofraca avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.