E-Commerce Web App

A full-stack e-commerce web application built with Java Spring Boot, Spring Security, JWT authentication, PostgreSQL, Razorpay test payments, and vanilla HTML/CSS/JavaScript.

Features

• User registration and login
• JWT-based authentication
• Role-based access control
• Public product browsing
• Product search
• Product filtering by category
• Product sorting by price
• Cart add, remove, increase, and decrease quantity
• Checkout from cart
• Razorpay test payment order creation and verification
• View user orders
• Cancel orders
• Admin-only product create, update, and delete
• Product image upload using multipart form data

Tech Stack

Backend

• Java 17
• Spring Boot
• Spring Security
• Spring Data JPA
• PostgreSQL
• JWT using jjwt
• Razorpay Java SDK
• Maven
• Lombok

Frontend

• HTML
• CSS
• JavaScript
• Fetch API
• Browser localStorage for JWT storage

Project Structure

backend/Ecom
  src/main/java/com/project/Ecom
    AuthenticationAndAuthrization
    JWTAuth
    controller
    model
    repository
    service
  src/main/resources/application.properties
  .env

frontend
  index.html
  styles.css
  script.js

Authentication Flow

1. User creates an account using /createAccount.
2. User logs in using /login.
3. Backend validates email and password.
4. Backend returns a JWT token.
5. Frontend stores the token in localStorage.
6. Frontend sends the token in protected requests:

Authorization: Bearer <jwt-token>

7. JwtFilter validates the token and authenticates the request.

Backend Security

The backend uses stateless JWT authentication.

Public endpoints:

POST /login
POST /createAccount
GET  /product
GET  /product/**
GET  /categories

Admin-only endpoints:

POST   /product/**
PUT    /product/**
DELETE /product/**

Authenticated user endpoints:

GET    /cart
POST   /cart/{productId}
PUT    /cart/increase/{productId}
PUT    /cart/decrease/{productId}
DELETE /cart/{productId}
POST   /checkout
POST   /payment/create-order
POST   /payment/verify
GET    /orders
PATCH  /cancel-order/{orderId}
GET    /user/role

API Endpoints

Auth

Method	Endpoint	Description
POST	/createAccount	Register a new user
POST	/login	Login and receive JWT token
GET	/user/role	Get logged-in user role

Products

Method	Endpoint	Description
GET	/product	Get all products
GET	/product/{id}	Get product by id
GET	/product/search?query=value	Search products
GET	/product/byCategory?category=value	Filter products by category
GET	/product/LowToHigh	Sort products by low to high price
GET	/product/HighToLow	Sort products by high to low price
POST	/product	Add product with image, admin only
PUT	/product/{id}	Update product, admin only
DELETE	/product/{id}	Delete product, admin only

Cart

Method	Endpoint	Description
GET	/cart	Get current user's cart
POST	/cart/{productId}	Add product to cart
PUT	/cart/increase/{productId}	Increase item quantity
PUT	/cart/decrease/{productId}	Decrease item quantity
DELETE	/cart/{productId}	Remove product from cart

Checkout and Orders

Method	Endpoint	Description
POST	/checkout	Create order from cart
POST	/payment/create-order	Create a Razorpay test order from the cart
POST	/payment/verify	Verify Razorpay payment signature and mark order as paid
GET	/orders	Get current user's orders
PATCH	/cancel-order/{orderId}	Cancel an order

Categories

Method	Endpoint	Description
GET	/categories	Get available product categories

Run Backend

Create backend/Ecom/.env for local secrets:

DB_USERNAME=your_database_username
DB_PASSWORD=your_database_password
JWT_SECRET=your_jwt_secret
RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_key_secret

Before running the backend, load those values as environment variables in PowerShell:

$env:DB_USERNAME="your_database_username"
$env:DB_PASSWORD="your_database_password"
$env:JWT_SECRET="your_jwt_secret"
$env:RAZORPAY_KEY_ID="your_razorpay_key_id"
$env:RAZORPAY_KEY_SECRET="your_razorpay_key_secret"

From the project root:

cd backend/Ecom
mvn spring-boot:run

Backend runs on:

http://localhost:8080

Run Frontend

Do not open index.html directly with file://.

Use a local frontend server:

cd frontend
python -m http.server 5500

Then open:

http://127.0.0.1:5500/index.html

CORS Note

The frontend and backend run on different origins:

Frontend: http://127.0.0.1:5500
Backend:  http://localhost:8080

Because of that, the backend uses CORS configuration in Spring Security to allow browser requests from the frontend.

Important Security Notes

Before publishing this project publicly:

• Keep secrets in environment variables
• Do not commit .env
• Do not commit real passwords or production secrets
• Replace open CORS settings with the real frontend URL