Building and Open-Sourcing Moment Keeper: A Privacy-First Milestone & Life-Event Tracker with React, Capacitor, and Firebase

How I built a cross-platform milestone reminder app featuring zero-knowledge AES-256 client-side encryption and cross-platform native support.

We all lead busy lives, and missing an important birthday, anniversary, or milestone of someone close to us can happen all too easily. Existing calendar apps can feel cluttered, while simple reminder tools often lack privacy for personal memories.

To solve this, I built and recently open-sourced Moment Keeper — a premium, privacy-focused life-event reminder and milestone tracking application for Web and Android.

In this post, I’ll walk through the features, technical architecture, security model, and how you can get involved in contributing to the project!

---

✨ Features at a Glance

• 📅 Milestone Countdown: Visual day countdowns for birthdays, weddings, anniversaries, and custom events.

• 🔒 Zero-Knowledge Privacy: Lock private memories using a custom 4-digit passcode, encrypted on-device before being saved to the database.

• 🔔 Early Smart Notifications: Configurable local push reminders (7-day, 3-day, 1-day, and same-day alerts).

• 👥 Group Collaboration: Share group calendars with family, friends, or office teams.

• 📴 Offline-First Engine: Full offline caching with seamless background synchronization when connection is restored.

• 🎵 Spotify Alarm Integration: Attach Spotify tracks or playlists to milestone celebration overlays.

---

🛠️ The Tech Stack

• Frontend: React 18, TypeScript, Tailwind CSS v4, Framer Motion

• State Management: Zustand

• Backend & Database: Firebase Firestore, Firebase Authentication, Firebase Storage

• Native Mobile Wrapper: Capacitor 6 (Android)

• Security Protocols: Browser Web Crypto API (PBKDF2 + AES-256-GCM)

---

🔐 Technical Deep Dive: Zero-Knowledge Client-Side Encryption

Privacy was a core requirement for Moment Keeper. Users often store personal notes, gift ideas, and private memories that shouldn't be readable by anyone else — not even database admins.

Instead of relying solely on server-side disk encryption, Moment Keeper implements client-side zero-knowledge encryption:

1. Key Derivation: When a user locks a memory with a 4-digit passkey, the app uses PBKDF2 (50,000 iterations + UID salt) via the browser's native window.crypto.subtle Web Crypto API to derive a cryptographic key on-device.

2. AES-256-GCM Encryption: The title, description, notes, and recipient names are encrypted locally into base64 ciphertext using AES-256-GCM.

3. Storage & Decryption: Only ciphertext is sent to Firestore. When the user unlocks their Private tab, decryption occurs in client memory.

📱 Cross-Platform Deployment with Capacitor

Using Capacitor, the exact same React codebase is wrapped into a native Android application. This allows access to native device APIs like:

• Local Push Notifications via @capacitor/local-notifications

• Device Haptic Feedback via @capacitor/haptics

• Network status detection via @capacitor/network

Compiling for Android is as simple as:

npm run build
npx cap sync android

🤝 Open Source & How to Contribute

Moment Keeper is 100% open-source under the MIT License, and community contributions are very welcome!

Whether you want to add UI animations, improve accessibility, write tests, or build new features, getting started is easy:

1. Fork & Clone the Repo:

   bash
   

   git clone https://github.com/Shree-varshan-430/Moment-keeper.git

   cd Moment-keeper

2. Install Dependencies:

   bash
   

   npm install

3. Run Dev Server:

   bash
   

   npm run dev

Check out the CONTRIBUTING.md guide in the repository for detailed guidelines!

Check Out the Code

• GitHub Repository: Shree-varshan-430/Moment-keeper

If you find the project interesting or useful, please consider giving the repository a ⭐ Star on GitHub! Feel free to leave a comment or share your feedback below.

Happy coding! 🎉