Case Study

Adelphos Manila — Premium Web Storefront

E-Commerce • Vanilla JS • Serverless

HTML5CSS3Vanilla JSGoogle Apps Script

Adelphos Manila — Premium Web Storefront preview screenshot

Overview

Built a high-fidelity e-commerce experience without frameworks — pure HTML5, CSS3 Custom Properties, and Vanilla ES6+ JavaScript with a Google Apps Script backend for secure order processing.

Challenge

Create a premium brand storefront with complex cart interactions, membership verification, and client-side file processing — all without heavy frameworks or database hosting costs.

Solution

Engineered a unified state-sync engine that coordinates a slide-out cart drawer, inline checkout grid, and per-item customizer simultaneously. Integrated Base64 document encoding for serverless file uploads via Google Sheets.

Impact & Results

Combined JS/CSS weight under 60KB — fraction of typical SPA bundle
Dual-layer real-time cart synchronization across all UI surfaces
Serverless architecture eliminated database hosting costs entirely

Gallery

Process

Phase 1

Brand Visual Identity & Color System

Phase 2

Product Catalog & State Architecture

Phase 3

Cart Sync Engine & Checkout Flow

Phase 4

Serverless Backend Integration

Phase 5

Form Validation & File Processing

Syncing Orbit

Adelphos Manila — Premium Web Storefront — Case Study