Fashion Store, 3D E-commerce for Singapore
A fashion storefront that opens on a draggable WebGL ring of products, carries that motion through every page, and runs on a full admin dashboard behind it.
- Interactive 3D hero: a WebGL ring of product photos with custom GLSL shaders, drag inertia, and a fabric ripple that reacts to scroll speed
- 492 products across 20 categories, with filters, instant search, Quick View and a "Find my size" quiz
- Motion throughout: pinned horizontal lookbook, fly-to-cart arc, page transitions that morph the product photo, confetti on order success
Project Overview
A fashion e-commerce site for the Singapore market, built to feel like a premium brand while staying fast, accessible and easy to run. Visitors land on a branded intro and a 3D ring of product photos they can drag and spin, then move through smooth scrolling, a pinned lookbook and fly-to-cart animations to a Cash on Delivery checkout. Behind the storefront, an admin dashboard handles orders, products and stock, customers, discounts and sales analytics, and every change appears on the storefront immediately.
Requirements & Features
- Interactive 3D hero: a WebGL ring of product photos with custom GLSL shaders, drag inertia, and a fabric ripple that reacts to scroll speed
- 492 products across 20 categories, with filters, instant search, Quick View and a "Find my size" quiz
- Motion throughout: pinned horizontal lookbook, fly-to-cart arc, page transitions that morph the product photo, confetti on order success
- Singapore checkout: SGD pricing, Cash on Delivery, phone and postal-code validation, standard or express delivery
- Accounts, wishlist, order history and an order tracker that looks orders up by number and email or phone
- Admin dashboard: revenue and category analytics, order workflow with printable invoices, WhatsApp contact, stock per size, discount codes
- Every animation switches off for visitors who ask for reduced motion; the 3D ring falls back to still photos
Challenges I Solved
- WebGL that does not break: the 3D scene stops rendering when scrolled out of view, recovers if the browser drops its graphics context, and falls back to photos after repeated failures
- About 550 pages statically generated, including every product, so the whole store can be hosted anywhere and stays fast
- Largest Contentful Paint on image-heavy pages: products load through a CDN with a tight responsive size set, and the main photo loads first
- Accessible motion: native <dialog> for drawers and modals, keyboard navigation, reduced-motion support, and a table view alongside the revenue chart
- A catalogue of 492 products built by a pipeline: photos reviewed by hand, then a Python script derived names, garment colour from pixel sampling, prices and markdowns
What I Delivered
Design, front-end development, 3D and motion, and the catalogue data pipeline: a statically generated storefront, a full admin dashboard, and a store layer ready to connect to Firebase without changing the interface.
Results
- Full shopping journey: browse, search, size help, bag, checkout, confirmation and order tracking
- About 550 statically generated pages, with product structured data and a full sitemap
- 229 commits under strict TypeScript, with key flows checked end to end in the browser
Technology Stack
- Client
- Open source · Singapore market
- Completed
- 2026
- Platform
- Web · desktop and mobile
- Duration
- October 2026
Watch it in motion
A 99-second walkthrough: the 3D hero, the lookbook, fly-to-cart, checkout and the admin dashboard.
Fashion Store screenshots
13 screens from the shipped product. Click any shot to enlarge it.
Storefront and mobile menu 3D product ring hero Product page, desktop and phone Pinned horizontal lookbook Collection with filters Find my size Fly to cart Cash on Delivery checkout Order confirmation Mobile home and menu Shopping on mobile Admin dashboard Order management
Want something like Fashion Store?
I scope in 48 hours and ship in weeks — not quarters. Tell me what you're building.
