How to vibe codeWanderlog

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js full-stack framework and local build scripts.

• GitHubfree

  Source control and deployment pipeline integration.

• 

  Mapbox Accountfree tier

  Provides map rendering and geocoding tiles for the interactive map interface.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding multi-file features, database schemas, and API routes.

• Cursor

  Ideal AI-native editor for refining the complex split-screen UI layouts and map integration components.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Drizzle ORM with Turso SQLite, and establish data models for trips, days, itinerary blocks, map pins, and expenses.

   Create a new Next.js project with Tailwind CSS and TypeScript. Set up Drizzle ORM connected to a Turso SQLite database. Define the database schema for: users, trips (id, title, startDate, endDate, ownerId), trip_members (tripId, userId, role), itinerary_items (id, tripId, dayIndex, title, category, notes, cost, latitude, longitude, startTime), and expenses (id, tripId, paidById, amount, description, splitBetween). Write migration scripts and test local connection seeding.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication & Trip Management

   Implement user authentication using better-auth and build the trip dashboard allowing users to create, view, and delete personal vacations.

   Integrate better-auth into the Next.js app supporting email/password sign-up and login. Build a clean dashboard page that lists all trips belonging to the authenticated user, complete with a modal to create a new trip with a title, destination name, and date range. Ensure proper server-side session protection on all trip routes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Split-Screen Itinerary & Map View

   Construct the core split-screen layout featuring a chronological day-by-day itinerary builder on the left and an interactive Mapbox canvas on the right.

   Build a responsive split-screen trip planning page. The left pane should display a chronological list of itinerary blocks grouped by trip day, allowing users to add, edit, reorder, and delete activities. The right pane should embed Mapbox GL JS, plotting markers for each itinerary item with lat/lng coordinates. Clicking a pin on the map should highlight the corresponding card in the itinerary list, and vice versa.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Real-Time Collaboration

   Incorporate Liveblocks presence and collaborative state hooks so multiple users can view active editors and edit trip blocks simultaneously.

   Integrate Liveblocks into the trip planning view to enable real-time collaboration. Display active collaborators' avatars and live cursors in the header. Set up synchronized state for itinerary item additions and updates so that when one user adds or drags an item, all connected clients see the update instantly without manual page refreshes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Expense Tracking & Splitting

   Build an expense tab and calculation engine that tracks trip costs, records who paid, and automatically computes balances and settlements among travel companions.

   Create an expenses tab within the trip view. Implement a form to add expenses with amount, currency, category, payer, and participating members. Build a summary component that calculates total trip spend per category and computes a settlement matrix showing who owes whom across the group.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06AI Recommendations & Email Ingestion Stub

   Add an AI assistant modal powered by the Anthropic API to generate recommended daily activities and a webhook endpoint to ingest forwarded reservation emails.

   Implement an AI assistant feature using the Vercel AI SDK and Anthropic API. Add a 'Generate recommendations' button in the itinerary view that takes the destination and trip dates, queries Claude for structured JSON recommendations, and allows users to click-to-add items directly into their trip days. Additionally, create an API webhook route to accept incoming parsed email payloads and automatically insert hotel or flight blocks into the trip.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Wanderlog