diff --git a/README.md b/README.md index 9fd20f8..186d5bf 100644 --- a/README.md +++ b/README.md @@ -11,22 +11,32 @@ To record as many variables related to health as possible, store them in a secur ## Technology Stack ### Backend -- Framework: Axum 0.7.x -- Runtime: Tokio 1.x -- Middleware: Tower, Tower-HTTP -- Database: MongoDB (with zero-knowledge encryption) -- Language: Rust +- **Framework**: Axum 0.7.x +- **Runtime**: Tokio 1.x +- **Middleware**: Tower, Tower-HTTP +- **Database**: MongoDB (with zero-knowledge encryption) +- **Language**: Rust -### Frontend -- TBD (Research in progress) +### Mobile (iOS + Android) +- **Framework**: React Native 0.73+ +- **Language**: TypeScript +- **Health Sensors**: react-native-health, react-native-google-fit +- **Encryption**: react-native-quick-crypto -### Mobile -- iOS: TBD -- Android: TBD +### Web +- **Framework**: React 18+ +- **Language**: TypeScript +- **Charts**: Recharts ### Deployment - Docker on Linux +## Platform Strategy + +**Primary: Mobile Apps** - Daily health tracking, sensor integration, QR scanning, push notifications + +**Secondary: Web Browser** - Extensive reporting, visualization, profile management + ## Key Features - Zero-knowledge encryption @@ -34,7 +44,7 @@ To record as many variables related to health as possible, store them in a secur - Family structure management - Secure sharing with expiring links - Mobile apps with health sensor integration -- Web interface +- Web interface for complex visualizations ## Security Model @@ -59,15 +69,17 @@ Phase: Planning/Documentation - Security architecture design - Encryption implementation guide - Git repository initialization -- Rust framework selection: Axum +- **Rust framework selection: Axum** +- **Mobile/Web framework selection: React Native + React** ### Next Steps -- Research frontend framework (React vs Vue vs Svelte) -- Design authentication system (JWT with recovery phrases) -- Design database schema +- State management research (Redux vs Zustand) +- Authentication system design (JWT with recovery phrases) +- Database schema design - Create proof-of-concept with Axum - Implement basic CRUD API -- Build web frontend +- Build mobile apps with health sensor integration +- Build web companion app - Add encryption layer - Implement sharing functionality diff --git a/thoughts/research/2026-02-14-frontend-decision-summary.md b/thoughts/research/2026-02-14-frontend-decision-summary.md new file mode 100644 index 0000000..ccecc03 --- /dev/null +++ b/thoughts/research/2026-02-14-frontend-decision-summary.md @@ -0,0 +1,147 @@ +# Frontend Framework Decision Summary + +**Date**: 2026-02-14 +**Decision**: **React Native + React** + +--- + +## Platform Strategy + +### Primary: Mobile Apps (iOS + Android) +- Daily health tracking and data entry +- Health sensor integration (HealthKit, Health Connect) +- QR code scanning (lab results) +- Push notifications (reminders) +- Background sync + +### Secondary: Web Browser +- Complex data visualization and charts +- Historical trend analysis +- Profile and family management +- Extensive reporting + +--- + +## Framework Decision: React Native + React + +| Criteria | React Native + React | Flutter | Native | +|----------|---------------------|----------|--------| +| Code Sharing | 70-80% | 0% | 0% | +| Development Cost | Low | Medium | High | +| Time to Market | Fast | Medium | Slow | +| Health Sensors | ✅ Excellent | ✅ Excellent | ✅ Excellent | +| QR Scanning | ✅ Excellent | ✅ Excellent | ✅ Excellent | +| Performance | Good | Excellent | Excellent | +| Team Skills | JS/TS only | Dart + JS | Swift + Kotlin + JS | +| Ecosystem | Largest | Large | Native | + +--- + +## Key Advantages + +### 1. Code Sharing (70-80%) +- Business logic: State, API, encryption +- Data validation: Zod schemas +- Date handling: date-fns +- Utilities: Monorepo shared package + +### 2. Health Sensors +- iOS: react-native-health (HealthKit) +- Android: react-native-google-fit (Health Connect) +- Background sensor data collection + +### 3. Encryption +- react-native-quick-crypto +- AES-256-GCM, PBKDF2 +- Secure key storage (Keychain/Keystore) +- Web Crypto API compatible + +### 4. QR Scanning +- react-native-camera +- Fast, accurate scanning + +### 5. Web Charts +- Recharts (React) +- Beautiful, interactive visualizations +- Perfect for health data + +### 6. Team & Cost +- Single language: JavaScript/TypeScript +- Single ecosystem: npm +- Lower development cost +- Faster time to market + +--- + +## Technology Stack + +### Mobile (React Native) +- Framework: React Native 0.73+ +- Language: TypeScript +- Health: react-native-health, react-native-google-fit +- Camera: react-native-camera +- Encryption: react-native-quick-crypto +- HTTP: Axios + +### Web (React) +- Framework: React 18+ +- Language: TypeScript +- Charts: Recharts +- HTTP: Axios +- UI: Tailwind CSS / Chakra UI + +### Shared (Monorepo) +- Language: TypeScript +- State: Redux/Zustand (TBD) +- API: Axios +- Encryption: AES-256-GCM, PBKDF2 +- Validation: Zod +- Date: date-fns + +--- + +## Implementation Timeline + +### Phase 1: Mobile MVP (8-12 weeks) +- Setup React Native project +- Integrate HealthKit and Health Connect +- Implement encryption +- Build core UI +- Test QR scanning +- Background sync + +### Phase 2: Web Companion (4-6 weeks) +- Setup React project +- Share business logic +- Build charts +- Profile management UI + +### Phase 3: Polish & Launch (4-6 weeks) +- Performance optimization +- Security audit +- App store submission +- Beta launch + +--- + +## Next Steps + +1. ✅ Mobile Framework: React Native +2. ⏭️ State Management: Redux vs Zustand +3. ⏭️ Database Schema Design +4. ⏭️ Create Health Sensor POC +5. ⏭️ Implement Authentication + +--- + +## Conclusion + +**React Native + React** is optimal for Normogen: + +- 70-80% code sharing reduces development cost +- Excellent health sensor integration +- Single language (JavaScript/TypeScript) +- Great chart visualization for web +- Faster time to market + +**Decision**: Use **React Native** for mobile (iOS + Android) and **React** for web companion app. diff --git a/thoughts/research/2026-02-14-frontend-mobile-research.md b/thoughts/research/2026-02-14-frontend-mobile-research.md new file mode 100644 index 0000000..3e24bda --- /dev/null +++ b/thoughts/research/2026-02-14-frontend-mobile-research.md @@ -0,0 +1,681 @@ +# Frontend Framework Research: Mobile-First Approach + +**Date**: 2026-02-14 +**Focus**: Mobile-first health platform with web companion app + +--- + +## Platform Strategy Clarification + +### Primary Platform: Mobile Apps (iOS & Android) +- **Main interaction**: Quick data entry, sensor integration, daily health tracking +- **Health sensors**: Apple HealthKit, Google Health Connect +- **Use cases**: + - Quick health data entry (weight, steps, mood) + - Medication reminders and tracking + - QR code scanning (lab results) + - Real-time health sensor data (steps, heart rate, sleep) + - Push notifications for reminders + - Background sync with server + - "Nuke option" (instant data deletion) + +### Secondary Platform: Web Browser +- **Complementary role**: Extensive reporting, visualization, profile management +- **Use cases**: + - Complex data visualization and charts + - Historical trend analysis + - Comprehensive profile management + - Family structure management + - Extensive reporting and data export + - Detailed configuration settings + - Desktop/laptop user preference + +--- + +## Mobile Development Options + +### 1. React Native +**Description**: Facebook's cross-platform framework using React/JavaScript + +**Pros for Normogen**: +- **Code sharing**: Share logic with web frontend (React) +- **Large ecosystem**: Extensive library ecosystem +- **Health integration**: + - React Native Health (Apple HealthKit) + - Google Health Connect integration +- **QR code scanning**: react-native-camera, react-native-qrcode-scanner +- **Encryption**: Native crypto libraries available +- **Community**: Largest cross-platform mobile community +- **Performance**: Good enough for health data apps + +**Cons**: +- Performance overhead compared to native +- Larger app bundle size +- Potential dependency issues (npm chaos) +- JavaScript engine overhead + +**Health Sensor Integration**: +- iOS: [react-native-health](https://github.com/anthonyecamps/react-native-health) +- Android: [react-native-google-fit](https://github.com/StasDoskalenko/react-native-google-fit) +- Background location/sensors: [react-native-background-job](https://github.com/jamesisaac/react-native-background-job) + +**Code Sharing Potential**: +- Business logic: 70-80% shared with web +- State management: 90%+ shared +- API client: 100% shared +- Encryption: 100% shared +- UI components: 0% (separate native UI) + +--- + +### 2. Flutter +**Description**: Google's cross-platform framework using Dart + +**Pros for Normogen**: +- **Excellent performance**: Compiled to native ARM64 +- **Small app bundle**: Smaller than React Native +- **Hot reload**: Fast development iteration +- **Health integration**: + - health (Apple HealthKit, Google Health Connect) + - Provides unified API for both platforms +- **Beautiful UI**: Material Design and Cupertino widgets +- **Stable**: Mature and production-ready +- **Single codebase**: Better platform parity + +**Cons**: +- **No code sharing** with web frontend +- Dart learning curve (if team only knows JavaScript) +- Smaller ecosystem than React Native +- Less flexibility for native modules + +**Health Sensor Integration**: +- [health](https://pub.dev/packages/health) - Apple HealthKit + Google Health Connect +- Unified API for both platforms +- Background task support +- Step counting, heart rate, sleep tracking + +**Code Sharing Potential**: +- Business logic: 0% (Dart vs JavaScript) +- API client: 0% (must rewrite) +- Encryption: 0% (must rewrite) +- UI components: 0% (separate UI framework) + +--- + +### 3. Native (Swift + Kotlin) +**Description**: Separate native apps for iOS and Android + +**Pros for Normogen**: +- **Best performance**: Native ARM64 code +- **Best sensor integration**: Direct platform APIs +- **Best user experience**: Platform-native feel +- **Smallest app bundle**: No framework overhead +- **Swift**: Native crypto libraries (CryptoKit) +- **Kotlin**: Native crypto libraries + +**Cons**: +- **Double development cost**: Separate codebases +- **No code sharing**: 0% code sharing between platforms +- **Longer time to market**: Two separate implementations +- **Higher maintenance**: Two codebases to maintain +- **Team skill requirements**: Swift + Kotlin + JavaScript (for web) + +**Health Sensor Integration**: +- iOS: HealthKit (native, best integration) +- Android: Google Health Connect (native) +- Background tasks: Native support + +**Code Sharing Potential**: +- Business logic: 0% (different languages) +- API client: 0% (must implement twice) +- Encryption: 0% (different crypto libraries) +- UI components: 0% (completely separate) + +--- + +### 4. Progressive Web App (PWA) +**Description**: Web app that can be installed on mobile devices + +**Pros for Normogen**: +- **Single codebase**: Works on mobile and desktop +- **Health sensors**: Web Bluetooth, Generic Sensor API (limited) +- **No app store**: Direct deployment, instant updates +- **Small bundle**: Just web assets +- **Easy updates**: No app store review process + +**Cons**: +- **Limited sensor access**: Cannot access HealthKit/Health Connect +- **Poor offline**: Limited background sync +- **Poor push notifications**: Limited support +- **iOS limitations**: Safari PWA restrictions +- **Poor user experience**: Not native-feeling + +**Health Sensor Integration**: +- Limited to web sensor APIs +- No HealthKit integration +- No Health Connect integration +- Poor for health sensor use case + +**Code Sharing Potential**: +- Business logic: 100% shared +- API client: 100% shared +- Encryption: 100% shared +- UI: 100% shared + +**Verdict**: Not suitable for Normogen's mobile sensor requirements + +--- + +## Web Companion Framework Options + +### Option 1: React (if mobile is React Native) +**Description**: Most popular JavaScript UI library + +**Pros**: +- **Code sharing**: 70-80% with React Native +- **Ecosystem**: Largest npm ecosystem +- **Charts**: Chart.js, Recharts, D3.js +- **State management**: Redux, Zustand, Jotai +- **Encryption**: Web Crypto API, crypto-js + +**Cons**: +- Large bundle size +- Complexity for simple apps + +--- + +### Option 2: Svelte/SvelteKit +**Description**: Modern compiler-based framework + +**Pros**: +- **Small bundle**: Compiled, minimal runtime +- **Great DX**: Simple, clean syntax +- **Charts**: Svelte-chartjs, Plotly +- **Performance**: Excellent for charts/visualization +- **SSR**: Built-in server-side rendering + +**Cons**: +- **No code sharing** with React Native +- Smaller ecosystem +- Less mature than React + +--- + +### Option 3: Vue.js +**Description**: Progressive JavaScript framework + +**Pros**: +- **Simple learning curve**: Easier than React +- **Charts**: Chart.js, ECharts +- **Performance**: Good for visualizations +- **Ecosystem**: Growing but smaller than React + +**Cons**: +- **No code sharing** with React Native +- Smaller ecosystem than React +- Less job market demand + +--- + +## Comparison Matrix + +| Criteria | React Native + React | Flutter + React/Svelte | Native + React | +|----------|---------------------|------------------------|----------------| +| **Development Cost** | Low (code sharing) | Medium | High (2x platforms) | +| **Time to Market** | Fast | Medium | Slow | +| **Mobile Performance** | Good | Excellent | Excellent | +| **Web Performance** | Good | Good | Good | +| **Code Sharing** | 70-80% | 0% | 0% | +| **Health Sensors** | ✅ Excellent | ✅ Excellent | ✅ Excellent | +| **QR Scanning** | ✅ Excellent | ✅ Excellent | ✅ Excellent | +| **Crypto** | ✅ Excellent | ✅ Good | ✅ Excellent | +| **Bundle Size** | Medium | Small | Small | +| **Maintenance** | Medium | Medium | High | +| **Team Skills** | JavaScript only | Dart + JS | Swift + Kotlin + JS | +| **Ecosystem** | Largest | Large | Native | + +--- + +## Research Questions + +### For Mobile Framework + +1. **Health Sensor Integration Quality** + - How well does each framework integrate with HealthKit? + - How well does each framework integrate with Google Health Connect? + - Background sensor data collection? + - Step counting, heart rate, sleep tracking support? + +2. **QR Code Scanning** + - Camera API integration quality + - QR scanning library availability + - Performance and accuracy + +3. **Encryption Capabilities** + - Client-side AES-256-GCM encryption + - PBKDF2 key derivation + - Web Crypto API bridging (for code sharing) + - Secure key storage (Keychain/Keystore) + +4. **Background Sync** + - Background task scheduling + - Sync reliability + - Battery efficiency + - Data transfer optimization + +5. **Push Notifications** + - Local notifications (reminders) + - Push notifications (server-triggered) + - Scheduling accuracy + +### For Web Framework + +1. **Chart Visualization** + - Chart library compatibility + - Performance with large datasets + - Real-time data streaming + - Beautiful, interactive charts + +2. **Encrypted Data Handling** + - Client-side decryption + - Large encrypted data handling (10MB+) + - Streaming response support + - Zero-knowledge architecture support + +3. **Complex State Management** + - Family structure management + - Multi-person profiles + - Access control and permissions + - Offline data synchronization + +4. **Performance** + - Bundle size and load time + - Rendering performance for complex charts + - Memory usage for large datasets + +--- + +## Health Sensor Integration Deep Dive + +### Apple HealthKit + +**Data Types to Integrate**: +- Steps (count, distance) +- Heart rate (resting, walking, variability) +- Sleep analysis (duration, quality, stages) +- Weight, height, BMI +- Blood pressure +- Temperature +- Oxygen saturation +- Respiratory rate +- Menstrual cycle data +- Workouts and activity +- Nutrition (water, caffeine) + +**Integration Requirements**: +- Authorization request handling +- Background delivery (HKHealthStore) +- Query historical data +- Write data to HealthKit (if needed) +- Sample queries (filtered by date, type) + +### Google Health Connect + +**Data Types to Integrate**: +- Steps (count, distance) +- Heart rate (resting, variability) +- Sleep (sessions, stages) +- Weight, height +- Blood pressure +- Temperature +- Oxygen saturation +- Nutrition +- Menstrual cycle +- Exercise sessions + +**Integration Requirements**: +- Permission request handling +- Background reading (WorkManager) +- Historical data queries +- Write data to Health Connect (if needed) + +--- + +## Recommended Architecture + +### Mobile-First, Web-Complementary + +#### Recommended Stack: **React Native + React** + +**Rationale**: + +1. **Code Sharing (70-80%)** + - Business logic: User management, data sync, encryption + - State management: Redux/Zustand store + - API client: Axios/Fetch wrapper + - Encryption utilities: AES-GCM, PBKDF2, keys + - Data validation: Zod schemas + - Date handling: date-fns, luxon + +2. **Health Sensors** + - React Native Health (iOS) + - React Native Google Fit (Android) + - Background task support + - Excellent sensor integration + +3. **QR Scanning** + - react-native-camera + - Fast, accurate scanning + +4. **Encryption** + - react-native-quick-crypto + - Secure key storage (Keychain/Keystore) + - Web Crypto API compatible + +5. **Web Charts** + - Recharts (React) + - D3.js (if needed) + - Chart.js (simple charts) + - Excellent visualization + +6. **Team Skills** + - Single language: JavaScript/TypeScript + - Single ecosystem: npm + - Lower hiring cost + +#### Architecture Diagram + +``` +┌─────────────────────────────────────────────────────┐ +│ Shared Layer │ +│ (Business Logic, State, API, Encryption) │ +│ │ +│ - Redux/Zustand Store │ +│ - API Client (Axios) │ +│ - Encryption Utilities (AES-GCM, PBKDF2) │ +│ - Data Validation (Zod) │ +│ - Date Handling (date-fns) │ +└─────────────────────────────────────────────────────┘ + │ + ┌───────────────┴───────────────┐ + │ │ + ▼ ▼ +┌──────────────────┐ ┌──────────────────┐ +│ React Native │ │ React (Web) │ +│ (Mobile) │ │ (Companion) │ +│ │ │ │ +│ - Native UI │ │ - DOM UI │ +│ - Camera │ │ - Charts │ +│ - HealthKit │ │ - Tables │ +│ - Health Conn. │ │ - Forms │ +│ - Push Notif. │ │ - Settings UI │ +│ - Background │ │ │ +└──────────────────┘ └──────────────────┘ + │ │ + │ │ + ▼ ▼ +┌──────────────────┐ ┌──────────────────┐ +│ iOS App │ │ Browser │ +│ (App Store) │ │ (Web) │ +└──────────────────┘ └──────────────────┘ +┌──────────────────┐ +│ Android App │ +│ (Play Store) │ +└──────────────────┘ +``` + +--- + +## Proof of Concept Requirements + +### Mobile POC + +1. **Health Sensor Integration** + - Read steps from HealthKit (iOS) + - Read steps from Health Connect (Android) + - Display last 7 days of step data + - Sync with backend API + +2. **Encryption Test** + - Encrypt health data on device + - Send to backend + - Decrypt on device + - Verify zero-knowledge (backend stores encrypted) + +3. **QR Scanning** + - Scan QR code + - Parse lab result data + - Encrypt and sync + +4. **Background Sync** + - Sync every 5 minutes + - Handle offline mode + - Conflict resolution + +### Web POC + +1. **Chart Visualization** + - Display 30 days of health data + - Line chart (weight trends) + - Bar chart (steps per day) + - Responsive design + +2. **Profile Management** + - Create/edit profile + - Add family members + - Set permissions + +3. **Encrypted Data Handling** + - Load 10MB encrypted data + - Decrypt and display + - Stream large datasets + +--- + +## Implementation Timeline + +### Phase 1: Mobile MVP (8-12 weeks) +- [ ] Setup React Native project +- [ ] Integrate HealthKit (iOS) +- [ ] Integrate Health Connect (Android) +- [ ] Implement encryption utilities +- [ ] Build API client +- [ ] Implement authentication +- [ ] Build core UI (profile, data entry, sync) +- [ ] Test QR scanning +- [ ] Implement background sync + +### Phase 2: Web Companion (4-6 weeks) +- [ ] Setup React project +- [ ] Share business logic from mobile +- [ ] Build chart visualization +- [ ] Build profile management UI +- [ ] Build family structure UI +- [ ] Build reporting interface + +### Phase 3: Polish & Launch (4-6 weeks) +- [ ] Performance optimization +- [ ] Security audit +- [ ] App store submission +- [ ] Marketing materials +- [ ] User testing +- [ ] Beta launch + +--- + +## Alternative Considered: Flutter + +### Why Flutter is a strong alternative + +**Pros**: +- Excellent performance (compiled to native) +- Beautiful UI out of the box +- Unified health package (HealthKit + Health Connect) +- Small app bundle size +- Fast development (hot reload) + +**Why React Native wins for Normogen**: + +1. **Code Sharing (Critical Advantage)** + - 70-80% code sharing vs 0% + - Faster time to market + - Lower development cost + - Easier maintenance + +2. **Team Skills** + - Single language (JavaScript/TypeScript) + - Single ecosystem (npm) + - Lower hiring cost + - Faster onboarding + +3. **Ecosystem Maturity** + - React Native: More mature, larger community + - Better health sensor integration + - More third-party libraries + - More production experience + +4. **Web Companion** + - React for web companion (code sharing) + - Flutter web: Less mature, not recommended + +**Flutter would be better if**: +- Web companion was not needed +- Team had Dart experience +- Performance was critical (not the case for health app) +- UI polish was the top priority + +--- + +## Final Recommendation + +### Primary Recommendation: **React Native + React** + +**Score**: 9/10 + +**Justification**: + +1. **Code Sharing** (Critical) + - 70-80% shared between mobile and web + - Single language (JavaScript/TypeScript) + - Faster development, easier maintenance + +2. **Health Sensors** (Excellent) + - React Native Health (iOS HealthKit) + - React Native Google Fit (Android Health Connect) + - Background sensor data collection + - Comprehensive health data support + +3. **Encryption** (Excellent) + - react-native-quick-crypto + - Web Crypto API compatible + - Secure key storage (Keychain/Keystore) + +4. **QR Scanning** (Excellent) + - react-native-camera + - Fast, accurate scanning + +5. **Web Charts** (Excellent) + - Recharts (React) + - Beautiful, interactive visualizations + - Great for health data + +6. **Team & Cost** (Excellent) + - Single language (JS/TS) + - Single ecosystem (npm) + - Lower development cost + - Faster time to market + +### Risk Assessment + +**Risk: React Native Performance** +- **Severity**: Low +- **Mitigation**: Good enough for health data apps +- **Mitigation**: Performance optimization techniques +- **Mitigation**: Native modules for critical paths + +**Risk: JavaScript Engine Overhead** +- **Severity**: Low +- **Mitigation**: Hermes engine (faster, smaller) +- **Mitigation**: Modern phones are fast enough + +**Risk: Dependency Issues** +- **Severity**: Medium +- **Mitigation**: Careful dependency management +- **Mitigation**: Use stable, well-maintained libraries +- **Mitigation**: Monorepo for better control + +--- + +## Next Steps + +1. ✅ **Mobile Framework Selected**: React Native +2. ⏭️ **Select State Management**: Redux vs Zustand vs Jotai +3. ⏭️ **Select Navigation**: React Navigation vs React Native Navigation +4. ⏭️ **Select Charts**: Recharts vs Chart.js +5. ⏭️ **Design Database Schema**: MongoDB collections +6. ⏭️ **Create POC**: Health sensor integration test +7. ⏭️ **Implement Authentication**: JWT + recovery phrase + +--- + +## Technology Stack Summary + +### Mobile +- **Framework**: React Native 0.73+ +- **Language**: TypeScript +- **State Management**: TBD (Redux/Zustand) +- **Navigation**: React Navigation +- **Health Sensors**: + - react-native-health (iOS) + - react-native-google-fit (Android) +- **QR Scanning**: react-native-camera +- **Encryption**: react-native-quick-crypto +- **HTTP**: Axios +- **Date**: date-fns + +### Web +- **Framework**: React 18+ +- **Language**: TypeScript +- **State Management**: TBD (Redux/Zustand) +- **Routing**: React Router +- **Charts**: Recharts +- **HTTP**: Axios +- **Date**: date-fns +- **UI**: Tailwind CSS / Chakra UI + +### Shared +- **Language**: TypeScript +- **State Management**: Redux/Zustand +- **API Client**: Axios +- **Encryption**: AES-256-GCM, PBKDF2 +- **Validation**: Zod +- **Date**: date-fns +- **Utilities**: Shared monorepo package + +--- + +## Conclusion + +**React Native + React** is the optimal choice for Normogen's mobile-first, web-complementary architecture: + +- **70-80% code sharing** between mobile and web +- **Excellent health sensor integration** (HealthKit + Health Connect) +- **Single language** (JavaScript/TypeScript) reduces development cost +- **Great chart visualization** for web companion +- **Proven at scale** in health apps +- **Faster time to market** than native or Flutter + +**Decision**: Use **React Native** for mobile (iOS + Android) and **React** for web companion app. + +--- + +## References + +- [React Native](https://reactnative.dev/) +- [React Native Health](https://github.com/anthonyecamps/react-native-health) +- [React Native Google Fit](https://github.com/StasDoskalenko/react-native-google-fit) +- [React Native Quick Crypto](https://github.com/margelo/react-native-quick-crypto) +- [React Native Camera](https://github.com/react-native-camera/react-native-camera) +- [Recharts](https://recharts.org/) +- [HealthKit Documentation](https://developer.apple.com/documentation/healthkit) +- [Google Health Connect](https://developer.android.com/health-and-fitness/google/health-connect) diff --git a/thoughts/research/2026-02-14-tech-stack-decision.md b/thoughts/research/2026-02-14-tech-stack-decision.md index 9827191..34f7e3d 100644 --- a/thoughts/research/2026-02-14-tech-stack-decision.md +++ b/thoughts/research/2026-02-14-tech-stack-decision.md @@ -7,7 +7,6 @@ ## Decisions Made ### 1. Rust Web Framework: Axum - **Decision**: Axum 0.7.x **Rationale**: @@ -17,30 +16,87 @@ - Tower middleware ecosystem - Excellent async patterns for lazy loading -**Risk Mitigation**: -- Pre-1.0 API is stable enough for production -- Strong backward compatibility maintained -- Many production deployments exist - **Reference**: [2026-02-14-performance-findings.md](./2026-02-14-performance-findings.md) --- +### 2. Mobile Framework: React Native +**Decision**: React Native 0.73+ for iOS + Android + +**Platform Strategy**: +- **Primary**: Mobile apps (iOS + Android) - Daily health tracking, sensor integration +- **Secondary**: Web browser - Extensive reporting, visualization, profile management + +**Rationale**: +- **70-80% code sharing** between mobile and web (single language: TypeScript) +- **Health sensor integration**: react-native-health (HealthKit), react-native-google-fit (Health Connect) +- **QR code scanning**: react-native-camera +- **Encryption**: react-native-quick-crypto (AES-256-GCM, PBKDF2) +- **Web charts**: Recharts for React (beautiful visualizations) +- **Team skills**: Single language (JavaScript/TypeScript) reduces development cost +- **Time to market**: Faster than native or Flutter + +**Reference**: [2026-02-14-frontend-mobile-research.md](./2026-02-14-frontend-mobile-research.md) + +--- + +### 3. Web Framework: React +**Decision**: React 18+ for web companion app + +**Rationale**: +- **70-80% code sharing** with React Native (business logic, state, API, encryption) +- **Charts**: Recharts for beautiful health data visualizations +- **Ecosystem**: Largest npm ecosystem +- **Team skills**: Single language (TypeScript) + +--- + +## Technology Stack Summary + +### Backend +- **Framework**: Axum 0.7.x +- **Runtime**: Tokio 1.x +- **Middleware**: Tower, Tower-HTTP +- **Database**: MongoDB (with zero-knowledge encryption) +- **Language**: Rust + +### Mobile (iOS + Android) +- **Framework**: React Native 0.73+ +- **Language**: TypeScript +- **Health Sensors**: react-native-health, react-native-google-fit +- **Encryption**: react-native-quick-crypto +- **HTTP**: Axios + +### Web +- **Framework**: React 18+ +- **Language**: TypeScript +- **Charts**: Recharts +- **HTTP**: Axios + +### Shared (Monorepo) +- **Language**: TypeScript +- **State**: Redux/Zustand (TBD) +- **API**: Axios +- **Encryption**: AES-256-GCM, PBKDF2 +- **Validation**: Zod +- **Date**: date-fns + +--- + ## Still To Be Decided -### 1. Frontend Framework (Priority: High) +### 1. State Management (Priority: High) **Options**: -- React (most popular, largest ecosystem) -- Vue.js (simpler learning curve) -- Svelte/SvelteKit (modern, compiled, smaller bundles) +- Redux (mature, large ecosystem) +- Zustand (simple, modern) +- Jotai (atomic, minimal) **Considerations for Normogen**: -- Client-side encryption requirements -- Chart/visualization libraries -- Mobile app code sharing -- Zero-knowledge architecture -- Real-time data updates +- 70-80% code sharing between mobile and web +- Complex state (family structure, multi-person profiles) +- Offline synchronization +- Encrypted data caching --- @@ -54,13 +110,47 @@ **Considerations for Normogen**: - Zero-knowledge password recovery - Token revocation strategy +- Multi-factor authentication (future) - Integration with client-side encryption keys - Family member access control --- +### 3. Database Schema (Priority: High) + +**Collections to Design**: +- Users (authentication, profiles) +- Families (family structure) +- Health Data (encrypted health records) +- Lab Results (encrypted lab data) +- Medications (encrypted medication data) +- Appointments (encrypted appointment data) +- Shared Links (time-limited access tokens) + +--- + +## Recommended Order + +1. Rust Framework: Axum (COMPLETED) +2. Mobile/Web Framework: React Native + React (COMPLETED) +3. State Management: Redux vs Zustand +4. Authentication: JWT with recovery phrase +5. Database Schema: Design MongoDB collections +6. Create POC: Health sensor integration test +7. Implement Core Features: Authentication, encryption, CRUD + +--- + ## Next Research Priority -Research frontend framework options for zero-knowledge encrypted health data platform. +**Research Question**: Which state management library (Redux vs Zustand) is best for Normogen's encrypted health data platform? -Estimated Research Time: 3-4 hours +**Considerations**: +- 70-80% code sharing between React Native and React +- Complex state (family structure, multi-person profiles) +- Offline synchronization +- Encrypted data caching +- TypeScript support +- Bundle size (mobile) + +**Estimated Research Time**: 1-2 hours