DEV Community

Cover image for Tierlyst: Build, Customize, and Share Tier Lists with Ease (React + Next.js) 🏆
Bernardo
Bernardo

Posted on

Tierlyst: Build, Customize, and Share Tier Lists with Ease (React + Next.js) 🏆

🧩 Tierlyst: A Responsive Tier List Editor for Creators
Ever needed a simple, visual way to rank your favorite games, characters, or anything else? Meet Tierlyst, a responsive Tier List editor built with React that lets you organize images into customizable tiers—with drag & drop on desktop and touch-friendly controls on mobile!

✨ Key Features:

🖼️ Image Upload: Create personalized tier lists by uploading your own images.

🏷️ Editable Labels: Rename tiers with inline editing.

🎨 Color Customization: Change tier background colors to match your style.

🖱️ Drag & Drop: Intuitive desktop sorting.

📱 Mobile-Friendly: Tap to move items between tiers with a context menu.

📥 Export as PNG: Save your tier list as an image to share with the world.

♻️ One-Click Reset: Start fresh in seconds.

🚩Multi-language (en, pt-BR).

🧰 Tech Stack:
React / Next.js
Tailwind
Framer Motion
html-to-image
file-saver
Phosphor Icons
Browser Image Compression
Next Intl

🌟 Why Tierlyst?
Whether you’re ranking Pokémon, comparing UI frameworks, or settling debates with friends, Tierlyst keeps it simple and fun—no signups, no fuss.

👉 Try it now: https://tierlyst.vercel.app/

P.S. Open to feedback! Found a bug or have a feature idea? Drop a comment below!

Top comments (0)