I Built an Enterprise Coffee Dashboard (That Refuses to Brew Coffee)

This is a submission for the DEV April Fools Challenge

What I Built

I built the Enterprise HTCPCP Interface (HTCPCP_CTRL_NODE_v1.0). It is a highly over-engineered, unnecessarily complex, and deeply frustrating dashboard for brewing coffee using the Hyper Text Coffee Pot Control Protocol (RFC 2324).

It solves absolutely zero real-world problems and introduces several new ones:

1. Cross-Contaminating Sliders: Trying to set the "Thermal Kinetic Energy" (temperature)? Oops, that just randomly altered your "Extraction Pressure". Adjusting the "Particulate Granularity"? Say goodbye to your "Lactose Aeration Quotient". Getting the perfect brew settings is a Sisyphean task.
2. Manual Hand-Crank Power Generator: You can't just click "Brew". You have to rapidly mash a button to charge the system's power capacitor to 100%. If you stop clicking, the power drains back to zero.
3. Inevitable Failure: After all that hard work, the system connects to a sentient AI teapot that always rejects your request with a dramatic, dynamically generated HTTP 418 error.

Demo

You can try to brew some coffee (and inevitably fail) here:
Live Demo: Enterprise HTCPCP Interface

(Warning: May cause mild frustration and a sudden craving for tea).

Code

The project was built entirely within Google AI Studio. Here is a snippet of the delightfully terrible UX logic where the sliders sabotage each other, and the Gemini AI prompt that generates the 418 excuse:

// The delightfully terrible cross-contaminating sliders
  const handleTempChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setTemp(Number(e.target.value));
    if (Math.random() > 0.5) setPressure(prev => Math.min(20, Math.max(1, prev + (Math.random() > 0.5 ? 1 : -1))));
  };

  const handleGrindChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setGrind(Number(e.target.value));
    if (Math.random() > 0.5) setAeration(prev => Math.min(100, Math.max(0, prev + (Math.random() > 0.5 ? 5 : -5))));
  };

  // ... (other sliders do the same)

  // The AI Sentient Teapot Prompt
  const prompt = `You are a sentient teapot that has just received a highly complex, over-engineered request to brew coffee via the HTCPCP (Hyper Text Coffee Pot Control Protocol). 
  You must reject this request with a 418 I'm a teapot error. 
  Generate a highly dramatic, passive-aggressive, and overly technical excuse explaining why you cannot brew coffee because you are, in fact, a teapot. 
  Mention Larry Masinter (the creator of the 418 status code) in a reverent or funny way.
  Keep it under 3 sentences.`;

  const response = await ai.models.generateContent({
    model: 'gemini-3-flash-preview',
    contents: prompt,
  });

How I Built It

I built this using Google AI Studio's agentic build environment.

• Frontend: Next.js App Router, React, and Tailwind CSS for that overly serious, dark-mode "enterprise hacker" aesthetic.
• Animations: motion (Framer Motion) for the dramatic terminal scanlines, the flashing 418 error screen, and the floating tea emoji.
• AI Integration: The @google/genai SDK. I used the gemini-3-flash-preview model to act as the backend "appliance". Instead of actually brewing coffee, it generates a unique, passive-aggressive excuse every single time you hit the brew button.

Prize Category

I am submitting this for two prize categories:

1. Best Google AI Usage: I used Google AI Studio to build the app, and I embedded the Gemini API (gemini-3-flash-preview) directly into the application logic. Instead of using AI to solve a complex problem, I used cutting-edge generative AI to roleplay as a stubborn, sentient teapot that refuses to do its job.
2. Best Ode to Larry Masinter: The entire application is a massive, over-engineered tribute to HTCPCP and the 418 status code. Furthermore, the Gemini system prompt explicitly instructs the AI to mention Larry Masinter in a reverent or funny way in every single error message it generates!