This is a submission for the KendoReact Free Components Challenge.
What I Built
I built a comprehensive Travel Planner application that integrates real-time travel data from Amadeus APIs with KendoReact components to create an intuitive trip planning experience. The app solves the problem of fragmented travel planning by bringing together hotels, flights, activities, and budget visualization in one seamless interface.
Key features include:
Smart Trip Planning: Select destinations, dates, and traveler count with real-time validation
Live Data Integration: Real hotel, flight, and activity data via Amadeus Travel APIs
Interactive Scheduling: Drag-and-drop itinerary management with weekly calendar view
Dynamic Budget Visualization: Pie chart showing cost breakdowns that update based on API data
Hotel Comparison: Sortable grid with booking functionality and real pricing
Optional Flight Integration: Toggle-based flight search with pricing and scheduling
Demo
🚀 Live: Travel Planner
📁 GitHub
Screenshot
KendoReact Components Used
I utilized 10 KendoReact components to maximize the free tier offering:
Scheduler - Interactive weekly calendar for drag-and-drop itinerary planning
Grid - Data tables for hotels and flights with sorting/filtering capabilities
Chart - Pie chart for dynamic budget breakdown visualization
DropDownList - City selection dropdown with predefined destinations
DatePicker - Start and end date selection with validation (2 instances)
Dialog - Modal popup for booking confirmations and details
PanelBar - Expandable activity overview panel with collapsible sections
Button - Primary action buttons with custom styling and loading states
NumericTextBox - Traveler count input with min/max validation (1-10)
Switch - Toggle control for including flights in search results
Top comments (1)
Hello @chilupa, I noticed the watermark showing up, likely because a paid KendoReact component is being used without activating the license. You can activate the 30-day trial and legally use premium components free via the official guide here: Click here.
Once activated, the watermark will be removed and all premium components will work fully for 30 days, giving your project a cleaner and more professional UI.