Marvel Ranked

It's time to settle the argument once and for all! Who's the best Marvel character? Come and find out on Marvel Ranking. Vote for your favourite character and help them make it to the top!

Comment

Inspiration

This project was built for Hacktoon 2 from MLH. This was my second time taking part in a hackathon and it has been a wild weekend since I was also working and moving house. For that reason I didn’t make as much progress as I would have liked.

The topic for the hackathon was all about comics and cartoons.

Marvel has also been one of my favourite comic publishers so once I found that they had an API I had to make something with it.

What it does

Two random offsets are generated and then the cache is checked. If the character exists in the cache, no API call is made. This is because the Marvel API is rate limited. Characters are stored in the cache for one week.

Once the user votes on a character, if a document exists with the same character ID in the “votes” database, then the number of votes is incremented by 1. If the character hasn’t been voted on before, a new document is created. This document contains the number of votes, the character name and the URL for the character thumbnail.

How we built it

Front End

  • ReactJs
  • CSS
  • Typescript
  • Hosted on Vercel

API

  • Marvel Developers API

Back End (as a service)

  • Firebase

Challenges we ran into

The biggest challenge I ran into was time.

The second was learning about caching.

What we learned

This project was a great experience. I've only been using TypeScript for a few weeks and I'm starting to feel more comfortable and I'm relying less on "any".

It was also a great learning experience in relation to time management. There's so much more I would have liked to do but since I had a lot on this weekend, I had to just push out the bare essentials. For once I didn't get caught up in tiny details and I kept progressing.

Finally, I was able to learn more about Firebase. I used Firestore Cloud Functions for the first time to removed expired documents from the cache.

What's next for Marvel Ranking

  • Improve ranking of characters
    • Store times character appears
    • display a percentage on leaderboard (appeared/votes)
  • Add other rankings
    • Comics
    • Series
  • Search
    • Allow users to search for their favourite character to see the character’s information
  • Testing
    • Unit tests

Built With

Share this project:

Updates