How to vibe codeTripIt

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js full-stack application

• GitHubfree

  Source control and repository management linked to Vercel

• Anthropic APIpay-as-you-go (~$10-20/mo)

  Provides the LLM intelligence required to parse unstructured travel confirmation emails into structured JSON itineraries

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding full-stack databases, parsers, and API integrations end-to-end

• Cursor

  Ideal for fine-tuning UI layouts, itinerary views, and debugging frontend component states

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui components, better-auth, and connect to Neon Postgres.

   Scaffold a new Next.js project using App Router, TypeScript, Tailwind CSS, and configure shadcn/ui primitives. Set up a Neon Postgres connection using Drizzle ORM or Prisma. Implement better-auth for secure user authentication with email/password and session handling. Create database tables for users, trips (id, title, startDate, endDate, userId), and itinerary_segments (id, tripId, type [flight, hotel, car, restaurant, event], supplier, confirmationCode, startTime, endTime, details JSONB, rawEmailText). Ensure proper foreign key constraints and indexes on userId and tripId. Write initial migration scripts and verify database connectivity.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Manual Trip & Itinerary Management UI

   Build the dashboard and interactive master chronological itinerary view for managing trips and segments.

   Create a responsive dashboard in Next.js showing upcoming and past trips grouped chronologically. Implement a trip detail view displaying a unified timeline of itinerary segments (flights, hotels, rental cars, activities) with distinct icons and badges. Build modal forms allowing users to manually add, edit, or delete itinerary segments with fields for dates, times, confirmation numbers, and provider notes. Ensure state management handles empty states gracefully and provides clean visual hierarchy optimized for mobile and desktop screens.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03LLM-Powered Email Parsing Engine

   Implement an ingestion endpoint and LLM parsing service to convert forwarded travel confirmation emails into structured itinerary segments.

   Build a secure API route /api/ingest/email that receives forwarded travel confirmation emails (plain text or HTML). Using the Anthropic API and Vercel AI SDK structured outputs, write a robust extraction service that parses arbitrary airline, hotel, or car rental confirmation emails into a standardized JSON schema containing segment type, provider name, confirmation code, departure/arrival locations, timestamps, and seat/room details. Automatically match incoming parsed segments to an existing active trip or create a new trip if no matching date range exists. Save the parsed segment to Neon Postgres and log parsing failures for review.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Document Storage & Calendar Sync (.ics)

   Add file upload capabilities for travel documents and calendar synchronization feeds.

   Implement document storage allowing users to attach up to 25 PDFs or confirmation images per trip using Vercel Blob or Cloudflare R2 storage, enforcing file size limits and secure download URLs. Build an API route /api/calendar/[tripId].ics that dynamically generates an iCalendar (.ics file) stream for all confirmed segments in a trip, allowing users to subscribe or import their itinerary directly into Apple Calendar, Google Calendar, or Outlook.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Flight Status Monitoring & Notification Alerts

   Integrate a lightweight flight tracking API mock or live feed with automated notification reminders.

   Integrate an aviation status data source or mock service to check flight statuses based on flight number and date. Build a background cron job or scheduled task running via Vercel Cron that checks for flight schedule changes, gate reassignments, or delays. When a disruption or gate change is detected, generate in-app notification alerts and trigger transactional alert emails via Resend to notify the traveler immediately. Display real-time flight status badges directly on the itinerary timeline.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, Offline Caching & Verification

   Optimize performance, implement local caching for offline travel access, and conduct end-to-end testing.

   Implement service worker caching and local storage persistence so users can view their active master itinerary offline while traveling without cellular connectivity. Add comprehensive error handling, loading skeletons, and toast feedback for all user actions. Write end-to-end test suites using Playwright covering user authentication, manual trip creation, email parsing simulation, and calendar export. Run a final code review to clean up unused dependencies and ensure robust security practices across all API routes.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for TripIt