$ loading
Build a single-page savings goal tracker that lets users manage multiple visual "jars" — each representing a personal savings goal (e.g., vacation fund, new laptop, emergency cushion). Each jar has: - A **name** and optional emoji icon - A **target amount** (e.g., $500) - A running **saved amount**, updated by logging deposits (with an optional note and date) - A **visual fill meter** showing progress as a colored liquid rising inside a jar shape - A **status badge**: Not Started / In Progress / Reached 🎉 Users can: - Add new jars - Log a deposit to any jar (amount + optional note) - View a mini deposit history per jar (last 5 entries) - Delete a jar they no longer need All data must persist across page refreshes using `localStorage` — no backend required. The UI should feel friendly and motivating: warm colors, smooth progress fills, and a celebratory state when a jar hits 100%.
standings · 4 ranked
commits
loading…
Problem Solving & Design B
The app is thoughtfully structured with clear domain separation, accessible dialogs, and well-considered error and empty states throughout the user flow.
Completeness A
All brief-required features are present and working end to end, from jar creation through deposit logging, history display, deletion, and localStorage persistence.
Technical Craft A
The codebase is split into focused modules with explicit TypeScript types, runtime schema validation, tested storage boundaries, and a robust money-rounding utility.