morethanadiagnosis-hub/mobile

MoreThanADiagnosis Mobile Platform

React Native + Expo mobile app for iOS and Android.

Job ID: MTAD-IMPL-2025-11-18-CL

🏗 Technology Stack

• Framework: React Native 0.73+
• Runtime: Expo 51+
• Navigation: Expo Router
• Language: TypeScript
• State Management: Zustand
• API Client: Axios + React Query

📦 Project Structure

mobile/
├── app/                         # Expo Router (App Router)
│   ├── _layout.tsx             # Root layout
│   ├── index.tsx               # Home screen
│   ├── (auth)/                 # Auth group
│   │   ├── login.tsx
│   │   ├── signup.tsx
│   │   └── _layout.tsx
│   ├── (tabs)/                 # Tab navigation
│   │   ├── _layout.tsx
│   │   ├── blog.tsx
│   │   ├── forum.tsx
│   │   ├── merch.tsx
│   │   ├── podcast.tsx
│   │   ├── profiles.tsx
│   │   ├── resources.tsx
│   │   └── tribute.tsx
│   └── dashboard.tsx           # User dashboard
├── components/
│   ├── common/                 # Shared components
│   │   ├── Header.tsx
│   │   ├── Button.tsx
│   │   ├── Input.tsx
│   │   └── Card.tsx
│   ├── layouts/                # Layout components
│   │   ├── SafeAreaLayout.tsx
│   │   └── TabsLayout.tsx
│   └── mvps/                   # MVP-specific components
│       ├── blog/
│       ├── forum/
│       ├── merch/
│       ├── podcast/
│       ├── profiles/
│       ├── resources/
│       └── tribute/
├── lib/
│   ├── api.ts                  # API client
│   ├── auth.ts                 # Auth utilities
│   ├── hooks.ts                # Custom hooks
│   ├── store.ts                # Zustand store
│   └── types.ts                # TypeScript types
├── assets/                     # Images, icons, fonts
├── app.json                    # Expo config
├── package.json
├── tsconfig.json
└── README.md (this file)

🚀 Quick Start

Prerequisites

• Node.js 18+
• npm 8+
• Expo CLI: npm install -g eas-cli

Installation

1. Install dependencies

   npm install
   

2. Set up environment variables

   cp .env.example .env.local
   

3. Start development server

   npm start
   

4. Run on device/emulator

   # iOS
   npm run ios
   
   # Android
   npm run android
   
   # Web
   npm run web
   

📱 Platform Support

• iOS: 13.0+
• Android: 6.0+
• Web: Responsive design via Expo Web

🎨 Design System

Integrates with MoreThanADiagnosis Design System (../../openspec/specs/design-system.md).

Accessible Components:

• Button (primary, secondary, ghost, danger)
• Input (text, email, password)
• Card
• Modal
• Navigation (tabs, drawer, stack)
• Form helpers

All components support:

• Keyboard navigation
• Screen reader (VoiceOver/TalkBack)
• High contrast mode
• Dynamic text sizing
• Reduced motion

🔐 Authentication

Uses OAuth2/OIDC flow with JWT tokens.

Secure Token Storage:

• Access tokens: Memory (expires in 15 min)
• Refresh tokens: Secure storage (Expo SecureStore)
• Automatic token refresh

See lib/auth.ts for implementation.

📊 Features (MVPs)

1. Blog

• View published articles
• Infinite scroll
• Offline caching
• Share via platform

2. Forum

• Browse categories/threads
• Read discussions
• Real-time updates
• Compose posts

3. Merch Store

• Product catalog
• Image gallery
• Shopping cart
• Checkout

4. Podcast

• Episode list
• Audio player
• Download episodes
• Playback queue

5. Profiles

• View user profiles
• Display pseudonym
• Privacy-conscious design
• Edit own profile

6. Resources

• Search knowledge base
• Filter by tag
• Offline reading
• Bookmarks

7. Tribute

• View memorials
• Create tribute entry
• Share memories
• Respectful layout

🔄 API Integration

Communicates with FastAPI backend via /api/v1/.

import { apiClient } from '@/lib/api'

const posts = await apiClient.get('/blog')

See lib/api.ts for client setup.

🧪 Testing

Development Testing:

npm start
# Scan QR code with Expo Go app

Build Testing:

npm run build:ios
npm run build:android

📦 Building for Production

iOS

npm run build:ios
npm run submit  # Submit to App Store

Android

npm run build:android
npm run submit  # Submit to Google Play

Requirements

• Apple Developer Account (iOS)
• Google Play Developer Account (Android)
• EAS CLI configured

♿ Accessibility (WCAG 2.2 AA+)

• VoiceOver (iOS) and TalkBack (Android) support
• Semantic component labels
• Keyboard navigation
• High contrast mode
• Dynamic text sizing
• Reduced motion animations

📚 Documentation

• Design System: ../../openspec/specs/design-system.md
• API Spec: ../../backend/README.md
• Architecture: ../../openspec/specs/architecture.md
• Expo Docs: https://docs.expo.dev

🛠 Troubleshooting

Connection Issues

1. Ensure backend is running
2. Check API base URL in .env.local
3. Verify network connectivity

Build Errors

1. Clear cache: expo cache --clear
2. Reinstall: npm install
3. Check Node version

iOS Issues

• Ensure Xcode is updated
• Try: npm install && npm run ios

Android Issues

• Ensure Android Studio/SDK is installed
• Try: npm install && npm run android

🤝 Contributing

1. Create feature branch: claude/feature-name-2025-11-18
2. Follow OpenSpec lifecycle
3. Ensure accessibility compliance
4. Test on iOS and Android
5. Link commits to Job IDs

Status

• ✅ Project scaffolding complete
• ⏳ Component development (pending)
• ⏳ Screen implementation (pending)
• ⏳ Integration testing (pending)
• ⏳ App Store submission (pending)

---

Job ID: MTAD-IMPL-2025-11-18-CL Last Updated: 2025-11-18 Maintained By: Claude (Mobile Agent)