GPX Route Database

A desktop app for managing and analyzing your bike routes. Built with Tauri v2, React, TypeScript, Tailwind CSS, MapLibre GL, and SQLite.

Features

• Import GPX files from folders (recursively scans for .gpx files)
• Route preview with MapLibre GL and custom dark theme
• Filter & sort routes by type (flat/hilly/gravel), distance, ascent
• Track performance - log rides with time, speed, heart rate, power
• Compare stats - view PRs, averages, and performance trends
• Local SQLite database - all data stored locally

File Naming Convention

The app extracts metadata from filenames:

[R_]<distance>k[_<ascent>m]_<name>.gpx

Examples:
- 70k_Kitsee+Pama+Gattendorf.gpx          → 70km flat route
- 55k_550m_BielyKríž+SvätýJur.gpx         → 55km with 550m ascent
- R_100k_Berg+Prellen.gpx                  → Reverse direction

Route type is determined by folder:

• /flat/ → Flat routes
• /hilly/ → Hilly routes
• /gravel/ → Gravel routes

Prerequisites

• Node.js 18+
• Rust (install via rustup)
• Tauri prerequisites for your OS:
  • Linux (Arch): sudo pacman -S webkit2gtk-4.1 base-devel curl wget openssl appmenu-gtk-module gtk3 libappindicator-gtk3 librsvg
  • Windows: WebView2 (usually pre-installed on Windows 10/11)
  • macOS: Xcode Command Line Tools

Installation

# Clone or navigate to project
cd gpx-route-db

# Install Node dependencies
npm install

# Run in development mode
npm run tauri dev

# Build for production
npm run tauri build

Development

# Start Vite dev server + Tauri
npm run tauri dev

# Frontend only (for faster iteration)
npm run dev

Project Structure

gpx-route-db/
├── src/                    # React frontend
│   ├── components/         # UI components
│   │   ├── MapPreview.tsx     # MapLibre route preview
│   │   ├── RouteFilters.tsx   # Filter controls
│   │   ├── RouteList.tsx      # Route list with cards
│   │   ├── RouteDetails.tsx   # Selected route + activities
│   │   ├── ActivityForm.tsx   # Log ride modal
│   │   └── ImportPanel.tsx    # GPX folder import
│   ├── gpxParser.ts        # GPX parsing + distance/ascent calculation
│   ├── store.ts            # Zustand state + SQLite operations
│   ├── types.ts            # TypeScript types + DB schema
│   ├── App.tsx             # Main layout
│   └── main.tsx            # Entry point
├── src-tauri/              # Rust backend
│   ├── src/main.rs         # Tauri app entry
│   ├── Cargo.toml          # Rust dependencies
│   ├── tauri.conf.json     # Tauri configuration
│   └── capabilities/       # Permission definitions
├── package.json
├── tailwind.config.js
└── vite.config.ts

Tech Stack

Layer	Technology
Framework	Tauri v2
Frontend	React 19 + TypeScript
Styling	Tailwind CSS
Maps	MapLibre GL (CARTO Dark tiles)
State	Zustand
Database	SQLite (tauri-plugin-sql)
GPX Parsing	fast-xml-parser
Build	Vite

Usage

1. Import routes: Click "Import" tab → "Select GPX Folder"
2. Browse routes: Use filters to narrow down by type, distance, or ascent
3. Preview route: Click a route to see it on the map
4. Log a ride: Select route → "Log Ride" → enter your stats
5. Track progress: View performance summary with PRs and trends

License

MIT