Inspiration
While testing analytical web applications behind strict local networks, I noticed that aggressive firewall filters and ad-blockers routinely break standard external data connections and cloud chart APIs. I wanted to design a premium health diagnostics platform that is completely immune to network restrictions and runs perfectly anywhere—from a school computer to an athlete's phone.
What it does
RikHealth-Pro operates as an automated client-side data logger and real-time biometric tracking console divided into three distinct functional layers:
- 📊 Local Data Tracking Engine (
tracker.html): Captures unstructured user data points for essential health habits, including hydration levels, sleep durations, and active physical training blocks. - 📈 Native Analytics Visualizer (
analytics.html): Instantly parses localized chronological arrays out of system memory. It calculates data progress relative to optimal health benchmarks and builds custom visual bar graphs without making external network calls. - 🔔 Habit Automation Alerts (
reminder.html): Utilizes native background system event loops to push cross-platform desktop notification toasts, keeping users strictly aligned with their wellness schedules. - 🔐 Zero-Server Data Isolation: Ensures complete personal data security by writing and reading entries locally using the Web Storage API (
localStorage), meaning user records never leave their machine.
How I built it
The ecosystem is architected as a modular, multi-tier frontend application. It relies entirely on static hosting via GitHub Pages. I engineered a custom localized database engine using the Web Storage API (localStorage) to save unstructured data logs. For the visualization engine, I bypassed external rendering libraries entirely, writing a native mathematical compiler in Vanilla JavaScript that translates biological data metrics directly into responsive inline CSS flex widths.
Challenges I ran into
The biggest challenge was overcoming browser sandboxing and external resource blocking. Initial implementations utilizing CDN links threw severe runtime compilation errors (Chart is not defined). I resolved this by stripping out external network scripts completely, designing a zero-dependency data rendering loop that handles all arithmetic and styling locally in the client thread.
What's next for RikHealth-Pro
The next phase involves integrating the Web Bluetooth API to establish direct wireless links between the webpage and physical microcontroller hardware arrays (like an ESP32 BLE heart-rate tracking node), bringing physical computing directly into the client-side browser dashboard.
Log in or sign up for Devpost to join the conversation.