Moss & Oak

The Challenge

E-commerce projects are easy to start and hard to finish. Most concept builds stop at the product grid. This one needed to go further — all the way through to order confirmation, account management, and a journal that doesn't feel like a marketing blog. The design challenge was equally real: building something that felt like a considered brand rather than a template, without drifting into over-designed portfolio showboating. Indian e-commerce DNA (mobile-first, fast navigation, bottom sheets) had to coexist with magazine-quality editorial typography.

The Approach

The site was built in 12 sequential phases, each self-contained and shipped clean before moving to the next. Design tokens first — a warm off-white base, terracotta for action, sage for accent, Fraunces for all display text — so every component felt cohesive without a design file. The shop and PDP followed patterns from Flipkart and Myntra for mobile (bottom sheets, sticky CTAs, swipe carousels) while the desktop layout used generous whitespace more common to direct-to-consumer brands. The journal was treated as a separate editorial product within the same codebase — no sidebar, no comments, pull quotes and wide image breakouts, the typography calibrated for long-form reading rather than product scanning. State is entirely client-side via Zustand with localStorage persistence: no backend, no database, fully portable as a portfolio demo.

The Outcome

Shipped as a complete, production-grade concept site — 12 routes, all working end-to-end, deployed on Vercel. The purchase flow goes from product browsing to order confirmation with all the intermediate states handled: out-of-stock variants, empty cart, no orders, address book empty state. The journal publishes six genuine long-form articles on craft, materials, and seasonal living. Every interactive state is covered. The Lighthouse scores on the deployed site: Performance 72 (home, Unsplash images), 87 (PDP), Accessibility 95–96, Best Practices 100, SEO 100.