Drug Donation Dashboard – KendoReact + Nuclia RAG

Pankaj Kumar — Fri, 19 Sep 2025 21:26:54 +0000

Drug Donation Dashboard – KendoReact + Nuclia RAG

This is my submission for the KendoReact Free Components Challenge.

🚀 What I Built

I built a tracks donated medicines, their categories, donors, quantities, expiry dates, and statuses (OK, Low, Expired).

It integrates Nuclia RAG Search so users can query the donation knowledge base in natural language and get results as a structured inventory grid.

🎥 Demo

👉 https://github.com/pankajcalm/drug-donation-dashboard.git

🧩 KendoReact Components Used

AppBar – for the top navigation bar
Drawer – for filters (category, donor, search)
Grid – for the inventory table and search results
Card – for stats and category distribution
Chart – for showing drug quantities by category
Dialog – for adding/editing items
Inputs (TextBox, NumericTextBox, DropDownList, DatePicker) – for managing data
Notification – for success/error alerts

🤖 [Optional: Code Smarter, Not Harder Prize] AI Coding Assistant Usage

I used the KendoReact AI Coding Assistant inside VS Code to:

Scaffold the initial Grid and Drawer layout
Auto-generate column definitions for the Inventory Grid
Get quick examples of row styling (highlight expired/low stock)
Save time on boilerplate for forms and dialogs

It helped me focus on logic and integration instead of writing repetitive UI setup code.

📚 [Optional: RAGs to Riches Prize] Nuclia Integration

I integrated Nuclia RAG to enable natural language queries.

Example: searching “Insulin donations” returns structured results like:

DEV Community: Pankaj Kumar

Drug Donation Dashboard – KendoReact + Nuclia RAG

Drug Donation Dashboard – KendoReact + Nuclia RAG

🚀 What I Built

🎥 Demo

🧩 KendoReact Components Used

🤖 [Optional: Code Smarter, Not Harder Prize] AI Coding Assistant Usage

📚 [Optional: RAGs to Riches Prize] Nuclia Integration