eCommerce - ReactJS is a project that uses an API from ChecIO called commerce.js that helps to create in an easy way your eCommerce Store and Stripe for Payments activities.

The idea of this mini project is just to boost my abilities with React.js and Material UI.

Features

• Fetch all products created at the Dashboard from commerce.js API.
• Including cards for each product using Grid from Material UI.
• Button to add the product to the Cart, also update automatically the qty of the items at the Cart Icon.

• Cart
  • Add/Remove Items
  • Button to Increase/Decrease Qty
  • Button to clean the Cart
  • Button to proceed to Address Form Payment Form
• Checkout Form
  • Fetch all Countries/States/Subdivisions and Shipping Cost from commerce.js API pre configured at the Dashboard
  • Using Stripe API to create fake credit card transactions as Method payment
  • Review page to show the Order Reference
  • An e-mail template that is send if the Order is completed successfully from commerce.js API with all the order details

Live Demo

Access:

eCommerce - ReactJS

Summary

• Technology
  • Application
• How to run
  • Web

🚀 Technology

💻 Application

The application was developed with Javascript using the framework ReactJS and Material-UI for design proposes. Also, the main ideia here is to use the Commerce.JS which allows having the flexibility to build better shopping experiences. Their Dashboard has all the facilities to create Products in an easy way and manage all the orders. Finally, at the Checkout Form, I'm using React Hook Form for holding all the customer information such as contact/address and Stripe to create fake credit card transactions as the method of payment.

---

💥 How to run

• Prerequisites

  • It's necessary to have Node.js 14v+ installed on the computer
  • It's necessary to have Git installed and configured on the computer
  • Also, it's necessary to have a package manager either NPM or Yarn.

Clone the repository:

  $ git clone https://github.com/paulo-carvalho93/ecommerce_reactjs.git

You need to set the API keys from Commerce.JS and Stripe. Just make your account at both APIs and copy the public key from Sandbox of each one.

After that, just create a .env file and input the following environment variables inside:

  $ REACT_APP_CHEC_PUBLIC_KEY=YOUR_KEY
  $ REACT_APP_STRIPE_PUBLIC_KEY=YOUR_KEY

💻 Web

  # API
  $ cd ecommerce_reactjs
  # Installing project dependencies.
  $ yarn # or npm install

  # Start Web Project
  $ yarn start # or npm start