Make an Ecommerce App using Spring Boot

What We Are Building

We are building an ecommerce app with product listing, product details, cart, checkout, order creation, stock reduction, admin product management, REST APIs, and reusable Thymeleaf layout files.

Important Libraries and Official Links

Use standard and well-known Spring Boot libraries. These links are included so the student knows where to verify real documentation.

Maven Dependencies

Select these in Spring Initializr: Spring Web, Thymeleaf, Spring Data JPA, MySQL Driver, Validation, DevTools.

<dependencies>
  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
  </dependency>

  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
  </dependency>

  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-data-jpa</artifactId>
  </dependency>

  <dependency>
    <groupId>com.mysql</groupId>
    <artifactId>mysql-connector-j</artifactId>
    <scope>runtime</scope>
  </dependency>

  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-validation</artifactId>
  </dependency>

  <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
    <optional>true</optional>
  </dependency>
</dependencies>

Architecture

Thymeleaf Template Inheritance

Keep one base layout and insert changing page content into it. Header, footer, SEO blocks, script tags, and CSS links stay reusable.

templates/
  layout/base.html
  fragments/header.html
  fragments/footer.html
  products/list.html
  cart/view.html
  checkout/form.html
  admin/products/form.html

Transactions: Page and API Both

The page controller and API controller should both call the same service method. This prevents duplicate business logic.

@Service
public class OrderService {
  @Transactional
  public Order placeOrder(CheckoutRequest request) {
    // 1. Validate cart
    // 2. Create order
    // 3. Create order items
    // 4. Reduce product stock
    // 5. Clear cart
    // If anything fails, the whole transaction rolls back.
  }
}

Checkpoint System

After every important step, check the URL, output, database, and browser console.

mvn spring-boot:run

http://localhost:8080

http://localhost:8080/

http://localhost:8080/

CREATE DATABASE ecommerce_db;

spring.datasource.url=jdbc:mysql://localhost:3306/ecommerce_db
spring.datasource.username=root
spring.datasource.password=your_password
spring.jpa.hibernate.ddl-auto=update
spring.jpa.show-sql=true

SHOW TABLES;

http://localhost:8080/products

http://localhost:8080/api/products

[
  {"id":1,"name":"Laptop","price":55000.0,"stock":10}
]

http://localhost:8080/cart

fetch("/api/cart/add", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ productId: 1, quantity: 2 })
})
.then(res => res.json())
.then(console.log);

http://localhost:8080/checkout

fetch("/api/orders/checkout", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    customerName: "Test User",
    address: "Test Address",
    paymentMode: "COD"
  })
})
.then(res => res.json())
.then(console.log);

Files Included in this ZIP

• index.html — complete lesson page.
• css/style.css — saffron professional theme.
• js/app.js — UI helper.
• js/cart.js — cart API demo helper.
• js/api-demo.js — API examples.
• js/speak.js — speak buttons for lesson sections.
• assets/spring-boot-ecommerce-og.png — SEO / sharing image.
• spring-boot-reference — starter reference files for the actual app structure.

Final Master Check

http://localhost:8080/
http://localhost:8080/products
http://localhost:8080/cart
http://localhost:8080/checkout
http://localhost:8080/admin/products

http://localhost:8080/api/products
http://localhost:8080/api/cart
http://localhost:8080/api/orders

Speak Tag Requirement Used in This Page

This page uses numbered speak tags exactly as required by the speaking system: speak0, speak1, speak2, and so on. The speaking JavaScript reads elements whose IDs start with speak and match the numeric pattern.

[...document.querySelectorAll('[id^="speak"]')].map(x => x.id)