AI TIer List Maker

A demo video is provided below!!!

I’m currently working on i18n, but I’ve encountered a major problem: the tier list in Taiwan only has 5 levels, while the English tier list has 7. After a difficult decision, I had to drop the last two levels, E and F. Therefore, this website only has S, A, B, C, and D.
I’m truly sorry, and I should try to fix this issue when I have time.

I did a lot of things before, but unfortunately, I forgot to create the flavortown account, so now I have to catch up on the Devlog.

2026-04-20

Fix README and Add Demo Section

• Refined wording to accurately describe the tier judgment system, restored clarity in feature descriptions
• Added demo section with video walkthrough and feature screenshots
• Reflection: A polished README and demo section is the project’s first impression. Investing time here pays dividends in user acquisition and conversion.

2026-04-19

Implement Full Internationalization (i18next)

• Integrated i18next and react-i18next for multi-language architecture
• Built language switcher supporting English and Traditional Chinese with seamless UI toggle
• Translated all key pages (home, shared tiers, 404) and app constants (tier lists, UI labels)
• Enhanced SEO meta tags and structured data for multi-language support
• Reflection: Localization is more than translation—it demands attention to SEO, language context, and structured data. A systematic approach ensures maintainability and makes future language additions trivial.

2026-04-19

Refine Animation and Tier System

• Updated tier labels from F to S to match the new tier ranking standard
• Switched AnimatePresence to popLayout mode for smoother tier placement animations
• Reflection: Details compound. Small tweaks in naming and animation mode accumulate into a noticeably refined user experience.

2026-02-21

Complete Bot Protection (Turnstile)

• Integrated Cloudflare Turnstile across tier judgment and sharing flows
• Implemented server-side verification with pyturnstile library
• Fixed validation logic in the share workflow
• Switched default TTS voice to a more personable option
• Reflection: Bot protection adds complexity but is essential for an open platform. Choosing Turnstile over reCAPTCHA balances security and user experience.

2026-02-15~16

Migrate to Cloudflare AI Gateway

• Migrated LLM routing from OpenRouter to Cloudflare AI Gateway to resolve quota exhaustion
• Fixed cascading issues: model naming, prompt formatting, and API compatibility
• Improved frontend accessibility and animation smoothness
• Reflection: Timely architectural pivots solve critical operational bottlenecks. Cloudflare’s solution offered better cost efficiency, reliability, and integration depth. Always have a backup strategy for critical dependencies.

2026-02-15

SEO Optimization and Infrastructure Polish

• Added a custom 404 page for better user guidance
• Optimized SEO meta tags and link structures across all pages
• Tuned image animation timing to prevent jarring movements
• Reflection: SEO is an iterative game of small wins. Each improvement (tags, structure, performance) compounds. Polishing edge cases like 404 pages signals professional craftsmanship.

I did a lot of things before, but unfortunately, I forgot to create the flavortown account, so now I have to catch up on the Devlog.

2026-02-13

Add Analytics and Data Collection

• Added global review case logging and analytics infrastructure
• Corrected year information in metadata
• Reflection: Data-driven decisions require clean data collection. Instrumenting analytics early pays dividends—you’ll have rich behavioral data for future optimization.

2026-02-12

Complete LLM Model Selection System

• Implemented model selection UI with support for multiple Google Gemini variants
• Updated API service layer and frontend model picker
• Corrected environment variable configuration
• Cleaned up compiler warnings and unused variable declarations
• Improved animation smoothness
• Reflection: Model selection is a cornerstone feature. A complete system demands backend API, frontend UI, and environment orchestration. Small code hygiene wins (casing, compiler cleanliness) improve the entire developer experience and CI/CD health.

2026-02-09

Add License and Fix Responsive Design

• Added MIT license for open-source distribution
• Fixed responsive layout and share button bugs
• Completed integration of global state management, clickable tier images with modals, and sharing
• Conducted code review and refinements via collaborative pull requests
• Reflection: Open-source governance matters from day one. A clear license and contribution workflow establishes the foundation for sustainable long-term growth.

2026-02-08

Develop Core Features and Documentation

• Built global state management using React Context
• Developed clickable tier images with modal dialogs and smooth animations
• Implemented tier list sharing with persistent case storage
• Added comprehensive TypeScript typing and fixed build configuration
• Authored complete feature documentation and architecture diagrams
• Reflection: Core feature development and documentation should move in parallel. Timely documentation accelerates collaboration and eases maintenance. Prioritize type safety and build health early—compound interest on technical debt is brutal.

2026-02-07

Frontend Framework Setup and Backend Optimization

• Set up Tailwind CSS v4 and shadcn/ui component library
• Hand-crafted high-quality animations using Framer Motion
• Refined LLM prompts and backend logic for better tier judgments
• Implemented automatic memory cleanup to prevent resource leaks
• Filtered internal system text from TTS output
• Reflection: The right UI framework (Tailwind + shadcn) accelerates development. But animations demand hand-crafting for polish. Backend details—prompts, memory management—directly shape the user experience.

2026-02-07

Project Initialization

• Established project architecture and initial roadmap
• Reflection: A strong start compounds. Early architectural decisions shape the entire trajectory of the project.