How to vibe codeRoadtrippers

Prerequisites

• Node.jsfree

  Required runtime for the Next.js full-stack framework and build tools.

• GitHubfree

  Code repository hosting and seamless deployment integration.

• 

  Mapbox AccountFree tier covers 50k loads/mo

  Provides mapping tiles, vector rendering, and directions APIs.

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

Build guide

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Geospatial 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

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

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Trip 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.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Roadtrippers