mirror of
https://github.com/tiennm99/vigeoguessr.git
synced 2026-10-13 06:15:54 +00:00
90 lines
2.5 KiB
Markdown
90 lines
2.5 KiB
Markdown
# VIGEOGUESSR
|
|
|
|
A Next.js-based Vietnamese geography guessing game where players guess the location of panoramic street view images from various Vietnamese cities.
|
|
|
|
## Features
|
|
|
|
- 🗺️ Multiple Vietnamese cities: Hanoi, Ho Chi Minh City, Hai Phong, Nam Dinh, Da Lat, and Duc Hoa
|
|
- 📱 Responsive design that works on desktop and mobile
|
|
- 🎯 Interactive map for location guessing
|
|
- 📊 Distance-based scoring system
|
|
- 🖼️ 360° panoramic street view images using Photo Sphere Viewer
|
|
- ⚡ Built with Next.js 15 and TypeScript for performance and type safety
|
|
|
|
## Tech Stack
|
|
|
|
- **Framework**: Next.js 15 with App Router
|
|
- **Language**: TypeScript with strict type checking
|
|
- **Styling**: Tailwind CSS with custom design tokens
|
|
- **Maps**: MapLibre GL JS
|
|
- **360° Images**: MapillaryJS
|
|
- **Image API**: Mapillary Graph API
|
|
|
|
## Getting Started
|
|
|
|
### Prerequisites
|
|
|
|
- Node.js 18+
|
|
- npm or yarn
|
|
|
|
### Installation
|
|
|
|
1. Clone the repository:
|
|
```bash
|
|
git clone <repository-url>
|
|
cd vigeoguessr
|
|
```
|
|
|
|
2. Install dependencies:
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. Run the development server:
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
4. Open [http://localhost:3000](http://localhost:3000) in your browser.
|
|
|
|
### Building for Production
|
|
|
|
```bash
|
|
npm run build
|
|
npm start
|
|
```
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
├── app/ # Next.js app directory
|
|
│ ├── game/ # Game page
|
|
│ ├── globals.css # Global styles
|
|
│ ├── layout.tsx # Root layout
|
|
│ └── page.tsx # Home page
|
|
├── components/ # Reusable React components
|
|
│ ├── DonateModal.tsx
|
|
│ ├── GameMap.tsx
|
|
│ ├── Header.tsx
|
|
│ ├── PanoViewer.tsx
|
|
│ └── ResultModal.tsx
|
|
├── lib/ # Utility functions
|
|
│ └── utils.ts # Utility functions
|
|
└── public/ # Static assets
|
|
```
|
|
|
|
## Key Improvements from Original
|
|
|
|
- **Modern Framework**: Migrated from vanilla HTML/JS to Next.js with TypeScript
|
|
- **Component-Based Architecture**: Modular, reusable React components
|
|
- **Clean Code**: Well-structured TypeScript with proper type safety and organization
|
|
- **Code Deduplication**: Eliminated duplicate code and consolidated utilities
|
|
- **Performance**: Optimized with Next.js built-in optimizations
|
|
- **Maintainability**: Cleaner code structure and separation of concerns
|
|
- **Responsive Design**: Better mobile experience
|
|
|
|
## Credit
|
|
|
|
- [viguessr](https://github.com/luuvanduc1999/viguessr) - Original implementation
|
|
- [geoguessr](https://github.com/bensizelove/geoguessr) - Inspiration
|