Full-Stack E-Commerce Platform

This project was developed as an internal e-commerce platform for the employee cooperative at the company where I worked. The cooperative needed a centralized system for managing products and enabling online purchases, replacing manual processes with a more accessible and scalable digital solution.

As a Full Stack Developer, I worked across both the frontend and backend applications, contributing to product catalog management, shopping cart functionality, user authentication, and API integration between the client and server applications.

System Architecture

The platform was built using a decoupled architecture consisting of a Next.js frontend and a Spring Boot backend communicating through REST APIs.

This architecture provided several advantages for a business application:

• Separation of concerns between user interface and business logic
• Independent deployment of frontend and backend services
• Scalability for future growth and additional integrations
• Reusability of backend services for potential future clients, such as mobile applications

The clear API boundary also enabled frontend and backend development to progress independently while maintaining a consistent contract between both systems.

Spring Boot Backend

The backend was built with Spring Boot 3 using a conventional layered architecture:

src/main/java/
├── config/             → Application configuration, CORS, beans, and framework setup
├── controllers/        → REST API endpoints and request handling
├── dto/                → Data Transfer Objects for request and response contracts
├── exception/          → Custom exceptions and global exception handlers
├── mapper/             → Entity ↔ DTO mapping logic
├── models/             → JPA entities and domain models
├── payload/            → API request and response payload definitions
├── repository/         → Data access layer using Spring Data JPA
├── security/           → JWT authentication, authorization, and security configuration
├── services/           → Business logic and application services
├── uploadmultiple/     → File upload handling and storage utilities
└── utils/              → Shared helper functions and utility classes

This separation keeps business logic isolated from transport and persistence layers, making the system easier to maintain and extend.

Authentication is implemented using JWT (JSON Web Token) with Spring Security. Protected endpoints are validated through a security filter before requests reach the application layer, ensuring only authenticated users can access restricted resources.

For data persistence, the application uses PostgreSQL with Spring Data JPA. Entity relationships and queries were designed around common e-commerce workflows such as product browsing, category filtering, and user cart management.

Next.js Frontend

The frontend application was built with Next.js and Material UI.

Material UI accelerated development by providing a mature component library with consistent styling, accessibility support, and responsive behavior out of the box.

Communication with backend services is centralized through an API abstraction layer:

const apiClient = {
  get: async <T>(endpoint: string): Promise<T> => {
    const res = await fetch(`${API_BASE_URL}${endpoint}`, {
      headers: getAuthHeaders(),
    });

    if (!res.ok) {
      throw new ApiError(res.status, await res.json());
    }

    return res.json();
  },
};

This approach keeps networking concerns in a single location and simplifies error handling across the application.

The frontend includes:

• User authentication and session management
• Product catalog browsing
• Product detail pages
• Shopping cart functionality
• Responsive layouts for desktop and mobile devices

Integration Challenges

One of the primary technical challenges was managing communication between separate frontend and backend applications.

Since both applications run on different origins during development, proper Cross-Origin Resource Sharing (CORS) configuration was required to allow secure communication between services.

Rather than configuring CORS at individual controller endpoints, the backend uses a centralized Spring Security configuration, providing a single source of control for allowed origins, methods, and headers.

This approach simplifies maintenance and reduces the risk of inconsistent security settings across the application.

Key Takeaways

This project provided hands-on experience building and maintaining a business application that spans multiple technology stacks and runtime environments.

Working on both the frontend and backend reinforced the importance of clear API contracts, consistent data models, and maintainable system boundaries. It also highlighted the additional considerations that come with distributed application architectures, where concerns such as authentication, API communication, and deployment must be managed explicitly.

Beyond the technical implementation, the project demonstrated how software can improve operational workflows by transforming manual business processes into a centralized digital platform that is easier to manage, maintain, and scale.