venkat-training

Posted on Apr 3

# Tea Break 418 🫖🏏

#devchallenge #418challenge #showdev #programming

April Fools Challenge Submission ☕️🤡

This is a submission for the DEV April Fools Challenge

What I Built

Tea Break 418 is a satirical enterprise cricket match operations dashboard that treats tea compliance as a hard production dependency. It looks and feels like a serious sports SaaS platform — until it starts blocking your tactical decisions with real HTTP 418 "I'm a teapot" responses.

Every action on the pitch — batting aggression, powerplay acceleration, bowling changes, even the toss — must first pass through the Tea Compliance Engine. If your kettle readiness is below 65%, biscuit coverage drops under 50%, or the umpire hydration index isn't up to scratch? 418. No exceptions. RFC 2324 is non-bypassable.

It solves no meaningful problem, over-engineers everything, and takes the teapot far more seriously than anyone reasonably should. Built as a loving tribute to Larry Masinter, RFC 2324, and the immortal dignity of HTTP 418.

"The only RFC that's both an April Fools joke and a production dependency."

The Tea Compliance Engine

The engine runs a weighted composite score across four parameters:

Parameter	Weight	Threshold	Blocks
Kettle Readiness	35%	≥ 65%	Toss Analysis
Biscuit Coverage	25%	≥ 50%	Batting Aggression
Umpire Hydration	20%	≥ 55%	Powerplay Acceleration
Captain Confidence	20%	≥ 60%	Bowling Changes

The Tea Mode applies a score modifier on top:

🫖 Masala Chai: +5 (highest rated)
🌸 Earl Grey: +2
☕ English Breakfast: 0 (baseline)
🍵 Green Tea: -4
🌿 Herbal Infusion: -8 ⚠️

If the composite score falls below 60 OR any per-action rule fires → HTTP 418.

The Override Tea Protocol action always returns 418 regardless of score. RFC 2324 is non-bypassable.

When blocked, the API returns a fully structured payload — not just a status code:

{
  "success": false,
  "status": 418,
  "error": {
    "code": "TEA_BREAK_ENFORCED",
    "title": "I'm a teapot",
    "message": "Toss analysis paused pending kettle stabilization.",
    "recoveryAction": "Increase kettle readiness above 65%, ensure biscuit coverage ≥ 50%.",
    "details": [
      "Kettle readiness 10% is below the 65% operational threshold."
    ]
  },
  "score": 38,
  "grade": "CRITICAL"
}

Cricket is the perfect domain for this. It's the only major sport with a mandatory tea break mid-match. The tea interval is sacrosanct — play stops, wickets pause, and everyone has a biscuit. We've simply made that governance... programmable.

Demo

🔗 Live: https://tea-break-418.vercel.app/

Try It Yourself — 60-Second Walkthrough

Open the dashboard — observe the pitch-green hero, HTTP 418 badge, and KETTLE ACTIVE pulse indicator
Click Start Match — kettle readiness is 58% (below 65%). Watch the 418 fire with structured reasons[]
Drag the Kettle Readiness slider above 65% — the compliance score updates live, grade badge changes
Click Start Match again — now it returns HTTP 200 ✅
Switch Tea Mode to Herbal Infusion — score drops 8 points. Switch to Masala Chai — +5 bonus
Click Override Tea Protocol — always 418, no matter what
Click Emergency Tea Audit — returns score, grade, and full tea state echo
Visit /demo for the guided 6-step script

Code

venkat-training / tea-break-418

tea break 418

Tea Break 418 🫖🏏

The only cricket operations platform that treats tea compliance as a production dependency.

Tea Break 418 is a satirical cricket match operations dashboard built for the DEV April Fools Challenge. It looks like a serious sports SaaS product—until it starts blocking tactical decisions with HTTP 418 "I'm a teapot".

Why 418?

HTTP 418 comes from an April Fools RFC and is perfect for a cricket control plane where tea protocol outranks tactics.

Features

Premium dashboard UX with cricket match state.
Hero buttons for quick actions: Start Match, Emergency Tea Audit, View Demo.
Hero actions stream structured response metadata (action name, timestamp, and HTTP status) to the on-page console.
Tea Compliance Engine with deterministic policy logic.
Tactical actions with structured 418 policy payloads (transport-safe for interactive UX on the home page).
API routes validated with Zod.
Unit/integration/e2e smoke tests.

Local setup

pnpm install
pnpm dev

Scripts

pnpm…

View on GitHub

Architecture

Next.js 15 App Router — full-stack in one repo, API routes co-located with UI pages.

lib/domain/
  complianceEngine.ts   — weighted score, grade, evaluateAction()
  teaRules.ts           — threshold predicates, actionBlockedByRules()
  tossEngine.ts         — delegates to evaluateAction('Run Toss Analysis')

app/api/
  tactical-action/      — POST → 418 or 200
  tea-compliance/       — POST → score + grade
  toss/                 — POST → 200 with canonicalStatus: 418 in payload
  tea-status/           — GET  → seeded state + score

components/
  tea/KettleSliders     — interactive real-time parameter adjustment
  tea/TacticalActions   — per-action cards with risk coloring + inline spinner
  tea/TeaActionConsole  — terminal-style JSON viewer with structured error panel
  tea/TeaFactTicker     — rotating RFC 2324 / HTTP 418 facts
  dashboard/Hero        — pitch-green card, steam animations, cricket field overlays
  scoreboard/           — live match display styled as broadcast overlay

Test Coverage

49 unit + integration tests (Vitest) + 12 Playwright e2e smoke tests:

pnpm test        # 49 unit + integration tests
pnpm test:e2e    # Playwright smoke suite
pnpm typecheck   # TypeScript strict
pnpm lint        # ESLint
pnpm build       # Production build

All 12 e2e tests verified against the live Vercel deployment:

✅ Hero section renders correctly
✅ Start Match fires 418 with structured payload (kettle at 58%)
✅ Sliders update compliance score live
✅ Raising sliders above 65% makes Start Match return 200
✅ Tea Mode changes score correctly (Herbal −8, Masala Chai +5)
✅ Override Tea Protocol always 418 regardless of state
✅ Emergency Tea Audit returns score + grade + tea state echo
✅ Footer renders RFC 2324 attribution
✅ /demo page renders 6-step guide
✅ Scoreboard displays all match data
✅ All 5 tactical action cards rendered
✅ Grade badge updates with slider changes

How I Built It

Tech Stack

Layer	Choice	Why
Framework	Next.js 15 App Router	Full-stack in one repo, API and UI co-located
Language	TypeScript (strict)	No `any`, integer validation on all numeric fields
Validation	Zod	Type-safe schemas, `details[]` errors from Zod issues
Styling	Tailwind CSS + custom tokens	`cream`, `pitch`, `tea`, `willow` design system
Typography	Playfair Display + DM Mono + DM Sans	Editorial cricket-scorecard aesthetic
Unit tests	Vitest	Fast, co-located with domain logic
E2E tests	Playwright	Smoke suite against live Vercel URL
Security	CSP, X-Frame-Options, no stack traces	Production-grade headers via `next.config.mjs`
Deploy	Vercel	Zero-config Next.js deployment

Key Design Decisions

Why is 418 a real HTTP status, not just a UI trick?
The status is returned from /api/tactical-action. Any client — curl, Postman, another service — gets the teapot treatment directly. The governance is infrastructure-level, not cosmetic.

Why does /api/toss return 200 with canonicalStatus: 418 in the payload?
To avoid fetch-level errors in the demo UI while still surfacing the 418 semantics in the JSON. The transport succeeds; the teapot joke lands in the response body.

Why interactive sliders?
They make the 418 → 200 transition demonstrable live. Drag kettle readiness past 65%, click Start Match — it succeeds. The engine is transparent and adjustable, not a black box.

Why Playfair Display headings?
The aesthetic deliberately mimics enterprise SaaS and cricket scorecards at the same time. The joke needs the straight face to land. Too rough and it looks unfinished; too polished and the absurdity disappears.

What I Learned

Building a joke seriously is harder than it sounds. The 418 response has to be genuinely structured — useful reasons[], actionable recoveryAction, a proper grade field — otherwise it's just a novelty. The compliance engine needed real policy logic with real thresholds.

The design took longer than the domain logic. Making something look like enterprise software while being obviously satirical requires careful calibration.

Cricket was the right domain. The mandatory tea interval is a real rule. I just made it a production dependency.

Prize Category

Best Ode to Larry Masinter 🫖

This project exists entirely because Larry Masinter wrote RFC 2324 on 1 April 1998 and gave the world HTTP 418. Tea Break 418 is a direct, earnest tribute — it takes his joke seriously enough to build a full compliance engine, a weighted scoring system, structured error payloads, a grade system, 49 tests, and a production deployment around it.

The 418 isn't a UI flourish. It's a first-class HTTP status returned from a real API route with TEA_BREAK_ENFORCED error codes, per-rule details[] arrays, and a recoveryAction field. Every decision in the codebase traces back to "what would it look like if someone took RFC 2324 seriously in production?"

Larry Masinter gave us the teapot. We gave it a compliance dashboard.

Built for the DEV April Fools Challenge 2026 · RFC 2324 · HTCPCP/1.0 · HTTP 418

Match progression suspended pending supervised brewing. 🫖

DEV Community