Tierlist creator

Create a tierlist for your favourite tv shows, movies, anime or manga. More item types may be added if I can find public APIs for them.

https://tierlist-fawn.vercel.app/

What's a tierlist?

Tierlists are just charts that help visualize the ranking of things.

For example, a quick Game of Thrones tierlist I made with my app. A character higher up vertically in the list means I like them more.

P.S. the chart above only considers seasons 1-7. 😉

Implementation details

• Built using Typescript and React + Vite
• Deployed using Vercel
• Component library: material-ui
• TV show and movie data fetched from TVMaze's API
• Anime and manga data fetched from Jikan's API

Features

• Prepopulate and rank characters from tv shows, anime or manga using the search feature
• Save your tierlist for a particular show to your browser to come back and edit it later
• Export and download the tierlist as an image so you can share it

Stuff to fix

• Remove enums because they're clunky
• More modern component library and styling, it's looking dated...
  • Use Tailwind CSS?
  • Shadcn?
• Manage/delete old localStorage data? Have a delete button?
• Show more/pagination for searches?
• Better project structuring?
• Refactor ListMaker because it's getting big?

Future features/changes

• FAQ/Guide
• Character pool sorting/filtering?
  • Alphabetical, main/supporting
• Image export options (size/resolution, compression?)
• Settings panel (more customization that is off by default)
  • Custom tier color coding?
  • Custom tier naming?
• Clear tier and clear all characters actions
• "Saved lists" page?
  • Resume/Load button
  • Delete/clear button
• Dynamic recommendations based on recent shows/anime?
• Customizable tiers, add/remove and rename
• Customizable appearance of the list
• Fast tier assignment using right-click
• Custom image generation with GenAI?
  • Separate versions for API fetched and GenAI versions?
  • Hard-coded client-side, pre-generated examples
  • Custom, on-demand generation of items based on GenAI?
  • Generated images are more costly in terms of time and money...
• Custom images upload
• "Fork" a tierlist?
  • What did I mean by this? (lol)
• Use a state management library like Redux/MobX/Zustand (if needed)
  • Jotai?
• Progressive Web App?
• Automated testing? (Cypress? Jest? Vitest)
• Use CI + CD?