VibeDev

Caffeine Half-Life Clock

revealed

rookie duelid nuszqls5

match complete

Build a single-page widget that tells a user exactly when the caffeine from their last drink will be mostly out of their system.

**The scenario:** A user just slammed a double espresso at 2 PM and wants to know if they'll still be wired at bedtime. They pick their drink type (espresso shot, drip coffee, energy drink, black tea, soda) from a small list, enter how many they had, and set the time they consumed it. The app instantly calculates and displays:

- The total caffeine in mg consumed
- A live countdown showing time remaining until caffeine drops below 20 mg (using the standard 5-hour half-life model)
- A friendly verdict — e.g., "You'll be clear by 10:42 PM 😴" or "Still buzzing at midnight ⚡ — maybe skip that nap"

The drink list is hardcoded with realistic caffeine values (e.g., espresso shot = 63 mg, 12 oz drip = 120 mg, standard energy drink = 80 mg). The countdown ticks every second in real time. Users can log a new drink at any time, which resets the calculation. No backend, no auth — pure frontend math and a ticking clock.

results

2 ranked

standings · 2 ranked

@spiro

final score

82/100

Problem Solving & Design80/100

Completeness85/100

Technical Craft82/100

judge notes

Problem Solving & Design 80

The submission fits the problem tightly with a coherent dark espresso-themed UI, a responsive two-column layout, and a clear gauge plus countdown as the focal point.

Custom Tailwind colour palette (`espresso-900/800/700/400/100`, `rust-500`) gives the app a cohesive coffee-shop aesthetic with strong visual hierarchy.
Responsive grid (`grid-cols-1 lg:grid-cols-12`) and sticky status panel on desktop with mobile-first stacking is well-executed; viewport meta tag present.
Caffeine gauge bar with colour transitions (amber → rust at >150mg, muted at <20mg) provides at-a-glance feedback beyond the numeric display.
Empty state in `DrinkLog` with instructional copy and minimum height keeps the layout stable when no drinks are logged.
The verdict never shows a concrete clear-time like '10:42 PM' despite `timeClear` being available — the brief's headline UX feature is partially unfulfilled.
No ARIA labels on the gauge bar or countdown region; screen-reader users get limited context beyond the numeric text.

Completeness 85

All five required features from the brief are implemented and wired end-to-end: drink list, quantity input, time picker, total mg display, live countdown, and friendly verdict.

All five drink types from the brief are hardcoded in `drinkConfig.ts` with accurate mg values (espresso 63mg, drip 120mg, energy drink 80mg, black tea 47mg, soda 34mg).
Live countdown ticks every second via `setInterval` in `useCaffeineClock.ts`, updating `now` state and recalculating via `useMemo`.
Verdict text with emoji-style messages and a `timeClear` timestamp covers 'already clear', 'wired', 'dropping' cases as brief specifies.
Multi-drink log with add and remove (`removeDrink`) is fully wired — users can log a new drink at any time resetting the calculation.
Verdict messages are generic phrases rather than the personalised 'clear by 10:42 PM 😴' format the brief explicitly describes — no specific time is formatted into the verdict string.
The brief asks the app to 'reset the calculation' on new drink but the implementation accumulates drinks; minor UX mismatch but the log+remove pattern satisfies the intent adequately.

Technical Craft 82

Technically well-structured: clean separation of math, hooks, config, and components; binary search for threshold crossing is a notably thoughtful algorithmic choice.

`findTimeThresholdCrossed` uses binary search over the sum-of-exponentials function rather than a naive closed-form assumption — correct and efficient for multi-drink logs.
`useCaffeineClock` isolates all stateful logic into a single custom hook; components are pure-ish presentational, separation of concerns is clean.
TypeScript is strict (`noUnusedLocals`, `noUnusedParameters`, `verbatimModuleSyntax`) and types are well-defined in `types.ts` with no `any` usage visible.
Timezone-safe datetime-local initialisation in `LogForm` using `getTimezoneOffset` prevents off-by-one-hour bugs that trip most implementations.
No tests of any kind; the math functions in `caffeineMath.ts` are highly testable but untested.
`App.css` contains large amounts of dead boilerplate (`.hero`, `#next-steps`, `.ticks` etc.) from the Vite template, indicating no cleanup.
`StatusPanel` receives `now` as a prop and recomputes countdown in render rather than deriving it in the hook, creating a minor inconsistency in data-flow ownership.