weiranc / react-ecommerce

E-Commerce Application

E-Commerce application that allows users to purchase a list of products. Features implemented for this release focus on the client experience which enables customers to search, add to cart, and checkout. User authentication and product details with reviews, wishlist, and Q&A sections are potential features for future releases.

This application:

• Use a modern JS library/framework: React
• Include user interactions such as viewing product list and product details, searching products, adding or removing a product to/from a shopping cart, and initiating the checkout process
• Utilize MVC architectural pattern
• Integrate with a node server with CRUD operations
• Integrate with Firebase API and Stripe API
• Utilize MUI components, e.g., Grid, Drawer, AppBar, Box, Toolbar, Typography, InputBase, Badge, Card, Button, Rating, Modal, and List
• Create reusable product component and cart component

Table of Contents

1. Installation
2. Technologies
3. Component Details
4. UI Design
5. Realtime Database
6. Online Payment

Installation

1. Clone the repo

   git clone https://github.com/your_username/react-ecommerce.git

2. Install NPM packages

   npm install

3. Update .env file based on .env.example

4. Run webpack

   npm start

5. Connect to server

   npm run server
   

Technologies

• React
• TypeScript
• Node
• ExpressJS
• Webpack
• MUI
• Firebase
• Stripe
• Figma

Component Details

Filter products by category

This component will guide the customer through selecting a specific category.

View product details

General information about the product will be displayed at the top of the product list, including star rating, product category, product title, price, and product description.

Search product

Users are able to filter the products for any that contain text matching the search term. The filter continues to update as the user adds or removes characters.

Add product to cart

Users are able to add products to their carts.

Modify shopping cart

Users are able to modify the quantity of the products selected into the user's cart.

Checkout

Users are able to checkout by providing billing info.

UI Design

The web-based interface was designed using Figma.

Realtime Database

All the product and cart data are stored in realtime with the Firebase Realtime Database. Data is stored as JSON and synchronized to every connected client. All clients share one Realtime Database instance and automatically receive updates with the newest data.

Online Payment

This application integrates payment gateways to accept payment online. The payment connects to the Stripe payment API. After users enter detailed info into the checkout form, the application will send the detailed info to the Stripe API.