FifTravel

Home Page
Planned Itenary

About the Project Inspiration I built this project because I wanted a travel planner that actually understands the World Cup fan experience. Instead of static itineraries, I wanted something that could pull live data and build a trip around real matches, real flights, and real visa needs — all in one AI-guided flow.

What I learned How to move logic from the browser to server-side API routes to avoid CORS and deployment issues. How to combine open-source data sources like worldcupjson.net, Kiwi/Skypicker, OpenStreetMap, and RestCountries into one itinerary pipeline. That production-ready behavior often means adding fallback handling for brittle third-party endpoints and making the route flow explicit. How I built it Used Next.js App Router with a client-side planner UI and server-side /api/plan logic. Created a lightweight "multi-agent" orchestration pattern in mockAgents.ts: match discovery flight lookup hotel search visa check Added environment-based wiring so the app can use live open-source APIs or a local mock orchestrator. Kept the UI responsive with agent status updates and itinerary rendering.

Challenges faced Deploying to Vercel exposed browser-side fetch and CORS issues when calling external open-source APIs directly. The project required a careful split between client UI and server-side data fetching to make the app reliable. Open-source endpoints are often inconsistent, so I added fallback data and safer fetch handling to keep the itinerary generator working. Final takeaway This project is both a travel product and a deployment lesson: it’s not enough to wire APIs in the browser; real-world apps need server-side integration, failure handling, and data fallback logic to deliver a smooth fan travel experience.