This project is an e-commerce application built using the MySql Express React Node stack with MySQL for relational database management. It supports user authentication, product management, and order placement, with plans to integrate PayPal for payments in the future.

Features

• Authentication: Secure user login and registration.
• Add to Cart: Users can add products to their cart.
• Place Order: Users can place orders for products in their cart.
• Context API: Efficient state management across the application.
• Relational Database: Utilizes MySQL for handling relationships between data.

Future Features

• PayPal Payment Integration: Planned for future implementation to allow users to make payments via PayPal.

Tech Stack

• Frontend: React, Context API, Material-UI
• Backend: Node.js, Express, MySQL
• Authentication: JWT (JSON Web Token)
• Database: MySQL

Installation

Prerequisites

• Node.js (v14 or higher)
• MySQL
• Firebase account for any future image storage needs (if applicable)

Setup

1. Clone the repository:

   git clone https://github.com/DavidBatoDev/ecommerce-mysql.git
   cd ecom

2. Install dependencies:

   • Frontend:

     cd frontend
     npm install

   • Backend:

     cd backend
     npm install

3. Set up environment variables:

   Create a .env file in the backend directory and add the following:

   PORT=5000
   DB_HOST=your_mysql_host
   DB_USER=your_mysql_user
   DB_PASSWORD=your_mysql_password
   DB_NAME=your_database_name
   JWT_SECRET=your_jwt_secret

4. Run the MySQL Database:

   Ensure your MySQL server is running, and create the necessary database and tables.

5. Run the application:

   • Backend:

     cd backend
     npm start

   • Frontend:

     cd frontend
     npm start

6. Access the application:

   Open your browser and navigate to http://localhost:3000.

Dependencies

Frontend

"dependencies": {
  "@emotion/react": "^11.11.1",
  "@emotion/styled": "^11.11.0",
  "@mui/icons-material": "^5.14.19",
  "@mui/material": "^5.14.20",
  "axios": "^1.7.4",
  "firebase": "^10.7.1",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-icons": "^5.3.0",
  "react-router-dom": "^6.20.1"
}

Backend

"dependencies": {
  "bcryptjs": "^2.4.3",
  "cors": "^2.8.5",
  "dotenv": "^16.4.5",
  "express": "^4.19.2",
  "jsonwebtoken": "^9.0.2",
  "mysql": "^2.18.1",
  "mysql2": "^3.11.0"
}

In Multiple Screens:

Authentication Page:

Home Page:

Products View Page:

Cart View Page:

Checkout Page:

Profile's Page:

Order's Component:

Order Details Page: