A birthday site with an anonymous wishlist

For my birthday, I built a website for friends with a celebration schedule and a wishlist where gifts can be reserved anonymously.

My role: Product Designer · Design Engineer
Duration: 4 days · ~20 hours of actual work
Stack: Next.js · Supabase · Vercel · Figma · Claude Code
Live: sweet27.vercel.app

Overview

I set the brief, designed the solution, and shipped it myself. Four days from idea to a live URL, working alone across design and code.

The problem

Everything about the celebration lived in chat threads, retyped for whoever asked next. No single version anyone could check.

The wishlist had a second problem: it only works if guests can see what is already taken, without having to say who they are.

What came of it

Four working days produced a product friends actually used, while preparing and on the days themselves.
Row-level security in the database, live gift-status updates, and rate limiting against request spam.
An AI-native workflow: designed and built in Claude Code, deployed from the same session.

0%sessions with rage clicks

80%traffic from mobile

74%average scroll depth

51unique visitors

Source: Vercel Web Analytics + Microsoft Clarity, 51 visitors across 52 Clarity sessions

Reserving a gift without an account

The wishlist needed two things that usually pull against each other: everyone has to see what is already reserved, and nobody should have to sign up or hand over personal data to reserve it.

So the site has no accounts at all. Each visitor is identified only by a token generated and kept on their own device. The database stores which gift is taken and which anonymous token took it, never who that person is. Row-level security enforces that at the database, not in the interface, so the rule holds regardless of what the client asks for.

The result is a one-click reservation whose status updates live for everyone else on the page, while the giver stays anonymous, including to me.

Process

Four days, around 20 hours of work.

0124 July · ~4 h

Next.js scaffolding, Supabase backend, first wireframe.

Idea & Goal, Requirements, Information Architecture, Wireframes

0227 July · ~2.5 h

Visual direction and the mobile layout.

UI Exploration, Responsive Design

0328 July · 9 commits

Design system, a critique pass, both agenda cards, the wishlist, and mobile polish.

Final UI, Development

0429 July · ~48 min

Final polish and a security regression fixed before release.

Launch

Two phone screens: the Day 1 agenda with its timed schedule, and the Wishlist screen explaining that a reservation is anonymous and can only be cancelled from the same device, with counters showing 6 free and 15 reserved ideas

What it’s built with

Next.js 15: App Router: pages, layout, and the API route that reserves a gift
React 19 + TS: components and types for bilingual (EN/UK) content
Tailwind CSS v4: the entire layout, with no separate CSS files
Framer Motion: a few targeted micro-animations
Supabase: Postgres + row-level security + Realtime for live “reserved” status across devices, with no accounts
Vercel: hosting and deploys, driven straight from Claude Code
Figma: source of the mockups for the hero, both agenda cards, the wishlist, and the footer
Claude Code + Impeccable: code generation, plus a design-process skill: init → document → critique