normogen/docs/adr/frontend-decision-summary.md
goose 17efc4f656 docs: reconcile documentation with reality (P3)
Make the project's documentation match the code and remove the sprawl. The docs
claimed Phase 2.8 (drug interactions) was 'planning/0%' and the backend '~91%
complete' — both wrong: 2.8 is implemented and live, plus the P0/P1 security
and test work is done. Five root CI/CD docs described a 'docker-build' CI job
that was removed; ~18 backend/ status snapshots and ~24 docs/implementation
duplicates cluttered the tree.

Deletions (85 files):
- Root: 4 stale CI/CD reports (CI-CD-{COMPLETION-REPORT,IMPLEMENTATION-SUMMARY,
  STATUS-REPORT,FINAL-STATUS}.md) — all describe the removed docker-build job.
- backend/: 18 phase/build/fix snapshots and code-dump .txt files.
- docs/: the 3 one-time reorg reports; ~17 docs/implementation duplicates and
  process artifacts; 4 stale docs/development CI docs + git snapshots;
  redundant deployment/testing files.
- thoughts/: STATUS.md (said Phase 2.4 in-progress), superseded phase notes and
  duplicative research inputs. tmp/ (928KB of CI debug logs, gitignored).

Moves (18 files):
- 9 genuine decision records -> docs/adr/ (Architecture Decision Records),
  date-prefixes stripped, with an index README.
- 8 historical-but-valuable phase plans/specs + the old CI-CD-FINAL-SOLUTION ->
  docs/archive/ (now-populated, with a README explaining it's superseded
  material). thoughts/ tree removed.

Rewrites (13 files) to match reality:
- Drop the fake '% complete' figures everywhere in favor of Implemented /
  In-Progress / Planned with concrete endpoint/feature lists.
- Phase 2.8 -> Implemented; add /api/interactions/* and /api/auth/{refresh,
  logout} to the endpoint lists; fix 'Rust 1.93' -> edition 2021.
- Add a Security section (token_version validation, hashed refresh-token
  persistence, fail-fast config, real-IP audit) and correct the test-coverage
  and deployment claims to reality.
- New canonical docs/development/CI-CD.md (4 jobs: format/clippy/build/test,
  mongo service, no docker-build + why).
- README, docs/README, product/{STATUS,ROADMAP,PROGRESS,README,introduction},
  implementation/README, development/README, testing/README, AI_AGENT_GUIDE,
  .cursorrules, .gooserules all updated.

Verified: greps for 'Phase 2.8 (Planning)', 'PLANNING (0%)', 'Rust 1.93',
'91%/10%/85% complete', and 'docker-build' return nothing outside docs/archive;
all internal doc links resolve; backend/src untouched (cargo build clean).
2026-06-27 16:02:16 -03:00

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

  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.