# How to Vibe Code Your Own Roadtrippers (and Stop Paying for It) > The #1 road trip planning platform for cars and RVs - Site: https://roadtrippers.com - Category: Travel & Navigation - Platforms: Web app, iOS app, Android app - Verdict: **Serious undertaking** (45/100 vibecodeable) - Estimated effort: 3-4 weeks of serious part-time work ## Verdict You can build a functional personal trip-planning prototype, but you will miss the proprietary POI database and commercial routing edge. Replicating Roadtrippers for personal use requires stitching together commercial mapping SDKs, setting up PostGIS geospatial queries for route buffers, and scraping or assembling an alternative POI dataset. While an AI coding agent handles standard CRUD and map UI bindings swiftly, writing efficient spatial queries for 'find all campsites within 10 miles of this polyline' and handling routing waypoint limits demands substantial backend engineering patience. ### What you can't replicate - Roadtrippers' proprietary database of 5 million curated roadside attractions and campground reviews - Commercial RV-specific navigation hardware integrations and weight-restriction databases - Historical travel patterns from 38 million real trips ## What it does A web and mobile trip-planning platform that allows users to map out routes, calculate fuel costs, and discover millions of points of interest, campgrounds, and roadside attractions along the way. ### Core features - Interactive map canvas with polyline route rendering between origin and destination - Waypoint management allowing up to multiple custom stops per trip - Geospatial POI discovery querying attractions, hotels, and campgrounds within a bounding box or distance buffer of the active route - Vehicle profile configuration (Car vs. RV) calculating estimated fuel consumption - Trip synchronization across browser and mobile devices - Multi-user trip collaboration for shared planning ## The business ### Pricing - Free: $0/yr - Plus: $35.99/yr - Pro: $49.99/yr - Premium: $59.99/yr ### Funding $16M raised. - Early stage ($4M) - Venture rounds (Drive Capital, CincyTech) Investors: Drive Capital, CincyTech, Graham Allen Partners (majority acquisition via Roadpass Digital) Founded 2012. Team size: 50-200 (under Roadpass Digital). ## The hard parts - Geospatial route-buffer queries (finding POIs strictly within X miles of a complex polyline route) - Routing engine integration with waypoint re-ordering and detour calculations - Massive localized POI database ingestion and indexing - RV-specific routing constraints (bridge heights, weight limits) ## How to vibe code Roadtrippers ### Prerequisites - Node.js (free): Required runtime for the Next.js full-stack framework and build tools. - GitHub (free): Code repository hosting and seamless deployment integration. - Mapbox Account (Free tier covers 50k loads/mo): Provides mapping tiles, vector rendering, and directions APIs. ### Recommended AI tools - Claude Code: Best-in-class multi-file agentic coding tool for scaffolding full-stack features and complex spatial database queries. - Cursor: Ideal AI editor for fine-tuning interactive map marker components and UI layout polish. ### Stack - Frontend: Next.js with Tailwind CSS and Mapbox GL JS - Backend: Next.js Server Actions and API Routes - Database: Neon (Serverless Postgres with PostGIS extension for spatial queries) - Auth: better-auth - Payments: None (Personal use clone) - Other: Vercel AI SDK, Zod for validation, Drizzle ORM ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints): $0/mo (Hobby tier) - Neon (Managed Postgres database with spatial support): $0/mo (Free tier) ### Build guide 1. **Project Scaffolding & Database Schema** — Initialize the Next.js project with Tailwind CSS, configure Drizzle ORM connected to Neon Postgres, and define database schemas for users, trips, waypoints, and points of interest. ``` Create a new Next.js TypeScript project with Tailwind CSS. Set up Drizzle ORM configured for a Neon Postgres connection using environment variables for DATABASE_URL. Define SQL tables in schema.ts for 'users', 'trips' (id, user_id, title, origin, destination, vehicle_profile), 'waypoints' (id, trip_id, name, lat, lng, stop_order), and 'pois' (id, name, category, lat, lng, description, rating). Include proper foreign key constraints and indexes for latitude and longitude fields. Provide a migration script and test connection utility. ``` 2. **Authentication Setup** — Implement authentication using better-auth to support secure user accounts and isolated trip management. ``` Integrate better-auth into the Next.js application using the Neon Postgres database adapter. Set up email/password and Google social login providers. Create API route handlers at /api/auth/[...all] and configure client-side auth hooks. Build clean sign-in and sign-up pages using Tailwind CSS matching modern SaaS styling. Ensure user sessions correctly secure trip data mutations. ``` 3. **Interactive Map & Route Canvas** — Embed Mapbox GL JS into the main trip planning dashboard to allow origin/destination input and route polyline rendering. ``` Build a responsive trip planner layout in Next.js featuring a full-screen Mapbox GL JS map canvas on one side and a collapsible trip sidebar on the other. Implement geocoding search inputs for 'Starting Point' and 'Destination' using Mapbox Geocoding API. When both points are selected, call the Mapbox Directions API to retrieve the route geometry and render the resulting polyline on the map. Fit the map bounds to the active route coordinates. ``` 4. **Waypoint Management & Stops** — Enable users to add, reorder, and remove custom stops along their active route with dynamic distance updates. ``` Extend the trip planner sidebar to support adding up to 20 intermediate waypoints between the origin and destination. Allow users to drag-and-order stops or delete them. Whenever the waypoint list changes, re-fetch the multi-stop route from the Mapbox Directions API and update the polyline on the map canvas. Display total trip mileage and estimated driving time dynamically in the header. ``` 5. **Geospatial POI Discovery** — Implement spatial queries to find and display points of interest along the active route corridor. ``` Implement a POI discovery subsystem in Postgres/Drizzle. Create a backend API endpoint that accepts a route polyline, buffer distance (e.g., 15 miles), and category filter. Use PostGIS spatial functions (or bounding box approximations if PostGIS is unavailable on the free tier) to query POIs stored in the database that fall within the route corridor. Display these POIs as custom markers on the Mapbox map. Clicking a POI marker should open a detail card with an 'Add to Trip' button that inserts it as a waypoint. ``` 6. **Vehicle Profiles & Fuel Cost Estimation** — Add vehicle configuration settings to calculate and display estimated trip fuel expenses. ``` Add a vehicle profile modal and settings view allowing users to select vehicle type (Car, Truck, RV), fuel type (Gas, Diesel, Electric), and MPG rating. Store vehicle details in the user profile table. Using the total trip mileage calculated from the Mapbox route, compute estimated fuel consumption and total trip fuel cost based on average regional fuel prices. Display this breakdown inside the trip summary panel. ``` 7. **Trip Saving & Polish** — Finalize trip persistence, dashboard listing, and UI error handling for a cohesive user experience. ``` Create a dashboard view listing all saved trips for the authenticated user with quick links to load, edit, or delete them. Implement robust loading states, toast notifications for successful actions (e.g., 'Trip saved successfully'), and responsive mobile adjustments for the sidebar and map canvas. Verify all TypeScript types and build scripts compile cleanly without errors. ``` ### Cost vs paying **Starting costs (one-time):** - Mapbox Developer Account: $0 (Free tier covers 50k requests) - Total: $0 one-time **Ongoing costs (monthly):** - Vercel Hosting: $0/mo - Neon Database: $0/mo - Mapbox API Usage: $0/mo (Within free tier limits) - Total: $0/mo - Paying for the SaaS instead: $19.99/mo (Premium) - Build time: 25-35 hours - AI tool credits: $20/mo (Claude Pro / Cursor Pro) - Break-even: N/A (Built for personal utility and learning) ## Sources - [Roadtrippers Official Website](https://roadtrippers.com) - [PitchBook Roadtrippers Profile](https://pitchbook.com/profiles/company/51239-65)