# 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:

```bash
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**:
    
    ```plaintext
    bash
    ```
    
    git clone [https://github.com/Shree-varshan-430/Moment-keeper.git](https://github.com/Shree-varshan-430/Moment-keeper.git)
    
    cd Moment-keeper
    
2.  **Install Dependencies**:
    
    ```plaintext
    bash
    ```
    
    npm install
    
3.  **Run Dev Server**:
    
    ```plaintext
    bash
    ```
    
    npm run dev
    

Check out the [CONTRIBUTING.md](http://CONTRIBUTING.md) guide in the repository for detailed guidelines!

## **Check Out the Code**

*   **GitHub Repository**: [Shree-varshan-430/Moment-keeper](https://github.com/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! 🎉