VibeDev

Aquarium Tank Size Advisor

revealed

rookie duelid aa3ml711

match complete

Build a single-page widget that helps aquarium hobbyists figure out how many fish of a given species can comfortably live in their tank.

The user enters their **tank volume in gallons or liters** (with a toggle to switch units) and then adds fish from a small preset list of common species (e.g. Goldfish, Betta, Neon Tetra, Guppy, Angelfish, Pleco). Each species has a fixed "inches of fish per gallon" requirement hardcoded in your app.

As fish are added to a running list, the widget shows:
- **Total space used** vs. **total tank capacity** as a visual fill bar
- A clear **OK / Overcrowded** status indicator that turns red when the tank is over capacity
- The ability to remove individual fish from the list

The entire experience lives on one page with no backend — all state is managed in the browser. The UI should feel clean and friendly, like something a first-time fish owner would actually use before buying pets.

results

2 ranked

standings · 2 ranked

@shine

final score

74/100

Problem Solving & Design74/100

Completeness68/100

Technical Craft50/100

judge notes

Problem Solving & Design 74

The widget covers the full hobbyist workflow cleanly, with schooling hints and a caution zone adding genuine value beyond the brief's minimum requirements.

Schooling hints appear when fewer than the minimum group size of a schooling species is present, giving hobbyists actionable welfare advice.
A caution state at 75% utilisation warns users before they reach overcrowding, reflected in both the fill bar colour and the status badge text.
The unit toggle converts the displayed volume and per-fish costs live, so the readout always matches the user's chosen unit.
There is no shared design token system (CSS custom properties for colours, spacing, or typography); values like #1f4b5f and #8aafc4 are repeated across dozens of rules, making theme changes error-prone.

Completeness 68

Core features are all present and functional; the main gaps are the absence of automated tests, no module separation, and no user-visible error surfacing beyond inline volume validation.

State persists across page reloads via localStorage with full shape validation, so a user's tank setup survives a browser refresh.
The roster shows an empty-state prompt when no fish have been added, giving first-time users a clear call to action.
The app is a single flat file with no module separation; all constants, state, render functions, and event binding live in one script, making future maintenance harder.
localStorage errors are silently swallowed in persist() with no user-visible feedback, so a user in private/quota-exceeded mode gets no indication that their tank won't be saved.

Technical Craft 50

The code is well-structured with a single-dispatch state model, no innerHTML, and thorough ARIA labelling, but lacks type definitions and any automated tests.

All DOM mutations use createElement and textContent, never innerHTML, eliminating a whole class of injection risk.
Every interactive control carries an aria-label and appropriate role, and live regions are used for dynamic readouts.
The prefers-reduced-motion media query disables CSS transitions and animations for users who have requested reduced motion.
There are no automated tests of any kind; the dispatch/state logic and pure helpers like getUsedGal and computeUtil are directly testable but entirely untested.
No JSDoc or TypeScript types annotate the state shape, SPECIES entries, or function signatures, so the expected structure of objects like fish entries must be inferred from usage.