A Tamil filter-coffee stall board

This is a submission for Frontend Challenge - Comfort Food Edition, Perfect Landing

Comfort food isn’t only taste. It’s the stall board you already know how to read, the pour you watch without thinking, the quiet veena music if you want it. This is also partly a shoutout to my parents for numerous filter coffee mornings.

What I Built

For the DEV Frontend Challenge: Comfort Food Edition — Perfect Landing — I built Filter Coffee: a Tamil filter-coffee stall board. Pick a line, walk the ritual, watch the stretch pour. Optional veena if you want music.

Live Demo: https://filter-coffee.netlify.app
Code: https://github.com/TheVoraciousReader/filter-coffee

Filter Coffee stall board

The board, not a dashboard

First viewport is one composition: a painted shop menu. Shrikhand, Catamaran, and Noto Sans Tamil sit on board paint and brass. Weighted steel/brass art waits on the counter.

On mobile, the board and cups appear first, then the ritual begins so that the context stays in the first viewport.

Flow is simple:

1. Pick a line on the board
2. Step through the ritual (filter → decoction → milk → pour → sip)
3. On step 4, the stretch pour plays
4. Optionally, tap “Hear music”

CSS does the atmosphere: custom properties for paint, brass, focus, and type; a two-column shop layout from ~900px that stacks on small screens; menu rows as a dotted-line grid; SVG pour / froth / steam keyed with CSS animations.

Accessibility (the bit I cared about most)

Comfort food should feel welcoming. So should the page.

Keyboard & focus

• Skip link jumps straight to the board
• Real buttons for the menu and ritual — not clickable divs
• Visible focus rings (brass, not browser default)
• Tour mode disables other lines, so you don’t wander mid-ritual

Screen readers

• aria-live announces step changes as you move through the ritual
• Detail panel updates politely when you pick a line
• Illustration is role="img" with a label that changes for the pour
• Decorative bits stay aria-hidden

Bilingual, on purpose

• Tamil sits next to English with lang="ta" so pronunciation isn’t guessed wrong
• The sound toggle uses aria-pressed — on/off is clear without staring at the label

Motion & sound

prefers-reduced-motion calms the pour. Music is opt-in only. You’re in control.

Semantics over chrome

One <main>, a labeled menu list, an aside for the counter. Progress text for the tour (“2 / 5”) isn’t just visual fluff.

No perfect scorecard — just the stuff that makes a stall board usable if you’re not mousing around with perfect vision and speakers blasting.

Tech Stack

• Vite as the build tool
• TypeScript for type safety
• React for interactivity
• pnpm for package management

Run it for yourself

To poke at it locally:

pnpm install
pnpm dev

Veena clip: Veena_Recording by iskweldog (CC0).

Closing

I wanted the landing to feel like standing at the stall — paint, brass, Tamil and English side by side — and still hold up if you only have a keyboard, a screen reader, or reduced motion settings enabled.

If you try it, I’d love feedback on the ritual flow and anything that still trips assistive tech.

Built for the Comfort Food Edition · Perfect Landing.