Trivia Map

An interactive web app that displays a world map where users can click on countries to get AI-generated multiple-choice trivia questions. Questions are powered by the Google Gemini API and grouped by category (history, geography, government/politics, economy, culture, cuisine).

---

Features

• Interactive map built with React Leaflet
• Dynamic GeoJSON loading for global country borders
• Multiple-choice trivia questions generated by Gemini
• Smart caching to avoid repeated questions
• Category buttons to choose trivia themes
• Instant feedback when answering (correct / incorrect)

---

Requirements

• Node.js 18+
• npm or yarn
• Google Gemini API key (through @google/genai), get one for free here
• Modern web browser (for Vite dev environment)

---

Installation & Setup

1. Clone the repository

   git clone https://github.com/btaeng/trivia-map.git
   cd trivia-map

2. Install dependencies

   npm install

3. Set your Gemini API key as a system environment variable

   Windows (PowerShell):

   setx GEMINI_API_KEY "your_api_key_here"

   macOS / Linux (bash or zsh):

   export GEMINI_API_KEY="your_api_key_here"

   After setting it, restart your terminal so the variable is loaded.

   To confirm it’s set:

   echo $GEMINI_API_KEY   # macOS/Linux
   $env:GEMINI_API_KEY  # Windows

   The server automatically detects the key from your system environment when it starts.

4. Run the server

   The backend (Express + Gemini API) runs on port 3001:

   node server.js

5. Run the frontend

   The Vite development server runs on port 5173:

   npm run dev

6. Open the app

   In your browser, go to:

   http://localhost:5173
   

7. If you are using Docker, do this instead

   In your terminal, run these commands:

   docker build -t trivia-map .
   docker run -p 3001:3001 -e GEMINI_API_KEY=$GEMINI_API_KEY trivia-map # macOS/Linux
   docker run -p 3001:3001 -e GEMINI_API_KEY=$env:GEMINI_API_KEY trivia-map # Windows

   And then in your browser, go to:

   http://localhost:3001/
   

---

Usage

1. Click any country on the map to load a trivia question.

2. Pick a category from the top-left buttons:

   • history
   • geography
   • government/politics
   • economy
   • culture
   • cuisine

3. Choose one of the four answer options in the popup.

4. The app tells you instantly whether you’re right or wrong.

---

Notes

• DO NOT SHOW ANYONE YOUR API KEY.
• You can replace or update src/assets with any GeoJSON data set (e.g. regional maps).
• The backend and frontend must run simultaneously for trivia generation to work.

---

Disclaimer

This project uses country boundary data from Natural Earth. All geographic borders and territorial outlines shown in this application are based solely on that dataset. They do not represent or imply any political stance, endorsement, or recognition of territorial claims or disputes. The author of this project is not affiliated with or responsible for any interpretations derived from the displayed map data.

---

License

MIT License. See LICENSE for details.