MapTap | Devpost

Inspiration

I've always enjoyed competing with my friends over who has more knowledge of flags, world capitals, and other geography trivia. In this hackathon, I decided to make a daily geography challenge built specifically for Reddit's community-driven platform. I set out to create a game that combines the thrill of geography trivia in the form of location guessing with Reddit's social engagement. Players can discuss strategies, share their results, and compete daily in the comments. MapTap was designed to make geography knowledge fun, accessible, and bring Redditors together around a shared daily challenge.

What it does

MapTap is a daily geography guessing game where players click on a world map to locate a target city. The game features two modes:

Daily Challenge Mode: Every day, all players compete to find the same city. After making your guess, you see:

Your distance from the target (in kilometers)
Your ranking among all players (e.g., "23rd place")
Your percentile score (how you compare to others)
Visual markers showing both your guess and the target location

Unlimited Rounds Mode: Practice mode where you can play as many rounds as you want, each with a random city to find.

The game is fully integrated into Reddit's ecosystem. Players can share their scores, discuss strategies, and celebrate victories in the comments. The daily reset ensures fresh content every day, keeping the community engaged and coming back.

How we built it

MapTap is built using Devvit Web, leveraging modern web technologies:

Frontend (Client):

React with TypeScript
Tailwind CSS
Custom map coordinate conversion algorithms to translate user clicks to lat/lng coordinates

Backend (Server):

Express.js serverless backend running on Devvit's infrastructure
Redis for persistent data storage (daily cities, user guesses, leaderboards)
RESTful API endpoints for game initialization, guess processing, and stats retrieval
UTC-based date system ensuring consistent daily resets worldwide

Challenges we ran into

One of the most significant challenges was accurately converting user clicks on the displayed map image to real-world coordinates. The map image has a specific aspect ratio and projection, requiring careful scaling calculations between the displayed size and natural image dimensions. I had to account for different screen sizes, browser zoom levels, and ensure pixel-perfect accuracy across desktop and mobile devices. This required extensive testing and debugging to achieve the precision necessary for fair gameplay.

Accomplishments that we're proud of

Polished User Experience: The game delivers a complete, launch-ready experience with a clean, intuitive UI that provides immediate visual feedback. The stats board with histogram offers players insights into their performance and competitive standing.

Functional Leaderboard System: The percentile-based ranking system accurately calculates player positions and provides competitive motivation. The histogram visualization helps players understand the distribution of guesses and see where they stand relative to others.

Accurate Geography Engine: The coordinate conversion and distance calculation system is highly accurate, ensuring fair gameplay. Players can trust that their guesses are being evaluated correctly using precise geographic calculations.