DEV Community

ABHINEET
ABHINEET

Posted on

RxShield — Clinical Prescription Guardian & Dashboard

#devchallenge #weekendchallenge #hf26challenge #ai

Hacktoberfest Weekend Challenge: Build for a Friend Submission 🤝

This is a submission for the Hacktoberfest Weekend Challenge: Build for a Friend

What I Built

When my 82-year-old grandmother Eleanor was prescribed Methotrexate for polymyalgia rheumatica alongside her daily regimen of Lisinopril, Atorvastatin, and Metformin, our family realized how fragile prescription safety really is. One simple misunderstanding—taking Methotrexate daily instead of weekly, or taking an OTC painkiller like Ibuprofen for joint pain—could trigger acute kidney failure or severe methotrexate toxicity, especially given her Stage 3 Chronic Kidney Disease (eGFR 48 mL/min).

Elderly patients and family caregivers don't need another generic medical app with tiny text, cluttered menus, and clinical jargon. They need a guardian: a high-contrast, accessible clinical guardian that flags critical drug interactions in plain English, speaks instructions aloud in a reassuring voice, and produces an offline-first printable refrigerator schedule.

I built RxShield for Grandma Eleanor—and for every caregiver protecting a loved one from preventable adverse drug events.

Core Features

  • Clinical Interaction Radar: Real-time drug-drug contraindication scoring (Critical, Warning, Safe) with plain-English risk explanations and exact questions to ask the pharmacist.
  • Accessible Voice Companion Studio: Natural spoken audio briefing powered by ElevenLabs with adjustable speeds (0.8x gentle to 1.2x brisk), multiple caregiver voices, dynamic 24-band frequency soundwave visualizer, and an offline Web Speech API fallback.
  • Interactive 3D Regimen Health Aura: Three.js medical capsule visualization indicating overall regimen safety via real-time biochemical color shift.
  • High-Readability Typography & Layout: Built with the Obsidian & Clinical Emerald design system (inspired by Vercel & Supabase specifications), scalable font sizing toolbelt (A, A+, A++), and zero visual congestion across clean horizontal tabs (#overview, #medications, #schedule, #safety, #voice, #settings).
  • Large-Print Fridge Calendar: Print-ready (@media print) schedule formatted specifically for elderly patients to post on refrigerator doors.
  • Family Preset Personas: Instant switching between realistic clinical personas:
    • Grandma Eleanor (82): Complex methotrexate regimen, blood pressure management, and NSAID contraindication alert.
    • Uncle David (67): Diabetic intake, statin therapy, and antibiotic mineral chelation timing rules.
    • Maya (19): Post-surgical antibiotic schedule and oral contraceptive efficacy warnings.

Demo

  • Live Application: Running locally at http://localhost:3000
  • Video Walkthrough & Interactive Demo:

The interface provides an end-to-end clinical workflow:

  1. Overview Dashboard: Instant visual status of regimen safety, active medications count, today's schedule, and the interactive 3D capsule.
  2. Medications & Doctor's Intake: Inventory management and raw clinical note extraction.
  3. Safety & Contraindications: Detailed biochemical mechanism breakdown, mineral/food spacing rules, and actionable pharmacist questions.
  4. Voice Companion Studio: Senior-accessible spoken audio briefing with live playback progress and frequency waveform equalizer.

Code 

git clone https://github.com/RICH-KEED/HacktoberFest.git
cd HacktoberFest
npm install
npm start
# Opens on http://localhost:3000
Enter fullscreen mode Exit fullscreen mode

How I Built It

RxShield is architected around open-source AI and offline sovereignty:

  1. Google Gemma 2 (gemma-2-9b-it): At the core of RxShield's intelligence is Google's open-weight Gemma 2 model. Gemma 2 parses unstructured doctor discharge notes, analyzes complex drug combinations, translates biochemical warnings into patient-friendly English, and formulates targeted questions for pharmacists.
  2. Offline Sovereign Clinical Engine: To guarantee 100% uptime and total privacy without internet access, RxShield includes an embedded rule-based clinical heuristics engine. It runs locally with zero latency, screening for dangerous drug combinations (e.g. Methotrexate + NSAIDs, Lisinopril + Potassium) even in offline environments.
  3. ElevenLabs Voice Narration + Web Speech Fallback: Generates lifelike caregiver voice briefings tailored for seniors with failing eyesight. When offline or without an API key, it seamlessly falls back to the native browser Web Speech API.
  4. Three.js Biochemical Aura: Renders an interactive 3D capsule using WebGL that dynamically reflects clinical status through shader lighting and orbital rotation.
  5. Modern Semantic Stack: Pure Vanilla JavaScript (ES modules), semantic HTML5, and a custom CSS custom-property design system with zero framework overhead.

Why Does Open Innovation Matter?

Prescription regimens, dosages, and personal health histories are among the most sensitive personal data imaginable. Sending an elderly loved one's entire medication schedule to closed, proprietary cloud services with unknown retention policies is unacceptable for families.

Open innovation matters for RxShield in three vital ways:

  1. True Healthcare Sovereignty: Because Gemma 2 is an open-weight model and RxShield features an offline heuristics engine, the system operates completely offline without sending a single byte of telemetry to external servers. It costs nothing to run, cannot be shut down by an API deprecation, and functions during internet outages.
  2. Inspectable Clinical Transparency: In medicine, closed black-box models that cannot explain their reasoning are dangerous. Open-source clinical heuristics and transparent prompts allow pharmacists and doctors to inspect, audit, and verify the exact safety rules governing drug interaction alerts.
  3. Universal Accessibility: Open web standards ensure the application runs on any hardware—from an old tablet on a kitchen counter to modern laptops—without proprietary app store walled gardens.

My Agent Session

The complete architecture, design iteration, UI refinement, and accessibility testing was developed pair-programming with an autonomous AI agent via DevRelay. You can inspect the full development session transcript:

RxShield: Medication Guardian with Gemma 2, ElevenLabs & Awesome Design MD
You

Build RxShield: a clinical medication safety dashboard for elderly family members, integrating Gemma 2 for drug interaction safety analysis, ElevenLabs for voice instructions, and an accessible high-contrast UI.

Agent

Architected sovereign local proxy server with Gemma 2 AI (Google AI Studio with heuristic rule engine fallback) and ElevenLabs TTS (with Web Speech fallback). Implemented Three.js interactive 3D pills, WCAG AAA accessibility contrast toggle, and family profiles.

You

Overhaul colors and layout using awesome-design-md (getdesign.md). Fix congestion and make it a true multi-page dashboard.

Agent

Reverse-engineered Linear.app, Raycast, and ElevenLabs design tokens from VoltAgent/awesome-design-md. Applied obsidian canvas (#060709), surface elevation (#090a0d, #0d0e13), Linear lavender (#5e6ad2), and hairline borders. Introduced horizontal multi-page tabs (#overview, #medications, #schedule, #safety, #voice, #settings), expanded container to 1360px, added color-scheme: dark, and verified in browser.

4 of 4 messages

Prize Categories

We are entering the following Hacktoberfest Weekend Challenge partner categories:

  • Best Use of Gemma: Powered by Google Gemma 2 (gemma-2-9b-it) for clinical note extraction, plain-English drug contraindication translation, and senior medication briefing generation, backed by a sovereign open-source fallback engine.
  • Best Use of ElevenLabs: Features the ElevenLabs Voice Companion Studio with natural senior-friendly caregiver voices, playback rate controls, and frequency soundwave visualizer for patients with vision impairments.

Built with care for Grandma Eleanor and caregivers everywhere.

Top comments (0)