Simple shopping cart prototype which shows how React components and Redux can be used to build a friendly user experience with instant visual updates and scalable code in e-commerce applications.

Overview

This simple shopping cart prototype shows how React components and Redux 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
  • Sort products by highest to lowest and lowest to highest price
  • Filter products by available sizes
  • Products persist in floating cart after page reloads
  • Unit tests, integration tests and e2e testing
  • Responsive design

Build/Run

Requirements

  • NODE
  • NPM
/* First, Install the needed packages */
npm install

/* Next make a build of react app */
npm run build

/* Then start both Node and React */
npm start

/* To run the tests */
npm run test

/* Running e2e tests */
npm run wdio

About tests

  • Unit tests
    • All components have at least a basic smoke test
  • Integration tests
    • Fetch product and add to cart properly
  • e2e
    • Webdriverio - Add and remove product from cart
You might also like...
Readme.md generator is a React application that takes basic information about the user's project as an input and generates a README file which the user can upload directly in their project's repository.
Readme.md generator is a React application that takes basic information about the user's project as an input and generates a README file which the user can upload directly in their project's repository.

An application that takes basic information about the user's project as an input and generates a README.md file which the user can upload directly in their project's repository.

Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates.
Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates.

Mini-React Implement Mini-React in 400 lines of code, a minimal model with asynchronous interruptible updates. Demos A simple running screenshot: Intr

Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications

Artemis UI About Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications. Docs and De

Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability with supporting N* filters.
Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability with supporting N* filters.

Shop Price Checker Shopping and E-commerce: A client-side utility project for a Shop product page. Calculate the order price, and check availability w

A full E-Commerce Full Stack Amazon Clone which built using ReactJS. You can register, sign in and shop!

Amazon Clone with ReactJS In this Amazon Clone application you can register on the site, log in with your account, shop, pay for the products and see

A demo app of the Hacker News website clone, which shows Next.js 12's experimental React Server Components support

A demo app of the Hacker News website clone, which shows Next.js 12's experimental React Server Components support

A simple react app built with typescript. It updates daily tasks

React task updater A simple react typescript app that shows available tasks to be completed. The project was boostrapped with Create React App. Availa

A Spotify Clone which built with ReactJS. 3rd party API integration, user authentication, spotify API, responsive design, material-ui, react context api are used to built it.

Spotify Clone with ReactJS In this Spotify Clone application you can log in to the application with your spotify account and see your own playlist. Sp

A Disney+ Clone which build with ReactJS & Redux. You can sign in with your Google Account.

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Owner
Ivan Kuznietsov
Ivan Kuznietsov
Jagrook is a QR code scanning Web app which aims to bring transparency to consumer’s shopping cart

JAGROOK Purchase Smart, Save Time, Save the World Jagrook is a QR code scanning Web app which aims to bring transparency to consumer’s shopping cart.

null 6 Nov 17, 2022
Sockets-remix-thread-prototype - Prototype of real-time comments and a proposal of how to make it production-ready

Real-time comments prototype Simple demonstration of real-time commenting. Insta

Tiger Abrodi 3 Jan 16, 2022
Amazon Clone Application using React JS, Context API, Firebase and Stripe with full E-Commerce Functionalities like adding to cart feature, user authorization, payment and many more.

Amazon Clone is the Fully functional Real custom made Web application that covers and entire E-commerece functionality from designing, User Authentication till Payments build using React JS, Firebase and Stripe.

Sadiq Khan 18 Aug 9, 2022
🛒 A simple shopping cart built with reactjs and typescript

React Shopping Cart A simple shopping cart built with reactjs and typescript #

evan 1 Nov 23, 2021
Simple React Shopping Cart 🍅 🍆 🍉 🍒 🍊 😆

Shopping card react ?? ?? ?? ?? ?? ?? ?? Package in Project: react-router-dom React Icon Feature SPA "with react router dom" info page for products st

Mohammad 11 Dec 14, 2022
Ecommerce shopping cart to show my products By React.js

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Abdallah Elmesery 1 Nov 26, 2021
Shopping cart app powered with React + TypeScript

Shopping Cart Emulating an e-commerce app flow Table of contents Overview Features Technologies Contribute Overview This project was based in React Pr

Irving Juárez 7 Dec 4, 2022
🇬🇧 ᴇɴ : Advanced shopping cart system [React (context api) + Framer-motion]

???? ᴇɴ : Advanced shopping cart system [React (context api) + Framer-motion] ???? ꜰʀ : Système de panier avancé [React (api de contexte) + Framer-motion]

Robin BLQT 8 Aug 24, 2022
🛒 Challenge: Creating a shopping cart hook with ReactJS

?? Desafio: Criando um hook de carrinho de compras ?? Ignite | Trilha ReactJS Tecnologias | Sobre o Desafio | Como rodar | Licença demo.mp4 ?? Tecnolo

Danilo Gonçalves 4 Apr 6, 2022
E-Commerce prototype made with HTML5, CSS3, JavaScript, and React.js.

E-Commerce prototype made with HTML5, CSS3, JavaScript, and React.js.

Francisco Ciccone 2 Mar 5, 2022