tiennm99 10c828776b refactor(ui): extract round result, guess map, and leaderboard components
Move result display, map panels, and leaderboard into dedicated components,
reducing GameClient complexity. Removes unused tabs component and cleans
up unused parameters.
2026-08-30 20:52:20 +07:00
2025-08-07 13:08:06 +07:00
2025-08-07 12:27:13 +07:00
2025-08-04 23:11:11 +07:00
2025-08-07 12:27:13 +07:00
2026-08-17 13:28:24 +07:00

VNGeoGuessr

A GeoGuessr clone focused on Vietnamese locations with accurate boundary detection and anti-cheat security. Play geolocation guessing games across 5 Vietnamese locations using real street-level imagery.

🎮 Features

  • 5 Vietnamese Locations: Ha Noi, Da Nang, Ho Chi Minh, Da Lat, Duc Hoa (Long An)
  • 360° Street View: Mapillary panoramic images with PhotoSphere viewer
  • Anti-Cheat Security: Server-side session management prevents cheating
  • Distance-Based Scoring: 0-5 point system based on accuracy
  • Persistent Leaderboards: Redis-powered top 200 player rankings
  • Accurate Boundaries: Nominatim API + Turf.js for precise city detection

📚 Documentation

For detailed information about this project, see the documentation in /docs/:

🚀 Getting Started

Prerequisites

  • Node.js 18+
  • npm 11+
  • Redis server (for leaderboards)

Development

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linting
npm run lint

Open http://localhost:3000 to play the game.

🏗️ Built With

  • Frontend: Next.js 15 + React 19 + Tailwind CSS 4
  • Street View: Mapillary API + PhotoSphere Viewer
  • Maps: Leaflet + OpenStreetMap
  • Geographic Data: Nominatim API + Turf.js
  • Storage: Redis (leaderboards) + In-memory sessions
  • UI Components: shadcn/ui

🎯 How to Play

  1. Enter your username
  2. Select a Vietnamese location
  3. View the 360° street panorama
  4. Place your guess on the map
  5. Earn points based on accuracy (closer = more points)
  6. Compete for the top 200 leaderboard spots!

📋 Development Notes

  • JavaScript Only: No TypeScript files
  • Individual Parameters: Functions use separate parameters, not object destructuring
  • Server-Side Security: Game coordinates never sent to client
  • Session Management: Automatic cleanup after 30 minutes

🤝 Contributing

This project follows specific development guidelines. Please read the Development Guidelines before contributing.

S
Description
GeoGuessr clone for Vietnamese locations — Mapillary panoramas, Turf.js boundaries, Upstash REST leaderboards
Readme Apache-2.0
14 MiB
0 Stars 1 Watchers 0 Forks
Languages
JavaScript 98.2%
CSS 1.8%