Building A Tier List Playground  

Tier Cards : My Creation for Ranking Everything from A to D

TierCards is a fun and flexible web app where users can create tier lists for literally anything — from favorite games and characters to snacks or movies. You can upload your own images, grab them from the internet, or use the ones already saved in TierCards’ databaseMake your tier list truly yours by customizing colors, backgrounds, and titles, give it a unique name, and even embed it in your own projects. Want a copy? Download your tier list as a PNG or JPEG, or publish it online with detailed image info, categories, and let others vote on your creation. TierCards is all about creativity, personalization, and sharing your rankings in a fun way.

Tier Lists Should Be Fun… But They Weren’t

I’ve always enjoyed making tier lists — it’s fun to argue whether pizza belongs in S-tier or just A-tier. But every time I used the existing tier-list websites, I kept running into the same frustrations:

• The UI felt clunky and straight out of the early 2000s.
• No customization — you were stuck with whatever bland look the site gave you.
• Couldn’t even add simple titles or tooltips to images (so half the time, no one knew what I was ranking 😅).
• And seriously… no embed option? I wanted to share my tier list inside other projects, but nope, not possible.
• Overall, the experience just wasn’t fun — and tier lists are supposed to be fun!

So I decided to fix all that and build my own version of a tier-list website — one that actually feels modern, customizable, and enjoyable to use. 🎉

❗ Challenges & Solutions ✅

❗Challenge 1: Making Drag & Drop Actually Work Everywhere

One key feature I wanted for TierCards was a smooth drag-and-drop — just grab an image and drop it into a tier, simple as that. I first tried building it from scratch with JavaScript’s native Drag & Drop API. It worked okay on desktops, but on mobile the touch controls were clunky, responsiveness broke, and the whole thing felt unusable. Since most users browse on phones, that wasn’t going to fly.

✅ Solution: Choosing the Right Library

Instead of wasting time reinventing the wheel, I researched drag-and-drop libraries. Two interesting options caught my eye: Draggable (by Shopify) and Dragula. I tested both:

• Dragula was simple but limited — it lacked smooth animations and felt too restrictive.
• Draggable (Shopify), on the other hand, had a modern API, supported touch events out of the box, and gave me exactly the flexibility I needed.

After comparing performance and testing across devices, Draggable won hands down. It provided:

• Reliable drag-and-drop across desktop and mobile
• Smooth animations and transitions
• Clean documentation and active support

By switching to Draggable, I turned a frustrating user experience into one that feels natural and fun. Now users can rank items effortlessly, whether they’re on a giant monitor or a tiny phone screen.

❗Challenge 2: Giving Users All the Customization Power

Tier lists aren’t just about ranking stuff — they should also look cool. I wanted users to have maximum control over how their lists appear: image styles (aspect ratio, border-radius, border width, border color), tooltips (on/off), and even full-blown themes.The plan? Users could not only tweak things like title color, background, list background but also pick from pre-made, eye-pleasing templates. And here’s the kicker — these settings had to be saved. If users came back later, their customizations should still be there (cookies handled that). If they published, the exact design needed to be stored in the database.Sounds fun, right? But the actual implementation was tricky. Handling so many moving parts meant I needed clean, modular code.

✅ Solution: Centralized Settings + Flexible Functions

The solution was to introduce a single JavaScript settings object that kept track of everything a user customized. Every tweak — whether it was changing a border radius or selecting a gradient background — updated this object. From there, I wrote individual functions like setTitleColor() or setBorderRadius() to update both the UI and the DB. For gradients, I built a custom color picker that even supported gradient text using bg-clip-text.Result? A flexible system where users could design their tier list however they wanted — from subtle pastel themes to full rainbow chaos — and their work always saved and synced.

❗Challenge 3: Making the UI Truly Responsive

TierCards had to work seamlessly on all screen sizes — from huge desktop monitors to tiny mobile phones. The tricky part was that tier lists themselves are grid-heavy and drag-and-drop intensive, which don’t naturally adapt well to small screens. On desktops, everything looked neat, but on phones the layout got squished, text overlapped, and dragging items became a mess.

✅ Solution: Mobile-First + Flexible Grids

I approached this with a mobile-first design using TailwindCSS. Instead of hardcoding widths/heights, I built flexible grid layouts that could shrink or expand smoothly. For drag-and-drop on smaller screens, I tweaked the spacing and touch targets to make interactions finger-friendly. I also introduced breakpoints for tier list scaling, so users could still see the whole list without endless side-scrolling.The result: TierCards felt equally natural on a 6-inch phone as on a 27-inch desktop.

❗Challenge 4: Handling Data with PHP + MySQL

TierCards wasn’t just about design — it needed to store and manage a lot of user data: tier lists, images, customization settings, published themes, votes, etc. The challenge? I was a beginner in backend development, and I needed a way to make everything both reliable and fast. My early code quickly turned messy, with repeated queries and inefficient database calls.

✅ Solution: Structured DB + Clean PHP API

I sat down and restructured the database to keep things modular — separate tables for users, tier lists, images, votes, and themes. This way, everything was linked by IDs instead of storing blobs of data in one place. On the PHP side, I built clean API endpoints to handle each operation: creating a tier list, saving customization, voting, etc. Using prepared statements in MySQL also helped prevent SQL injection and kept queries safe.By the end, TierCards had a stable backend that could handle publishing, private lists, and live updates — without slowing down or breaking when more users jumped in

Nailed It (and Learned a Ton Along the Way)

Looking back, I can proudly say TierCards turned out just the way I had imagined — maybe even better. 🚀 Over 6 months of building, breaking, fixing, and experimenting, I leveled up my skills big time. I became way more confident in JavaScript, got hands-on with AJAX, mastered DOM manipulation, and even picked up cool tricks like debouncing and throttling. Somewhere along the way, I also ended up creating my own little utility function library that kept everything clean and reusable.This was the longest project I’ve ever worked on, and it genuinely pushed me to think like a problem-solver instead of just a coder. Sure, I kinda regret not diving into Next.js and Node.js at the time (since that would’ve made the app even more powerful), but honestly, I’m still amazed at how fast and responsive TierCards feels with just PHP + MySQL + plain JS.At the end of the day, I set out to make a fun, customizable tier list builder that didn’t exist anywhere else — and I did it. Mission accomplished.