Fadhil Official Logo
Fadhil NuruzzamanSoftware Engineer
Fadhil Official Logo
E-CommercePersonal2023

Soundsense: Music E-Commerce Web Application

Soundsense is a music equipment e-commerce case study where customers browse and check out products themselves, with an added layer of complexity: checking and managing stock across multiple warehouses.

Preview

Walk Through the Site

A scrollable look at the finished site, exactly as a visitor would browse it.

Desktop screenshot coming soon

Desktop

Mobile screenshot coming soon

Mobile

Tech Stack

Technologies Powering the Build

The tools and technologies that came together to bring this project to life.

HTML logo
CSS logo
JavaScript logo
ReactJs logo
Chakra UI logo
NodeJs logo
ExpressJs logo
MySQL logo
VSCode logo
HTTPie logo

Roles

A Skill-by-Skill Breakdown

Each project draws on a mix of disciplines, here's how they came together on this one.

Web Development

  • Designed the multi-warehouse database schema.
  • Implemented JWT-based authentication and role-based access for admin and customer accounts.
  • Built the product, stock, and transaction REST API.
  • Implemented cross-warehouse stock allocation logic.
  • Managed application state with Redux for cart and transaction data.
  • Built core pages: home, admin product management, and customer order history.

Web Design

  • Designed a catalog browsing experience with clear category and search.
  • Kept the shopping cart flow simple despite the added stock complexity.
  • Designed clear stock availability indicators per warehouse.
  • Designed clear visual states for the multi-role login screens.
  • Designed simple, scannable layouts for transaction history and reports.

Graphic Design

  • Created a basic wordmark for the project's case study branding.
  • Relied on a clean component-based UI over custom illustration work.
  • Designed simple category icons for the music equipment catalog.
  • Created the site's favicon.
  • Compressed every image to WebP and under 200KB before upload, without a visible drop in quality.

Digital Marketing

  • Wrote clear, concise UI copy and product descriptions throughout the storefront.

Highlights

Behind the Scenes

A closer look at what the finished product offers, the obstacles along the way, and what came out of it.

Key Features

  • Fully responsive design across desktop and mobile devices.
  • Optimized images for fast loading.
  • JWT-based authentication.
  • Role-based access for admin and customer accounts.
  • Product search and category filtering.
  • Multi-warehouse stock checking.
  • Customer self-service cart and checkout.
  • Admin product management.
  • Order history and sales reports.

Challenges Faced

Configuring Role-Based Access

Admins needed to manage products and warehouses separately from what regular customers could access, so a role-based permission system was built to separate the two.

Managing Cart State Across the App

Cart and transaction data needed to stay in sync across multiple components, so Redux was used to manage state predictably.

Cross-Warehouse Stock Allocation

A single product could be available in multiple warehouses with different quantities, so query logic was designed to automatically pick the nearest or available warehouse at checkout.

Data Consistency During Concurrent Transactions

Stock could be deducted twice if two transactions ran at the same time, handled with database transactions to keep stock counts consistent.

Lessons Learned

  • Learned that multi-warehouse logic is as much a data modeling problem as a UI problem.
  • Practiced handling concurrent transactions safely at the database level.
  • Learned how centralizing cart and transaction state in Redux simplified keeping the UI in sync across pages.

Impacts

Problems Solved After Launch

How this project changed things for the business and its users after launch.

Images under 200KB

Custom RBAC system

Multi-warehouse support

Performance

Slow-Loading Pages From Unoptimized Images

Before

High-resolution images across the site, not just one section, risked slowing down every page.

After

Every image across the site is compressed to WebP and kept under 200KB, keeping pages fast without a visible drop in quality.

Improvement

A Concrete Demonstration of Role-Based Access Control

Before

There was no personal project demonstrating a configurable permission system, not just a basic login screen.

After

Admin-configurable roles and JWT-based authentication became a concrete demonstration of access-control design skills.

Improvement

E-Commerce Case Study With Multi-Warehouse Complexity

Before

There was no portfolio project covering cross-location stock management.

After

Soundsense demonstrates the ability to design an e-commerce system with business logic more complex than a simple online store.