Tier List Club

Project Summary

The History

Tiering based of a tier list is an easy way to sort a category of items in a easy to understand way. Originally, it was a way to organize in gaming power levels of characters in games, but now it has gone beyond gaming and can be used to show the tierer's opinions of a category.

I had fun tiering ridiculous categories - fast food joints, cereal to name a few examples - with close friends. This was done by using Google Sheets with each tiering session occurring in each tab. At first it was fine, but the tabs quickly grew out of hand and it was hard to see which tab was the current category and topic on hand.

The Goal

I want to create a similar experience, but one that helped focus everyone involved on one current topic at a time. Other than that I did not want to change much. I wanted club members to be able to submit their tiers and view their submission along with others still. I wanted to make sure that the club was kept relatively small, so I needed a way to gate membership. I also want to keep it relatively low effort, so I knew I wanted to only make changes to the theme monthly along with pushing everyone's list monthly.

Features

MVP Features

  • Account-based by username
    • Account registered only if they had the access code
  • Viewable category (theme)
  • Submit and edit that month's tiers
  • View other's submissions
  • Easy way for me (as an admin) to pull final submissions to the archive and reset everyone's submissions to null

MAP Features

  • User account settings

Nice to Have Features

  • A way to make sure each member only had one account

Technology Used

Coding Tools

Notable Packages:

  • Passport for user authentication

Graphic Tool

Process

Steps

  1. Made all the EJS pages with HTML and added CSS
    • Focused first on creating a nav bar so I could understand how a user would get to each page
    • Then made all the pages one by one, starting first with the easiest (pages that did not need any forms, then pages that needed forms). I also made these pages so that they didn't need any backend by adding mock data. If there were any graphics needed, these were just filled with a placeholder image.
  2. Created backend to allow for user account creation and tierlist submission
    • Account creation using Passport and other npm packages to make my life easir (ex.password encryption)
    • Post request for submissions
    • Send information from MongoDB to the frontend when asked by a get request
  3. Fixed up any frontend to use any information received from the backend instead of the mock data
  4. Wrote copy and created graphics, which were then added to the site.

original

End Result

Heroku App

https://tierlistclub.herokuapp.com/

Discord

Discord

Gina Hwang ©2022