GPS Routes

GPS Routes is a modern, interactive web application designed for outdoor enthusiasts to search, view, and explore GPS tracks. Whether you are planning a hike, a cycling trip, or a scenic drive, GPS Routes provides a rich interface to visualize routes and their details.

Key Features

Interactive Mapping

• Rich Map Interface: Powered by Leaflet, offering a smooth and responsive map experience.
• Route Visualization: Native support for rendering GPX and KML files directly on the map.
• Points of Interest: Explore landmarks and key locations along your route.
• User Location: Quickly find routes near your current location with one-click geolocation.
• Fullscreen Mode: Immerse yourself in the map with a dedicated fullscreen view.

Powerful Search & Discovery

• Smart Search: Instantly find routes by name, location, or keyword.
• Advanced Filtering: Narrow down results using dynamic facets (e.g., difficulty, distance, region).
• Instant Feedback: See search stats and pagination controls updated in real-time.
• Detailed Results: Browse route cards with key metrics, descriptions, and quick actions.

Modern User Experience

• Responsive Design: Fully optimized for desktop, tablet, and mobile devices.
• Modern Aesthetics: Built with Chakra UI and a glassmorphism-inspired design language.
• Fast Navigation: Instant page transitions powered by TanStack Router.

For Contributors

We welcome contributions! This project is built with a modern React stack and emphasizes type safety and performance.

Tech Stack

• Core: React 19 & TypeScript
• Build Tool: Vite 7
• Routing: TanStack Router (File-based routing)
• State Management: Jotai
• UI Components: Chakra UI v3 & Emotion
• Maps: Leaflet & React Leaflet
• Data Parsing: @tmcw/togeojson (GPX/KML to GeoJSON)
• Testing: Vitest

Getting Started

1. Clone the repository:

   git clone <repository-url>
   cd gps-routes

2. Install dependencies:
   This project uses Yarn 4.

   yarn install

3. Configure Environment:
   Create a .env file in the root directory. You will need to provide the API endpoint and key for the backend service.

   VITE_GPS_ROUTES_API_URL=https://api.your-service.com
   VITE_GPS_ROUTES_API_KEY=your-api-key

4. Run the Development Server:

   yarn dev

   Open http://localhost:5173 to view it in the browser.

Project Structure

• src/routes: Application pages (TanStack Router).
• src/components: Reusable UI components.
  • map/: Map-specific logic (Markers, Layers).
  • search/: Search interface components.
• src/services: API clients and data processing (GeoJSON parsing).
• src/hooks: Custom React hooks (e.g., useCurrentLocation, useSearch).
• src/types.ts: Domain-specific TypeScript interfaces.

Commands

License

This project is licensed under the MIT License.