An interactive geography quiz game built with React where players can test their knowledge of world countries by clicking on interactive maps.
- Multiple Map Regions: Choose from World, Americas, Asia, Europe, or Africa
- Interactive Maps: Click on countries to guess them
- Real-time Scoring: Track your progress with a visual score bar and trophy system
- Timer: Race against time with an integrated stopwatch
- Statistics: View detailed game statistics including correct/wrong answers
- Responsive Design: Optimized for desktop, tablet, and mobile devices
- Trophy System: Earn bronze (20%), silver (50%), gold (80%), or diamond (100%) trophies
- Frontend Framework: React 18.2.0
- Routing: React Router DOM
- Styling: Tailwind CSS with custom theme
- Maps: React Simple Maps for interactive geography visualization
- Icons: React Icons
- Timer: React Timer Hook
- Build Tool: Vite
- Node.js (version 16 or higher)
- npm or yarn package manager
- Clone the repository:
git clone https://github.com/MateoMor/geographey.git
cd geographey- Install dependencies:
npm install- Start the development server:
npm run dev- Select a Region: Choose from World, Americas, Asia, Europe, or Africa on the home page
- Start Playing: The game will display a country name and flag
- Click the Country: Find and click the corresponding country on the map
- Track Progress: Monitor your score, time, and statistics in the game panel
- Complete the Game: Try to guess all countries in the region
- View Results: See your final score and trophy achievement
- Menu Button: Access game menu (resume, restart, main menu)
- Hint Button: Get helpful hints for the current country
- Skip Button: Skip the current country if you're stuck
- Result Button: View detailed results (appears when game is finished)
src/
├── components/ # Reusable UI components
│ ├── buttons/ # Game control buttons
│ ├── gameElements/ # Map chart and game UI
│ ├── gameHeader/ # Country name and flag display
│ ├── mainPage/ # Home page components
│ └── resultWindowElements/ # Score and statistics components
├── containers/ # Layout containers
├── context/ # Global state management
├── constants/ # App configuration and route data
├── data/ # GeoJSON map data and country information
└── pages/ # Main page components
The game uses custom GeoJSON data for different regions:
- World: Global map excluding Antarctica
- Americas: North and South American countries
- Asia: Asian countries and territories
- Europe: European countries
- Africa: African countries
The project uses a custom color scheme defined in Tailwind configuration:
- Primary: Orange (#F0A500)
- Secondary: Blue (#3F72AF)
- Page Background: Light Blue (#0092CA)
- Neutral: Light Gray (#dfdfe2)
- Trophy Colors: Bronze, Silver, Gold gradients
- Bronze Trophy: 20% or higher
- Silver Trophy: 50% or higher
- Gold Trophy: 80% or higher
- Diamond Trophy: 100% (perfect score)
Score is calculated based on correct answers divided by total countries in the region.
The game is fully responsive with specific optimizations for:
- Desktop: Full-featured experience with optimal map sizing
- Tablet: Adjusted layout and touch-friendly controls
- Mobile: Compact UI with responsive map scaling
- Landscape/Portrait: Automatic orientation handling
The app is configured to run at /geographey/ base path (configurable in vite.config.js and constants/appData.js).
This project is licensed under the GNU Affero General Public License v3.0 - see the LICENSE file for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Enjoy exploring the world with Geographey! 🌍✨