Research: React Native + React selected for mobile and web

- Completed mobile-first platform strategy research
- React Native selected for iOS and Android mobile apps
- React selected for web companion app
- 70-80% code sharing between mobile and web
- Excellent health sensor integration (HealthKit, Health Connect)
- QR scanning, encryption, and background sync support
- Created comprehensive frontend research documentation
- Updated README with platform strategy
- Updated tech stack decisions

Key advantages:
- Single language (TypeScript) reduces development cost
- 70-80% code sharing between mobile and web
- Excellent health sensor integration
- Great chart visualization for web companion
- Faster time to market

Next: State management research (Redux vs Zustand)
This commit is contained in:
goose 2026-02-14 11:39:08 -03:00
parent eef5aed28e
commit 307f4964fa
4 changed files with 963 additions and 33 deletions

View file

@ -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