Work Case study
RECRD.TOP
A social space for rating and ranking albums: designed in Figma, then built by the five of us.
- Figma
- React.js
- TypeScript
- Tailwind CSS
- Node.js
- Express
- MongoDB
- Spotify Web API
01
The Idea
A social product for ranking music albums, worked through in Figma first — wireframes, then interactive prototypes — and then built by a team of five that I led, with the focus on how interaction shapes engagement.
02
What I Did
- Led a 5-person team to create recrd.top, a social media platform for ranking music albums
- Designed the wireframes and interactive prototypes in Figma before any of it was built
- Developed a web-scraping script to ingest 10,000+ music albums from the Spotify Web API into MongoDB
- Implemented user authentication with email verification using JWT tokens, bcrypt hashing, and SendGrid
- Reduced LCP by ~63% (3s to 1.1s) by minifying and deferring non-critical JS
03
What Shipped
The demo on this page moves through album search, a ten-point rating, a personal ranking list, a leaderboard for both top albums and top users, and a profile carrying favourite albums, follower counts and an activity feed.
04
What I Learned
RECRD is where accessibility and usability stopped being a checklist for me. Designing the same flows for a phone and for a browser makes the differences impossible to ignore: touch targets that are fine under a cursor are not fine under a thumb, reading order matters more than visual order, and the amount of screen you can actually rely on is much smaller than the one you design on.
Working through it on both at once was the useful part: it is easier to design something usable on a wide screen and discover later that it does not survive contact with a phone.