DEV Community

Cover image for STEEP: Your repo's fortune, steeped in truth.
L. Cordero
L. Cordero

Posted on

STEEP: Your repo's fortune, steeped in truth.

April Fools Challenge Submission β˜•οΈπŸ€‘

This is a submission for the DEV April Fools Challenge


What I Built

Think teapot. Think tea. Think Ig Nobel. Think esoteric. Think absolutely useless. Think...Harry Potter?...Professor Trelawney?...divination!

Tea leaf reading. For GitHub repos.

That's Steep.

Paste a public GitHub repo URL. Steep fetches your commit history, file tree, languages, README, and contributors. It finds patterns in the data and maps them to real tasseography symbols, the same symbols tea leaf readers have used for centuries. Mountain. Skull. Heart. Snake. Teacup.

Then Madame Steep reads them.

Madame Steep is an AI fortune teller powered by the Gemini API. She trained at a prestigious academy (she won't say which) and pivoted to software divination when she realized codebases contain more suffering than any teacup. She delivers a structured reading of your repo's past, present, and future with a brew rating, a lucky commit message, and a one-sentence verdict.

She will not help you write better code. She cannot brew coffee. She can only read leaves.

I pointed Steep at my own repo.
The Sun appeared (test files found). The Spade appeared (CI/CD configured). The Apple appeared (README over 12,000 characters). And Madame Steep had this to say:

"A robust brew, full of promise, awaiting its next steep."

She's not wrong.

Three teapots. I'll take it.

When your reading is done, hit "Share My Fortune." Steep generates a downloadable card with your verdict, symbols, brew rating, and lucky commit message. Post it. Tag a developer who needs their leaves read.

Demo

Video:

Live app: steep418.vercel.app

Paste your repo. Or a coworker's. Or that side project you abandoned in 2023. The carousel has readings for some well-known repos if you want to see what Madame Steep does before you hand her your own cup.

When you land on the page, you'll see what looks like a crash screen. It's not a bug. It's the opening act. Press any key to skip, or wait for the glitch dissolve.

What a reading looks like:

Paste a repo URL. Click DIVINE. Madame Steep peers into your cup. She tells you about your repo's past, its present state (the roast), and its ominous future. She rates your brew (1-5 teapots). She gives you a lucky commit message. She delivers a one-sentence verdict.

Then you can download your fortune as a shareable image or save it to your Grimoire (localStorage).

This has been a reading from a teapot. You came here for code review. The leaves had other plans.

Code

GitHub logo earlgreyhot1701D / steep

A deliberately useless tea leaf reading app for GitHub repos. Paste a URL, get a dramatic, wildly specific, and entirely unhelpful divination of your codebase. Powered by Gemini, tasseography, and poor judgment. Built for the DEV April Fools Challenge 2026. This is a teapot. It cannot brew coffee. πŸ«–

STEEP

Your repo's fortune, steeped in truth. πŸ«–

Steep Banner


Demo

Watch the demo


In 1998, Larry Masinter wrote RFC 2324 as an April Fools' joke. It defined a protocol for controlling coffee pots over HTTP and introduced status code 418: "I'm a teapot." The spec notes that the response body "MAY be short and stout."

It was satire about over-extending HTTP. Then a 15-year-old developer started the Save 418 movement. Major frameworks kept it. Python 3.9 added IM_A_TEAPOT. A joke became permanent internet infrastructure.

Steep is that teapot.

It reads tea leaves. The tea leaves are your GitHub repository. Paste a repo URL and Steep fetches your commit history, file tree, languages, and README. It finds patterns in the data and maps them to real tasseography symbols from centuries-old tea leaf reading traditions. Then an AI fortune teller named Madame Steep delivers a dramatic, weirdly specific, and entirely useless divination of your codebase's…

Architecture

User pastes repo URL
        |
        v
github.js fetches repo data (unauthenticated, 60 req/hr)
        |
        v
symbols.js selects symbols deterministically
  - 17 triggers evaluated against real repo data
  - sorted by drama (Grim before Apple)
  - Teacup always included
        |
        v
/api/divine.js sends data + symbols to Gemini 2.5 Flash
  - 80+ line Madame Steep system prompt
  - returns structured JSON
        |
        v
reading.js renders the full reading
  - DOM construction via textContent (no innerHTML)
  - shareable card via html2canvas
  - save to localStorage grimoire
Enter fullscreen mode Exit fullscreen mode

One page. Vanilla HTML/CSS/JS. No framework. One Vercel serverless function. Total cost: $0.

The pixel art crash screen, the dusty blue aesthetic, the scanline overlay, the three-font system (Press Start 2P for the machine, VT323 for the terminal, Cormorant Garamond for the mystic) are all CSS. No images except the SVG pixel teacup, which is drawn inline.

21 unit tests. Yes, the joke app has tests.

How I Built It

The idea

The concept started in a conversation with Gemini. I was exploring Ig Nobel Prize winners for "delightfully useless" inspiration. We went through dead code reanimation tools, commit quality scanners based on astrology, and repo phrenology before landing on tasseography. Tea leaf reading. Because the challenge prizes are teapots. And the Larry Masinter category is literally about a tea/coffee protocol. The concept locked when I realized the ENTIRE APP could be a 418 response: a teapot that someone asked to do useful work, refusing politely.

The design

I explored eight UI directions across Claude, Google Gemini, and Google Stitch. Carnival fortune teller. Victorian broadsheet. Dark sΓ©ance dashboard. Warm tea shop. Steampunk newspaper. The dark directions kept looking too serious. The light directions didn't match the pixel art energy.

Google Stitch generated complete Material Design 3 systems with color tokens, font stacks, and Tailwind configs. Beautiful, but they all looked like SaaS products. The final direction, dusty blue pixel art with a crash screen opening, came from stripping everything back and asking: what would a haunted computer's fortune teller look like?

I also used Google Veo to generate the banner image for this post.

The symbols

The 17-symbol system is the part I'm most proud of. Each symbol comes from real tasseography tradition. Each one maps to a deterministic trigger in the GitHub data. The Mountain appears when your repo has 100+ commits. The Skull appears when you have no LICENSE file. The Grim appears when your repo hasn't been touched in 6 months.

The selection happens client-side in symbols.js. No AI involved. The symbols are sorted by drama (Grim outranks Apple). If fewer than three triggers match, the Bird (good news) appears as a default. The Teacup is always present. The reading happens inside a teapot.

This split is deliberate: the DATA is deterministic, the STORYTELLING is AI. Same repo, same symbols every time. But each reading is a unique narrative.

The AI

Madame Steep is an 80+ line Gemini system prompt. She's Professor Trelawney meets a disappointed senior engineer. The prompt engineering focused on:

  • Making her reference specific repo data (file names, commit messages, percentages) instead of generic observations
  • Weaving tea metaphors naturally into every section
  • Keeping verdicts under 15 words (the shareable moment)
  • A banned word list to kill LLM filler ("formidable," "testament," "leviathan," "sprawl")
  • Never giving useful advice. She's a mystic, not a linter.
  • Never being cruel to the developer. She roasts the code, not the coder.

The stack

Layer What
Frontend Vanilla HTML/CSS/JS
Hosting Vercel (free tier)
Backend One Vercel serverless function
AI Google Gemini 2.5 Flash
Data GitHub REST API (unauthenticated)
Storage localStorage
Share html2canvas

The 60 request/hour GitHub API rate limit is a feature. The neon bar at the top of the app tracks it in real time: "LEAVES REMAINING: 47 / 60 β€’ THE LEAVES GROW WEARY." When you run out: "THE LEAVES HAVE GONE SILENT. RETURN WHEN THE HOUR TURNS."

Prize Category

Best Ode to Larry Masinter

In 1998, Larry Masinter wrote RFC 2324 as an April Fools' joke. He defined a Hyper Text Coffee Pot Control Protocol, complete with a BREW method, Accept-Additions headers (cream, sugar), and status code 418: "I'm a teapot." The spec notes the response body "MAY be short and stout," a nod to the nursery rhyme.

It was satire about over-extending HTTP for absurdly specific purposes. Then in 2017, a 15-year-old developer named Shane Brunswick started the Save 418 movement when the IETF tried to remove it. The movement went viral. Node.js, Go, Python, and ASP.NET all kept 418. Python 3.9 officially added IM_A_TEAPOT. A joke from 1998 became permanent internet infrastructure.

Steep is structurally a 418 response. The entire app is a teapot that someone asked to do useful developer work (code review), and it responded with a tea leaf reading instead. The 418 page is not an Easter egg. It's the thesis.

Click "Actually, give me a real code review" and Steep tells you: "You asked me to brew coffee. I can only read leaves. This is not a code review tool. This is a vessel of divination. RFC 2324, Section 2.3.2."

The rate limit bar says "THE LEAVES GROW WEARY." The loading screen says "Madame Steep peers into your cup." The crash screen error code is ERR_TEAPOT_418 :: STEEP_DIVINATION_FAULT. Every interaction is steeped (sorry) in the teapot metaphor. The app IS a teapot. It has always been a teapot.

Best Google AI Usage

Google AI is embedded throughout Steep, from concept to design to product:

Gemini Chat helped shape the concept. The path from "Ig Nobel prizes" to "tasseography for GitHub repos" happened in a Gemini conversation.

Google Stitch generated the UI explorations. Multiple rounds of complete page mockups with color token systems and component patterns. Eight distinct directions before locking in.

Google Veo generated the banner image for this submission.

Gemini 2.5 Flash API powers the live product. Every reading is a real-time Gemini call with an 80+ line character prompt, structured JSON output, and creative interpretation channeled through a deterministic symbol framework.

The symbol system is where the architecture gets interesting. 17 symbols from real tasseography, each mapped to a deterministic trigger:

Symbol Meaning Your repo earns it when...
β›° Mountain A great journey 100+ commits
πŸ’€ Grim Death approaches No commits in 6+ months
β™₯ Heart Devotion Solo contributor, 50+ commits
🐍 Snake Deception 50%+ lazy commit messages
β˜€ Sun Great happiness Test files found
☠ Skull Danger No LICENSE file
β™  Spade Hard work CI/CD configured
🍎 Apple Knowledge README over 500 characters
βš” Sword Conflict 30%+ merge commits
βš“ Anchor Stability Consistent commits over 6+ months
🐦 Bird Good news Pushed within 7 days
✝ Cross Trials 20+ open issues
🌳 Tree Growth 5+ active branches
πŸͺ Kite Wishes Roadmap file detected
πŸŒ™ Moon Mystery .env and .env.example both present
🐈 Cat Treachery Outdated dependencies
🌰 Acorn Windfall High stars-to-age ratio
πŸ«– Teacup The vessel speaks Always present

Symbol selection is deterministic. No AI involved. Gemini's job is to interpret the symbols it's given, not to choose them. This means every reading is grounded in real data, and Gemini's creativity is channeled through a structured framework rather than generating everything from scratch. The data is consistent. The storytelling is not.


Built by L. Cordero (@earlgreyhot1701D)

AI assisted. Human approved. Powered by NLP.

Top comments (0)