DEV Community

Cover image for Building TravelPlanner: A React-Powered Trip Organizer
Alabi Temitope
Alabi Temitope

Posted on

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

  1. Flight Search
    • Filter by price, duration, and airlines
    • Visual timeline for departure/arrival times
  2. Hotel Recommendations
    • Star ratings and price-per-night displays
    • Fallback images for missing hotel photos
  3. Weather Widget
    • Real-time temperature and conditions
  4. 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

  1. API Data Parsing
    • Flight/hotel data from Amadeus had nested structures. Solved by creating strict TypeScript interfaces and data-mapping functions.
  2. Error Handling
    • Implemented toast notifications for API failures and invalid destinations.
  3. 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

  1. Clone the repo: 
   git clone https://github.com/toptech5419/100-days-of-code  
   cd plan-it-here-main
Enter fullscreen mode Exit fullscreen mode
  1. Install dependencies: 
   npm install
Enter fullscreen mode Exit fullscreen mode
  1. Add API keys (Amadeus + OpenWeatherMap) to a .env file.

Connect & Contribute

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/

Top comments (0)