Skip to main content
PROJECT 04Private AI Habit Recovery Web ApplicationProduction

Reframe

AI-assisted habit recovery with guaranteed client-side privacy.

Overview & Impact

The Problem & The System Solution

The Problem

Habit recovery tools often rely on generic advice and require users to share sensitive personal data without meaningful privacy protections.

The System Solution

Built a personalized application with a multidimensional weighted assessment, Gemini-powered support, a real-time urge interruption feature, encrypted client-side data handling, anonymous authentication, offline-first PWA support, and progress visualization.

01

Habit recovery is deeply personal. Users share their triggers, patterns, and struggles with apps that store this data in plaintext on remote servers — often with minimal security guarantees. This is a privacy failure that undermines trust in the tools designed to help.

02

Reframe was built with a privacy-first guarantee: all personal journal entries and habit data are encrypted in the user's browser using the Web Crypto API before ever touching Firebase Firestore. The server receives only ciphertext it cannot read.

03

Beyond privacy, the app provides evidence-backed behavioral interventions — urge surfing, cognitive reframing, and progress visualization — powered by Gemini 2.0 Flash with carefully designed prompt boundaries that prevent the AI from overstepping into medical advice.

Architecture & System Flow

System Design Visualizer

PRIVACY-FIRST CLIENT-SIDE ARCHITECTURE

Reframe Encryption & Boundary Guardrails

Zero Plaintext Server
BROWSER (CLIENT ZONE)
Web Crypto API
PBKDF2 Key Derivation: Device-local encryption key from user passphrase.
AES-GCM 256-Bit: Client-side encryption before writing data.
IndexedDB & PWA: Offline-first local store for instant response.
CLOUD (SERVER ZONE)
Ciphertext Only
Firebase Firestore: Stores encrypted ciphertext blobs.
Gemini 2.0 Flash: Contextual behavioral AI within safety prompt guardrails.
Firebase Auth: Anonymous authentication — no PII required.
INTERACTIVE STEP INSPECTOR

Step-by-Step System Execution Payload

Step 1 of 4
COMPONENT / NODE

Client Storage Security Layer

DATA / PAYLOAD FORMAT

User Entry → Client-Side AES Encryption

LATENCY TARGET
< 10ms local execution
TECHNOLOGY USED
Next.js / Web Crypto API
SAFETY GUARDRAIL / FAILOVER
Zero PII transmitted to server without consent

Key Engineering Decisions

All sensitive assessment and journal data is encrypted on the client using AES-GCM before entering remote storage.

Gemini prompt boundaries explicitly restrict medical diagnosis while providing empathetic, evidence-backed behavioral interventions.

Offline-first indexedDB storage ensures immediate app responsiveness during high-stress urge interruption events.

Technology Stack

Production Technologies

Frontend
Next.js

Full-stack PWA framework with App Router and Server Components

Recharts

Progress visualization: streaks, triggers, and recovery milestones

Tailwind CSS

Responsive mobile-first UI styling

Backend
Web Crypto API

Browser-native AES-GCM encryption and PBKDF2 key derivation

AI / ML
Gemini 2.0 Flash

Fast, safety-bounded AI for behavioral support and urge interventions

Database
Firebase Firestore

Remote encrypted storage with real-time sync capabilities

Infrastructure
Vercel

Edge deployment with global CDN for fast load times

Features & Capabilities

What It Does

🔒

Client-Side Encryption

AES-GCM 256-bit encryption in the browser. Server receives only ciphertext.

🧠

AI Support

Gemini 2.0 Flash provides personalized behavioral interventions within safety guardrails.

Urge Interruption

Real-time micro-interactions: breathing exercises, cognitive reframes, urge surfing.

📱

Offline-First PWA

Works without internet. IndexedDB + Service Worker ensures always-available access.

📊

Progress Tracking

Recharts visualizations of streak data, trigger patterns, and recovery milestones.

🕵️

Anonymous Auth

Firebase anonymous authentication — no email or personal data required to start.

Workflow Pipeline

Step-by-Step System Flow

01

Weighted Assessment

User completes multidimensional onboarding assessment. Scores determine personalized plan.

02

PBKDF2 Key Derivation

User passphrase processed through PBKDF2 to derive AES-GCM encryption key. Never leaves device.

03

Client-Side Encryption

All journal entries and habit data encrypted in browser using Web Crypto API before write.

04

Firebase Storage

Only ciphertext reaches Firebase Firestore. Server has zero access to plaintext.

05

Urge Interruption

Real-time micro-interaction tools: breathing timer, cognitive reframes, urge surfing exercises.

06

AI Support

Gemini 2.0 Flash provides evidence-backed behavioral support within defined safety boundaries.

07

Offline Sync

IndexedDB stores data locally when offline. Service worker syncs to Firebase on reconnect.

08

Progress Visualization

Recharts renders streak data, trigger patterns, and recovery milestones from decrypted local data.

Interface & Dashboard

Reframe Interface

Analytics Dashboard

Conversation View

Engineering Challenges

Hard Problems Solved

The Problem

Web Crypto API operations are asynchronous. Encrypting every journal write and decrypting every read needed to be imperceptible to the user.

Engineering Solution

Implemented a crypto service layer that batches encryption operations and uses IndexedDB as a local cache of decrypted data, only hitting the crypto API on writes and first reads.

Results & Evaluation

What Was Achieved

AES-GCM
Encryption Standard
256-bit client-side
0
Plaintext on Server
Guaranteed by architecture
PWA
Offline-First
Works without internet
PBKDF2
Key Derivation
Password-based, device-local

Future Roadmap

What's Next

Peer support community (anonymized)
Therapist integration API
Wearable stress signal integration
Custom trigger pattern analysis
Multi-habit tracking
Progress sharing (privacy-preserving)

6 planned features · Active development