Skip to content

An eCommerce site which offers a range of technology products using Commerce.js (Headless CMS). The site allows customers to browse the items, switch between cart, checkout and home and add single or multiple products. A Stripe gateway is also configured (in test mode), directing them to the checkout and payment page, styled using Material UI.

Notifications You must be signed in to change notification settings

asbhogal/React-Tech-Commerce.Js-Site

Repository files navigation

Lite Life - React Tech Commerce.js Site

An eCommerce site which offers a range of high-end technology products using Commerce.js Headless CMS. A Stripe gateway is also configured (in test mode) directing customers to the checkout and payment page with a mock transaction flow. This has been built using TypeScript, React, React Hook Form, Material UI, Babel, PostCSS & Webpack and deployed via Vercel.

Features:

  • eCommerce Site with several dummy products
  • Allows multiple purchases of products
  • Ability to update cart (increase/decrease/remove items and empty cart)
  • Leverages Commerce.js and Stripe gateway for data storage and transactions
  • Form validation with dynamic location/region fields (using React Hook Form)
  • DOMPurify to sanitize HTML strings from Commerce.js
  • Material UI used to render stylized React components
  • Fully responsive
  • Optimised for the web

Please note that the payment system is configured to sandbox mode (ie. no payments will be taken from an active card. If you wish to use dummy credit card details instead, Stripe have provided some here)

Stacks & Tools Used:

TypeScript logo React logo Babel logo MaterialUI logo postcss logo React Hook Form logo Webpack logo

Links

Disclaimer

  • The name 'Lite Life' used herein is solely fictional and any representation to an existing company, in part or whole, is entirely coincidental.

About

An eCommerce site which offers a range of technology products using Commerce.js (Headless CMS). The site allows customers to browse the items, switch between cart, checkout and home and add single or multiple products. A Stripe gateway is also configured (in test mode), directing them to the checkout and payment page, styled using Material UI.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published