Offline-first PWA do zarządzania gorączką u dzieci. Precyzyjne dawkowanie, wizualizacja Visx i analiza AI.
Wyzwanie
Rodzice chorego dziecka działają pod presją czasu, stresu i braku snu. Obliczanie dawek naprzemiennych (Paracetamol/Ibuprofen) na podstawie wagi, pamiętanie o odstępach czasowych oraz ręczne rysowanie trendów temperatury jest podatne na błędy. Wyzwaniem inżynieryjnym było stworzenie interfejsu "błędo-odpornego", który działa natychmiastowo, nawet w przychodni z zerowym zasięgiem GSM.
Rozwiązanie
Zbudowałem aplikację Progressive Web App (PWA) w architekturze Zero-Latency. Kluczowe decyzje: Zod Validation Layers: Każda wprowadzana dana (waga, wiek, temperatura) przechodzi rygorystyczną walidację w czasie rzeczywistym, uniemożliwiając podanie niebezpiecznej dawki. Fluid UX/UI: Wykorzystanie Framer Motion do płynnych przejść między kontekstami (Kalkulator -> Historia -> Wykres), co uspokaja interfejs i prowadzi użytkownika za rękę. PDF on the Edge: Generowanie raportów medycznych dla lekarza (PDF) odbywa się w pełni po stronie klienta, bez wysyłania danych na serwer.
Wynik (95+/100 Lighthouse)
Powstało narzędzie klasy "Digital Health", które realnie minimalizuje ryzyko błędu medycznego w domu. Aplikacja eliminuje konieczność "zgadywania" dawki i pamiętania o czasie podania kolejnego leku. Dzięki zaawansowanej optymalizacji (dynamiczne importy, code-splitting), aplikacja osiąga wynik 100/100 w Lighthouse (Performance & Accessibility), będąc gotową na standardy webowe roku 2026.
Medical-Grade Precision in Your Pocket. Aplikacja stworzona, by zdjąć ładunek poznawczy z rodziców w sytuacjach stresowych. To nie tylko kalkulator dawki (mg/kg), ale kompletny system zarządzania epizodem chorobowym.
Engineering Highlights:
Local-First Architecture:
Pełna funkcjonalność offline dzięki Service Workers. Dane medyczne (historia, temperatury) są przechowywane wyłącznie w
localStorage
użytkownika, zapewniając 100% prywatności i natychmiastowy dostęp bez opóźnień sieciowych.
Visx Custom Charting:
Zamiast gotowych bibliotek, wdrożono dedykowany system wykresów oparty na
Airbnb Visx
. Pozwoliło to na stworzenie wysoce performantnej wizualizacji z "inteligentną" osią czasu (adaptacyjne formatowanie dat/godzin) i precyzyjną obsługą dotyku (Touch Area Expansion) na urządzeniach mobilnych.
Context-Aware AI:
Integracja z modelem językowym, który analizuje lokalne logi pacjenta (objawy, leki, temperaturę) i generuje spersonalizowane rekomendacje ("Dr. AI"), działając jako wstępny triaż przed wizytą lekarską.
Stack Technologiczny
