404 not found - Trippy

• 

  System Architecture, 4-tier Architecture.

• 

  Trippy Logo

200 Word Summary

Trippy Find is a modern, full-stack travel planner that helps users effortlessly discover and compare flights and hotel stays — all in one place. With a clean interface and intelligent backend, Trippy Find transforms the way travellers plan their trips. Users can search by city, airport, or even natural language terms like “Singapore” or “London.” The app then fetches live flight and hotel data using the Amadeus API, automatically converts city names into IATA codes, and displays results with pricing, durations, airlines, and layovers. Users can customise their search with preferences like budget, travel class, and return dates. Trippy Find is built using React for the frontend and Node.js + Express on the backend, with Supabase handling optional data storage for user favourites and saved searches. A built-in caching layer makes repeat queries fast and efficient, and the app is fully mobile-responsive and theme-aware. Whether you're planning a last-minute weekend getaway or an international adventure, Trippy Find makes it easy to explore options and book smarter. It’s fast, visual, and user-friendly — perfect for modern travellers who want real-time travel intelligence without the hassle.

Inspiration

After a friend returned from a multi-stop flight from India to Singapore — taking far longer than expected — due to a detour because the bridging flight was the cheapest. We asked: "Why don’t flight search engines help balance cost with speed and convenience?" Most just show the lowest price, but that doesn’t always mean it’s the best option. So we built Trippy — a smarter trip planner that lets users fine-tune the tradeoff between price and journey time. Furthermore, there are not many services where someone can book their flight and their hotel on the same platform. We decided to be this place where users can book their flights and their hotels all in one go, in one place, no faffing around needed.

What it does

Trippy allows users to search for flights from anywhere in the world and hotels in their destination, showing over 400+ airlines and hotels.

It gives a filter to prioritise budget vs time.

Including a Save favourites for later comparison

How we built it

We used React and TailwindCSS as the framework for our front end, with Express.js/node.js powering our backend. We used Amadeus's various APIs for the flight and hotel data. Their various endpoints allowed us to pull all necessary data with a fair amount of ease. Supabase stores our IATA code to city and country data, as the Amadeus API only works with IATA codes for the flights. Supabase also stores users' favourite searches (we were initially considering adding an email service to notify users of drops in prices for their favourite searches). It also utilises caching strategies to reduce redundant API calls and Dynamic routing and webhooks to handle routes and state updates seamlessly.

Challenges we ran into

Limited API data: The free tier of the Amadeus API doesn’t return some essential information (e.g., airport names from IATA codes), so we had to build our lookup system.

2/3 members of the team had no JS, HTML, or CSS experience and had never done any projects of this scale before; everything was a lesson for us.

One of the most difficult thing to learn and implement were the routing configurations and ensuring that the routes worked as intended.

Strong competition: Competing with industry giants like Google Flights made us focus on building unique and user-centred features.

Accomplishments that we're proud of

We designed a responsive, intuitive UI from scratch.

Successfully integrated live API data from Amadeus.

Built a scalable architecture using caching, which saves on API usage.

Implemented custom sorting & filtering logic that mimics real user decision-making.

What we learned

Route configuration is a key aspect of web-app design, especially when working with many APIs at the same time.

Additionally, UI/UX design is much harder than initially anticipated.

We learned that for projects that are already well in-depth in development, such as Google Flights's Strong recommendation system, we can branch out wide with unique features such as customised filtering

We also learned about web standards, routing, and handling edge cases like failed API calls (a nod to our team name, 404 Not Found 😄)

What's next for 404 not found - Trippy

We’re just getting started. Here’s what we want to add:

Direct booking from our platform when we use an enterprise version of the Amadeus API over our current test version.

Seasonal pricing insights to help users choose the best time to fly, along with email notifications for hot deals and fare drops.

Real-time price trackers and alerts.

Visual maps showing flight paths and layover time, as well as improved UI.

Integration of user reviews, lounge access, and baggage info to further personalise results

Built With

• amadeus-api
• css
• html
• javascript
• react
• sql
• supabase
• supabase-database-api
• weight-balancing