🎨 Inspiration
Most health applications either panic you or treat you like a sterile spreadsheet. When I catch a routine cold or get a minor scratch—which happens once or twice a month—I don't want to waste half a day waiting in a clinic just to hear "drink fluids and rest," nor do I want to Google symptoms and get terrified.
I built MediSense to act like a calm, knowledgeable friend: an assistant that listens, asks sensible follow-up questions, suggests home remedies for minor ailments, and clearly directs you to a physician when something is genuinely serious. To break away from clinical sterility, I drew inspiration from Piet Mondrian (Composition in Red, Yellow, Blue and Black, 1921) and the kinetic energy of Broadway Boogie-Woogie (1942–43), giving MediSense a structured, vibrant, and alive Neo-Brutalist visual identity.
💡 What It Does & What I Learned
MediSense is an offline-first personal healthcare triage assistant with a complete 10-in-1 clinical suite:
- Voice & Text Triage: Speak naturally using the browser's Web Speech API or type your symptoms; MediSense extracts clinical entities and guides the conversation.
- Offline Clinical Knowledge Base: Powered by an embedded 116-disease clinical database, providing immediate triage without requiring internet access or API tokens.
- Interactive Clinical Suite: Includes a Drug Interaction Checker, SOAP-format Doctor Intake Note printer, printable In Case of Emergency (ICE) Wallet Card, and an interactive 100–120 BPM CPR Metronome.
- Mathematical Health Metrics:
- Body Mass Index (BMI): $$\text{BMI} = \frac{\text{weight (kg)}}{(\text{height (m)})^2}$$
- Clinical Risk Index Scoring: $$R_{\text{index}} = \min\left(100, \; \sum_{i=1}^n w_i \cdot s_i + \Delta_{\text{emergency}}\right)$$
- Medication Adherence Tracking: $$\text{Adherence Rate} = \left(\frac{N_{\text{taken}}}{N_{\text{scheduled}}}\right) \times 100\%$$
What I Learned: Building MediSense taught me how to maximize modern web APIs—synthesizing tactile audio effects using the Web Audio API, streaming live voice dictation with the Web Speech API, managing offline state in localStorage, and building a high-density Neo-Brutalist design system using pure CSS variables.
🛠️ How I Built It
- Frontend & Styling: Built with zero runtime frameworks using vanilla HTML5, modular ES6 JavaScript, and CSS3. Custom CSS properties power instant switching between high-contrast Light and Dark Neo-Brutalist themes.
- Clinical Engine: Dual-engine triage combining local heuristic NLP for 100% offline reliability with an optional Google Gemini 1.5 Flash API bridge for extended conversational advice.
- Privacy & Export: Zero remote tracking or server storage. All patient data remains on the user's device. Session transcripts and clinical reports export to PDF via
html2pdf.jsalongside dedicated@media printstylesheets.
⚡ Challenges I Faced
- Aesthetic vs. Medical Clarity: Neo-Brutalism uses bold lines, heavy borders, and vivid colors, which can easily overwhelm text. Calibrating the visual hierarchy so medical warnings, dosages, and triage outcomes remain crystal-clear was a continuous design challenge.
- Modal Viewport & Sticky Navigation: Handling lengthy consultation transcripts within the Chat Bin required clamping the dialog height (
max-height: calc(100dvh - 3rem)) and implementing a sticky header and footer so the close button (✕) and PDF download actions remain permanently pinned and accessible. - 100% Offline Resilience: Designing a fast, zero-dependency symptom matcher that operates accurately across 116 conditions without cloud latency or external server dependencies.
🚀 What's Next for MediSense
- Integration with wearable sensor APIs for passive resting heart rate and vitals tracking.
- Multi-language voice dictation to assist non-native speakers in emergency situations.
- Direct encrypted sync options with Apple Health and Google Health Connect.
Built With
- clinical-decision-support
- css3
- design-system
- healthcare
- html2pdf.js
- html5
- javascript
- mondrian
- natural-language-processing
- neo-brutalism
- node.js
- offline-first
- privacy
- triage
- voice-assistant
- web-audio-api
- web-speech-api
Log in or sign up for Devpost to join the conversation.