💻 DevOps Maaya - Workshop 2 - September 6, 2026 | Cart, Product Details and Registration Page

Now, lets configure our Frontend as in previous workshop, we mostly focused on Backend. here, we will concentrate more on Frontend and how it is done.

Let us add functionalities - Clear explanation of code would be given in the video

let us add 

Frontend

src/context/CartContext.jsx

import { createContext, useContext, useState } from "react";

const CartContext = createContext();
export function CartProvider({ children }) {

  const [cartItems, setCartItems] = useState([]);

  const addToCart = (product) => {

    setCartItems((currentItems) => {

      const existingItem = currentItems.find(

        item => item.id === product.id

      );

      if (existingItem) {

        return currentItems.map(item =>
          item.id === product.id
            ? {
                ...item,
                quantity: item.quantity + 1
              }
            : item
        );
      }

      return [
        ...currentItems,
        {
          ...product,
          quantity: 1
        }
      ];
    });

  };

  const removeFromCart = (productId) => {

    setCartItems(currentItems =>

      currentItems.filter(item => item.id !== productId)

    );

  };

  const increaseQuantity = (productId) => {

    setCartItems(currentItems =>

      currentItems.map(item =>

        item.id === productId

          ? {

              ...item,

              quantity: item.quantity + 1

            }

          : item

      )

    );

  };

  const decreaseQuantity = (productId) => {

    setCartItems(currentItems =>

      currentItems

        .map(item =>

          item.id === productId

            ? {

                ...item,

                quantity: item.quantity - 1

              }

            : item

        )

        .filter(item => item.quantity > 0)

    );

  };

  return (
        {children}  
  );

}

export function useCart() {

  return useContext(CartContext);

}

let us add components like Navigationbar and ProductCard

src/components/Navbar.jsx

import { Link } from "react-router-dom";

import { useCart } from "../context/CartContext";

function Navbar() {

  const { cartItems } = useCart();

  const cartCount = cartItems.reduce(
    (total, item) => total + item.quantity,
    0
  );

  return (
    <header className="navbar">

      <div className="navbar-container">

        <Link to="/" className="navbar-logo">
          MAAYA STORE
        </Link>

        <nav className="navbar-links">

          <Link to="/">
            Products
          </Link>

          <Link to="/cart">
            🛒 Cart ({cartCount})
          </Link>

        </nav>

      </div>

    </header>
  );
}

export default Navbar;

src/components/ProductCard.jsx

import { useNavigate } from "react-router-dom";

import { useCart } from "../context/CartContext";

function ProductCard({ product }) {

  const navigate = useNavigate();

  const { addToCart } = useCart();

  const openProduct = () => {

    navigate(`/products/${product.id}`);

  };

  const handleAddToCart = (event) => {

    event.stopPropagation();

    addToCart(product);

  };

  return (

    <div
      className="product-card"
      onClick={openProduct}
    >

      <div className="product-image-container">

        <img
          src={`http://localhost:8080${product.imagePath}`}
          alt={product.name}
          className="product-image"
        />

      </div>

      <div className="product-info">

        <h3>{product.name}</h3>

        <p className="product-description">
          {product.description}
        </p>

        <p className="product-price">
          ₹{product.price}
        </p>

        <p className="product-stock">
          Stock: {product.stock}
        </p>

        <button
          className="add-to-cart-button"
          onClick={handleAddToCart}
        >
          Add to Cart
        </button>

      </div>

    </div>

  );

}

export default ProductCard;

Create pages for Product and Cart

src/pages/ProductDetails.jsx

import { useEffect, useState } from "react";

import { useNavigate, useParams } from "react-router-dom";

import { useCart } from "../context/CartContext";

function ProductDetails() {

  const { id } = useParams();

  const navigate = useNavigate();

  const { addToCart } = useCart();

  const [product, setProduct] = useState(null);

  const [error, setError] = useState("");

  useEffect(() => {

    fetch(`http://localhost:8080/api/products/${id}`)

      .then(response => {

        if (!response.ok) {

          throw new Error("Product not found");

        }

        return response.json();

      })

      .then(data => {

        setProduct(data);

      })

      .catch(error => {

        console.error(error);

        setError("Product not found");

      });

  }, [id]);

  // Product not found

  if (error) {

    return (

      <div className="product-details">

        <div className="product-details-content">

          <h2>{error}</h2>

          <button
            className="back-button"
            onClick={() => navigate("/")}
          >
            ← Back to Products
          </button>

        </div>

      </div>

    );

  }

  // Loading

  if (!product) {

    return (

      <div className="product-details">

        <div className="product-details-content">

          <h2>Loading product...</h2>

        </div>

      </div>

    );

  }

  // Product found

  return (

    <div className="product-details">

      <div className="product-details-content">

        <button
          className="back-button"
          onClick={() => navigate("/")}
        >
          ← Back to Products
        </button>

        <div className="product-details-container">

          {/* Product Image */}

          <div className="product-details-image">

            <img
              src={`http://localhost:8080${product.imagePath}`}
              alt={product.name}
            />

          </div>

          {/* Product Information */}

          <div className="product-details-info">

            <h1>{product.name}</h1>

            <p className="product-details-description">
              {product.description}
            </p>

            <p className="product-details-price">
              ₹{product.price}
            </p>

            <p>
              Stock: {product.stock}
            </p>

            <button
              className="add-to-cart-button"
              onClick={() => {
                addToCart(product);
              }}
            >
              Add to Cart
            </button>

          </div>

        </div>

      </div>

    </div>

  );

}

export default ProductDetails;

Cart.jsx

import { useCart } from "../context/CartContext";

function Cart() {

  const {
    cartItems,
    removeFromCart,
    increaseQuantity,
    decreaseQuantity
  } = useCart();

  const total = cartItems.reduce(
    (sum, item) => sum + item.price * item.quantity,
    0
  );

  return (

    <div className="cart-page">

      <h1>Your Cart</h1>

      {cartItems.length === 0 ? (

        <p>Your cart is empty.</p>

      ) : (

        <>

          {cartItems.map(item => (

            <div
              className="cart-item"
              key={item.id}
            >

              <img
                src={`http://localhost:8080${item.imagePath}`}
                alt={item.name}
              />

              <div>

                <h3>{item.name}</h3>

                <p>
                  ₹{item.price}
                </p>

                <div>

                  <button
                    onClick={() =>
                      decreaseQuantity(item.id)
                    }
                  >
                    -
                  </button>

                  <span>
                    {" "}
                    {item.quantity}
                    {" "}
                  </span>

                  <button
                    onClick={() =>
                      increaseQuantity(item.id)
                    }
                  >
                    +
                  </button>

                </div>

                <button
                  onClick={() =>
                    removeFromCart(item.id)
                  }
                >
                  Remove
                </button>

              </div>

            </div>

          ))}

          <h2>
            Total: ₹{total}
          </h2>

        </>

      )}

    </div>

  );

}

export default Cart;

update index.css

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f5f5f5;
  color: #222;
}

.app {
  min-height: 100vh;
}

/* Header */

.header {
  background: #04243D;
  color: white;
  padding: 20px 40px;
}

.header h1 {
  margin: 0;
  font-size: 28px;
}

/* Main */

.main-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

.main-content h2 {
  text-align: center;
  margin-bottom: 35px;
  font-size: 32px;
}

/* Product Grid */

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* Product Card */

.product-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Product Image */

.product-image-container {
  width: 100%;
  height: 280px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Product Information */

.product-info {
  padding: 20px;
}

.product-info h3 {
  margin-top: 0;
  font-size: 20px;
}

.product-description {
  color: #666;
  min-height: 40px;
}

.product-price {
  font-size: 22px;
  font-weight: bold;
  margin: 15px 0 5px;
}

.product-stock {
  color: #555;
}

/* Button */

.add-to-cart-button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 6px;
  background: #5354FF;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.add-to-cart-button:hover {
  opacity: 0.9;
}

/* Responsive */

@media (max-width: 900px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Product Details */

.product-details {
  min-height: 100vh;
  padding: 30px;
  background: #f5f5f5;
}

.back-button {
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 25px;
}

.product-details-container {
  max-width: 1100px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
}

.product-details-image {
  height: 500px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}

.product-details-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.product-details-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-details-info h1 {
  font-size: 36px;
  margin-bottom: 15px;
}

.product-details-description {
  color: #666;
  font-size: 18px;
  line-height: 1.6;
}

.product-details-price {
  font-size: 30px;
  font-weight: bold;
  margin: 25px 0 10px;
}

.product-details-info .add-to-cart-button {
  margin-top: 25px;
  max-width: 300px;
}

@media (max-width: 700px) {
  .product-details-container {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .product-details-image {
    height: 350px;
  }
}

.product-card {
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
  transition: 0.2s;
}

/* =========================
   NAVBAR
========================= */

.navbar {
  width: 100%;
  background-color: #04243D;
  color: white;
}

.navbar-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar-logo {
  color: white;
  text-decoration: none;
  font-size: 24px;
  font-weight: 700;
}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 30px;
}

.navbar-links a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.navbar-links a:hover {
  opacity: 0.8;
}

update App.jsx

import { useEffect, useState } from "react";
import { Routes, Route } from "react-router-dom";

import ProductCard from "./components/ProductCard";
import ProductDetails from "./pages/ProductDetails";
import Cart from "./pages/Cart";
import Navbar from "./components/Navbar";

function Home() {

  const [products, setProducts] = useState([]);

  useEffect(() => {

    fetch("http://localhost:8080/api/products")
      .then(response => response.json())
      .then(data => {
        setProducts(data);
      })
      .catch(error => {
        console.error("Error fetching products:", error);
      });

  }, []);

  return (

    <main className="main-content">

      <h2>Our Products</h2>

      <div className="product-grid">

        {products.map(product => (

          <ProductCard
            key={product.id}
            product={product}
          />

        ))}

      </div>

    </main>

  );

}

function App() {

  return (

    <div className="app">

      <Navbar />

      <Routes>

        <Route
          path="/"
          element={<Home />}
        />

        <Route
          path="/products/:id"
          element={<ProductDetails />}
        />

        <Route
          path="/cart"
          element={<Cart />}
        />

      </Routes>

    </div>

  );

}

export default App;

update main.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { BrowserRouter } from "react-router-dom";

import "./index.css";
import App from "./App.jsx";
import { CartProvider } from "./context/CartContext";

createRoot(document.getElementById("root")).render(

  <StrictMode>

    <BrowserRouter>

      <CartProvider>

        <App />

      </CartProvider>

    </BrowserRouter>

  </StrictMode>

);

npm run dev to run frontend and your website will look similar to this and mvn spring-boot:run

Now when you try to click on any product, it does now show product details of that product even though we specifically created seperate page called ProductDetails.

This is because in the backend we did not allow specific Product Get method. Now let us configure it.

Add the following lines in ProductController.java

@GetMapping("/{id}")
public Product getProductById(@PathVariable Long id) {

    return productService.getProductById(id);

}

And now add the following lines in ProductService.Java

public Product getProductById(Long id) {

    return productRepository.findById(id)
            .orElseThrow(() -> new RuntimeException("Product not found"));

}

    }

Now rebuild both frontend and backend with respective commands.

Now, if we check our productDetails page. we will have

you will have the product displayed.

Creating User Registration for Authentication.

Now let us create most Important for any website Users Data for Authentication.

create src/main/java/com/maayastore/backend/entity/User.java

package com.maayastore.backend.entity;

import jakarta.persistence.Column;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;

@Entity
@Table(name = "users")
public class User {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String name;

    @Column(unique = true, nullable = false)
    private String email;

    @Column(nullable = false)
    private String password;

    private String role;

    public User() {
    }

    public User(String name, String email, String password, String role) {
        this.name = name;
        this.email = email;
        this.password = password;
        this.role = role;
    }

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getRole() {
        return role;
    }

    public void setRole(String role) {
        this.role = role;
    }
}

Now re-build our backend application

mvn spring-boot:run

check our database if user table is created or not

psql -d maaya_store_database

\dt

create UserRepository.java

src/main/java/com/maayastore/backend/repository/UserRepository.java

package com.maayastore.backend.repository;

import java.util.Optional;

import org.springframework.data.jpa.repository.JpaRepository;

import com.maayastore.backend.entity.User;

public interface UserRepository extends JpaRepository<User, Long> {

    Optional<User> findByEmail(String email);

}

Create

src/main/java/com/maayastore/backend/service/UserService.java

package com.maayastore.backend.service;

import org.springframework.stereotype.Service;

import com.maayastore.backend.entity.User;
import com.maayastore.backend.repository.UserRepository;

@Service
public class UserService {

    private final UserRepository userRepository;

    public UserService(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

    public User registerUser(User user) {

        return userRepository.save(user);

    }

}

Now Auth Controller

backend/src/main/java/com/maayastore/backend/controller/AuthController.java

package com.maayastore.backend.controller;

import org.springframework.web.bind.annotation.*;

import com.maayastore.backend.entity.User;
import com.maayastore.backend.service.UserService;

@RestController
@RequestMapping("/api/auth")
public class AuthController {

    private final UserService userService;

    public AuthController(UserService userService) {
        this.userService = userService;
    }

    @PostMapping("/register")
    public User registerUser(@RequestBody User user) {

        return userService.registerUser(user);

    }

}

Now test it using postman

POST http://localhost:8080/api/auth/register

{
  "name": "Sai",
  "email": "sai@example.com",
  "password": "password123",
  "role": "USER"
}

As you could see from postman, password is getting exposed and we don´t want password to be stored in our database