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!

Tierlyst - Tierify Your Hot Takes | Product Hunt

Rank anything visually. Upload images, drag to tiers, and share your hot takes. No templates, no fuss—just pure, chaotic ranking. Perfect for debates or solo rage.

favicon producthunt.com

Top comments (0)