Tier List

An application for categorizing different items of a related class.

This repository hosts the backend for the application, the frontend can be accessed here

Live Demo

The live demo of this website can be accessed at: https://tier-list.netlify.app/

Features

• CRUD operations to Add/Upgrade/Downgrade/Delete Items
• OAuth2 support for Google, GitHub & Discord
• Fully Responsive

Tech Stack

Client: React, TypeScript, Redux, TailwindCSS

Server: Node.js, Express, MongoDB, JWT, Passport.js

Branches

The codebase is split into different branches:

• main
• v2
• jwt-auth
• oauth

Run Locally

Clone the project

  git clone https://github.com/haiderzaidi07/tier-list-backend.git

Go to the project directory

  cd tier-list-backend/

Go to oauth branch

  git checkout oauth

Install dependencies

  npm install

Start the server

  npm run dev

Environment Variables

To run this project, you will need to add the following environment variables to your .env file

DB_STRING MongoDB Connection String

SECRET JWT Secret

COOKIE_KEY Session Secret

GOOGLE_CLIENT_ID GOOGLE_CLIENT_SECRET

GITHUB_CLIENT_ID GITHUB_CLIENT_SECRET

DISCORD_CLIENT_ID DISCORD_CLIENT_SECRET

Lessons Learned

• Learned to use Passport.js to add Google, GitHub, and Discord OAuth services
• Learned to create responsive web apps using Tailwind
• Learned to use Redux to improve state management

Further Optimizations

• Better UI for Tiers having no Items
• Drag and Drop feature for Upgrading and Downgrading Items
• Improve error prevention for matching usernames across different providers
• Improve type safety of the backend using TypeScript