307f4964fa
- 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)
3.3 KiB
3.3 KiB
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
- ✅ Mobile Framework: React Native
- ⏭️ State Management: Redux vs Zustand
- ⏭️ Database Schema Design
- ⏭️ Create Health Sensor POC
- ⏭️ 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.