GeoGuessr Dashboard

A dark globe highlighting regions in Europe and Africa with bright spots, indicating data points or activity clusters.

2025

Developer

Een online dashboard waar de wekelijkse scores van de GeoGuessr-challenges overzichtelijk worden gepresenteerd.

Om de vriendschappelijke competitie binnen ons bedrijf te volgen, ontwikkelde ik een webapplicatie met Next.js, TypeScript en Firebase. Elke week haalt het platform automatisch de scores op en toont het interessante statistieken en ranglijsten, zodat iedereen direct kan zien wie er bovenaan staat.

  • Dashboard showing a world map with heatmap, leaderboard, challenge results, and season insights in a web app interface.
  • Dashboard showing a seasonal heatmap, leaderboard, and latest challenge results. The map highlights activity in various global locations.
01

Dashboard

Elke maandag start er automatisch een cronjob die de resultaten van de challenge van de afgelopen week ophaalt. Op het dashboard zie je vervolgens de seizoensranglijst, de uitslagen van de afgelopen challenge, een overzicht van spelers met een perfecte score en seizoensinzichten zoals de beste landen en slechtste gokken.

Als visueel middelpunt draait er een interactieve, geanimeerde wereldbol die als heatmap alle gegokte locaties toont, een speelse maar ook informatieve manier om de wereldwijde spreiding van de antwoorden te zien. De hele site ondersteunt bovendien zowel een lichte als donkere modus, zodat iedereen de interface naar zijn of haar voorkeur kan instellen.

Mobile screen showing stats
Dashboard showing results
02

Seizoenen

Zodra iemand 15 punten bereikt, is het seizoen voorbij en wordt de winnaar gekroond. In de eerste week van het nieuwe seizoen zetten we die persoon én hun prestaties groot in de spotlight op de homepage.

De gouden kaarten hebben een subtiele glimmende animatie, waardoor ze direct opvallen. Naast de naam van de winnaar, staat er een grafiek die laat zien hoe de top 3 spelers hun weg naar de 15 punten hebben afgelegd. Verder tonen we zes interessante statistieken van de kampioen, zodat je in één oogopslag ziet hoe hij of zij het gedaan heeft.

  • Mobile screen showing a player's profile
  • Mobile screen showing a player's profile
  • Mobile screen showing a player's profile
03

Profielen

Iedere speler heeft zijn eigen profielpagina waar nog meer highlights staan. Bovenaan zie je hoe vaak iemand heeft meegedaan, hun beste seizoensplaatsing, gemiddelde score en hoogste score ooit. Daaronder vind je highlights zoals perfecte rondes en een lijst van behaalde achievements met hun progressie.

Er zijn ook nog grafieken die laten zien hoe je hebt tot nu toe hebt gepresteerd en hoe nauwkeurig je bent per continent. Zo zie je meteen of je een Europa-expert bent of juist steeds de mist ingaat in Oceanië.

Five smartphone screens displaying a dark-themed admin panel interface
04

Admin Panel

Om alles te configureren en aan te kunnen passen is er ook een admin panel gebouwd, waar de organisator dingen kan managen.Naast het gewone dashboard is er ook een admin panel waar de organisator alles kan regelen. Hier kun je challenges toevoegen of aanpassen, custom nicknames bijhouden, mensen uitsluiten van het seizoen en handmatig berichten naar Slack sturen.

Smartphone displaying a Slack chat with GeoGuessr game updates
Screenshot of a web app interface for sending Slack messages
05

Slack

Om iedereen op de hoogte te houden, is de website ook gekoppeld aan een Slack-app. Zodra de resultaten van de afgelopen week zijn verwerkt, stuurt de bot automatisch een bericht in het kanaal met de link naar de nieuwe challenge.

Daarnaast is er vanuit het admin-dashboard ook nog de mogelijkheid om zelf berichten te sturen namens de bot. Handig als je tussendoor een reminder, een grappige update of een extra challenge wil delen.

06Meer projecten