🛒 Full Stack E-Commerce Application

A modern Full Stack E-Commerce Web Application built using React.js, Spring Boot, Spring Security, JWT, PostgreSQL, REST APIs, and Tailwind CSS.

The project follows a real-world full-stack architecture with a separate React frontend and Spring Boot backend. It includes user authentication, product management, shopping cart, order management, admin functionality, and secure backend APIs.

🚧 Project Status: Actively in development — Stripe payment integration and some advanced features are in progress.

🌟 Features

👤 User Features

User Registration
User Login / Logout
JWT-based Authentication
Role-based Authorization
User Profile
Browse Products
Search Products
Product Details
Add Products to Cart
Update Cart Quantity
Remove Products from Cart
Checkout
Order Placement
Order History
View Order Details
Forgot Password / Reset Password

🛍️ Product Management

Product Listing
Product Details
Product Categories
Product Search
Product Management APIs
Product Image Handling
Admin Product Management

🛒 Shopping Cart

Add products to cart
Update product quantity
Remove products from cart
Calculate cart totals
Checkout workflow

📦 Order Management

Place orders
View order history
View individual order details
Order status management
Admin order management

🔐 Security

Spring Security
JWT Authentication
Role-Based Access Control
Protected REST APIs
Admin-only endpoints
Secure password handling
Protected frontend routes

👨‍💼 Admin Features

Admin Dashboard
Manage Products
Manage Users
Manage Orders
Update User Roles
Protected Admin Routes

💳 Payment

Stripe Payment Integration
Stripe PaymentIntent API
Test payment support

Stripe integration is currently in progress.

🏗️ Project Architecture

The application follows a client-server architecture:

                ┌──────────────────────┐
                │      React.js        │
                │      Frontend        │
                │                      │
                │ Vite + Tailwind CSS  │
                └──────────┬───────────┘
                           │
                           │ REST API
                           ▼
                ┌──────────────────────┐
                │     Spring Boot      │
                │       Backend        │
                │                      │
                │ Spring Security      │
                │ JWT Authentication   │
                │ REST Controllers     │
                │ Service Layer        │
                │ Repository Layer     │
                └──────────┬───────────┘
                           │
                           │ JPA / Hibernate
                           ▼
                ┌──────────────────────┐
                │     PostgreSQL       │
                │       Database       │
                └──────────────────────┘
                           │
                           ▼
                ┌──────────────────────┐
                │       Stripe         │
                │  Payment Processing  │
                └──────────────────────┘

🛠️ Tech Stack

Backend

Java
Spring Boot
Spring MVC
Spring Data JPA
Hibernate
Spring Security
JWT
REST APIs
Maven

Frontend

React.js
JavaScript
Vite
Tailwind CSS
Axios
React Router
React Hook Form
Lucide React Icons

Database

PostgreSQL

Payment

Stripe

Development Tools

IntelliJ IDEA
VS Code
Git
GitHub
Postman

📁 Project Structure

ecommerce-fullstack/ │ ├── backend/ │ ├── src/ │ │ ├── main/ │ │ │ ├── java/ │ │ │ └── resources/ │ │ ├── test/ │ │ └── ... │ │ │ ├── pom.xml │ ├── mvnw │ └── mvnw.cmd │ ├── frontend/ │ ├── public/ │ ├── src/ │ │ ├── api/ │ │ ├── components/ │ │ ├── context/ │ │ ├── hooks/ │ │ ├── pages/ │ │ ├── routes/ │ │ └── ... │ │ │ ├── package.json │ ├── vite.config.js │ ├── tailwind.config.js │ └── ... │ ├── images/ │ └── README.md

🚀 Getting Started

1. Clone the Repository

git clone https://github.com/Dinesh-colud/ecommerce-fullstack.git

cd ecommerce-fullstack

⚙️ Backend Setup

Navigate to the backend directory:

cd backend

Configure PostgreSQL

Create a PostgreSQL database and configure the database credentials in:

backend/src/main/resources/application.properties

Example:

spring.datasource.url=jdbc:postgresql://localhost:5432/ecommerce
spring.datasource.username=your_username
spring.datasource.password=your_password

spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

Do not commit real database passwords, JWT secrets, Stripe keys, or SMTP credentials to GitHub.

Run Backend

Using Maven:

./mvnw spring-boot:run

On Windows:

mvnw.cmd spring-boot:run

The backend will normally start on:

http://localhost:8080

🎨 Frontend Setup

Open another terminal and navigate to:

cd frontend

Install dependencies:

npm install

Create/configure the .env file:

VITE_API_BASE_URL=http://localhost:8080/api
VITE_STRIPE_PUBLISHABLE_KEY=your_stripe_publishable_key

Start the React development server:

npm run dev

The frontend will normally be available at:

http://localhost:5173

🔄 Application Workflow

User
 │
 ▼
React Frontend
 │
 │ Axios
 ▼
Spring Boot REST API
 │
 ├── Spring Security
 │       │
 │       └── JWT Authentication
 │
 ├── Controller
 │
 ├── Service
 │
 ├── Repository
 │
 ▼
PostgreSQL

For checkout:

User
 │
 ▼
Cart
 │
 ▼
Checkout
 │
 ▼
Order Creation
 │
 ▼
Stripe PaymentIntent
 │
 ▼
Payment Confirmation
 │
 ▼
Order Completed

🔐 Authentication & Authorization

The application uses Spring Security with JWT-based authentication.

Authentication flow:

1. User registers
       ↓
2. User logs in
       ↓
3. Backend validates credentials
       ↓
4. JWT is generated
       ↓
5. Client maintains authenticated session
       ↓
6. Protected API requests are authorized

Role-based authorization is used to separate normal user functionality from admin functionality.

Example:

USER
 ├── Browse Products
 ├── Manage Cart
 ├── Place Orders
 └── View Orders

ADMIN
 ├── Manage Products
 ├── Manage Users
 └── Manage Orders

🔌 REST API

The backend exposes RESTful APIs for different application modules.

Authentication

POST   /api/auth/signup
POST   /api/auth/signin
POST   /api/auth/forgot-password
POST   /api/auth/reset-password
GET    /api/auth/user

Products

GET    /api/products
POST   /api/products
PUT    /api/products/{id}
DELETE /api/products/{id}

Cart

GET    /api/cart
POST   /api/cart
PUT    /api/cart
DELETE /api/cart/{id}

Orders

POST   /api/orders
GET    /api/orders
GET    /api/orders/{id}

Payments

POST   /api/payment/create-payment-intent

API endpoints may evolve as development continues.

💳 Stripe Payment Integration

The project uses Stripe PaymentIntent for payment processing.

The integration is designed around the following flow:

Frontend
   │
   ▼
Checkout
   │
   ▼
Spring Boot Backend
   │
   ▼
Stripe PaymentIntent
   │
   ▼
Payment Confirmation

Stripe secret keys must remain on the backend and should never be exposed in the React frontend.

For frontend configuration, only the Stripe publishable key should be used.

🖼️ Screenshots

Project screenshots are available in the images directory.

Application Screens

🏠 Home / Product Listing
🔐 Login & Registration
🛍️ Product Browsing
🔎 Product Search
🛒 Shopping Cart
💳 Checkout
📦 Orders
👤 User Profile
👨‍💼 Admin Dashboard
📦 Product Management
👥 User Management

🧪 Testing

The REST APIs can be tested using:

Postman
Browser
React Frontend

For backend API testing, verify: Authentication Products Cart Orders Users Payments

🔒 Environment Variables

Sensitive configuration should be stored using environment variables or local configuration files.

Example frontend:

VITE_API_BASE_URL=http://localhost:8080/api
VITE_STRIPE_PUBLISHABLE_KEY=your_key

Backend configuration should include values such as: Database URL Database Username Database Password JWT Secret Stripe Secret Key Mail Configuration

Never commit real credentials to GitHub.

🚧 Future Enhancements

Docker containerization
Cloud deployment
CI/CD pipeline
Performance optimization

📚 Learning Objectives

This project was developed to gain practical experience with:

Full-stack application architecture
REST API development
Spring Boot
Spring Security
JWT authentication
Role-based authorization
JPA/Hibernate
PostgreSQL
React.js
State management using React Context
Axios API integration
React Router
Tailwind CSS
Form handling and validation
Payment gateway integration
Git and GitHub

👨‍💻 Author

Dinesh Rajbhar

Java Backend / Full Stack Developer

GitHub

github.com/Dinesh-colud

Project Repository

github.com/Dinesh-colud/ecommerce-fullstack

⭐ Support

If you find this project useful, consider giving it a ⭐ on GitHub.

📄 License

This project is developed for learning and portfolio purposes.

Name		Name	Last commit message	Last commit date
.idea		.idea
backend		backend
frontend		frontend
images		images
README.md		README.md
qodana.yaml		qodana.yaml

Latest commit

History

Folders and files

Repository files navigation