🌐 Languages: English | 中文 | 日本語

🎯 Free Online Tier List Maker - Create and share professional tier lists in seconds!

• 🆓 100% Free Forever - No registration, no hidden fees
• 🎨 Drag & Drop Interface - Intuitive and easy to use
• 📱 Mobile Friendly - Works seamlessly on all devices
• 💾 Auto-Save - Never lose your work with localStorage
• 🖼️ High-Quality Export - Download as PNG images
• 🌐 Multi-language - English, Chinese & Japanese support
• 🎯 5 Tier System - S, A, B, C, D ranking system

• Node.js 18+
• pnpm (recommended) or npm

1. Clone the repository

git clone https://github.com/zhangchenchen/tier_list_maker.git
cd tier_list_maker

2. Install dependencies

pnpm install

3. Set up environment variables

cp .env.example .env.development

4. Run the development server

pnpm dev

Open http://localhost:3000 to see the application.

Set your theme colors in src/app/theme.css

You can use TweakCN Theme Editor to customize colors.

Edit content in:

• English: src/i18n/pages/landing/en.json
• Chinese: src/i18n/pages/landing/zh.json
• Japanese: src/i18n/pages/landing/ja.json

Update translations in:

• src/i18n/messages/en.json
• src/i18n/messages/zh.json
• src/i18n/messages/ja.json

Build for production:

pnpm build

Test production build locally:

pnpm start

1. Push your code to GitHub
2. Import your repository to Vercel
3. Deploy!

1. Build the project:

pnpm build

2. Deploy to Cloudflare Pages using the .next output

• Framework: Next.js 15
• Language: TypeScript
• Styling: Tailwind CSS
• UI Components: Shadcn UI
• Internationalization: next-intl
• Image Export: html2canvas
• Notifications: Sonner

tier_list_maker/
├── src/
│   ├── app/              # Next.js App Router
│   ├── components/       # React components
│   │   ├── blocks/       # Landing page blocks
│   │   │   └── hero/     # Hero section with Tier List Maker
│   │   └── ui/           # Shadcn UI components
│   ├── i18n/             # Internationalization
│   │   ├── messages/     # Global translations
│   │   └── pages/        # Page-specific translations
│   ├── lib/              # Utility functions
│   └── types/            # TypeScript types
├── public/               # Static assets
└── content/             # MDX documentation

Location: src/components/blocks/hero/tier-list-maker.tsx

Features:

• Drag & drop item organization
• Auto-save with localStorage
• Mobile quick menu
• Real-time theme detection
• High-quality PNG export
• Loading states & progress feedback

The project supports multiple languages:

• English (en)
• Chinese (zh)
• Japanese (ja)

Add more languages by:

1. Creating new JSON files in src/i18n/messages/
2. Adding translations in src/i18n/pages/landing/
3. Updating locale configuration in src/i18n/routing.ts

MIT License

Contributions are welcome! Please feel free to submit a Pull Request.

The project includes comprehensive social media optimization:

• Open Graph tags - For Facebook, LinkedIn sharing
• Twitter Cards - For Twitter previews
• SEO metadata - Keywords, descriptions, alt tags
• Multi-language support - English, Chinese & Japanese metadata

See Social Media Guide for testing and optimization tips.

• Facebook: https://developers.facebook.com/tools/debug/
• Twitter: https://cards-dev.twitter.com/validator
• LinkedIn: https://www.linkedin.com/post-inspector/

• Website: tierlist-maker.com
• Email: [email protected]
• Twitter: @tierlistmaker

Made with ❤️ by the Tier List Maker team