ShopSphere E-Commerce Platform

ShopSphere is a full-stack e-commerce application featuring a robust Spring Boot backend and a sleek, responsive Vanilla Chrome frontend JavaScript Single-Page Application (SPA). This project demonstrates modern development practices, secure authentication, and seamless Cart & Order management via a layered software architecture.

---

📸 Project Screenshots

Admin Views

Admin Dashboard	Single Product Addition	Bulk Product Addition

User Views

User Homepage	Shopping Cart	Order History

---

🛠️ Tech Stack & Practices

Backend Technologies

• Java 17 & Spring Boot 3.x
• Spring Security & JJWT: Stateless JSON Web Token authentication.
• Spring Data JPA & Hibernate: ORM layer to map Java Objects to database relations.
• H2 Database: Persistent file-based SQL database configuration for rapid development without external DB dependencies.
• Lombok: Reduces boilerplate code (Getters, Setters, Constructors).

Frontend Technologies

• Vanilla HTML5 & CSS3: Pure, framework-less layout using CSS Grid and Flexbox for high-performance rendering. Complete with CSS Variables for consistent theming.
• Vanilla JavaScript (ES6+): SPA logic using modern Async/Await, Fetch API, and DOM manipulation.
• LocalStorage: Used to persist Cart States and JWT Tokens across page reloads.

Architectural Practices Used

• Layered Architecture: Clear separation of concerns between Controllers (API limits), Services (Business Logic), Repositories (Data Access), and Models / DTOs (Data Transfer).
• Role-Based Access Control (RBAC): Securely isolates privileges. The very first registered user receives ROLE_ADMIN (permitting inventory modifications), all subsequent users receive ROLE_USER.
• Global Exception Handling: Centralized @ControllerAdvice to gracefully capture application errors (e.g., duplicated emails or missed payloads) and return strictly typed JSON responses instead of server stack traces.
• Decoupled Client-Server: Designed as an API-first backend to natively support different clients (Web, Mobile). Configured with global CORS filters to allow seamless cross-origin communication.

---

🔗 RESTful Endpoints

All endpoints are built out from http://localhost:8080.

Authentication (/api/auth)

Method	Endpoint	Description	Auth Required
POST	/api/auth/register	Register a new user (name, email, password)	No
POST	/api/auth/login	Login and retrieve a Bearer JWT Token and Role	No

Products (/api/products)

Method	Endpoint	Description	Auth Required
GET	/api/products	Retrieve all available products	No
POST	/api/products	Add a single new product to the catalog	Yes (ADMIN)
POST	/api/products/bulk	Add an array of new products to the catalog	Yes (ADMIN)
DELETE	/api/products/{id}	Remove a product by its ID	Yes (ADMIN)

Orders (/api/orders)

Method	Endpoint	Description	Auth Required
GET	/api/orders	View the authenticated user's past order history	Yes (USER/ADMIN)
POST	/api/orders	Submit a Cart array and place a new order, deducting inventory	Yes (USER/ADMIN)

---

🚀 Running the Project Locally

1. Start the Backend Server

Make sure you have Java installed on your machine. Navigate to the root directory shopsphere and run the Spring Boot Maven wrapper:

# On Windows
.\mvnw spring-boot:run

(The embedded H2 Database will automatically run on port 8080 and generate all necessary tables based on the JPA constraints).

2. Start the Frontend Client

Because the frontend is a pure Vanilla application, there are no npm install steps required!

1. Navigate to the client/ folder.
2. Open index.html directly in your favorite web browser. (Tip: If using VS Code, use the "Live Server" extension for the best experience).

You're ready to start shopping!