Case Study

Reeth

Reeth is a modern Indian restaurant and bar. The hero is a split layout: copy on the left and a vertical reel on the right. The reel loops muted while it is on screen, pauses when it leaves, and has play and sound controls. The regional journey pins on desktop and scrubs horizontally, and becomes a swipe carousel on mobile.

All business content lives in data files: the menu, events, reels, gallery, team, catering packages, highlights and the site configuration. The owner can change a price or an event date without touching a component. Forms use react-hook-form with zod. Errors are linked to their inputs, and focus moves to the first invalid field.

The colour palette is locked by unit tests, so every text and background pair is checked against WCAG 2.2 AA. Reduced motion turns off the marquee, parallax, pinning and video autoplay, and keeps opacity fades.

services
Web application
client
Front-end Developer
year
Case Study
design
React 19, Vite 8, TypeScript
Category
Web Applications
8
Screens
React 19Vite 8TypeScriptTailwind CSS 4Radix UIGSAP ScrollTriggerLenisReact Hook FormZodVitestPlaywright

Overview

Concept website for Reeth, a restaurant and bar in Baner, Pune, sold as "Spice and Spirit". It was built as a sales sample: menu, events, a reel player, catering packages and careers, with placeholder content for the owner to replace.
Reeth
Built a concept site for a restaurant pitch. The data-driven setup means the owner can take the site over and change the menu and events without a developer.

Progress

What we built
  • Hero reel player, regional journey, menu, events, catering packages and careers
  • Forms with validation, errors linked to fields, and a mocked submission
  • Colour palette locked by contrast tests
  • End-to-end suites on Chromium and WebKit
What's next
  • Replace the placeholder details: phone, email, address, hours, prices and events
  • Run Lighthouse, which has not been measured yet
  • Replace the generated gradient reels with real footage
Not built yet
  • A live map: a placeholder card until the address is confirmed
  • Real photography and reel footage
  • A backend for reservations and enquiries: submission is mocked
  • Firefox and real-device testing

How it's built

The owner needs to change the menu and events without a developer.

The business content lives in data files, so menu, events and prices change without touching components.

Motion can make some visitors uncomfortable.

With reduced motion on, the marquee, parallax, pinning and autoplay all turn off.

AI in the build: 11 of the 15 commits in the Reeth repo were co-authored with Claude Code.

  • Hero reel player: muted loop, pauses off screen, with play and sound controls
  • Regional journey pinned and scrubbed sideways on desktop, a swipe carousel on mobile
  • Business content kept in data files, so menu, events and prices change without touching components
  • Forms with field-level errors linked to their inputs, and focus moved to the first invalid field
  • Palette locked by unit tests against WCAG 2.2 AA, with a separate night theme for the bar sections
  • Reduced motion turns off the marquee, parallax, pinning and autoplay

My Approach

Menu, Events & Catering
Menu as a single list of dishes and drinks, each marked veg or non-veg, with the price and description Events page and a reservation form that can be prefilled from an event
Reels & Gallery
Reels page with a modal player that is muted and controlled by the keyboard Photo gallery of the venue and dishes
Quality & Accessibility
Mobile number validation for Indian numbers, and a CV upload limited to PDF at 5 MB Unit and component tests, plus end-to-end runs on Chromium and WebKit