← Back to work

WanderPlan

Real-time, AI-empowered collaborative travel planning and group management platform — 14 essential travel workflows unified into one reactive workspace syncing in under 100ms via Convex WebSockets.

THE PROBLEM

Traditional group trip planning is notoriously fragmented across a disjointed patchwork of apps: communication in WhatsApp or Slack threads, schedules in static spreadsheets lacking spatial awareness, financial tracking in standalone splitters like Splitwise decoupled from bookings, and documents or tickets scattered across email inboxes without destination context.

WHAT I BUILT

  • ●14 Core Capabilities ('14 Tools. One Trip.'): Centralized Dashboard, Executive Trip Overview, Day-by-Day Interactive Itinerary Planner (drag-and-drop via @dnd-kit), Granular Member Management (RBAC), Multi-Currency Budget & Split Engine, Collaborative Ideas Board with up/down voting, Spatial Interactive Map (Leaflet), Shared Checklists, Weather-Aware AI Packing Lists, Cloud Files & Documents repository, Dedicated Boarding Passes ticket manager, Consolidated Reservations tracker, In-App Contextual Real-Time Chat, and Visual Financial Analytics (Recharts)
  • ●Serverless Reactive Data Architecture via Convex (v1.32): Replaces traditional REST/GraphQL polling with persistent WebSocket subscriptions where queries automatically re-run server-side inside ACID transactions and push sub-100ms state deltas directly to subscribed DOMs without manual refetching
  • ●Greedy Debt Minimization Graph Algorithm: Separates trip participants into Creditors and Debtors, iteratively matching the largest debtor against the largest creditor to generate simplified repayment instructions (e.g., resolving A→B→C debt chains into direct atomic settlement transfers)
  • ●Generative AI Boarding Pass Extraction Engine: Leverages OpenAI GPT-4o inside Convex Node.js runtime Server Actions (action()) with constrained JSON schema formatting (response_format: { type: 'json_object' }) to extract airline, flight number, gates, terminals, and timestamps from unstructured email text
  • ●Strict Role-Based Access Control (RBAC) & Authentication: Clerk identity verification integrated with Next.js 16 Edge middleware (proxy.ts), synchronized via Svix webhook signatures, and enforced server-side on every Convex mutation via compound index queries ([tripId, userId])
  • ●Real-Time Notification & In-Trip Chat Broadcasts: Batch database insertions into notifications table push live unread badge counts and popover alerts across group members' navigation bars instantaneously

TECHNOLOGY STACK

Next.js 16Next.js 16ReactReactConvexConvexClerkClerkTypeScriptTypeScriptTailwind CSSTailwind CSSOpenAIOpenAIRechartsRechartsLeafletLeafletVercelVercel
TECHNICAL HIGHLIGHT

When a user edits an itinerary item or logs an expense, Convex executes the mutation inside an ACID transaction, identifies all active client WebSocket subscriptions depending on the modified records, and pushes the exact delta in sub-100ms latency. In parallel, financial settlement calculations run a greedy graph minimization algorithm to eliminate redundant person-to-person debt transfers across the group.

Next Project →Moris IDE