Wayfare

• 

  example trip

• 

  main page

• 

  mobile version

Inspiration

Planning trips with friends often means switching between maps, booking sites, review platforms, saved posts, and group chats. It became tiring to keep our itinerary, budget, and ideas organized, so I built Wayfare to bring everything into one editable timeline.

What it does

Wayfare turns a destination, dates, budget, travel style, accommodation preference, and must-visit place into a day-by-day timeline with maps, recommendations, transport suggestions, booking links, notifications, voting, checklists, and multiple saved trips. It also supports switching languages (English, Chinese) and mobile screens.

How we built it

I built the frontend with HTML, CSS, and JavaScript, deployed the project on Vercel, and used Vercel serverless functions with OpenStreetMap, Nominatim, and Overpass for open geographic data. Browser storage powers the current prototype’s saved trips, collaboration, voting, and checklist features.

Challenges we ran into

I wanted the prototype to work without a paid API. Public map data can also be slow or incomplete, so I added fallback behavior. Another challenge was coordinating confirmed transport times with hotel check-in, check-out, meals, and activities.

Accomplishments that we're proud of

I am proud that Wayfare became a working, mobile-friendly prototype with editable timelines, budget tracking, bilingual support, trip notifications, multiple timelines, and group-planning tools.

What we learned

A useful travel planner needs to manage timing, cost, group decisions, and imperfect data—not just generate recommendations. Small rounds of testing helped turn a broad idea into a focused product.

What's next for Wayfare

With live booking APIs and a real-time database, Wayfare could automatically match available flights, trains, and the most chosen hotels and restaurants to the trip planner’s budget and dates. Friends could join through an invite link and edit the same itinerary together in real time with their own devices.

Built With

• css
• html
• javascript
• nominatim
• openstreetmap
• overpass
• vercel