doodlehead / tierlist

Quickly build a tierlist for your favourite TV shows, movies, anime or manga. Written using Typescript and React.

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://doodlehead.github.io/Tierlist/

What's a tierlist?

Tierlists are just charts where the items are sorted into tiers based on how "good" that item is. Originally used rank video game characters' viability in a competitive setting, its usage has spread to pretty much anything: fast food chains, candy, and of course fictional characters.

For example, a quick Game of Thrones tierlist I made with my app. S-tier meaning I love the character, C-tier being neutral feelings, and F-tier being hated.

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

Implementation details

• Built using Typescript and React
• Firebase backend, check it out here
• The majority of components are functional using React Hooks
• CSS styling is written with mobile-first in mind
• Component library: material-ui
• TV show and movie data fetched from theTBDB's API
• Anime and manga data fetched from Jikan's API
• Static front-end served using Github Pages

TODO

• Refactor ListMaker because it's getting big
• Manage/delete old localStorage data? Have a delete button?
• Paginate search results for TVDB API requests
• Have a "show more" option for Jikan API requests
• Take a look at some good open-source Typescript React projects for inspiration on proper application folder structure and organization
• How to handle the refresh use-case when deployed to Github Pages?

Future changes

• Customizable tiers, add/remove and rename
• Customizable appearance of the list
• Fast tier assignment using right-click
• Custom images upload
• "Fork" a tierlist
• Use a state management library like Redux or MobX (if needed)
• Progressive Web App?
• Automated testing? (Cypress? Jest?)
• Use CI + CD?

tierlist's Issues

No API, hard coded tierlist demo

• If APIs are down, I can still demo the app using some hard-coded tierlist data I pick myself.
• Ideas:
  • Shapes
  • Fast food
  • Candy
  • Programming languages
  • etc.

Some TVDB shows don't have actors

Properly paginate search results

• Anime/Manga need "show more"/"load more"/"more results"
• TVDB needs to hide more than 10

The TVDB sometimes sends weird, inaccurate, duplicated character data

Example: https://thetvdb.com/series/adventure-time

More flexible ways to compose a tierlist

• Top 100/50/25 option
• Seasonal shows
• Choose from multiple
• Franchise
• Genre
• Producer
• User's completed anime/manga list

500 Could not search, TVDB's API is down

API connectivity checker

Motivation/Background

• The APIs that my app depend on are not that reliable and frequently have downtime
• I want to make it clear that any performance issues that are caused by the shaky APIs are not my fault
• With some sort of API connectivity checker on the homepage the user will know what kind of functionality to expect given the status report

Specification

• TODO

Example status pages:

• https://status.playstation.com/en-ca/
• https://www.redditstatus.com/
• https://status.epicgames.com/

Technical Review

• TODO

Default/recommended search values

• Suggest some search values to make demoing easier.

Add a footer

Put in a note to disable adblockers because they block my images

• Why do they do this 😕