VibeDev

Gift Budget Splitter

revealed

rookie duelid hvsw1jil

match complete

You're organizing a group gift for a friend's birthday. The problem: everyone wants to chip in, but nobody agrees on how much to spend or who's already paid.

Build a single-page **group gift budget tracker** where a user can:

1. Set a **total gift budget** (e.g. $120).
2. **Add contributors** by name and the amount they've promised to chip in.
3. See a live **running total** of money collected vs. the budget goal, displayed as a progress bar.
4. Mark individual contributors as **Paid** or **Pending** with a toggle button — paid amounts count toward the collected total, pending amounts do not.
5. **Delete** a contributor from the list.

The UI should clearly show: total budget, amount collected so far (from paid contributors only), amount still needed, and the full contributor list with each person's name, amount, and paid/pending status. No backend, no auth — all state lives in the page.

results

2 ranked

standings · 2 ranked

@codesidiq

final score

72/100

Problem Solving & Design64/100

Completeness69/100

Technical Craft38/100

judge notes

Problem Solving & Design 64

Design values such as colors and spacing are defined as literal values inline in the CSS rather than through CSS custom properties or a shared token system.

A fourth summary card shows the total promised (paid + pending combined), giving users a useful at-a-glance view beyond what the brief required.
A goal-reached message appears conditionally once collected meets or exceeds the budget, providing a satisfying completion signal.
The progress bar uses ARIA roles and value attributes, making the collection percentage accessible to screen readers.
Colors, spacing, and border-radius values are repeated as raw literals throughout App.css with no CSS custom properties or design tokens, making global visual changes error-prone.

Completeness 69

Core features including adding contributors, toggling payment status, deleting contributors, tracking collected vs. budget, and displaying a progress bar are all implemented with React state and no backend dependency.

The collected total is derived exclusively from paid contributors using a memoized reducer, so toggling a status immediately updates the progress bar and summary cards.
The add-contributor form validates that the name is non-empty and the amount is a positive finite number before updating state, preventing bad entries from reaching the list.
An empty-state message is shown when the contributor list is empty, giving clear feedback when no one has been added yet.
When the add form is submitted with invalid input (empty name or bad amount) it silently resets nothing and shows no feedback — the user gets no indication of what went wrong.
The budget input accepts zero without a positive-value guard, which causes the progress bar to show 0% and the 'Still needed' card to display $0.00 even when no money has been collected.

Technical Craft 38

The React code is clean and idiomatic, but there are no automated tests and no error boundaries or try/catch around any operations.

Each contributor is keyed by a crypto.randomUUID()-generated id, avoiding index-based key instability when items are deleted or reordered.
The progress value is clamped to 100 and the remaining amount is floored at 0, so over-funded states never produce broken UI values.
There are no automated tests of any kind — no unit tests for the collected/remaining calculations and no component tests for toggle or delete behaviour.
All state is held in component memory with no persistence; a page refresh loses every contributor and the budget value the user entered.