Why I Built an Open-Source, Zero-Cloud Period Tracker with React 19 & Capacitor
DEV Community

Why I Built an Open-Source, Zero-Cloud Period Tracker with React 19 & Capacitor

In an era where health data is increasingly commodified, tracked, and exposed in data breaches, personal data privacy isn't just a bonus feature - it's a fundamental requirement. Most period and cycle tracking apps require cloud accounts, transmit deeply intimate health telemetry to remote servers, and integrate third-party ad SDKs. When data lives on a central server, it is vulnerable to leaks, corporate sales, and subpoenas. We asked a simple engineering question: What if the server simply didn't exist? That philosophy led to Mooneva Cycle - a 100% offline-first, private, and open-source (GPL-3.0) period & cycle tracker built for web, iOS, and Android. ๐ŸŽฏ Core Architectural Philosophy: Zero Trust, Zero Cloud Our design rule from day one: Data that never leaves the user's device cannot be leaked or compromised. | Traditional Cloud Trackers | Mooneva Cycle | |---|---| | Stored on third-party cloud databases | Stored exclusively on-device (localStorage / Secure Storage) | | Third-party analytics & telemetry trackers | Zero analytics, zero ad SDKs, zero crash loggers | | Requires email/phone registration | No account, no signup, instant access | | Susceptible to remote breaches | No centralized database to breach | ๐Ÿ› ๏ธ The Tech Stack To deliver a snappy, native-like mobile experience across iOS and Android without maintaining separate native codebases, we opted for a modern web-to-native stack: - Frontend Core: React 19 + TypeScript - Build Tool: Vite 6 - Native Runtime: Capacitor 8 (iOS & Android bridge) - Styling: Tailwind CSS + Vanilla CSS tokens - Internationalization: i18next (supporting 12 languages + RTL layout) - Reporting & Export: html2pdf.js for on-device clinical PDF reports - Testing: Vitest + @testing-library/react ๐Ÿ” Key Technical Highlights & Design Decisions 1. Local-First Encrypted Backups with PBKDF2 & AES-GCM Since there is no remote database to restore from, data portability and secure backup exports are critical. We use standard Web Crypto APIs for user backups: - Password-derived cryptographic keys via PBKDF2 (high iteration counts + dynamic salt). - AES-GCM (256-bit) authenticated encryption for backup archives. - Zero external cryptographic dependencies needed - fully native to modern Web and WebView runtimes. // Client-side key derivation & encryption flow async function deriveKey(password: string, salt: Uint8Array): Promise { const enc = new TextEncoder(); const baseKey = await crypto.subtle.importKey( 'raw', enc.encode(password), 'PBKDF2', false, ['deriveKey'] ); return crypto.subtle.deriveKey( { name: 'PBKDF2', salt, iterations: 250_000, hash: 'SHA-256' }, baseKey, { name: 'AES-GCM', length: 256 }, false, ['encrypt', 'decrypt'] ); } 2. Push-Less Local Notifications Most apps use FCM (Firebase Cloud Messaging) or Apple APNs coupled with backend cron jobs to send reminders. To eliminate cloud triggers, Mooneva schedules all alerts strictly on-device using @capacitor/local-notifications . The device OS manages the alarm queue locally for: - Predicted cycle & period starts - Ovulation & fertile windows - Daily symptom/mood logging reminders - Contraceptive pill/patch/ring adherence schedules 3. "Discrete Mode" & Local PIN Protection Privacy extends to shoulder-surfing. We engineered: - Discrete Mode: Disguises the app launcher icon and name into a neutral utility. - Biometric & PIN Lock: Guarding the interface with configurable timeouts using encrypted storage for authentication state. 4. Non-Gregorian Calendar & True RTL Support Health apps often overlook regional accessibility. Mooneva includes full support for the Persian (Jalaali) solar calendar alongside Gregorian dates, accompanied by automatic bidirectional (RTL) layout switching via Tailwind's logical directions. 5. Migration Freedom (Import from Flo, Clue & drip) Vendor lock-in is hostile to user autonomy. We implemented client-side parsers that ingest export files from major platforms (Flo, Clue, drip), normalizing historical cycle dates, flow intensities, and logs into Mooneva's local schema directly in the browser/app memory. ๐Ÿšง Challenges Solved - Deterministic Predictions on Sparse Data: Designing cycle prediction algorithms that run entirely on client hardware without heavyweight ML dependencies, providing robust rolling-average predictions while gracefully handling irregular cycles and birth-control withdrawal bleeds. - True Air-Gapped Verification: Configuring mobile manifests ( AndroidManifest.xml andInfo.plist ) to ensure no extraneous network privileges or background tracking services are requested. - Cross-Platform PDF Generation: Generating doctor-ready clinical PDF summaries on the fly directly inside mobile WebViews using canvas and DOM rendering without leaking document data to an external PDF generation API. ๐Ÿค Open Source & Contributing Mooneva Cycle is 100% free and open source under GPL-3.0. There is no venture capital, no monetization through data harvesting, and no paywalls on essential features. If you care about local-first software, client-side encryption, and accessible health tools: โญ Star the repository: github.com/aradar46/Mooneva-Cycle-Private-Period-Tracker ๐Ÿ“ฑ Try it on Google Play: Mooneva on Google Play ๐ŸŽ Try it on App Store: Mooneva Cycle on iOS ๐ŸŒ Website: mooneva.se We welcome contributions - from translations and UI tweaks to cryptographic audits and prediction algorithm improvements! Top comments (0)

Read on DEV Community ↗ ← Back to News

Comments

No comments yet. Start the discussion.