E-Commerce with React Node Mysql
Tags: react, node, mysql
Published: 2024-03-15 04:45:32

# Project Title
E-commerce Project

GitHub : [E-commerce Project](https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql)
## Description
This project is an E-commerce platform designed to provide users with a convenient and seamless shopping experience. It aims to offer a wide range of products, smooth checkout processes, and efficient management of orders.

## Technologies Used
    Frontend:
        HTML, CSS, JavaScript
        React.js (frontend library)
        Bootstrap (for basic CSS)
    Backend:
        Node.js
        Express.js
        MYSql (database)
    Authentication:
        JSON Web Tokens (JWT)
    Other tools:
        Git (for version control)

## Getting Started
Installation

## Deployed Application:

Deployed on Netlify & Render..  

[E-commerce](https://ecommerce-zee.netlify.app/)

Please Note: Application will take some time to boot up 

### Clone the repository:

    git clone https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql.git

### Server Setup: 

    cd server

    npm install

    npm run start

    npm run debug  // if you want to start node js in debug mode


- make sure you have correct env file configured

- If facing any issue in installing packages try & delete package-lock.json filre & try again

### Client Setup: 

    cd client/

    npm install

    npm run start

- make sure you have correct env file configured

- If facing any issue in installing packages try & delete package-lock.json filre & try again


### Database  Setup:

We are using Mysql in this project.

In database folder we have createTables.sql use this file to create table in MySQL.

If facing any issue with DB connection check connection.js for configuration 


### Application Screens

#### Login Page

<img width="334" alt="Login Page" src="https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql/assets/60847613/8fcc4bae-eebb-49db-be70-25e79dcc0767">

#### Register Page

<img width="299" alt="Register Page" src="https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql/assets/60847613/082d5432-5cdd-4a25-a2d4-e5f50a2e3f29">

#### Admin Add new Products

<img width="1344" alt="Add Product   Product List" src="https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql/assets/60847613/88eb3f6a-d641-40d6-a039-00d864a75dfa">

#### Order Details & Product in Order

<img width="1342" alt="Order Details + Product in Order" src="https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql/assets/60847613/eb84e16f-3f72-4adc-b7d7-403510156789">

#### Order List Page

<img width="1351" alt="Order List Page" src="https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql/assets/60847613/52ca11fe-86dc-457f-8447-571b2b48c615">

#### Past Orders

<img width="1344" alt="Update Product   Past Order  " src="https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql/assets/60847613/685b1bb5-ba2b-4472-ae61-1680b4c58081">

#### Customer Past Orders

<img width="1352" alt="Customer Past Orders" src="https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql/assets/60847613/76480874-98c6-44f3-a57e-d74b75e0ba51">

#### Customer Product List Page 

<img width="1335" alt="Product List Page" src="https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql/assets/60847613/c6c3391f-fb88-4724-8281-5f6f6aec6080">

#### Shopping Cart

<img width="1338" alt="Shopping Cart   Buy" src="https://github.com/ZeeshanAli-0704/E-Commerce-react-node-mysql/assets/60847613/df4305e7-f2b7-4ee6-985a-30debb74ab4c">