Where the Idea Came From
I'm a big fan of StoryGraph's reading challenges, where you can build custom ones with creative prompts or specific books, instead of just picking a number goal like on Goodreads. Goodreads does have a different feature called Listopia, though, where users vote on which books fit a custom theme. And then there's listchallenges.com, which lets people build lists on anything (not just books) and compare progress with each other.
Those three inspired me to make my own personal Listopia, built around my own lists, as a silly little easter egg.
What Is Listopia?
Each list is a small challenge — a title, a category, and a set of items. Some lists show up as a poster/cover grid (books, movies, games), others as a plain table when images wouldn't add anything. My own progress comes pre-checked, so every list already has something to compare against.
How the Comparison Works
Your progress is saved in your own browser with localStorage. There are no accounts, and nothing is shared between visitors, so it's just you and my lists. Each list's detail page puts your progress next to mine and sums it up in one line: ahead, behind, tied, or done.
Showing Who Did What
The most interesting part to design was making it obvious, at a glance, which items you have done and which ones I have.
- Poster view: my first version showed the visitor and owner checkmarks in two different places on each card, which made it hard to compare them. I moved both checklists side by side into their own section, clearly separated from the image, so the cover stays a cover and the comparison has its own space.
- Table view: some lists just don't need images, like hobbies or travel goals. For those, I made a table view with matching checklists side by side, so each row reads as one clear comparison.
The Small Stuff I Cared About
It's a small project, but I still gave it the same attention as anything else I build:
- An accessibility pass: contrast fixes, keyboard navigation, and a proper heading hierarchy
- An image optimization pass on the poster and cover assets
- Unit tests (Vitest) for the Pinia store that tracks visitor progress
- Design tokens shared with this portfolio, so the two feel like siblings