# 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**
   ```bash
   npm install
   ```

2. **Set up environment variables**
   ```bash
   cp .env.example .env.local
   ```

3. **Start development server**
   ```bash
   npm start
   ```

4. **Run on device/emulator**
   ```bash
   # 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/`.

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

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

See `lib/api.ts` for client setup.

## 🧪 Testing

**Development Testing**:
```bash
npm start
# Scan QR code with Expo Go app
```

**Build Testing**:
```bash
npm run build:ios
npm run build:android
```

## 📦 Building for Production

### iOS
```bash
npm run build:ios
npm run submit  # Submit to App Store
```

### Android
```bash
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)