Tier List Builder - Drag & Drop Ranking App | React, TypeScript

ABOUT

Tier List Builder is a modern HTML5 app for creating visual ranking boards, similar in concept to TierMaker and other popular tier-list maker websites. It is packaged as a customizable standalone project that you can install on your own hosting. Users can upload images, drag items into colored tier rows, customize the board, and export the final result for sharing or backup. It is suitable for game rankings, character rankings, product comparisons, personal lists, community content, and similar visual tier-list use cases.

IMPORTANT NOTE

This product is a frontend-only static HTML5 application. It does not require a backend server, database, admin panel, or online account system. Uploaded images, board settings, and the current tier list are handled in the browser and saved with local storage. This makes the app lightweight, easy to install, and suitable for shared hosting, static hosting, cPanel hosting, VPS, or a subfolder inside an existing website.

The images shown in screenshots and previews are AI-generated demo images. They are used for presentation purposes only and are not included in the package files.

FEATURES

• Interactive Tier List Builder
• Upload Multiple Images
• Drag-and-Drop Ranking
• Move Items Between Tier Rows and Image Gallery
• Reorder Items Inside Rows
• Editable Board Title
• Custom Tier Row Labels
• Custom Tier Row Colors
• Add New Rows Above or Below Existing Rows
• Delete Rows
• Clear Images From a Row
• Move Rows Up and Down
• Image Shape Selector
• Common Image Ratios: Square, Free, 16:9, 4:5, 1:2, and More
• Browser Autosave with Local Storage
• Export Tier List as PNG
• Export Tier List as JSON Backup
• Import Tier List from JSON
• First-Run Onboarding Tour
• Responsive Layout for Desktop and Mobile
• Modern Dark UI
• No Backend Required

TECHNOLOGIES

• TypeScript (typescript)
• React (react)
• React Router (react router)
• Vite (vite)
• Tailwind CSS (tailwind css)
• Radix UI / shadcn-style UI components (radix ui)
• dnd-kit Drag and Drop (dnd-kit)
• html-to-image PNG Export (html-to-image)

FILES INCLUDED

• Source Code (tsx, ts, css, json, svg)
• Build Configuration for Generating the Production HTML5 Files
• Documentation HTML File

REQUIREMENTS

• Node.js 22.22.0 or newer for development and production builds
• npm, included with Node.js
• Modern Browser: Chrome, Edge, Firefox, Safari, or Similar
• Shared Hosting, Static Hosting, cPanel Hosting, VPS, or Any Hosting That Can Serve Static Files
• Domain, Subdomain, or Website Subfolder

DOCUMENTATION

Full documentation is included in docs/README.html. It explains installation, customization, branding, colors, deployment, troubleshooting, and project architecture.

SUPPORT

If you need help with installation, customization, or deployment, please contact support through the item support page.