DEV Community

Judexify
Judexify

Posted 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. Boot sequence. 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."

There is one problem.

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 drawing of a kettle for one second. While you hold it,
tea pours from the spout. The kettle tilts. The page changes.

That is the entire navigation system. A kettle. That you hold.

Short-clicking the kettle causes chaos coloured shapes explode across
the screen and the status bar says "Kettle: Internal Pressure Rising."
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 to 30% opacity and
an HTTP/1.1 418 I'm a Teapot modal appears. Behind it, on loop,
"I'm a Little Teapot" is playing. It has been playing since you logged in.
It will never stop.

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 an animated CSS kettle below
  • The input locks at 4. The extra letters keep falling. You cannot stop them.
  • Stop typing for 1.5 seconds → the kettle overflows into a cup
  • Click Login → "I'm a Little Teapot" begins. 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, kettle tilts right, page changes
  • Visit all three pages : UI fades, 418 modal appears
  • Click "The story behind 418" : Larry Masinter lore, written for your non-technical friends

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.

The hardest part of building deliberately bad software is that it still has to work. The dysfunction has to be functional. So the dashboard was built properly first CSS grid layout, sidebar, status bar, page switching, responsive breakpoints for mobile and then broken in exactly the right ways.

The input lock — every character beyond 4 is animated falling off
the screen via CSS keyframes, then immediately stripped from the input
value in JS. The field stays locked at 4 characters. The chaos
around it does not stop. The user did this to themselves.

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 tea pour, the tilt animation, the page cycle,
and the sidebar active state — in that exact order, timed to feel
like the kettle is physically pouring content into the next page.

The boot sequenceBREW / HTCPCP/1.0 → 200 OK had to fire
after the dashboard faded in. Running it on page load meant it
scrolled past while the screen was still white and no one would
ever see the most important line of the whole project.

The audio — "I'm a Little Teapot" plays on loop from the moment
the dashboard loads. This is not random. RFC 2324 states that when
a teapot refuses to brew coffee, "the resulting entity body MAY be
short and stout."
Larry Masinter quoted a children's nursery rhyme
inside an internet protocol. The audio is the most RFC-compliant
decision in this entire project.

The 418 history modal — written for someone who has never heard of Larry Masinter. The full story: the 1998 joke, what a status code actually is, the 2017 deletion attempt, the Save 418 campaign, why it survived, and a joke that ends with an unclosed bug report.
Because some bugs should never be closed.


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. Written in twenty minutes. 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 boot sequence opens with
BREW / HTCPCP/1.0 → 200 OK. The date 1 April 1998 is hardcoded on every screen — entry and dashboard — and never changes.

The audio is the nursery rhyme he quoted in the RFC.
The history modal tells his story to anyone willing to click a link at the bottom of a teapot error message.

Larry Masinter hid a punchline inside internet law, watched the world argue about it for 27 years, and won.

Kettly is the least we could do.

Top comments (0)