9-to-5ProjectsYapping
← Back to projects

Personal  ·  2026

Building StackTier, a tier-list tool that forces honest rankings

Building StackTier, a tier-list tool that forces honest rankings

Overview

stacktier.app is a tier-list app I built that uses a bell curve to keep rankings honest: most items land in the middle, and only the genuine best and worst earn an S or a D. It was the first app I ever vibe coded, and it's live.

The problem

Every tier list turns into S-tier spam, and then it means nothing.

I make tier lists for fun, ranking games, restaurants, whatever, and I kept noticing the same thing: half the items end up in S. When everything is the best, nothing is. The format promises a ranking and then lets you dodge the actual hard part, which is admitting what's only okay.

The tools out there don't push back. They hand you the rows and let you pile everything up top. That's comfortable and completely useless. A ranking is only worth anything if it costs you something to make.

So I wanted a tier list with a spine, one that makes you put most things in the middle and earn the top, the way a real distribution works. The idea was simple: bake a bell curve into the tool itself, so honesty isn't a thing you remember to do, it's a thing the app enforces.

What I did

I wrote the whole thing as a spec first, then vibe coded it into a real app.

Starting with a spec, not code

This was my first time vibe coding an app, and the thing that surprised me is how little of it was typing. Before I wrote a line, I wrote two documents: a product spec describing every screen and rule, and a tech-stack doc picking what I'd build on. The clearer those were, the better the AI built. A vague ask got me mush. A precise one got me the thing I pictured.

Building it with AI

With the spec in hand, I built StackTier in Claude Code, going screen by screen: the landing page, Google sign-in, a dashboard, and the create-a-list flow where you upload your items. Most of it moved fast because the target was clear. I was steering and reviewing more than I was hand-writing, which is a different kind of work than I expected, and a better one for a solo build.

The one part I slowed down for

The ranking logic was the piece that actually had to be correct, so it's the piece I didn't rush. Every item gets a unique rank, and moving one has to shift the others without breaking. On top of that sits the bell curve: a "Clean Up" button that redistributes everything into S through D by a 7/19/48/19/7 split, with weird little edge cases at one item, two items, fewer than ten. That math is easy to get subtly wrong, so it's the one part I wrote real tests for. The drag-and-drop was the other fiddly bit, since items move between tiers and a pool and a ranked list, and it had to feel right on a phone too.

Shipping it

Keeping the backend in one place with Supabase meant the database, sign-in, and image storage were one system instead of three. Push to main, Vercel deploys. Generate a share link and anyone can see your list, no account needed. The unglamorous last stretch (the auth redirects, the access rules, the signed image URLs) was where most of the real work hid. But it's live, and you can make a list and send it to a friend.

Takeaways

My first vibe-coded app taught me the spec is the actual job.

The lesson I'm keeping is that vibe coding rewards clarity, not speed. When I knew exactly what I wanted, the AI built exactly that. When I was fuzzy, it confidently built the wrong thing, fast. The product doc and the stack doc weren't busywork I did before the real work. They were the real work.

The other thing: a good constraint can be the whole product. StackTier is basically one opinion, a bell curve, turned into a button. I didn't need a hundred features. I needed one rule the tool wouldn't let you wiggle out of.

What I learned

  • Vibe coding works in proportion to how well you've specced. A tight product doc and a chosen stack up front let the AI move fast without wandering off.
  • Shipping is its own skill, separate from building. Auth flows, access rules, a domain, a deploy: the last stretch is quiet, and it's where things actually break.

Skills I picked up

  • Spec-first AI development: writing a product doc and a tech-stack doc precise enough for an AI agent to build against.
  • Shipping a full-stack app on Next.js and Supabase: Google sign-in, a Postgres database with row-level access rules, image storage, and deploys on Vercel.
  • Writing focused unit tests with Vitest for the one piece of logic I couldn't afford to get wrong.
  • Taking an idea all the way to a live, shareable product, on my own.