-
The landing page introduces the platform's core feature of ranking anything using customizable tier list templates across popular categories
-
Users can search and browse through curated template collections, such as gaming and anime characters, before clicking to start ranking.
-
The intuitive drag-and-drop editor interface lets users easily customize tier rows, colors, and labels to create their ultimate rankings.
Inspiration
People love debating their favorite anime characters, video games, and even fast food chains. Tier lists are the best visual way to settle these debates and share opinions online. However, building a clean, shareable tier list from scratch using basic image editors is incredibly tedious. We wanted to create a dedicated, frictionless platform where anyone could instantly rank their passions without worrying about formatting, alignment, or design.
What it does
Tier Maker Pro is an intuitive web application that allows users to create, customize, and share tier lists in seconds. It provides a massive library of pre-made templates across popular categories like Games, Movies, Food, and Sports. Users can select a ready-to-use template, drag and drop items into highly customizable tiers, adjust row colors and labels, and instantly export a high-quality image of their definitive rankings to share on social media or forums.
How we built it
We focused heavily on the user interface and fluid interactions. We used Next.js and React to build a snappy, responsive frontend. The core drag-and-drop functionality was engineered to be completely seamless on both desktop and mobile devices. We utilized Tailwind CSS for a clean, modern aesthetic that puts the content first. For the image export feature, we implemented a custom client-side rendering solution to stitch the DOM elements into a high-resolution downloadable image, avoiding heavy server-side processing. The application is hosted on Vercel for optimal global performance.
Challenges we ran into
One of the biggest technical challenges was ensuring the drag-and-drop mechanics felt completely natural, especially on mobile touch screens where default scrolling behaviors often interfere. Handling varying image sizes and aspect ratios uploaded by users without breaking the tier layout required complex CSS grid and flexbox calculations. Additionally, generating a flawless, high-quality export image entirely on the client side across different browsers presented cross-origin resource sharing and rendering hurdles that we had to optimize carefully.
Accomplishments that we are proud of
We are incredibly proud of the fluid user experience. The interface gets out of the user's way and lets them focus entirely on the fun part: ranking and debating. The speed at which someone can go from landing on the site to downloading a completed, perfectly aligned tier list is something we consider a major achievement.
What we learned
Building this taught us a great deal about advanced DOM manipulation, touch event handling across different operating systems, and the intricacies of client-side image generation. We also learned from a UX perspective how important it is to provide pre-made starting points, as a completely blank canvas can often deter users from starting their project.
What is next for Tier Maker Pro
Our immediate next step is expanding the community aspect of the platform. We plan to introduce user accounts so people can save their in-progress templates, vote on community-created tier lists, and eventually generate massive aggregate rankings based on thousands of user submissions to definitively answer what the internet thinks is the best.
Log in or sign up for Devpost to join the conversation.