E-Commerce Dashboard

This project was developed as a school project for the Advanced Programming course (3rd year, 1st semester).

A full-stack web application for product and category management. Products can be assigned to multiple categories; full CRUD operations are supported for both products and categories.

Tech Stack

Layer	Technology
Frontend	React 19, Vite 7, Tailwind CSS, Axios
Backend	Spring Boot 4.0, Java 17, Spring Data JPA
Database	MySQL

Project Architecture

flowchart LR
    subgraph Frontend [Frontend]
        React[React + Vite]
        Tailwind[Tailwind CSS]
    end
    
    subgraph Backend [Backend]
        SpringBoot[Spring Boot]
        JPA[Spring Data JPA]
    end
    
    subgraph DB [Database]
        MySQL[(MySQL)]
    end
    
    React -->|REST API| SpringBoot
    SpringBoot --> JPA
    JPA --> MySQL

Loading

Project Structure

project/
├── Frontend/          # React + Vite application
│   ├── src/
│   │   ├── App.jsx
│   │   └── services/api.js
│   └── package.json
├── Backend/           # Spring Boot REST API
│   └── src/main/java/com/example/project/
│       ├── Controller/
│       ├── Service/
│       ├── Repository/
│       ├── Entity/
│       └── Config/
└── README.md

Installation

Prerequisites

• Node.js 18+
• Java 17+
• Maven 3.6+
• MySQL 8+

1. Database

Create the ecommerce database in MySQL:

CREATE DATABASE ecommerce;

2. Backend Configuration

Copy Backend/src/main/resources/application.properties.example to application.properties and update with your database credentials:

cd Backend/src/main/resources
cp application.properties.example application.properties
# Edit application.properties and update spring.datasource.username and spring.datasource.password

3. Run Backend

cd Backend
mvn spring-boot:run

Backend runs at http://localhost:8080.

4. Run Frontend

cd Frontend
npm install
npm run dev

Frontend runs at http://localhost:5173.

API Summary

Products

Method	Endpoint	Description
GET	/products	List all products
GET	/products/{id}	Get product details
GET	/products/category/{categoryId}	Get products by category
POST	/products	Create new product
PUT	/products/{id}	Update product
DELETE	/products/delete/{id}	Delete product
POST	/products/{productId}/addCategory/{categoryId}	Add category to product
POST	/products/{productId}/removeCategory/{categoryId}	Remove category from product

Categories

Method	Endpoint	Description
GET	/categories	List all categories
GET	/categories/{id}	Get category details
GET	/categories/product/{productId}	Get categories for a product
POST	/categories	Create new category
PUT	/categories/{id}	Update category
DELETE	/categories/delete/{id}	Delete category

Features

• Product CRUD (create, read, update, delete)
• Category CRUD
• Product–Category many-to-many relationship
• Responsive dashboard UI (Tailwind CSS)
• REST API with CORS configuration

License

This project is for educational purposes.