Building TravelPlanner: A React-Powered Trip Organizer

As a developer passionate about solving real-world problems, I recently built TravelPlanner — a web app that simplifies trip planning by aggregating flights, hotels, weather, and maps into a single interface. Here’s a deep dive into the project, its challenges, and what’s next. What is TravelPlanner? TravelPlanner helps users: Search and compare flight options Discover hotels with ratings and pricing Check real-time weather forecasts Explore destinations via interactive maps Try the live demo: https://travelplanner-henna.vercel.app/ Key Features Flight Search Filter by price, duration, and airlines Visual timeline for departure/arrival times Hotel Recommendations Star ratings and price-per-night displays Fallback images for missing hotel photos Weather Widget Real-time temperature and conditions Interactive Map Leaflet integration with dynamic markers Tech Stack Frontend: React, TypeScript, Vite, Tailwind CSS APIs: Amadeus (flights/hotels), OpenWeatherMap (weather) Libraries: React Router, Leaflet, Lucide Icons Challenges & Solutions API Data Parsing Flight/hotel data from Amadeus had nested structures. Solved by creating strict TypeScript interfaces and data-mapping functions. Error Handling Implemented toast notifications for API failures and invalid destinations. Leaflet Map Integration Fixed missing marker icons by overriding Leaflet’s default URL logic. Future Improvements User authentication for saving trips Booking system integration Packing list generator based on weather Dark mode toggle Get Started Locally Clone the repo: git clone https://github.com/toptech5419/100-days-of-code cd plan-it-here-main Install dependencies: npm install Add API keys (Amadeus + OpenWeatherMap) to a .env file. Connect & Contribute GitHub Repo: github.com/toptech5419/100-days-of-code LinkedIn: linkedin.com/in/toptech5419 X (Twitter): @toptech5419 Medium: medium/alabitemitope51 Final Thoughts Building TravelPlanner taught me the importance of resilient API integrations and user-centric design. I’d love your feedback on the project! Whether you’re a traveler testing the app or a developer interested in contributing, let’s connect and make trip planning even better. Live demo: https://travelplanner-henna.vercel.app/

Mar 23, 2025 - 06:51

Building TravelPlanner: A React-Powered Trip Organizer

As a developer passionate about solving real-world problems, I recently built TravelPlanner — a web app that simplifies trip planning by aggregating flights, hotels, weather, and maps into a single interface. Here’s a deep dive into the project, its challenges, and what’s next.

What is TravelPlanner?

TravelPlanner helps users:

Search and compare flight options
Discover hotels with ratings and pricing
Check real-time weather forecasts
Explore destinations via interactive maps

Try the live demo: https://travelplanner-henna.vercel.app/

Key Features

Flight Search
- Filter by price, duration, and airlines
- Visual timeline for departure/arrival times
Hotel Recommendations
- Star ratings and price-per-night displays
- Fallback images for missing hotel photos
Weather Widget
- Real-time temperature and conditions
Interactive Map
- Leaflet integration with dynamic markers

Tech Stack

Frontend: React, TypeScript, Vite, Tailwind CSS
APIs: Amadeus (flights/hotels), OpenWeatherMap (weather)
Libraries: React Router, Leaflet, Lucide Icons

Challenges & Solutions

API Data Parsing
- Flight/hotel data from Amadeus had nested structures. Solved by creating strict TypeScript interfaces and data-mapping functions.
Error Handling
- Implemented toast notifications for API failures and invalid destinations.
Leaflet Map Integration
- Fixed missing marker icons by overriding Leaflet’s default URL logic.

Future Improvements

User authentication for saving trips
Booking system integration
Packing list generator based on weather
Dark mode toggle

Get Started Locally

Clone the repo:

   git clone https://github.com/toptech5419/100-days-of-code  
   cd plan-it-here-main

Install dependencies:

   npm install

Add API keys (Amadeus + OpenWeatherMap) to a .env file.

Connect & Contribute

GitHub Repo: github.com/toptech5419/100-days-of-code
LinkedIn: linkedin.com/in/toptech5419
X (Twitter): @toptech5419
Medium: medium/alabitemitope51

Final Thoughts

Building TravelPlanner taught me the importance of resilient API integrations and user-centric design. I’d love your feedback on the project! Whether you’re a traveler testing the app or a developer interested in contributing, let’s connect and make trip planning even better.

Live demo: https://travelplanner-henna.vercel.app/