Back to Portfolio

Full-Stack Web App • 2025

Traveloop

React Node.js Express.js PostgreSQL Supabase

1. Project Overview

Traveloop is a personalized travel planning application designed to make multi-city trip management simple, collaborative, and enjoyable. Users can build detailed itineraries across multiple destinations, discover activities, estimate budgets, and share plans with fellow travelers — all within a single, intuitive interface.

The platform is backed by a relational database (PostgreSQL via Supabase) that preserves trip data, user preferences, and shared itineraries reliably, enabling a consistent experience across devices and collaborative sessions.

Multi-City Planning

Create and manage itineraries across multiple cities in one place

Activity Discovery

Browse and add curated activities at each destination

Budget Estimation

Track estimated and actual costs for each leg of the trip

Packing Checklists

Smart packing lists generated based on trip destinations

Itinerary Sharing

Share complete trip plans with collaborators via link

Relational DB

PostgreSQL + Supabase for reliable, scalable data persistence

2. Problem Statement

Planning a multi-city trip is inherently complex — travelers typically juggle spreadsheets, notes apps, and multiple booking platforms just to organize a single trip. Sharing these fragmented plans with friends or family adds another layer of friction, often resulting in version conflicts and outdated information.

There was a clear need for a centralized, purpose-built platform that combines itinerary creation, activity planning, budget tracking, and real-time sharing into a single cohesive experience — without the overwhelming complexity of enterprise travel tools.

3. My Approach

I designed Traveloop around a relational data model using Supabase (PostgreSQL), carefully modeling the relationships between users, trips, cities, activities, and checklists. This schema enabled efficient querying of complex trip data and supported real-time collaborative features via Supabase's built-in subscriptions.

The frontend was built with React, featuring a clean component architecture that maps naturally to the trip planning hierarchy: Trip → Cities → Day Itineraries → Activities. Budget calculations and packing list generation were implemented as derived state, keeping the UI reactive and consistent. A Node.js / Express.js API layer handles authentication and all data mutations, keeping Supabase credentials server-side for security.

4. Key Results & Impact