React 19 및 커패시터를 사용하여 오픈 소스, 제로 클라우드 기간 추적기를 구축한 이유

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<CryptoKey> {
  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']
  );
}

Enter fullscreen mode Exit fullscreen mode

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

1. 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.
2. True Air-Gapped Verification: Configuring mobile manifests (AndroidManifest.xml and Info.plist) to ensure no extraneous network privileges or background tracking services are requested.
3. 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:

We welcome contributions — from translations and UI tweaks to cryptographic audits and prediction algorithm improvements!