Nearcade

#daisyui #rhythm-game #svelte #svelte5 #sveltekit #tailwindcss #typescript

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.

✨ 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

Clone the repository:

git clone https://github.com/Naptie/nearcade.git
cd nearcade

Install dependencies:
```
pnpm install
```

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"

Start development server:
```
pnpm dev
```
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

Clone the repository:

git clone https://github.com/Naptie/nearcade.git
cd nearcade

Build the Docker images:

Make sure that both Dockerfile and docker-compose.yml are in the root directory of your project.
```
docker-compose build
```
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.
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.
Access the application:

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