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.

React-Tech-Commerce.Js-Site

An eCommerce site by a fictional company which offers a range of technology products. A Stripe gateway is also configured (in test mode) directing them to the checkout and payment page and, upon sending a confirmation email upon completion.

This project is coded using HTML5, CSS3, SCSS, JavaScript (ES6), React and leverages Babel and Webpack for production build.

✔️ Features:

• eCommerce Site with several dummy products
• Allows multiple purchases of products
• Leverages Commerce.js and Stripe gateway for data storage and transactions
• Sends an email confirmation to the customer post-purchase
• Form validation with dynamic location fields (using react-hook-form)
• DOMPurify to sanitize HTML codes 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.

react-tech-commerce.js-site's Issues

wip/code-reformatting

Code will be reformatted for improved readability.

bug/cors-error

Resolve CORS error which is rendering the application inaccessible

fix/payment-form-data

Partial data is missing from the Address form when passed to the payment form, which shows front-end but not in the console.log. The following data is missing:

• ZipPostCode
• addressLine1
• cellNumber
• emailAddress
• firstName
• lastName
• propertyNumber

This issue will be updated.