# How to Vibe Code Your Own Wanderlog (and Stop Paying for It)

> Free vacation planner and itinerary app

- Site: https://wanderlog.com
- Category: Travel & Productivity
- Verdict: **Solid side project** (68/100 vibecodeable)
- Estimated effort: 3-4 weeks part-time

## Verdict

You can build a fully functional personal clone of Wanderlog's core planning loop, but real-time multiplayer sync and robust email parsing will demand significant engineering patience.

Replicating the split-screen itinerary builder, map markers, and budget tab in Next.js is straightforward. However, maintaining smooth operational multiplayer sync without race conditions takes careful state design, and automated email parsing from random vendors is notoriously brittle to build alone. Unless you deeply value the learning process, paying $39.99/year for the real product is vastly more rational than writing custom parsers for airline confirmation formats.

### What you can't replicate

- The massive library of community-shared travel guides and user reviews
- Direct affiliate partnerships with hotel booking aggregators
- Polished native mobile apps with battle-tested offline SQLite replication

## What it does

An all-in-one travel planning and itinerary management platform featuring a split-screen chronological list and interactive map, real-time collaboration, and expense splitting.

### Core features

- Split-screen itinerary and interactive map view
- Real-time collaborative trip editing
- Day-by-day chronological itinerary blocks
- Expense tracking and cost-splitting among companions
- Place search with automated Wikipedia/web place metadata
- Checklists and packing lists
- Email forwarding and reservation ingestion
- AI trip recommendations

## The business

### Pricing

- Free: Free
- Wanderlog Pro: $39.99/yr

### Funding

$1.5M raised.
- Seed (~$1.5M, 2021)
- Accelerator ($150K YC, 2019)
Investors: General Catalyst, Y Combinator

Founded 2019.
Team size: 6-16.

## The hard parts

- Real-time multi-user synchronization with conflict resolution for itinerary blocks and map pins
- Parsing messy unstructured confirmation emails from hundreds of distinct travel vendors
- Client-side offline storage and sync for local-first travel use
- Geospatial clustering and routing optimization algorithms for road trip legs

## How to vibe code Wanderlog

### Prerequisites

- Node.js (free): Runtime environment for the Next.js full-stack framework and local build scripts.
- GitHub (free): Source control and deployment pipeline integration.
- Mapbox Account (free tier): Provides map rendering and geocoding tiles for the interactive map interface.

### Recommended AI 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.

### Stack

- Frontend: Next.js with Tailwind CSS and Shadcn UI components
- Backend: Next.js App Router API routes with Server-Sent Events or WebSockets
- Database: Turso (SQLite at the edge) via Drizzle ORM
- Auth: better-auth
- Payments: None (personal use clone)
- Other: Liveblocks for real-time multiplayer cursor and presence synchronization, Mapbox GL JS for interactive map rendering, Anthropic API for AI trip suggestions and itinerary generation, Resend for transactional and inbound email processing

### Hosting

- Cloudflare (Hosting the Next.js frontend and edge API routes): $0-5/mo
- Turso (Serverless edge SQLite database storage): $0/mo

### Build guide

1. **Project 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.
```

2. **Authentication & 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.
```

3. **Split-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.
```

4. **Real-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.
```

5. **Expense 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.
```

6. **AI 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.
```

### Cost vs paying

**Starting costs (one-time):**

- Domain name (optional): $12 one-time
- AI API credits (Anthropic/Mapbox): $10 one-time
- Total: ~$22 one-time

**Ongoing costs (monthly):**

- Cloudflare & Turso edge hosting: $0-5/mo
- Total: ~$3/mo

- Paying for the SaaS instead: $3.33/mo ($39.99/yr)
- Build time: 35-50 hours
- AI tool credits: ~$20 one-time (Claude Pro / API credits)
- Break-even: Never (purely for learning and personal customization)

## Sources

- [Wanderlog Official Site](https://wanderlog.com/)
- [Wanderlog Pro Features & Pricing](https://wanderlog.com/pro)
- [Tracxn Company Profile - Wanderlog](https://tracxn.com/d/companies/wanderlog)