• 

  Dashboard

• 

  Sample trip -Vitenam

• 

  Budget tracker - which helps us to make with in limit with budget

• 

  Expenses to tracker who gives money to whom

• 

  Invite members - collaborate with your friends and family without relying on chats and spreadsheet

• 

  Currency converter with near to real time

TripSync ✈️🌍

Inspiration

Planning a group trip can quickly become complicated. Travel details, itineraries, budgets, expenses, tasks, and responsibilities are often scattered across different apps and conversations.

We wanted to bring these activities together into one collaborative platform. This inspired us to build TripSync, a full-stack travel planning and expense management application that allows groups to organize their entire trip in one place.

Instead of using separate tools for planning an itinerary, tracking expenses, managing tasks, and coordinating with travel companions, TripSync provides these features through a single platform.

What We Built

TripSync is a collaborative travel planning platform where users can create and manage trips, add destinations and travel dates, organize activities, track budgets and expenses, manage members, and assign tasks.

The main features include:

• 🧳 Trip Management — Create multiple trips, add destinations, dates, descriptions, and cover images, and track trip status.
• 📅 Itinerary Planning — Organize hotels, transportation, restaurants, and activities day-by-day with timings and locations.
• 💰 Expense & Budget Tracking — Set budgets, categorize expenses, monitor remaining budgets, and view expense analytics.
• 👥 Team Collaboration — Add members and assign roles and responsibilities.
• ✅ Task Management — Create tasks, assign priorities, and track completion.
• 🌎 Currency Converter — Convert currencies to support international trip budgeting.
• 🌙 Responsive UI — A modern card-based interface with dark mode, animations, and mobile-friendly layouts.

How We Built It

We built TripSync as a modern full-stack web application.

The frontend was developed using React and TypeScript, with Tailwind CSS and shadcn/ui for the interface. We used React Hook Form and Zod for form handling and validation, Wouter for routing, and TanStack Query for managing application data.

For the backend, the project follows a REST API architecture using OpenAPI and an Orval-generated API client. The project is maintained using GitHub and deployed using Railway.

The project is organized into reusable application and package directories, along with components, hooks, libraries, and public assets.

What We Learned

Building TripSync helped us understand how different parts of a modern web application work together.

We learned how to:

• Build reusable interfaces with React and TypeScript.
• Structure a full-stack application.
• Design and consume REST APIs.
• Handle forms and validate user input.
• Manage application data using TanStack Query.
• Create responsive interfaces using Tailwind CSS.
• Organize features into reusable components and packages.
• Deploy a web application using a cloud hosting platform.
• Think about a travel application from both the individual-user and group-collaboration perspective.

Challenges

One of the biggest challenges was bringing many different travel-related workflows into a single application without making the interface complicated.

TripSync combines trip management, itinerary planning, expenses, budgets, team members, tasks, and currency conversion. Each feature has its own data and user interactions, so keeping the application organized and making the features work together required careful structuring of the frontend, API layer, components, and data-handling logic.

Another challenge was creating an interface that remained easy to use across different screen sizes while still providing the functionality needed for detailed trip planning.

Working through these challenges helped us understand the importance of component reusability, API organization, validation, responsive design, and scalable project structure.

What's Next

We plan to extend TripSync with:

• 🤖 AI-powered travel recommendations
• 🌦️ Weather integration
• 🗺️ Google Maps integration
• ✈️ Flight and hotel APIs
• 💬 Real-time collaboration
• 🔔 Notifications and reminders
• 📱 Offline support
• 📲 A mobile application
• 🔐 A complete authentication system

TripSync started as an idea to make group travel planning simpler and evolved into a full-stack platform that brings planning, collaboration, and expense management together in one place.

Built With

• apis
• css3
• javascript
• openapi
• react
• tailwind
• typescript