Active Development

PAUSA Café

PAUSA is a calm, editorial café with slow coffee, matcha, wood-fired pizza and an all-day diner menu. The site is built with Vite, React 18, TypeScript in strict mode, Tailwind CSS 4, GSAP, Framer Motion and Lenis.

Every route is prerendered into static HTML with a headless browser. Search engines and link previews get the real content without running JavaScript. Each route has its own title, description, canonical and social tags, and the home and visit pages carry CafeOrCoffeeShop structured data. A sitemap and robots file are generated from the same route list the app uses.

The brand films are encoded with size limits that fail the build when a file is too large. A video loads only when it is near the viewport. Under reduced motion, on data saver or on a slow connection, no video element is created, and the poster and transcript stay on screen.

services
Web application
client
Front-end Developer
year
Active Development
design
React 18, Vite, TypeScript (strict)
Category
Web Applications
7
Screens
React 18ViteTypeScript (strict)Tailwind CSS 4GSAPFramer MotionLenisRadix UIReact Hook FormZodPuppeteer (prerender)VitestPlaywright

Overview

Website for PAUSA, a café and all-day diner in Baner–Balewadi, Pune. Visitors find the café, browse the menu, see the space, watch short films and book or contact the team. It was built to launch in two modes, pre-launch and open.
PAUSA Café
Built a launch-ready site for a café that opens soon. The site ships as a pre-launch page and switches to the full open site with one setting change, and each route is prerendered for search.

Progress

What we built
  • Pre-launch and open modes behind one setting
  • Menu, gallery, events and visit pages, all driven by data files
  • Prerendered HTML for every route, with a sitemap and robots file
  • Brand films encoded within size budgets
  • End-to-end smoke tests for every route on desktop and mobile
What's next
  • Get written permission for the photos. The barista photo needs separate consent
  • Clear the TODO markers in the source (search for TODO)
  • Switch to open mode with prices and reservations at launch
Not built yet
  • Live open-now status and menu prices: hidden until launch
  • Online reservations: removed in pre-launch mode

How it's built

The site has to go live before the café's full content is ready.

One launch setting switches the site from a pre-launch page to the full open site.

Search engines need to read the content without running JavaScript.

Every route is prerendered to static HTML.

Heavy video slows down slow connections.

No video loads under reduced motion, on data saver or on slow connections. The poster image stays.

AI in the build: 2 of the 8 commits in the PausaPune repo were co-authored with Claude Code.

  • Launch switch: one setting moves the site from a pre-launch page to the full open site with prices and reservations
  • Every route prerendered to static HTML, so search engines read the content without running JavaScript
  • Video fallbacks: no video loads under reduced motion, data saver or slow connections, and the poster stays
  • Menu, gallery and events are data files, so the team can edit them without touching components
  • Open-now status calculated on India time and never prerendered, so it cannot go stale
  • Skip link, one heading per page, focus moved on route change, and focus-trapped lightbox and mobile menu

My Approach

Menu & Visit
Menu with categories, dietary tags, a featured flag and an optional photo for each item Visit page with hours, map links, phone and WhatsApp, and a contact form
Films & Gallery
Brand films and clips encoded as MP4 and WebM with posters, checked against size budgets Gallery with a lightbox, alt text on every photo and captions where they exist
SEO & Performance
Responsive photos in AVIF, WebP and JPEG at three widths, with a blurred placeholder Sitemap, robots file, Open Graph and JSON-LD generated at build time