E Commerce

screenshot of E Commerce
nextjs
react
material-ui

A simple e-Commerce site using NextJS (React) in the frontend and Commerce.js as a third party API for the backend include features such as product list and details, shopping cart, checking out, and order confirmation. Link to live demo of this project is down below. Reference: NextJS and Commerc...

Overview:

The E-Commerce Website Project is a demonstration of using NextJS (React) in the frontend and Commerce.js as a third-party API for the backend to create an e-commerce site. The project includes features such as product listing and details, shopping cart, checkout, and order confirmation. The goal of the project is to showcase the understanding of using big data and a heavy backend in the context of e-commerce transactions online.

Features:

  • Product List & Details: The homepage displays all the products available for sale, and users can click on a product to view more details about it, including price, quantity, and stock availability.
  • Shopping Cart: Users can add products to their cart from the product details page. They can then edit the quantity of products in the cart or remove items if needed. The cart can be accessed by clicking on the cart button, which displays the number of items in the cart.
  • Checkout Form: Once users have added all the desired items to their cart, they can proceed to the checkout process. The checkout form consists of three steps: customer information, shipping information, and payment information. The user can fill out the form and proceed to the next step.
  • Order Confirmation: After filling out the checkout form and confirming the order, the user is redirected to an order confirmation page. This page summarizes the order details, including an order number.

Summary:

The E-Commerce Website Project is a demonstration project that showcases the use of NextJS and Commerce.js to create an e-commerce website. It includes features such as product listing, shopping cart, checkout, and order confirmation. The project aims to demonstrate the understanding of building an e-commerce site with a focus on the frontend using a React framework and utilizing a third-party API for the backend.

nextjs
Next.js

Next.js is a React-based web framework that enables server-side rendering, static site generation, and other powerful features for building modern web applications.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.

ecommerce
Ecommerce

Ecommerce websites sell products or services to customers through an online storefront. These websites typically include features such as product listings, shopping carts, payment processing, and order management tools.