sowmyadsl / ecommerce-react

A simple react-redux application that lets user add, update and delete a product from the cart

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Adidas Checkout App

Adidas checkout app is a simple web app that lets customers add a product to the cart. This application demonstrates the core functionality of an e-commerce web shop. Customers can access a product page, select sizes, add items to their cart and check the order summary with total value.

Adidas Checkout Cart Demo

User Stories

  • User can access a product page, and select size and quantity.
  • User can add a product to the cart and go to the cart page.
  • In the cart page, user can update the quantity of a selected product and view the order summary with total value.
  • User can update and delete a product from the cart.

Dependencies

  • git
  • Node.js
  • Enable CORS extension on chrome to view the app.

Libraries used

  • React 16
  • React Hooks
  • Webpack 4
  • Redux
  • AWS Amplify

Local Usage

$ git clone https://github.com/sowmyadsl/ecommerce-cart-app.git
$ cd ecommerce-cart-app
$ npm install

Build

$ npm run start (development)
$ npm run build (production)

Deploy

  • Sign into AWS, go into AWS management console.
  • Search for AWS amplify under services.
  • Click on deploy and connect git repository.
  • Create a buildspec.yml to the root directory of the app.
  • Hit save and deploy.
  • View the deployed app live on https://master.d20g3qmq89cufa.amplifyapp.com/.

Things not Covered

  • POST /baskets was returning a 403 forbidden error in both dev/prod environments from the server, So I didn't use the REAL api to build the front end for the cart but utilized the product API for obtaining SKUs and available quantities.

Things to do

  • Add Unit tests and validations to all the components.
  • Hook Real API to get basket ID once a product gets added in the cart and then use basket ID and authorization to maintain cart functionality.
  • Add Media Queries to make the pages responsive to various browser requirements.
  • Add confirmation messages and error messages as required.

License

This software is licensed under MIT license.

Copyright (c) 2020 Sowmya Dinavahi

About

A simple react-redux application that lets user add, update and delete a product from the cart


Languages

Language:JavaScript 81.2%Language:CSS 18.2%Language:HTML 0.6%