How to vibe codeKomoot

Prerequisites

• Node.jsfree

  Required for running the full-stack web application development environment.

• GitHubfree

  Version control and repository hosting for your AI coding agents.

• 

  Mapbox AccountFree tier (50k loads/mo)

  Provides vector map rendering and base tiles for the route planner interface.

AI coding 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.

Build guide

1. 01Project 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Interactive 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Routing 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Tour 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Highlights & 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Activity 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Komoot