Online Sneaker Shop

Engineering Case Study — Distributed Web Architecture & Production Cloud Deployment

Visit Live Application

1. Overview

The Online Sneaker Shop is a production-oriented e-commerce application designed to demonstrate full-stack software engineering capabilities, clean application boundaries, distributed cloud deployment, and remote database management.

While presenting an interactive storefront for browsing and purchasing footwear, the primary objective of this project was to establish an operational system that advances beyond local development setups into a resilient, production-ready cloud deployment.

2. The Challenge

Developing a local application is straightforward, but taking a multi-component system into production presents real-world engineering hurdles. The objective was to evolve a prototype into a production platform while addressing key architectural requirements:

3. Architecture

The system follows a modern decoupled client-server architecture consisting of three core tiers:

System Architecture Diagram

Online Sneaker Shop System Architecture Diagram

4. Key Engineering Decisions

1. Migration to Serverless PostgreSQL (Neon)

Problem: Initial development relied on a local PostgreSQL instance, blocking cloud deployment and remote testing.

Decision: Provisioned a Neon serverless PostgreSQL database with connection pooling enabled.

Reasoning: Neon provides full PostgreSQL compatibility, automated branch management, and connection pooling needed for serverless environment scaling.

Result: Reliable remote database connectivity with low-latency queries and zero local database maintenance requirements.

2. Decoupled Cloud Object Storage for Media

Problem: Storing image assets locally on the web server container caused storage bloat and created dynamic deployment state issues.

Decision: Offloaded image upload and serving to dedicated cloud object storage.

Reasoning: Cloud object storage provides direct URL access, global caching capability, and removes asset state from application servers.

Result: Web servers remain stateless and fast, while image loading performance improved significantly.

3. Independent Workspace Separation

Problem: The initial repository structure combined frontend and backend dependencies into a tight coupling that caused version conflicts during build steps.

Decision: Re-architected dependency boundaries to isolate the React client and Node.js backend build environments.

Reasoning: Isolated build pipelines allow packages to upgrade independently without cascading dependency breakages.

Result: Simplified continuous integration build steps and seamless cloud platform deployment.

5. Challenges & Solutions

CORS & Cross-Domain Cookie Handling

Challenge: During initial production deployment, secure session cookies failed to persist across the custom domain boundaries connecting the API backend and React client.

Solution: Configured explicit CORS headers on Express server, enabled credentials: 'include' on frontend request clients, and aligned cross-site cookie attributes (SameSite=None; Secure) for HTTPS environments.

6. Production Deployment

The production system is fully deployed and accessible live under a custom domain:

https://sneakers.jindasoftconsulting.com/

The deployment pipeline automatically builds and verifies frontend assets and backend service containers upon production commits, ensuring reliable uptime and continuous integration.

7. Results & Lessons Learned

Building and operating the Online Sneaker Shop established essential engineering takeaways: