StackSplit: Building a Modern Shopping Cart App Using Microservices Architecture

📌 Introduction

In today's software landscape, microservices architecture has become a preferred choice for building scalable and maintainable applications. To better understand and implement this approach, I decided to build StackSplit, a fully functional shopping cart web application — entirely as a self-learning project. 💻✨

StackSplit is a 3-tier full-stack application built using:

• React JS for the frontend

• Spring Boot for backend microservices

• PostgreSQL for data persistence

Each backend service operates independently with its database and serves a dedicated responsibility within the overall flow.

🧩 Project Overview

StackSplit simulates an e-commerce shopping experience with a modern architectural design. Here's a breakdown of the components:

🔸 Frontend (React)

• Built with React + Axios + React Router

• Pages: Login, Dashboard, Product List, Product Details, Cart, Checkout, Profile, Contact

• Authenticated users can browse products, add to cart, and place orders.

🔸 Backend Microservices (Spring Boot + PostgreSQL)

1. Auth Service

   • Handles user registration, login, and JWT-based authentication

   • Exposes endpoints for secure login/session management

2. Orders Service

   • Manages product catalog, cart logic, and order placement

   • Receives order details from the frontend and persists them in its own database

3. Delivery Service

   • Assigns deliveries to orders

   • Tracks delivery status and provides endpoints to update the delivery lifecycle

Each microservice has its own PostgreSQL database and is independently deployable. Services interact via REST APIs.

🏗️ Architecture Diagram

Here's a simplified cartoon-style illustration of how the entire system works together:

🔧 Prerequisites

Before running the application locally, make sure you have:

• Node.js (v20+)

• Java JDK 17+

• Maven

• PostgreSQL

• Git

Optional but helpful tools:

• Postman for testing APIs

• VS Code / IntelliJ for editing

🚀 How to Run

Each microservice and frontend is hosted in its own GitHub repository.

🔹 1. Clone the Repositories

# Auth Service
git clone https://github.com/himanshujha411/Microservices-Auth-User-Mgmt.git

# Orders Service
git clone https://github.com/himanshujha411/Microservices-Orders-Mgmt.git

# Delivery Service
git clone https://github.com/himanshujha411/Microservices-Delivery-Mgmt.git

# Frontend
git clone https://github.com/himanshujha411/Microservices-ShoppingCart-Frontend-App.git

🔹 2. Set Up PostgreSQL Databases

Create 3 separate databases:

• auth_db

• orders_db

• delivery_db

🚨 Once databases are created, import the DB Dumps available in the corresponding repositories.

Update application.properties in each Spring Boot project, with your PostgreSQL credentials.

🔹 3. Run Backend Services

Each service can be started independently via Maven:

./mvnw spring-boot:run

Ensure ports like 8081, 8082, and 8083 are available.

🔹 4. Run the Frontend

From the React project root:

npm install
npm start

Make sure API endpoints match the running backend services.

🧪 Features

• ✅ Authentication & Authorization

• 🛒 Shopping cart with product add/remove

• 📦 Order creation & checkout

• 🚚 Delivery tracking and assignment

• 🧩 Modular and loosely coupled microservices

• 📄 Clean folder structure and RESTful APIs

📸 Screenshots

Login:

Dashboard:

User Profile:

Contact Us:

Products List:

Product Description:

View Cart:

Confirmation Window:

Receipt Generation:

Order Submission:

💡 What I Learned

Working on StackSplit helped me:

• Understand how to decouple services for scalability

• Implement secure authentication using JWT

• Structure backend code using service/repository patterns

• Connect the React frontend with multiple backend endpoints

• Deploy each service independently for better maintainability

This was a solo project I took up for my own learning — not affiliated with any company — and it helped solidify my understanding of real-world microservices development.

🔗 Repositories

• Frontend – React JS

• Auth Service

• Orders Service

• Delivery Service

🙌 Final Thoughts

If you're trying to learn full-stack development or dive deeper into microservices, I highly recommend starting a project like this. Building StackSplit from scratch pushed me to explore new ideas, troubleshoot across layers, and most importantly, learn by doing.

Got feedback or want to collaborate on improvements? Feel free to connect or drop me a message!