nearcade ๐Ÿ•น๏ธ

English | ไธญๆ–‡

A modern web application that helps gamers discover arcade gaming venues. Find the best spots to play popular rhythm games like maimai DX, CHUNITHM, SOUND VOLTEX, and more!

Please join the following QQ group for discussions.

QR code for the nearcade QQ group

โœจ Features

๐ŸŽฏ Location-Based Discovery

  • My Location: Use GPS to find arcades near your current position
  • University Search: Search for arcades near specific universities and campuses
  • Map Selection: Pick any location on an interactive map
  • Customizable Radius: Search within 1~30 km radius

๐Ÿ† University Rankings

  • Compare universities by arcade density and machine availability
  • Metrics include shop count, total machines, and area density (machines per kmยฒ)
  • Game-specific rankings for popular titles
  • Daily data updates with 24-hour cache refresh

๐ŸŽฎ Game Support

  • maimai DX
  • CHUNITHM
  • Taiko no Tatsujin
  • SOUND VOLTEX
  • WACCA

๐Ÿ› ๏ธ Technical Stack

Frontend Framework

  • SvelteKit: Full-stack framework with SSR/SPA capabilities
  • Svelte 5: Latest version with enhanced reactivity system
  • TypeScript: Type-safe development throughout

Styling & UI

  • Tailwind CSS 4.0: Utility-first CSS framework
  • daisyUI: Semantic component classes for Tailwind
  • Font Awesome: Comprehensive icon library

Backend & Database

  • MongoDB: Document database for storing arcade and university data
  • Server-side API: RESTful endpoints built with SvelteKit

Maps & Location Services

  • ้ซ˜ๅพทๅœฐๅ›พ (AMap) & ่…พ่ฎฏๅœฐๅ›พ (Tencent Maps): Mapping service integration
  • Geolocation API: Browser-based location detection

Internationalization

  • Paraglide.js: Type-safe i18n solution
  • Message-based Translation: Structured translation system

Development Tools

  • Vite: Fast build tool and development server
  • ESLint: Code linting with Svelte-specific rules
  • Prettier: Code formatting with plugin support
  • PNPM: Fast, disk space efficient package manager

๐Ÿš€ Getting Started

Prerequisites

  • Node.js 18+
  • PNPM (recommended) or npm
  • MongoDB instance
  • AMap JS API key & secret
  • Tencent Maps API key

Installation

  1. Clone the repository:

    git clone https://github.com/Naptie/nearcade.git
    cd nearcade
    
  2. Install dependencies:

    pnpm install
    
  3. Set up environment variables:

    Create a .env file in the root directory:

    PUBLIC_AMAP_KEY = "your_key"
    PUBLIC_QQMAP_KEY = "your_key"
    AMAP_SECRET = "your_secret"
    MONGODB_URI = "mongodb://localhost:27017/?dbName=nearcade"
    
  4. Start development server:

    pnpm dev
    
  5. Open your browser: Navigate to http://localhost:5173

Building for Production

# Build the application
pnpm build

# Preview the production build
pnpm preview

Deploy to Cloudflare Workers

ADAPTER=cloudflare pnpm cf-deploy

๐Ÿšข Running with Docker

Prerequisites

  • Docker installed on your machine (follow the installation guide).
  • Docker Compose (for multi-container setups, if needed).

Step-by-Step Guide

  1. Clone the repository:

    git clone https://github.com/Naptie/nearcade.git
    cd nearcade
    
  2. Build the Docker images:

    Make sure that both Dockerfile and docker-compose.yml are in the root directory of your project.

    docker-compose build
    
  3. Set up environment variables:

    Ensure that you have the required environment variables set. You can create a .env file in the root of your project directory with the following content:

    PUBLIC_AMAP_KEY = "your_key"
    PUBLIC_QQMAP_KEY = "your_key"
    AMAP_SECRET = "your_secret"
    MONGODB_URI = "mongodb://localhost:27017/?dbName=nearcade"
    

    Note: If you're using Docker Compose to run the app and MongoDB together, you may need to modify MONGODB_URI to point to the MongoDB container instead of localhost.

  4. Start the application using Docker Compose:

    docker-compose up
    

    This will start both the application and any dependencies, like MongoDB, that you have defined in your docker-compose.yml file.

  5. Access the application:

    Once the containers are up and running, navigate to http://localhost:3000 in your browser to view the application.

Stopping the Docker Containers

To stop the Docker containers, run:

docker-compose down

๐Ÿค Contributing

We welcome contributions! Please feel free to submit issues and pull requests.

Development Guidelines

  • Follow TypeScript best practices
  • Use Prettier for code formatting
  • Write meaningful commit messages
  • Test your changes thoroughly

โญ Stargazers Over Time

๐Ÿ“„ License

This project is open source and available under the Mozilla Public License 2.0.

๐Ÿ™ Acknowledgments

Top categories

Loading Svelte Themes