2023

Coder's Closet: Full-Stack E-commerce Storefront

An e-commerce application featuring Java/Spring backend and Node/React/MaterialUI frontend, built to showcase full-stack capabilities.

Coder's Closet: Full-Stack E-commerce Storefront

Overview

Coder’s Closet is a full-stack e-commerce storefront developed to demonstrate comprehensive application development capabilities. The project encompasses both a backend built with Java and Spring, and a frontend powered by Node.js, React, and MaterialUI. Each component resides in its own repository to streamline development and deployment.

Goals and Motivation

This application was developed starting from a foundational Spring/React/MaterialUI framework. The primary goal was to expand upon this base to include a set of pre-defined features, achieve significant unit test coverage, and deliver a Minimum Viable Product (MVP), along with additional custom enhancements to showcase robust development practices.

Tech Stack Used

Backend

  • Java 8SE
  • Spring (Boot, MVC, Data)
  • Maven
  • ModelMapper
  • JUnit5 & Mockito

Frontend

  • Node.js
  • React
  • MaterialUI
  • Jest

DevOps & Quality

  • SonarCloud
  • Git

Features

MVP Features

  • Dark Mode
  • Input Validation
  • Quantity Select
  • Remove Items From Cart
  • Search For Products
  • UI/UX Error Handling
  • 70% Unit Test Coverage

Additional Work

  • “Featured Products” slideshow on the main product page
  • Comprehensive graphical overhaul
  • Achieved 95.9% JUnit unit test coverage
  • Passed SonarCloud quality gate

Demo

(Consider adding a screenshot or a short GIF of Coder’s Closet in action here if you have one. You can use the <Image> component like in the bookmarked.mdx example.)

Example:

import CoderClosetDemo from '/images/your-coder-closet-demo.gif'; // Make sure to place this in public/images

<Image src={CoderClosetDemo} alt="Coder's Closet Demo" wrapperProps={{ class: 'not-prose my-2 rounded-md overflow-clip' }} />

Repositories

Outro

Developing Coder’s Closet was a significant undertaking that allowed for the practical application and demonstration of full-stack development principles, from backend API design with Spring to a dynamic frontend experience with React and MaterialUI. The project emphasized robust testing and quality assurance, culminating in a feature-rich e-commerce platform.

Prerequisites For Development

  • An IDE (e.g., VSCode)
  • A modern browser
  • JDK 11
  • Maven
  • Git
  • Node.js

(You can continue adding more sections like “Environment Variables”, “Development Setup”, “Where do I download X?”, “Beneficial VSCode Addons”, etc., as needed, following the MDX format.)

Explore more projects