A collaborative travel itinerary web app built with Next.js, React, and Supabase — featuring social sharing, real-time updates, and an AI travel assistant powered by OpenAI.
Type
Group Project
COMP 426 · Modern Web Programming
Team
Sanjana Nukala
Celine Keles
Samhi Pudipeddi
Arya Shankardas
Role
Full-Stack & UI/UX
Design · Frontend · Backend
Stack
Next.js · Supabase
OpenAI · shadcn/ui · Figma
01 / Overview
TripShare combines an itinerary builder with a social discovery feed — plan a trip, browse what other travelers have built, and get AI-assisted ideas along the way, all in one app.
Our goal was simple: let users discover and build high-quality itineraries quickly, with search, saves, likes, and AI recommendations that make planning easier and more personal.
View Prototype & Code ↓Travel planning is scattered across notes apps, spreadsheets, and group chats. TripShare puts the plan, the community, and an AI assistant in one place.
Design first in Figma with shadcn/ui, then build a real backend on Next.js and Supabase — not a prototype.
App Preview — Itinerary Discovery Feed
02 / Key Features
Six features covering the full loop — from building an itinerary to discovering and getting AI-powered trip ideas.
Sign-up and login via Supabase Auth, with itineraries, likes, and saves all tied to a user's account.
A step-by-step form for adding cities, descriptions, locations, and photos to a trip plan.
Browse, like, save, and search community itineraries, with dedicated pages for saved and liked trips.
An OpenAI-powered chat panel for destination ideas and planning guidance, built right into the app.
Light, dark, and system theme modes for accessibility and personal preference.
Supabase real-time subscriptions keep likes, saves, and new posts updating live across the feed.
03 / Tech Stack
Each tool was chosen to move fast without cutting corners on backend functionality or UI polish.
App router, server-side rendering, and API routes — the bridge between the React frontend and Supabase backend.
Component-based UI, paired with shadcn/ui for a consistent design system on Tailwind.
Postgres database, authentication, and real-time subscriptions in one backend service.
Powers the in-app travel assistant, streaming responses through a server-side API route.
Accessible, pre-built components that sped up UI work without giving up control over styling.
Every screen, both themes, and key component states designed before a line of code was written.
"Supabase made the backend genuinely simple — auth, database, and real-time updates in one service. It let us focus on product decisions instead of infrastructure."
04 / Process
We designed every screen, both themes, and the key component states in Figma before writing code — cheaper to change a layout decision there than in a refactor.
We mapped the Supabase schema — users, itineraries, cities, locations, likes, saves — before building UI, so the data model drove the components instead of the other way around.
The multi-step form for adding cities, descriptions, locations, and photos was the most complex UI piece. shadcn/ui handled the components so we could focus on state management and validation.
We routed OpenAI calls through a Next.js API route so the key stays server-side, then streamed responses token-by-token for a live feel.
Early on we all pushed straight to main. A few times someone forgot to pull before starting work, or pushed over changes someone else had just made — overwriting finished work and costing us time redoing it. We switched to feature branches with pull requests and code review, which fixed it.
05 / Reflection
Coordinating Git across four people. A few merge conflicts overwrote finished work before we adopted branches and pull requests.
Watching our Lighthouse score climb from 64% to 90%+ after a full pass on accessibility and metadata.
A more capable AI assistant that can take an itinerary you upload and edit or regenerate it to match your preferences, plus a way to organize saved trips into folders from the navbar.
From Figma to a working Next.js app with a real backend, social features, and an AI travel assistant — built by a team of four for COMP 426.
This project was originally built using a team-managed Supabase backend that is no longer active. The case study, design process, and implementation remain representative of my work.