🌍AI-Powered Disaster Relief Dashboard with KendoReact, Twilio, and Gemini

This is a submission for the KendoReact Free Components Challenge.

What I Built

I built a Disaster Relief Resource Dashboard – a React web app designed to help NGOs, volunteers, and aid coordinators manage disaster response operations more effectively.

The app solves three key problems during disaster response:

1. Resource Tracking → Manage critical resources like food, water, medicine, and shelter, and keep stock levels up-to-date.

2. Volunteer Scheduling → Register and assign volunteers to shifts and locations, with an integrated notification system (via Twilio SMS).

3. Impact Visualization → Use interactive charts to visualize resource distribution, aid progress, and overall relief impact.

🔮 Bonus Feature: A contextual AI Assistant Widget, powered by Google Gemini + KendoReact Conversational UI. The AI assistant can answer questions like:

• “How many food packs do we still have left?”
• “Which volunteers are free tomorrow?”
• “What’s the biggest gap in our current resource stock?”

The assistant uses contextual information (selected disaster type + available resources) to provide more accurate and actionable answers.

This project demonstrates how KendoReact free components + AI integration can be used to solve a real-world problem in disaster management.

Demo

github link
Live url

here are some ui flow of the app

this is the dahboard that showing all the pages we have and also how you can see resources available

this ui is responsible for adding diaster

this is the voulunteer page wheree voulunteer can be added and a notification is sent to them via sms in real time using twillo

here is the proof that the sms is been sent to a real number

The analysis dahboard help in analysing and seeing chart of voulteers and also resources

the ai ui which is powered by gemini enable context based answers and can update pages based on prompt from user e.g i can tell it to increase the number of resources in a disater or all disaster and i can tell it otherwise

KendoReact Components Used

I used a wide range of KendoReact components (well above the 10 required):

1. Grid → Resource management table.
2. DropDownList → Filter resources by category.
3. NumericTextBox → Update stock quantities.
4. Upload → Upload delivery proof documents.
5. Button → Save actions and trigger updates.
6. Scheduler → Assign volunteers to shifts/locations.
7. Form → Register new volunteers.
8. DatePicker → Assign shifts/dates.
9. Chart (bar/line) → Distribution by region.
10. PieChart → Aid breakdown by category.
11. Card → Quick relief stats.ProgressBar → Show progress toward aid targets.

[Optional: Code Smarter, Not Harder prize category] AI Coding Assistant Usage

I used GitHub Copilot and the KendoReact AI extension to speed up development.

• Copilot generated starter code for each page (Resources, Volunteers, Analytics).
• I provided prompts to contextualize the AI assistant, ensuring it always reads the selected disaster type and available resources.
• The AI assistant was built as a floating widget using Copilot-generated boilerplate, refined with Kendo UI components.

This saved significant time, allowing me to focus on the logic and integration instead of writing every component from scratch.

[Optional: RAGs to Riches prize category] Nuclia Integration

❌ Not integrated (I explored Nuclia RAG but couldn’t proceed due to account setup limitations).
✅ Instead, I used Google Gemini as the AI backend, making the AI Assistant widget functional and contextual without RAG for now.

Thanks dor reading