💡 Inspiration Every year, billions of dollars worth of unused, unexpired medicines are thrown away — while millions of people across the world go without basic treatments like antibiotics, insulin, and pain relief.
The idea for MediBridge came from a simple, frustrating moment — watching a family member's leftover medicines get discarded after recovery, knowing that somewhere in the world, someone was being turned away from a clinic for the exact same medicine. That image never left us.
We started asking: Why is there no platform that connects these two realities? Why hasn't anyone built the infrastructure to move medicine from surplus to scarcity? That question became MediBridge. 🌍
🚀 What it does MediBridge is a global medicine redistribution web platform that connects individuals, pharmacies, and clinics who have unused medicines — with verified NGOs and patients who desperately need them.
Here's how it works:
🟢 List — Donors upload unused medicines in under 3 minutes: name, quantity, expiry date, storage type, and pickup location.
🔵 Match — Verified NGOs and patients search the live medicine catalog by type, category, and location — and submit requests with one click.
🟠 Deliver — Every transfer is tracked end-to-end through a request pipeline (Pending → Approved → Shipped → Received), creating a transparent, auditable chain of care.
Key features of our prototype:
📋 3-step medicine donation form with expiry date scanning 🔍 Searchable medicine catalog with filters (category, location, distance) 📊 NGO dashboard with request pipeline and AI-matched suggestions ✅ NGO verification portal with badge system 🌐 Real-time global impact dashboard (medicines listed, requests fulfilled, countries reached) 🤖 AI medicine matcher that ranks best available donations for each NGO 🛠️ How we built it ⚠️ This is a prototype — built entirely with HTML, CSS, and JavaScript (no frameworks, no backend). All data is mocked and hardcoded for demo purposes.
Layer Technology 🎨 Frontend Pure HTML5 + CSS3 + Vanilla JavaScript 🖋️ Fonts DM Serif Display + Outfit (Google Fonts) 🗺️ Maps Leaflet.js (interactive impact map) 💅 Styling Custom CSS with variables, animations, and responsive grid 🤖 AI (simulated) Mock AI matching logic in JavaScript 🚀 Deployment GitHub Pages / Netlify (static hosting) We started with a design system (deep teal + warm coral palette, humanitarian feel), wireframed all 5 pages, then built each page as a navigable single-page experience using vanilla JS state management.
🧗 Challenges we ran into 😤 Three user types, one interface — Designing for donors, patients, AND NGO coordinators within a single cohesive UI without overwhelming any group required 3 full iterations of the navigation structure.
🎨 Making it feel human, not clinical — Healthcare apps default to cold, sterile design. We pushed hard to make MediBridge feel warm, trustworthy, and emotionally resonant — like it was built for people, not logistics.
📱 Responsive design complexity — The NGO dashboard with pipeline views, data tables, and AI match cards was extremely difficult to make work on mobile within a pure CSS grid system.
🤖 Simulating AI without a backend — We wanted to demo an "AI medicine matcher" convincingly using only JavaScript. Building believable mock logic that felt intelligent (not random) took more effort than expected.
⏱️ 48 hours — Every feature decision was a trade-off. We shipped 6 features really well instead of 12 features poorly. That was the right call.
🏆 Accomplishments that we're proud of ✨ Built a fully navigable 5-page prototype in 48 hours — pure HTML, CSS, and JS, zero dependencies (except Google Fonts and Leaflet).
🎯 The NGO dashboard with AI-matched donation suggestions was the feature we were least sure we could pull off in time — it became the most impressive part of the demo.
🌍 Created a world impact map showing donation density across 12 countries with realistic, live-feeling data.
💚 Designed an interface that genuinely feels warm and human — judges and testers consistently said it "didn't feel like a hackathon project."
📖 Crafted a demo story around a real-feeling character (Amina, a clinic coordinator in Nairobi) that made judges feel the problem, not just understand it.
📚 What we learned 🧠 Designing for trust is harder than designing for usability. Every element — the verified NGO badge, the audit trail, the safety warnings — had to work together to make donors and NGOs feel confident.
🎭 A great demo story matters as much as working code. Framing the demo around Amina in Nairobi made judges feel the problem emotionally before we showed a single feature.
✂️ Scope ruthlessly. We started with 12 features and shipped 6 really well. A focused, polished prototype beats a broken, feature-bloated one every single time.
🤝 Empathy-first design. When you're building for underserved communities, every design decision — font size, language, color, flow — has a human consequence. That responsibility sharpened our thinking enormously.
🔮 What's next for MediBridge If we take MediBridge beyond the hackathon, here's our roadmap:
🏗️ Phase 1 — Real Backend
Node.js + PostgreSQL (Supabase) backend replacing mock data Real user authentication with role-based access (Donor / NGO / Admin) Live medicine listings and request management 📱 Phase 2 — Mobile App
React Native app optimized for low-bandwidth environments in developing countries Offline-first architecture for rural clinic coordinators 🤖 Phase 3 — AI & Safety
Real OCR expiry date scanner (Google Vision API / Tesseract.js) GPT-powered medicine matching engine using real inventory data Cold chain logistics tagging for refrigerated medicines 🌐 Phase 4 — Scale & Partnerships
Multilingual support: Arabic, Hindi, French, Swahili Blockchain-based transfer ledger for tamper-proof audit trails Partnership track with WHO, UNICEF, and national pharmacy chains Predictive demand forecasting using historical NGO request data "The medicines already exist. The people who need them already exist. All that was missing was the bridge." 🌉
— Team MediBridge
Log in or sign up for Devpost to join the conversation.