BackProgressive Web App & Accessibility Health

#05★ FEATUREDHackArena 4th Place Awarded

Medicine Reminder

Accessible medication management Progressive Web App with offline alarms and local persistence

JavaScriptHTMLCSS

CODE MAP ARCH MAP

Back to ProjectsProgressive Web App & Accessibility Health

BUILD #05★ FEATUREDHackArena 4th Place Awarded

Medicine Reminder

Accessible medication management Progressive Web App with offline alarms and local persistence

JavaScriptHTMLCSS

GITHUB GITDIAGRAM VIEW ARCHITECTURE ↓

ENGINEERING // ARCHITECTURE

How It Connects

Medicine Reminder is a Progressive Web App (PWA) tailored specifically for elderly users and chronic care patients. It operates with 100% offline capability using Service Workers and IndexedDB/localStorage. Users set medication names, dosage timings, pill frequencies, and inventory levels. The app uses the Web Notifications API and audio synthesis to alert users on schedule, tracking medication adherence through a minimalist high-contrast interface.

Medicine Reminder / ARCH MAP

LIVE

ARCHITECTURE ENGINE

INITIALIZING REPO...

SCROLL TO PANMERMAID.INK

GitDiagram Repository

Components

Offline PWA Shell

Vanilla HTML5, CSS3, JavaScript

Medication Scheduler

JavaScript ES6

Local Vault Storage

localStorage, IndexedDB

Web Notification Service Worker

Service Worker API

Open GitDiagram View Source

Medicine Reminder / ARCH MAP

LIVE

ARCHITECTURE ENGINE

INITIALIZING REPO...

SCROLL TO PANMERMAID.INK

GitDiagram GitHub

System Components

EXECUTION PIPELINE

How It Works

01. Patient / Caregiver

Medication Entry

Enters medicine name, dosage (e.g. 500mg), frequency, and daily notification times.

→ Active Medication Schedule

02. Storage Layer

Local Vault Persistence

Saves the schedule to local storage and updates next trigger timestamps.

→ Persisted Schedule Data

03. Service Worker Timer

Scheduled Dose Trigger

Fires when system clock matches the medication time.

→ Audible Chime & System Notification

04. User

Confirmation & Inventory Depletion

Taps "Dose Taken"; app logs adherence timestamp and decrements remaining pill count.

→ Adherence Log

Patient / Caregiver

Medication Entry

Enters medicine name, dosage (e.g. 500mg), frequency, and daily notification times.

→ Active Medication Schedule

Storage Layer

Local Vault Persistence

Saves the schedule to local storage and updates next trigger timestamps.

→ Persisted Schedule Data

Service Worker Timer

Scheduled Dose Trigger

Fires when system clock matches the medication time.

→ Audible Chime & System Notification

User

Confirmation & Inventory Depletion

Taps "Dose Taken"; app logs adherence timestamp and decrements remaining pill count.

→ Adherence Log

STACK // ARCHITECTURE INTEL⚡ LIVE SPECS

Technical Breakdown

Granular architectural layers, runtime dependencies, and audited production decisions.

STACK: JavaScript, PWA, HTML/CSS

Vanilla JavaScript with high-contrast WCAG AAA compliant CSS
copy

Engineering Tradeoffs & Key Decisions

Why this architecture over alternatives

2 ARCHITECTURAL CHOICES

DECISION #1AUDITED

100% Offline Architecture

↳

Built with zero remote server requirements.

Health medication alarms must never fail due to spotty Wi-Fi or server downtime; local execution is failsafe.

PRODUCTION TESTEDZERO REGRESSIONS

DECISION #2AUDITED

High-Contrast WCAG AAA UI

↳

Oversized typography, high-contrast borders, and simple binary buttons.

Ensures elderly patients with visual impairments can operate the system confidently without caregiver aid.

PRODUCTION TESTEDZERO REGRESSIONS

✓

Audited Production Outcomes & Metrics

HIGH IMPACT RESULTS

▸Built a Progressive Web App (PWA) to help users manage medical schedules with offline support.

▸Implemented local notification logic and a minimalist UI for high elderly accessibility.

▸Awarded 4th Place at HackArena (Escalate X) for functionality and user experience.