Odyssey

• 

  Landing Page

• 

  Activities Page

• 

  Transportation Page

• 

  Flights Page

NOTE

Just a quick note: In the demo, the chat bot was not working as intended and we videos of the chat bot working in the GitHub.

Inspiration

Planning a trip is hard. Planning a trip with friends is even harder. That's why we created Odyssey, an all-in-one, collaborative trip planner that consolidates and simplifies travel.

What it does

Odyssey is a shared workspace where groups can plan every aspect of a trip together in real time. Users create a trip, invite collaborators, and work through dedicated planning modules for flights, accommodation, transport, and activities. Each traveler can browse options, vote on favorites, and lock in selections — with a live itinerary sidebar tracking confirmed choices and estimated costs as decisions are made.

How we built it

We built Odyssey using React and TypeScript, with a fully custom UI designed in Figma. The frontend uses an injected CSS architecture with no external component libraries, keeping the bundle lean and the design system tightly controlled. We designed every screen from the cinematic landing page to the modular detail views, using a shared design system document to keep the handoff clean.

Challenges we ran into

Keeping the collaborative state in sync across modules while maintaining a smooth, reactive UI was trickier than expected. We also spent significant time getting the visual design right — balancing the dark, immersive aesthetic with readability and usability across different screen sizes.

Accomplishments that we're proud of

The module card system came out exactly as envisioned — the per-module color coding, progress tracking, and glowing hover effects give the dashboard a polished, premium feel. We're also proud of how seamlessly the detail pages connect back to the overview, creating a coherent planning flow that actually feels fun to use.

What we learned

Investing in a design system and component documentation upfront saved us enormous amounts of time during development. We also learned that collaborative UX requires more deliberate state design than solo-user apps — every piece of UI needs to account for multiple people acting on the same data simultaneously.

What's next for Odyssey

A live expenses tab with split-cost tracking and settlement summaries, real-time multiplayer sync via WebSockets, mobile-responsive layouts, and AI-powered recommendations inside each module — surfacing flights, hotels, and activities personalized to the group's preferences and budget.

Built With

• css
• typescript