SSC-15: Mobile App Development (iOS & Android)

[Sakeeb91]

Mobile App Development (iOS & Android)

Linear Issue: SSC-15
Priority: High
Feature Type: Cross-Platform Feature (Available to all subscription tiers)

Overview

Create native mobile applications for iOS and Android to enable on-the-go studying and lecture capture. The mobile app brings StudySync's core features to students' pockets with offline support, camera integration for note capture, audio recording for lectures, and push notifications for study reminders.

Tech Stack: React Native with Expo for cross-platform efficiency

Current State

• Backend: All APIs are mobile-ready (REST endpoints)
• Authentication: JWT-based auth works on mobile
• File Upload: MinIO with presigned URLs supports mobile uploads
• Subscription: Stripe integration ready for mobile

Implementation Plan

📄 Full implementation plan: docs/SSC-15-IMPLEMENTATION-PLAN.md

---

Tech Stack Decision: React Native

Factor	React Native	Flutter	Native
Code Reuse	High (shared TS types)	Low	None
Team Knowledge	Existing React skills	New (Dart)	Two codebases
Time to Market	Fast	Medium	Slow
Performance	Good (95% native)	Excellent	Best

Decision: React Native with Expo SDK 50+

---

Phase 1: Project Setup (Commits 1-3)

Commit 1: Initialize React Native project

• Create apps/mobile with Expo
• Configure TypeScript and Metro bundler
• Add to Turborepo pipeline

Commit 2: Create shared package

• Create packages/shared workspace
• Move shared TypeScript interfaces
• Create base API client

Commit 3: Mobile authentication

• Secure token storage (expo-secure-store)
• Biometric authentication
• Login/register screens

---

Phase 2: Offline-First Database (Commits 4-6)

Commit 4: Set up WatermelonDB

```typescript
// Local database schema
tables: [
'flashcard_sets', // Offline flashcard sets
'flashcards', // Individual cards
'quizzes', // Cached quizzes
'questions', // Quiz questions
'study_sessions', // Local study tracking
'pending_uploads', // Upload queue
]
```

Commit 5: Create database models

• Model classes with relationships
• Sync tracking fields (is_dirty, synced_at)

Commit 6: Implement sync service

• Background sync with expo-background-fetch
• Conflict resolution (server wins if not dirty)
• Bidirectional sync

---

Key Features

Offline Mode

• Full flashcard review offline
• Quiz taking offline
• Automatic sync when online
• Pending changes queue

Camera Capture

• Document detection
• Multi-page capture
• OCR text extraction
• Photo enhancement

Audio Recording

• Lecture recording
• Background recording
• Upload for transcription

Push Notifications

• Study reminders
• Due cards alerts
• Streak protection
• Deep linking

---

New API Endpoints

Method	Endpoint	Description
POST	/api/devices/register	Register push notification token
DELETE	/api/devices/unregister	Unregister device
GET	/api/devices/notifications/prefs	Get notification preferences
PUT	/api/devices/notifications/prefs	Update preferences
POST	/api/sync/flashcards	Batch sync flashcards
POST	/api/sync/study-sessions	Batch sync sessions
GET	/api/mobile/dashboard	Aggregated dashboard data
GET	/api/mobile/due-cards	Due cards (paginated)

---

Database Schema Additions

```prisma
model Device {
id String @id @default(cuid())
userId String
token String // Push token
platform Platform // IOS, ANDROID
deviceName String?
isActive Boolean @default(true)

user User @relation(...)

@@unique([userId, token])
}

model NotificationPreference {
id String @id @default(cuid())
userId String @unique
studyReminders Boolean @default(true)
reminderTime String @default("09:00")
reminderDays Int[] @default([1,2,3,4,5])
streakAlerts Boolean @default(true)
dueCardAlerts Boolean @default(true)

user User @relation(...)
}

enum Platform {
IOS
ANDROID
WEB
}
```

---

Checklist

Project Setup

• Initialize Expo project in apps/mobile
• Create packages/shared for shared types
• Configure Turborepo pipeline
• Set up TypeScript

Authentication

• Secure token storage
• Biometric authentication
• Login/register screens
• Auth context and hooks

Offline Database

• Set up WatermelonDB
• Create all models
• Implement sync service
• Background sync task

Core Features

• Dashboard screen
• Flashcard sets list
• Flashcard study mode (swipe gestures)
• Quiz list and taking
• Profile and settings

Camera & Upload

• Camera capture screen
• Document detection
• Multi-page capture
• OCR integration
• Upload queue

Audio Recording

• Recording screen
• Background recording
• Recording list
• Upload for transcription

Push Notifications

• Configure Expo Notifications
• Device registration endpoint
• Notification preferences UI
• Study reminders
• Deep linking

Backend Updates

• Device model in Prisma
• NotificationPreference model
• Device registration endpoint
• Sync endpoints
• Mobile dashboard endpoint

UI/UX

• Dark mode support
• Design system
• Haptic feedback
• Loading/empty states
• Pull-to-refresh
• Offline indicator

App Store

• Configure EAS Build
• App icons (all sizes)
• Screenshots
• App store descriptions
• Privacy policy

---

Success Criteria

• All 25 commits completed and passing CI
• App launches in <3 seconds
• Offline mode works seamlessly
• Sync completes without data loss
• Push notifications delivered reliably
• Camera produces clear captures
• Audio records lectures clearly
• Crash-free rate >99%
• iOS and Android feature parity
• App store rating >4.5 stars (post-launch)
• 70%+ of users use mobile app (post-launch)

---

Repository Structure

```
apps/
mobile/ # New React Native app
src/
app/ # Expo Router screens
components/ # UI components
services/ # API, sync, notifications
stores/ # Zustand state
db/ # WatermelonDB models
packages/
shared/ # NEW: Shared types & API client
```

---

Dependencies

This feature depends on:

• Authentication System (SSC-10) ✅ Complete
• Content Upload System (SSC-6) ✅ Complete
• AI Flashcard Generation (SSC-7) ✅ Complete
• Interactive Quiz System (SSC-8) ✅ Complete
• Payment System (SSC-16) ✅ Complete

Integrates with:

• Analytics Dashboard (SSC-17) - Sync study sessions
• Exam Prediction (SSC-14) - View predictions on mobile
• Assignment Help (SSC-13) - View outlines on mobile

---

Platform Priorities

1. iOS - Higher-paying user base
2. Android - Larger user base
3. PWA - Web fallback (existing)

---

Future Enhancements

1. Apple Watch / Wear OS quick review
2. iOS 14+ and Android widgets
3. CarPlay / Android Auto audio review
4. Siri / Google Assistant integration
5. AR-enhanced flashcard study