https://github.com/asbhogal/react-tech-commerce.js-site

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.
https://github.com/asbhogal/react-tech-commerce.js-site

api commerce-js commercejs ecommerce ecommerce-website javascript material-ui react react-hook-form react-router react-router-dom reactjs stripe stripe-payments typescript

Last synced: about 8 hours ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/asbhogal/react-tech-commerce.js-site
• Owner: asbhogal
• Created: 2023-01-02T20:10:23.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-02T01:31:47.000Z (about 1 year ago)
• Last Synced: 2024-01-02T17:26:28.306Z (about 1 year ago)
• Topics: api, commerce-js, commercejs, ecommerce, ecommerce-website, javascript, material-ui, react, react-hook-form, react-router, react-router-dom, reactjs, stripe, stripe-payments, typescript
• Language: TypeScript
• Homepage: https://litelife.vercel.app
• Size: 1.42 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


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:



















Links


 - Lite Life - Commerce.js Site

Disclaimer

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