diff --git a/docs/mobile-app-plan.md b/docs/mobile-app-plan.md new file mode 100644 index 00000000..33f1de6a --- /dev/null +++ b/docs/mobile-app-plan.md @@ -0,0 +1,638 @@ +# Boardsesh Mobile App Development Plan + +## Executive Summary + +This document outlines the implementation plan for building native Android and iOS apps using **React Native with Expo**. The plan prioritizes early validation of high-risk technical components and positions Party Mode (real-time collaboration) as a core differentiating feature. + +--- + +## Table of Contents + +1. [Technology Stack](#technology-stack) +2. [Reusable Assets](#reusable-assets) +3. [Components Requiring Rebuild](#components-requiring-rebuild) +4. [Package Structure](#package-structure) +5. [Implementation Milestones](#implementation-milestones) +6. [Validation Strategy](#validation-strategy) +7. [Risk Assessment](#risk-assessment) +8. [Success Criteria](#success-criteria) + +--- + +## Technology Stack + +| Concern | Library | Rationale | +|---------|---------|-----------| +| Framework | Expo SDK 52+ | Simplified native module management, OTA updates | +| Navigation | Expo Router | File-based routing, deep linking built-in | +| UI Library | Tamagui | Performance-focused, great theming, cross-platform | +| Bluetooth | react-native-ble-plx | Mature, well-documented, handles iOS/Android differences | +| SVG Rendering | react-native-svg | Direct port path from web SVG components | +| Gestures | react-native-gesture-handler | Smooth drag-drop, pinch-zoom | +| Animations | react-native-reanimated | 60fps animations, worklet-based | +| State | React Context + useReducer | Same pattern as web, easy code sharing | +| GraphQL HTTP | graphql-request | Lightweight, TypeScript-first | +| GraphQL WS | graphql-ws | Same library as web, proven compatibility | +| Data Fetching | @tanstack/react-query | Caching, background sync, same as web | +| Offline Storage | expo-sqlite | Relational queries, better than AsyncStorage | +| Secure Storage | expo-secure-store | Keychain/Keystore for tokens | +| Forms | React Hook Form + Zod | Validation, same schemas as web | + +--- + +## Reusable Assets + +### Direct Reuse (No Changes) + +| Package | What's Reusable | +|---------|-----------------| +| `packages/backend` | Entire package - GraphQL API, WebSocket subscriptions | +| `packages/shared-schema` | GraphQL schema, TypeScript types, operations | +| `packages/db` | Server-side only, unchanged | + +### Reuse with Extraction + +Create `packages/shared-logic` to share: + +``` +packages/shared-logic/ +├── src/ +│ ├── queue/ +│ │ ├── reducer.ts # Queue state reducer (from web) +│ │ ├── actions.ts # Action creators +│ │ └── types.ts # Queue types +│ ├── board/ +│ │ ├── hold-states.ts # HOLD_STATE_MAP constants +│ │ ├── colors.ts # Color encoding utilities +│ │ └── config.ts # Board configurations +│ ├── bluetooth/ +│ │ └── protocol.ts # Packet framing, encoding (platform-agnostic) +│ ├── climb/ +│ │ ├── transformers.ts # Climb data utilities +│ │ └── validators.ts # Zod schemas +│ └── index.ts +└── package.json +``` + +### Adapt from Web + +| Source | Adaptation Needed | +|--------|-------------------| +| `theme-config.ts` | Convert to Tamagui token format | +| `graphql/operations.ts` | Already portable, just import | +| URL slug encoding | Adapt for deep linking | + +--- + +## Components Requiring Rebuild + +### UI Layer (Complete Rewrite) + +| Web (Ant Design) | Mobile (Tamagui) | +|------------------|------------------| +| `` search | `` bottom sheet | +| `` queue | `` with drag handles | +| `` climb | Custom `` | +| `` dialogs | `` or `` | +| `
` inputs | Tamagui ``, `