Case Study

Froth

Froth is a coffee and protein café. The site is built around an order builder: the visitor picks a base, a protein and add-ons, and a sticker-style receipt prices the order as they go. "Order this" hands the order to the contact form, pre-filled with the items and total.

Pricing is done in whole rupees. Every base, protein and add-on combination is tested against an independent sum. The order is kept in sessionStorage for the visit only, and every storage read and write is wrapped so blocked or corrupt storage falls back to an empty order.

The Sunday Dog Lovers meet-up has a live countdown. It is calculated on India time, so it reads the same for a visitor in any timezone. The rest of the site covers the menu, reels and gallery, about, and visit details. Enquiry forms use react-hook-form with zod, and submission is mocked until a backend is connected.

services
Web application
client
Front-end Developer
year
Case Study
design
React 19, Vite 8, TypeScript (strict)
Category
Web Applications
7
Screens
React 19Vite 8TypeScript (strict)Tailwind CSS 4shadcn/ui (Radix)Framer MotionReact RouterReact Hook FormZodVitestPlaywright

Overview

Concept website for Froth, a café on Pancard Club Road in Baner, Pune, built as a sales sample for the owner. The centrepiece is an order builder that prices a drink as the visitor chooses it.
Froth
Built a concept site for a café pitch. The order builder shows how the menu can sell itself: a visitor can see the price and the drink they are building before they ever reach the counter.

Progress

What we built
  • Order builder with live pricing and a sticker-style receipt
  • Brand pages: home, menu with dietary filters, reels, gallery, about and visit
  • Sunday Dog Lovers page with a live countdown
  • Enquiry form with an order handoff, and unit, end-to-end and accessibility suites
What's next
  • Connect the enquiry and order forms to a real backend
  • Replace the placeholder wordmark logo
Not built yet
  • The 3D latte-art element on the home page (removed in this pass)
  • Background removal for product cut-outs: the crops are rectangular
  • Catering and careers pages: switched off until the café needs them
  • Firefox testing: the suite runs on Chromium and WebKit only

How it's built

Visitors had to visit the café to learn what a drink costs.

A live order builder shows a receipt-style price as the visitor chooses the base, protein and add-ons.

Rounding can make a price wrong.

Pricing is in whole rupees, tested against every base, protein and add-on combination.

AI in the build: 1 of the 2 commits in the Froth repo was co-authored with Claude Code.

  • Order builder with a live receipt: base, protein and add-ons, priced as the visitor chooses
  • Whole-rupee pricing tested against every base, protein and add-on combination
  • Order handoff: "Order this" opens the enquiry form with the order already filled in
  • Sunday meet-up countdown computed on India time, independent of the visitor timezone
  • Accessible by design: native form controls, one polite live region for receipt changes, reduced-motion support
  • Text and background colour pairs checked against WCAG 2.2 AA

My Approach

Order Builder
Three-step builder: base (espresso, cold brew, milk, oat milk, water), protein (whey, plant, none) and add-ons Receipt names the drink from its choices, for example "Berry Protein Cold Brew"
Brand Pages & Content
Home, menu with dietary filters, reels and photo gallery with a lightbox, about, and visit details Sunday Dog Lovers page with the poster panel, countdown and how it works
Quality & Accessibility
Enquiry form validates Indian mobile numbers and links every error to its field Responsive images in AVIF, WebP and JPEG, sized so the layout does not shift as they load