Guess the new Overwatch perks and improve memory for identifying its icons in a gameified way.

Showcase · Features · Getting Started · Roadmap · Sponsor

Showcase

Features

This project was built using Next.js and tailwindcss. Components are based on shadcn/ui. Tests were written with vitest and bun is used instead of npm.

Major features are:

• 🎮 Multiple game modes and difficulty levels
• 🎨 Consistent and dynamic themes (light + dark mode)
  • All components use theme colors and automatically switch to correct theme
• 📱 Fully responsive
  • Works and looks good on any screen size (desktop + mobile + everything in-between)
• 🛠️ Easily configurable
  • The behavior of the game can easily be adjusted by changing values in game.config.json
  • Check lib/config.ts to find out more info about the config.
• 🦿 Following modern accessiblity recommendations
  • Fully compatible with screen readers
  • Entire website can be navigated/used with keyboard inputs only
  • All dialogs use search parameters (meaning you can share a link where e.g. the feedback dialog is open)
• 🕵 Anonymous + EU compliant analytics (using Plausible)
• ⚡ Blazingly fast through server side rendering + vercel edge functions/distributed servers
• 📃 Follows modern SEO standards
  • Automatically generates robots.txt (through robots.ts)
  • Automatically generates sitemap (through sitemap.ts)
  • Uses site metadata (preview image, title, description, etc)
• 🧪 Contains tests for critical functionality
  • Can be configured to automatically write test report/be ran through Github actions
• ⚠️ Full error handling
  • All invalid input errors are caught client side (with toasts that show what went wrong, works on desktop and mobile) + server side (zod schema validation for all api post endpoints)
  • Rate limit on all api endpoints to increase stability
• and more!

Roadmap

This project is still under active development, new features, increased stability and bug fixes still in progress!

Currently, some things I plan on working on are:

• More difficulty modes (only show names, reverse, etc)
• Better telegraphing for current/highscore
• Side bar/menu revamp to make mode selection more intuitive + enable more options in the future
• Optimize game even further to try and reduce server usage
• Possible twitch integration
• Cheatsheet version

Getting Started

First, clone the project locally and install dependencies. If you're only working locally, you can also use npm/pnpm/yarn, but this project was built and tested with bun.

bun install
# or
npm install

env

Before starting the project, make sure you provide the following values to the environment (either directly or by creating a file called .env.local in the project root folder):

MONGO_URI="<your_mongo_uri>"
NEXT_PUBLIC_API_URL="<your_api_url>"

The only strictly necessary entry is MONGO_URI (as you won't have a database otherwise), so make sure you provide a valid Mongodb connection uri.

The NEXT_PUBLIC_API_URL variable is used to configure the api endpoint that your deployment should use.

---

After setting up your environment and installing all dependencies, you can start the project like this:

bun run dev
# or
npm run dev

You should now be able to see the website running on localhost:3000.

To built the project, you can run

bun run build
bun run start
# or
npm run build
npm run start

Tests

This project contains tests for the major features under tests/*.test.ts. Tests that only run locally are postfixed by *.local.test.ts to allow filtering when running tests and ensure local tests always run with maximum performance.

To run tests, run

bun run test:local # only runs local tests
# or
bun run test # runs all tests
# or (using npm)
npm run test:local # only runs local tests
# or
npm run test # runs all tests

I also created a custom test reporter, which writes the following fields to tests/report.json:

{
  "numTotalTests": "<total test amount>",
  "numPassedTests": "<passed test amount>",
  "numFailedTests": "<failed test amount>",
  "numPendingTests": "<pending test amount (should always be 0)"
}

To execute all tests with the custom reporter, run

bun run test:write
# or
npm run test:write

You should now see the updated report under tests/report.json.

About

Docs coming soon.

Not affiliated with Blizzard, data from Liquipedia.

Sponsor

If you like this project, you can support me here