Live · Personal project

Tierlist.app

A simple, ad-free place to rank the films, series, manga and audiobooks I actually consume, so I always have a recommendation ready.

Role

Design + frontend + backend

Years

2023–present

Status

Live · solo

Link

tierlist.app ↗

Open the app ↗

tierlist.app/Books-Audiobooks-fgFjKUXxK94Y4Aq9CEhLnB

Why I built it.

01 · BACKGROUND

Origin

I watch a lot of series, films and anime. I read a lot of manga. I listen to a lot of audiobooks. When friends ask me “what should I watch?” I want an honest answer ready, not a vague “I liked something last month, I think.”

The existing tools were either “open Paint and screenshot” or ad-heavy community sites that felt slow and dated. I wanted a tier list that was simple, fast, free of strings: no ads, no upsells, no forced sign-ups, and that looked good enough that I’d actually use it.

So Tierlist.app is, first, for me. A drawer where every show, film, audiobook and manga I’ve finished gets a spot in . If you also want one, it’s free and public, but the brief was always: build the thing you wish existed.

Anatomy of a tier list.

02 · COMPONENT

Best AnimePUBLIC

Berserk

Vinland Saga

Frieren

Monster

UNRANKED

Pluto

Akira

12345

Live demo: drag items between the S / A tiers and the Unranked tray.

Lock the list

Toggle from the toolbar. Freezes drag, inline edit, and deletes until you unlock.

Rank

Rename inline. Recolour from a fixed palette of five tier colours.

Text item

Type a title. Click again to edit it. Autosaves on blur.

Image item

Upload via Uppy. Compressed, cropped, positioned client-side.

Unranked tray

Stash new items here. Drag into any tier. Delete from anywhere.

Three signature moments.

03 · INTERACTION

01 · Drag & rank

Touch-first drag. Text or image.

dnd-kit under the hood, custom snap rules on top. Items lift with a 4° tilt, ghost behind the cursor, and snap into the nearest band. Every item can be a string of text or an uploaded image. Switch any time, no schema gymnastics.

Best Anime · LOCKED LOCKED

02 · Lock when done

Commit your ranking. Stop touching it.

Once a list feels right, lock it. Items stop responding to drag, inline editing is disabled, the whole thing freezes. Unlock to keep tinkering. Saves you from the worst tier-list bug: an accidental nudge that demotes your S-tier on a mobile scroll.

🇨🇭felix🇧🇷ana🇯🇵haru

03 · Easter egg

The homepage is a shared room.

Open the front page and you’ll see other live visitors’ cursors, each with a flag from where they’re connecting. It’s not collaborative ranking; that’s never been the point. Just a small, playful sign that the room isn’t empty. Built on a tiny WebSocket layer that costs essentially nothing to run.

The stack.

04 · BUILD

Next.js 15 · App Router

Frontend · RSC

App Router, server actions, image optimisation. Currently running on Next canary with dynamicIO for finer-grained caching boundaries.

React 19

Drag layer, inline editing, dialogs. State stays local; cached server reads handle the rest.

Supabase

Auth · Postgres · Storage

Row-level security per profile, magic-link + Google auth, image storage for uploaded items. Migrations checked into the repo via the Supabase CLI.

dnd-kit + Radix UI

Primitives

dnd-kit for touch-aware drag with sensor tuning for mobile. Radix for dialogs, popovers, dropdowns. Everything else is custom, no component library.

Uppy

Uploads

Image uploads with client-side compression, restriction, and a positioning step, then straight into Supabase storage.

CSS Modules + tokens

Styling

No Tailwind, no UI library. Design tokens live in globals.css, components are scoped via CSS Modules, container queries handle responsiveness.

System notes.

05 · SYSTEM

Tier 01 · Coral

#EF7B7C

Accent · Yellow

#F2F279

Tier 02 · Green

#7FF180

Tier 03 · Purple

#7A7AEE

Type · One family

Aa Bb

100400500700

Family

Roboto

Radius

4px · everywhere

Atomic grid

80px item

How it got here.

06 · MILESTONES

Apr 2023

origin

First try. Drag-and-drop on Next.js 13.Got dnd-kit working with stacked items, a basic sidebar, and the bones of an editor. No persistence yet; everything in memory.

+ dnd-kit

Jan 2024

v0.4

Lock mode + delete behaviour.Implemented the lock toggle so a finished list stops moving, plus a proper delete strategy with revalidation. The bug-fix that became a signature feature.

+ lock

Feb 2024

v0.6

Auth, profiles, and the Discover feed.Supabase auth (email + Google), RLS policies for tiers and items, public / private visibility per list, the Discover grid, search, page transitions and a real not-found page.

+ social

Mar 2024

v0.8

Items can be images.Uppy uploads with restriction, client-side compression, and a positioning step. Items now rank text or image, mix freely in the same row.

+ images

Nov 2024

v1.0

Next.js 15.Applied the codemods, moved to Next canary, turned on dynamicIO. Caching boundaries got sharper, the Discover feed got faster.

→ next 15

May 2025

v1.2

New homepage + the cursor easter egg.Refactored the front page from “list of lists” into a proper landing with a parallax hero, plus the SharedSpace easter egg where every visitor’s cursor shows up with their flag.

+ playful

Aug 2025

v1.3

You can’t publish an empty list.Public lists now require at least two ranked items before they go live. Small quality bar to keep the Discover feed from filling with empty grids.

+ guardrail

Jan 2026

v1.4

Click an item, see the item.Item preview on click: a quick modal with the cover at full size, the title, and any metadata I scraped. Makes browsing other people’s lists feel less like reading a spreadsheet.

+ preview