Flag It

Master the world one flag (and one fake flag) at a time.

Comment

Inspiration

Flag It was born at the intersection of three loves: geography, Wordle-style daily challenges, and the Reddit community's penchant for "spotting the fraud." While many geography games exist, I noticed they often feel static. I wanted to create something that wasn't just a test of memory, but a test of intuition. The primary inspiration was the "Fake Flag" concept—introducing a "troll" element that keeps even geography experts on their toes.

What it does

Flag It is a daily geography puzzle integrated natively into Reddit.

  • Daily Mystery: Every 24 hours, a new flag is featured.
  • The Twist: Not every flag is real. Players must decide if they are looking at a sovereign nation's flag or a clever "fake."
  • Hot/Cold Feedback: If the flag is real, every guess provides geospatial feedback, showing you how many kilometers you are from the target and whether you've hit the correct continent.
  • Community Submissions: Players can submit their own flags (real or fake) to be reviewed and included in future daily rotations, making it a community-curated game.

How I built it

I leveraged the Devvit (Reddit Developer Platform) to create a high-performance WebView experience.

  • Frontend: Built with React 19 and Vite, using Tailwind CSS 4 for a "Premium" design system featuring glassmorphism and smooth, hardware-accelerated animations.
  • Backend: An Express 5 server running within the Devvit environment, managing game logic and security.
  • Persistence: I used Redis to store community submissions and track daily flag rotations.
  • Geospatial Logic: To calculate distances between guesses, I implemented the Haversine formula. This mathematical model helps determine the great-circle distance between two points on a sphere:

$$ a = \sin^2\left(\frac{\Delta\phi}{2}\right) + \cos\phi_1 \cdot \cos\phi_2 \cdot \sin^2\left(\frac{\Delta\lambda}{2}\right) $$

$$ c = 2 \cdot \operatorname{atan2}(\sqrt{a}, \sqrt{1-a}) $$

$$ d = R \cdot c $$

Where $R$ is the Earth's radius (6,371 km), $\phi$ is latitude, and $\lambda$ is longitude.

Challenges I ran into

  • The CSP Wall: Fetching flag assets from external APIs while adhering to Reddit's strict Content Security Policy (CSP) was tricky. I solved this by building a custom Server-Side Image Proxy that fetches, validates, and serves images securely.
  • Asset Weight: I wanted a high-polish look with video backgrounds and sound effects without sacrificing load times. I optimized this by using progressive loading and a centralized SoundManager.
  • Mobile Fidelity: Ensuring the "premium" glassmorphic UI looked as good on a mobile app as it did on a desktop required careful CSS tuning and responsive layout refactoring.

Accomplishments that I'm proud of

  • Unique Mechanic: Successfully implementing the "Fake Flag" logic that changes how players approach geography trivia.
  • Polished UX: Creating an interface that feels like a native, premium app rather than a simple web snippet.
  • Recursive Loop: Building the "Submit a Nation" feature which ensures the game can grow infinitely through community participation.

What I learned

Building on Devvit taught me how to bridge the gap between traditional web development and a closed social ecosystem. I learned the nuances of WebView-to-Server communication and the importance of designing "social-first" features, like the result-sharing system that posts comments directly to Reddit.

What's next for Flag It

  • Global Leaderboards: Using Redis to track fastest guesses across the entire subreddit.
  • Multiplayer "Race" Mode: A real-time mode where players compete to identify a series of flags first.
  • Enhanced Fakes: Using AI-generated variations of real flags to make the "Fake Flag" challenge even more devious.

Built With

Share this project:

Updates