RankMaster is a powerful and intuitive Tier List Maker — a web tool that lets users visually rank and organize items into customizable tiers, very similar to the popular online platform TierMaker.
Tier lists are a common way to represent preferences or comparative rankings, often used for game characters, movies, products, food, music, or anything else you want to evaluate. RankMaster gives users a clean drag-and-drop interface that makes creating these visual rankings easy, fast, and fun — all directly in the browser without backend servers.
-
🧲 Drag & Drop Ranking Easily move items between tiers with smooth interactions.
-
🎨 Customizable Tiers Edit tier labels, change colors, reorder tiers, or delete them instantly.
-
⚡ Fast & Lightweight Built with Vite for blazing-fast development and builds.
-
🎞 Smooth Animations Powered by Framer Motion for polished UI transitions.
-
🧩 Component-based Architecture Clean, readable, and maintainable React structure.
-
🌗 Modern UI Ready Designed with Tailwind-style utility classes and dark-mode compatibility.
- React 19
- TypeScript
- Vite
- Framer Motion
- Lucide Icons
- @dnd-kit (Drag & Drop)
.
├── App.tsx
├── index.tsx
├── index.html
├── components/
│ ├── TierRow.tsx
│ ├── ImagePool.tsx
│ └── RandomSelector.tsx
├── types.ts
├── metadata.json
├── vite.config.ts
├── tsconfig.json
└── package.jsonNo local Node.js installation required.
docker compose up --build Then open:
http://localhost:3000
✔ Hot Reload enabled ✔ Zero local dependencies ✔ Clean Fedora / Linux friendly setup
npm run build
npm run previewPreview will be available at:
http://localhost:3000
-
React Portal for Modals Ensures popups always render above all UI layers.
-
Local State Driven UI No unnecessary global state or over-engineering.
-
Strict Type Safety Fully typed data models for tiers and items.
MIT License — free to use, modify, and distribute.
Pull requests, ideas, and improvements are welcome! Feel free to fork the project and build your own ranking system.