# How to Vibe Code Your Own Komoot (and Stop Paying for It) > Find, plan and share your adventures - Site: https://komoot.com - Category: Outdoor Navigation & Route Planning - Platforms: iOS app, Android app, Web app, Smartwatch app - Verdict: **Serious undertaking** (38/100 vibecodeable) - Estimated effort: 6+ months of part-time work ## Verdict Build a personal route planner and GPX viewer subset, but keep paying for Komoot because you cannot replicate its 850M+ community highlights or complex multi-sport routing engine. Attempting to clone Komoot as a solo developer reveals a massive chasm between a toy map app and a production-grade routing platform. While AI coding agents can quickly spin up a Next.js frontend with Mapbox GL JS and a basic database, handling spatial graph topology, sport-specific routing weights (e.g., separating mountain bike singletracks from road bike asphalt), offline vector map compilation, and smartwatch syncing requires tackling complex distributed systems and GIS engineering problems. Furthermore, Komoot's core value is its proprietary community content—photos, tips, and trail highlights—which an AI cannot generate for you. ### What you can't replicate - 850M+ user-generated photos, tips, and trail highlights - Network effects of 45 million active outdoor explorers - Deep, certified hardware integrations with Garmin, Wahoo, and Apple Watch ecosystems ## What it does Digital routing, navigation, and social discovery platform tailored for outdoor enthusiasts such as hikers, mountain bikers, and cyclists. ### Core features - Sport-specific path routing heuristics over OpenStreetMap graphs - Interactive map rendering with vector tiles and elevation overlays - Turn-by-turn voice navigation with offline map caching - GPX import, export, and route editing tools - User-generated highlights, photos, and route sharing - Activity recording and GPS track logging ## The business ### Pricing - Free Tier: Free — Unlimited route planning, web access, community browsing, and one free single region unlock. - Komoot Premium: €5.99/mo — Full access to worldwide offline maps, sport-specific layers, 3D maps, and live tracking. ### Funding $1.36M raised. - Seed Investors: Bmp Ventures, TU Berlin, Daniel Thung Founded 2010. Team size: 130-150. ## The hard parts - Building or hosting a high-performance routing engine (like GraphHopper or custom graph algorithms) with elevation data and sport-specific weighting - Client-side rendering and vector tile caching for smooth offline maps on mobile devices - Hardware integrations with Garmin, Wahoo, and smartwatch APIs - Managing massive spatial datasets and spatial index queries efficiently ## How to vibe code Komoot ### Prerequisites - Node.js (free): Required for running the full-stack web application development environment. - GitHub (free): Version control and repository hosting for your AI coding agents. - Mapbox Account (Free tier (50k loads/mo)): Provides vector map rendering and base tiles for the route planner interface. ### Recommended AI tools - Claude Code: Best-in-class terminal agent for scaffolding complex full-stack web apps, writing database schemas, and handling multi-file routing logic. - Cursor: Ideal code editor for iterative UI work, tweaking map rendering components, and inspecting visual diffs. ### Stack - Frontend: Next.js with Tailwind CSS and Mapbox GL JS - Backend: Next.js API routes with a self-hosted OSRM/GraphHopper routing container - Database: Neon (Serverless Postgres with PostGIS extension for spatial queries) - Auth: better-auth - Payments: None (Personal use clone) - Other: Vercel AI SDK, Zod for schema validation ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints): $0-20/mo - Fly.io (Running a dedicated OSRM or GraphHopper routing Docker container for custom path calculation): ~$5-10/mo - Neon (Storing user accounts, saved tours, and custom waypoints in Postgres with PostGIS): $0/mo ### Build guide 1. **Project Scaffolding & Database Schema with PostGIS** — Initialize the Next.js application, configure Tailwind CSS, set up better-auth for user management, and establish a Neon Postgres database connection with PostGIS extensions enabled for spatial data storage. ``` Scavenge a new Next.js project with TypeScript, Tailwind CSS, and App Router. Initialize better-auth configured with email/password authentication backed by a Neon Postgres database. Create database migration scripts using Drizzle ORM that include PostGIS extensions for handling spatial geometry types (Points, LineStrings) for saved tours, waypoints, and user-generated tracks. Ensure all environment variables are validated using Zod at startup. Verify that a user can sign up, log in, and persist sessions across page reloads. ``` 2. **Interactive Map Integration & GPX Import** — Integrate Mapbox GL JS into the Next.js dashboard, allowing users to view map tiles, pan, zoom, and upload GPX files to visualize custom tracks and elevation profiles. ``` Build an interactive map dashboard component using Mapbox GL JS inside the Next.js app. Implement controls for switching map styles, zooming, and centering on user location. Add a file upload dropzone that accepts .gpx files, parses them client-side using gpxparser or similar libraries, extracts latitude/longitude coordinates and elevation data, and renders the resulting polyline directly onto the Mapbox layer with an interactive elevation profile chart underneath using Recharts. Ensure proper error handling for malformed XML files. ``` 3. **Routing Engine Integration** — Connect the frontend route planner to a self-hosted OSRM or GraphHopper routing backend running on Fly.io to generate turn-by-turn paths between custom waypoints. ``` Implement a route-planning sidebar in the web interface where users can click on the Mapbox canvas to set starting points, waypoints, and destinations. Write backend proxy API routes in Next.js that communicate with an external OSRM routing container hosted on Fly.io. Send coordinate arrays to the routing engine, receive the resulting GeoJSON route geometry, distance, and estimated duration, and render the snapping polyline on the map in real-time. Add controls to reverse or delete waypoints. ``` 4. **Tour Management & Local Storage Sync** — Build backend endpoints and UI components to save, edit, name, and categorize planned tours by sport type (hiking, road cycling, mountain biking). ``` Create a full-featured 'Tours' management module. Build database tables for tours storing title, sport type (hiking, running, road_cycling, mtb), distance, duration, elevation gain, and the full GeoJSON geometry. Build a dashboard view listing saved tours with filter chips by sport type. Implement API endpoints for creating, updating, and deleting tours, and connect them to the route planner page so users can save their active map session with a single click. ``` 5. **Highlights & Community Discovery Feed** — Add a discovery feed showing community highlights, photos, and tips pinned to geographic coordinates on the map interface. ``` Develop a 'Highlights' discovery subsystem. Create database tables for highlights containing title, description, category (peak, waterfall, view, hut), latitude, longitude, and associated photo URLs stored in Cloudflare R2. Build an API endpoint that queries nearby highlights using PostGIS spatial bounding boxes based on the current map viewport bounds. Render custom marker pins on the Mapbox instance that open rich preview cards when clicked by the user. ``` 6. **Activity Recording & GPX Export** — Implement mobile-responsive tracking controls to simulate workout recording, track active time, and export completed routes as GPX files. ``` Build a responsive workout recording interface for mobile browsers that accesses the device Geolocation API to track user movement in real-time when active. Display elapsed time, current speed, distance traveled, and live elevation gain. When the user finishes recording, save the recorded track as a completed tour in the database and provide a button to export the tour data directly as a standard .gpx file download. ``` ### Cost vs paying **Starting costs (one-time):** - Mapbox Developer Account: Free tier - Total: ~$20 one-time **Ongoing costs (monthly):** - Vercel Hobby/Pro Hosting: $0-20/mo - Fly.io Routing Container VM: ~$5/mo - Total: ~$5-25/mo - Paying for the SaaS instead: €5.99/mo - Build time: 80-120 hours - AI tool credits: $20 one-time (Claude Pro) - Break-even: Never (built for learning and personal routing control) ## Sources - [Komoot Official Website](https://komoot.com) - [PitchBook & Tracxn Company Profiles for Komoot](https://tracxn.com) - [DC Rainmaker - Komoot Paywalls Analysis](https://www.dcrainmaker.com)