Frontend: prediction-assistant
Frontend Architecture
Turbo Native iOS shell wrapping Rails views with Capacitor native bridge. Answers: how does the user interact with the app?
Diagram
Components
| Component | Purpose | Notes |
|---|---|---|
| Turbo Native Shell | iOS wrapper that renders Rails HTML views natively | No React Native or Flutter. Server-rendered HTML with native navigation chrome. |
| Capacitor Bridge | Native API access from web views | Biometric auth, push notifications, secure keychain storage for API keys |
| Rails Views (Hotwire) | Server-rendered UI with Turbo Frames and Streams | Strategy dashboard, position views, trade history |
| Turbo Frames | Partial page updates without full reload | Dashboard sections update independently |
| Turbo Streams | Real-time DOM updates via WebSocket | Live position values, watchdog trigger alerts |
| Strategy Dashboard | Main user interface showing portfolio state | Live positions, trade history, active watchdog triggers, performance metrics |
Key Decisions
- Turbo Native over React Native — Server-rendered HTML wrapped in a native shell. One codebase (Rails views) serves both web and mobile. Faster iteration, no JavaScript framework churn.
- Capacitor for native bridge — Provides access to iOS APIs (keychain, biometrics, push) without leaving the Turbo Native pattern. Lighter than Cordova.
- Hotwire for interactivity — Turbo Frames for partial updates, Turbo Streams for real-time pushes. No SPA complexity. Dashboard sections refresh independently.
- Strategy dashboard as primary view — Users see live positions, trade history, and active watchdog triggers in one view. Performance metrics show cumulative P&L and win rate.
- Kalshi app handles fund management — Our app never shows deposit/withdrawal UI. Users manage funds directly in the Kalshi app. We show read-only balance for context.