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:

• 🎨 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)
• 🛢 Dynamic database scheme
  • Supports dynamic game iteration length (e.g. default to 1 reset per day, but can have more on event day)
  • Supports multiple datasets (e.g. different seasons)
  • saves iteration data to log (iteration number, correct player, time of reset)
• 🕵 Anonymous game result collection (game result + guesses, no information that could identify users)
  • Scheme can be found under types/database (type DbLoggedGame)
  • saved using lib/databaseAccess.ts (function logGame())
• 🎲 Batched pseudo random selection
  • Random backlog of players generated (to keep the game from being stale but also to avoid duplicate players for backlog.length iterations)
• 🛠️ 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
  • Tests for:
    • Main game process + results
    • Checks to ensure all images (even from country flag api) still work
    • Database functions
• ⚠️ 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!

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

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>"
CRON_SECRET="<your_cron_secret>"
# optional
ADMIN_API_TOKEN="<your_secret>"

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.

When trying to use this project in production, you should provide CRON_SECRET. This secret gets used in the api/cron path, which is responsible for resetting the game periodically (e.g. once per day).

The ADMIN_API_TOKEN can be used to secure the (WIP, not yet implemented) admin dashboard and can be skipped for now.

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

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.

Docs coming soon.

Not affiliated with Blizzard, data from Liquipedia.

If you like this project, you can support me here