OverCaffeinated

Don't you just love the feeling of being over-caffeinated? We want to help you stay in that flow state and here's a website for that.

Comment

Caffeine App — Project Overview

What it is

A two-screen mobile-first web app for tracking caffeine intake and visualizing how long its effects will last. Built as a single HTML file with no dependencies.

Screens

Tracker

The main entry point. Users log caffeine doses by selecting presets (espresso, cold brew, energy drink, etc.) or entering a custom mg amount. The screen shows a 24-hour timeline bar with the onset zone and peak focus window plotted against the current time. Chips below the bar list each logged dose with a delete option.

Countdown

A full-screen flip-clock display showing time remaining until caffeine drops below an effective threshold. The background, bar color, tile style, and status label all shift across six stages as the level decays: Absorbing → Peak → Cruising → Fading → Running Low → Crashed. A scrubber in the bottom-right corner lets you scrub through the timeline for testing.

How they connect

Tapping "Countdown →" on the tracker navigates to the countdown screen. The countdown anchors its timer to the earliest logged dose, so the clock reflects actual elapsed time since the first drink. The "add caffeine" button on the countdown logs a new dose and syncs both screens. The back button returns to the tracker.

Caffeine model

The countdown uses a 5-hour half-life decay model. Time is anchored to a real wall-clock timestamp (doseTime) so the countdown runs in true real time — no pausing, no manual ticking. The effective window spans 24 hours from dose time to zero.

Stage thresholds are defined as fractions of peak level:

Stage Level
Absorbing 85–100%
Peak 65–85%
Cruising 40–65%
Fading 25–40%
Running low 10–25%
Crashed 0–10%

Files

File Purpose
caffeine-app.html Combined single-file app (both screens)
caffeine_countdown.html Standalone countdown screen (legacy)
caffeine-tracker.html Standalone tracker screen (legacy)
caffeine_countdown_spec.docx Original build spec

Hackathon Rubric — Cursor Hackathon

Team Name: _________________________________________

Category Criteria Max Score
Visuals & UX Design Interface supports usability and engagement 10 ___
Visuals show creativity, polish, aesthetic quality 10 ___
Functionality & Technical Depth Addresses a clear problem and provides value 10 ___
Features demonstrate technical depth 10 ___
Cursor / AI Integration Meaningful AI use with documented prompts/agents 10 ___
Clear explanation of AI role in system 10 ___
Execution & Innovation Original idea or unique approach 10 ___
Product is polished and market-ready 10 ___
Presentation & Teamwork Problem is clearly and convincingly pitched 10 ___
Equal team contribution (presentation + repo) 10 ___
Bonus Exceptional prompt engineering with Cursor +5 ___
TOTAL 100 (+5 bonus) ___

Overall Comments:

Outstanding / known issues

  • "Add caffeine" on the countdown hardcodes 200mg — should open drink picker or mirror the tracker's preset flow
  • Drink picker screen (linked from spec) is not yet built
  • Multiple stacked doses use earliest dose as anchor rather than computing a true combined decay curve on the countdown screen
  • No persistence — doses are lost on page refresh
  • Spec calls for border-radius: 0 on the caffeine bar; currently has a small radius on the fill element

Built With

Share this project:

Updates