DEV Community

Judexify
Judexify

Posted on • Edited on

Kettly — A Fully Functional Dashboard Where the Only Navigation Is a Teapot

April Fools Challenge Submission ☕️🤡

This is a submission for the DEV April Fools Challenge
What I Built
I built a SaaS dashboard.
A real one. Sidebar. Analytics page. Reports page.
A status bar that logs everything in monospace like it means business.
The kind of thing you'd see in a YC pitch deck under "Product Screenshots."
Then I built it again. In 1998.
Kettly ships in two versions — a clean modern SaaS interface and a pixel-perfect 90s recreation styled after early eBay: gray tables, white background, Times New Roman, a hit counter, and a disclaimer that it is best viewed in Netscape Navigator 4.0 at 800×600. Both versions are linked. Switching between them is the second most disorienting thing about this app.
The first is the navigation.
There is one problem with both versions.
The sidebar does nothing. Every single link — Overview, Analytics, Reports — returns 418 I'm a Teapot (RFC 2324). The only way to actually navigate is by holding down a GIF of a kettle for one second. While you hold it, tea pours from the spout. The page changes.
That is the entire navigation system. A kettle. That you hold.
Short-clicking the kettle causes chaos — characters explode across the screen and the status bar says "SHORT CLICK — HTCPCP BREW refused — 418 I'm a Teapot — hold longer." There is no way to stop it. There was never a way to stop it.
When you finally visit all three pages, the UI fades and an 418 I'm a Teapot modal appears. On the 90s version it looks like a Windows 98 dialog box. The OK button does nothing. This was always the plan.
Kettly solves zero real-world problems. It brews nothing.
It is, technically, RFC 2324 compliant. It ships to production anyway.

Demo
The entry screen behaves normally. For exactly four characters.

Type 1–3 characters → nothing happens. Clean. Professional.
Type 4 characters → a Login button appears. You feel safe.
Type a 5th → it falls off the screen into the kettle below
The extra letters keep falling. You cannot stop them.
Click Login → you're in. The voice says "I am a teapot." Immediately. No warning.

The dashboard looks fine. It is not fine.

Status bar boots: BREW / HTCPCP/1.0 → 200 OK
Click any sidebar link → GET /overview → 418 I'm a Teapot (RFC 2324)
Short click the kettle → chaos
Hold the kettle 1 second → tea pours, page changes
Visit all three pages → UI fades, 418 modal appears
Bottom right corner → switch between the 90s and modern version at any time

The 90s version stays frozen at 800px wide, refuses to be responsive, and renders exactly as it would have in 1998. The chaos is authentic.
The modern version redirects you back to the 90s version on reload. You cannot escape the past.

DEMO

Code

GitHub logo judexify / kettly

A professional SaaS dashboard that can only be navigated by a kettle. Returns 418. Brews nothing. RFC 2324 compliant. for the Dev.to challange

Kettly — Enterprise Brewing Solutions

RFC 2324 compliant. Brews nothing. Ships to production.

What is this?

Kettly is a fully functional SaaS dashboard that secretly makes no sense.

It looks like a real product. It has a sidebar, analytics, reports, and a status bar that boots with system logs. But the sidebar does nothing. The only way to navigate is by holding down a kettle. Short-clicking it causes chaos. The app ends with an HTTP 418 error and a brief history of why that exists.

Built for the DEV April Fools Challenge 2025 — prompt: HTCPCP IYKYK.


The Joke

On 1 April 1998, Larry Masinter published RFC 2324 — the Hyper Text Coffee Pot Control Protocol — as an April Fools' joke. Buried inside was HTTP status code 418: I'm a Teapot, returned when a teapot is asked to brew coffee.

In 2017, someone tried to delete it…

How I Built It
Pure HTML, CSS, and Vanilla JavaScript. No frameworks. No libraries.
No build tools. No backend. No real functionality whatsoever.
Two separate HTML files. One deliberately modern, one deliberately stuck in 1998. Linked to each other at the bottom right of every screen including the entry screens, because the joke starts before you log in.
The hardest part of building deliberately bad software is that it still has to work. The dysfunction has to be functional.

The long press — telling a short click from a long press required a setTimeout of 1 second and an isLongPress flag checked on both mouseup and touchend for mobile support. Short press fires chaos. Long press fires the brew sequence and the page cycle. On mobile, the browser's native long-press context menu kept hijacking the interaction — fixed by cancelling contextmenu events and stripping pointer-events from the image element so the browser stops treating it as a pressable asset.
The input — every character beyond 4 is animated falling off the screen via CSS keyframes, then stripped from the input value in JS. The field stays at 4. The chaos around it does not stop. The user did this to themselves.
The 90s version has no media queries. This is intentional. A 90s website was never responsive — it broke on every screen and that was just life. The broken layout on mobile is not a bug. It is the most historically accurate decision in the entire project.
The version switch — the modern version redirects to the 90s version on direct load or reload using document.referrer. You always land in 1998 first. Getting to the modern version requires actively choosing it.
The voice — Web Speech API reads "I am a teapot" the moment you enter the dashboard. No audio files. No libraries. One line of JavaScript. RFC 2324 compliant.

Prize Category
Best Ode to Larry Masinter
On 1 April 1998, Larry Masinter published RFC 2324 — the Hyper Text Coffee Pot Control Protocol — as an April Fools' joke. Inside it was one line: if you ask a teapot to brew coffee, it must return 418 I'm a Teapot. A joke. Nobody thought it would last.
In 2017, someone tried to delete it. The internet revolted.
Thousands protested on GitHub. A website — save418.com — launched in its defence. 418 survived. It is now permanently reserved. Forever.
Kettly exists entirely in his honour.
The app is named after a kettle. The only navigation is a kettle. Every sidebar link returns 418. The status bar opens with BREW / HTCPCP/1.0 → 200 OK. The 90s version is set in the exact year he published the RFC — 1998 — and the copyright footer never changes.
The voice says "I am a teapot" because he wrote a teapot into internet law.
The 90s version exists because he published it in 1998 and the internet never really moved on.
Larry Masinter hid a punchline inside internet infrastructure, watched the world argue about it for 27 years, and won.
Kettly is the least we could do.

Top comments (0)