/E-Commerce_Site_Fullstack

A full-stack e-commerce website that lets the user view, add, and remove items from a shopping cart and place an order

Primary LanguageJavaScript

Shop Online

A full-stack e-commerce website that lets the user view, add, and remove items from a shopping cart and place an order

Technologies Used

Dependency Version
@Babel/Core 7.8.7
@Babel/Plugin-Transform-React-JSX 7.8.3
Babel-Loader 8.0.6
Bootstrap 4.3.1
CORS 2.8.5
Dotenv 8.2.0
Express 4.17.1
Express-Session 1.17.0
FontAwesome 5.11.2
PG 7.18.2
PM2 4.2.3
React 16.13.0
React-DOM 16.13.0
React-Router-DOM 5.1.2
Session-File-Store 1.4.0
Webpack 4.42.0
Webpack-CLI 3.3.11

Live Demo

Try the application live on my portfolio website

Features

  • * Shopper can view the products for sale
  • * Shopper can view the details of any product by clicking on it
  • * Shopper can add a product to the shopping cart
  • * Shopper can remove a product from the shopping cart
  • * Shopper can view the cart summary of all the items added to see the total price
  • * Shopper can fill out a form with his/her pertinent information to place the order

Preview

Shop Online Preview

Development

System Requirements

Requirement Version
Nginx 1.10 or higher
Node 10 or higher
NPM 6 or higher
PM2 4 or higher
PostgreSQL 10 or higher
Ubuntu Server 18.04 LTS

Getting Started

  1. Clone the repository
git clone https://github.com/Keith-Tachibana/E-Commerce_Site_Fullstack.git
  1. Change directory to cloned folder
cd E-Commerce_Site_Fullstack/
  1. Install all dependencies with NPM
npm install
  1. Start PostgreSQL server
sudo service postgresql start
  1. Create the database
createdb shop
  1. Make a copy of .env.example and update it with your PostgreSQL credentials
cp .env.example .env
  1. Import the schema and dummy data
npm run db:import
  1. Edit your nginx default site configuration to reverse proxy the Express.js server
cd /etc/nginx/sites-available
sudo nano default
  • 8a. In the "server" code block, add this underneath the first location definition: 
    location /api {
  proxy_pass http://127.0.0.1:3001;
}
  • 8b. Save your changes (Ctrl + O) and exit (Ctrl + X)
  • 8c. Link your default site to the sites-enabled directory (if not already done): 
    sudo ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/default
  1. Start nginx
sudo service nginx start
  1. Transpile React components using Webpack
npm run build
  1. Start the Express.js server using the PM2 module
sudo pm2 --name "Shop Online" start "npm run start"
  1. Open your default web browser and navigate to http://localhost:3001/ to see the result!