/react-shopping-cart

🛍️ Simple ecommerce cart application built with Typescript and React

Primary LanguageTypeScript

🛍️ Simple ecommerce cart application CircleCI

Basic Overview - Live Demo

✈️ Follow Jeremy Akeze

This simple shopping cart prototype shows how React with Typescript, React hooks, react Context and Styled Components can be used to build a friendly user experience with instant visual updates and scaleable code in ecommerce applications.

Features

  • Add and remove products from the floating cart using Context Api
  • Filter products by available sizes using Context Api
  • Responsive design

Build/Run

Requirements

  • Node.js
  • NPM
/* First, Install the needed packages */
npm install

/* Then start the React app */
npm start

/* To run the tests */
npm run test

Copyright and license

The MIT License (MIT). Please see License File for more information.



A little project by Jefferson Ribeiro

How to run API and UI Tests

Both API and UI tests are in the Cypress folder.

  • npm ci (root folder)
  • cd Tests
  • npm ci
  • npm run start (run server in first bash terminal on VS code)
  • npx cypress open (using Cypress GUI) in the second bash terminal on VS Code, npx cypressstay in Tests folder, Choose E2E Testing, Electron, and then spec to run
  • npx cypress run (run both API and UI tests on CLI)
  • npm run cy:api (just to run API)

How to run docker command

Make sure Docker Desktop is up-running if you have a Windows machine In the root folder, enter below command: docker-compose -f Tests/docker-compose.yml up

How to run GitHub Action

There is a workflow file for API in .github folder Go to Repo, click Actions, click "Cypress Api Testing Regression", select Run workflow on right, keep Main branch, Click Run workflow.