managarten/memoro/apps/web/docs/FEATURE_COMPARISON.md

Feature Comparison: Web App vs Mobile App

Date: 2025-11-12 Web App Version: 0.1.0 (Beta) Mobile App Version: 2.0.3

Executive Summary

This document provides a comprehensive comparison between the Memoro Web App (SvelteKit) and the Mobile App (React Native + Expo). The web app is a functional foundation version with core features implemented, while the mobile app offers significantly more advanced functionality, personalization options, and native platform capabilities.

---

Feature Status Overview

Category	Web App	Mobile App	Status
Core Features	✅ Implemented	✅ Full Featured	Good
Advanced Features	⚠️ Basic	✅ Complete	Needs Work
UI/UX Customization	⚠️ Limited	✅ Extensive	Needs Work
Monetization	⚠️ Display Only	✅ Fully Integrated	Needs Work
Platform Features	⚠️ Web-Limited	✅ Native	Expected

---

🎯 Missing Main Features

1. Memo Detail Page (/memos/[id])

Priority: HIGH

• Mobile: Dedicated detail page for individual memos with full-screen view
• Web: Only available in split-view within dashboard (no direct URL access)
• Impact: Users cannot bookmark or share specific memo URLs

2. Space Detail Page (/spaces/[id])

Priority: HIGH

• Mobile: Dedicated page with member management, space settings, shared memos
• Web: Only overview page exists, no detail view
• Impact: Limited collaboration features

3. Audio Archive (/audio-archive)

Priority: MEDIUM

• Mobile: Separate page for archived/older recordings
• Web: Missing completely
• Impact: No organization of old recordings

4. Memories Page (/memories)

Priority: MEDIUM

• Mobile: Dedicated overview of all AI-generated memories across memos
• Web: Memories only visible within individual memo details
• Impact: No global view of AI insights

5. Prompts Management (/prompts)

Priority: HIGH

• Mobile: Separate page for managing AI prompts
• Web: Missing completely
• Impact: Cannot manage or customize AI prompts

6. Create Blueprint (/create-blueprint)

Priority: HIGH

• Mobile: Users can create custom blueprints
• Web: Only displays public blueprints (read-only)
• Impact: No content customization for users

---

🚀 Missing Advanced Features

7. Onboarding Flow

Priority: MEDIUM

• Mobile: Welcome screens for new users with feature introduction
• Web: Missing
• Impact: Poor first-time user experience

8. Location Services

Priority: LOW

• Mobile: Location-based features with react-native-maps integration
• Web: Missing (browser limitations apply)
• Impact: No geo-tagging of memos

9. Push Notifications

Priority: MEDIUM

• Mobile: Full push notification support via @notifee/react-native
• Web: Missing (Web Push API could be implemented)
• Impact: No real-time alerts for collaboration/processing

10. Network Status & Offline Mode

Priority: MEDIUM

• Mobile: Network detection with offline support and queue
• Web: Missing
• Impact: No offline functionality, poor mobile connection handling

11. Analytics Integration

Priority: LOW

• Mobile: PostHog integration for user behavior tracking
• Web: Missing
• Impact: No product analytics

12. Rating System

Priority: LOW

• Mobile: In-app rating functionality
• Web: Missing (placeholder in settings exists)
• Impact: No user feedback collection

13. Toast Notification System

Priority: MEDIUM

• Mobile: Dedicated toast system for user feedback
• Web: Only browser alert() dialogs
• Impact: Poor UX for feedback messages

14. Error Handling Framework

Priority: HIGH

• Mobile: Comprehensive error handling feature with retry strategies
• Web: Basic try/catch blocks
• Impact: Poor error recovery and user experience

---

🎨 Missing UI/UX Features

15. Theme Variants

Priority: MEDIUM

• Mobile: 4 color variants (Lume/Gold, Nature/Green, Stone/Slate, Ocean/Blue)
• Web: Only Light/Dark mode, no color variants
• Impact: Less personalization

Mobile Theme System:

// 4 theme variants with light/dark modes each
themes: ['lume', 'nature', 'stone', 'ocean']
// 13 semantic color tokens per theme
// Defined in tailwind.config.js

16. Language Switcher UI

Priority: MEDIUM

• Mobile: UI to switch between 32 supported languages
• Web: i18n prepared (svelte-i18n installed) but no UI to switch
• Impact: Cannot change language after initial detection

Supported Languages (32): Arabic, Bengali, Bulgarian, Chinese, Czech, Danish, Dutch, English, Estonian, Finnish, French, Gaelic, German, Greek, Hindi, Croatian, Hungarian, Indonesian, Italian, Japanese, Korean, Lithuanian, Latvian, Maltese, Norwegian, Persian, Polish, Portuguese, Romanian, Russian, Serbian, Slovak, Slovenian, Spanish, Swedish, Turkish, Ukrainian, Urdu, Vietnamese

17. Credits/Mana Dashboard

Priority: HIGH

• Mobile: Dedicated credits feature with real-time display, usage tracking, and analytics
• Web: Only shown as info on subscription page
• Impact: No transparency about credit usage

18. Developer Mode

Priority: LOW

• Mobile: Extensive developer options and debugging tools
• Web: Easter egg exists (7 clicks on version), but very limited functionality
• Impact: Harder to debug for advanced users

---

💰 Missing Monetization Features

19. RevenueCat Integration

Priority: HIGH

• Mobile: Full RevenueCat SDK integration with purchase flow
• Web: Only static display of plans, no actual purchases
• Impact: Cannot monetize web users

Mobile Implementation:

// react-native-purchases 8.10.1
- Cross-platform subscription management
- Purchase lifecycle handling
- Receipt validation
- Restoration across devices

20. Active Subscription Management

Priority: HIGH

• Mobile: Manage subscription, cancel, restore purchases, view history
• Web: Only displays available plans
• Impact: Users must use mobile app for subscription changes

---

🔧 Missing Technical Features

21. Background Audio Recording

Priority: HIGH (Web Platform Limitation)

• Mobile: AudioRecordingV2 with full background support
  • iOS: Background audio capability, audio session management
  • Android: Foreground service, wake locks
  • Pause/resume, real-time monitoring, crash recovery
• Web: Web Audio API (background recording not possible in browsers)
• Impact: Recording stops when tab is inactive

Mobile Audio Features:

// M4A format with AAC encoding (MONO for compatibility)
// High-quality recording presets
// Real-time audio level metering
// Automatic segmentation for crash recovery
// Cloud storage integration (Supabase)
// Azure transcription with speaker labeling

22. Platform-Specific Storage

Priority: MEDIUM

• Mobile: Secure storage (iOS Keychain, Android KeyStore)
• Web: localStorage (less secure, can be cleared)
• Impact: Less secure token storage

23. Migration System

Priority: LOW

• Mobile: Data migration framework between app versions
• Web: Missing
• Impact: Manual data migration needed for breaking changes

24. Support System

Priority: LOW

• Mobile: In-app support feature
• Web: Only mailto link in settings
• Impact: Less integrated support experience

---

📊 Detailed Feature Comparison

Blueprints Page

Feature	Mobile	Web
View public blueprints	✅	✅
Filter by category	✅	✅
Search blueprints	✅	✅
Activate/deactivate	✅	✅
Create custom blueprints	✅	❌
Edit blueprints	✅	❌
Delete blueprints	✅	❌
View blueprint details	✅ Modal	✅ Modal
Add prompts to blueprint	✅	❌
Advice tips (32 languages)	✅	❌

Statistics Page

Feature	Mobile	Web
Overview card	✅	✅
Productivity metrics	✅	✅
Engagement stats	✅	✅
Insights generation	✅	⚠️ Basic
Chart visualization	✅	✅
Time period filters	✅	⚠️ Limited
Export statistics	✅	❌
Specialized components	✅ (14 components)	⚠️ (6 components)

Settings Page

Feature	Mobile	Web
Theme mode (light/dark)	✅	✅
Theme variant selection	✅ (4 variants)	❌
Language selection	✅ (32 languages)	❌ (no UI)
Push notifications	✅	❌
Audio quality settings	✅	❌
Auto-upload settings	✅	❌
Privacy settings	✅	⚠️ Basic
Account deletion	✅	⚠️ Placeholder
Developer mode	✅ Full	⚠️ Limited
App version info	✅	✅
Contact support	✅ In-app	⚠️ mailto
Rate app	✅	⚠️ Placeholder

Dashboard/Home

Feature	Mobile	Web
Recording button	✅	✅
Memo list	✅	✅
Audio player	✅	✅
Real-time updates	✅	✅
Context menu	✅ Full	⚠️ Basic
Split view	❌	✅ (unique to web)
Tab system	❌	✅ (unique to web)
Keyboard shortcuts	❌	✅ (unique to web)
Memo filtering	✅	⚠️ Limited
Tag filtering	✅	⚠️ Via pill filter
Sort options	✅	❌

Subscription Page

Feature	Mobile	Web
View plans	✅	✅
Billing toggle (monthly/yearly)	✅	✅
Purchase subscription	✅ RevenueCat	❌ Static
Buy mana packages	✅ RevenueCat	❌ Static
View current plan	✅	⚠️ Hardcoded
Usage statistics	✅ Live	⚠️ Static
Mana costs overview	✅	✅
Restore purchases	✅	❌
Cancel subscription	✅	❌
Subscription history	✅	❌

---

🏗️ Architectural Differences

State Management

Mobile:

// Zustand for global state
// 33 feature modules with own stores
// Context API for feature-specific state

Web:

// Svelte stores (writable, derived)
// Simpler state management
// Less modular architecture

Component Architecture

Mobile:

Atomic Design System:
- atoms/ (16 components)
- molecules/ (21 components)
- organisms/ (9 components)
- statistics/ (14 components)
Total: 60+ components

Web:

Flat Component Structure:
- components/ (~29 components)
- components/statistics/ (6 components)
Total: ~35 components

Navigation

Mobile:

// Expo Router (file-based)
// Native navigation with gestures
// Tab navigation at bottom
// Stack navigation for details

Web:

// SvelteKit routing (file-based)
// Browser navigation
// Sidebar navigation
// Split-view for multiple memos

---

🎯 Priority Recommendations

Must-Have (High Priority)

1. ✅ Memo Detail Page - Essential for deep-linking and SEO
2. ✅ Create Blueprint - Core feature for user engagement
3. ✅ Prompts Management - Required for AI customization
4. ✅ Error Handling Framework - Critical for stability
5. ✅ RevenueCat Integration - Required for monetization
6. ✅ Credits Dashboard - Transparency for users
7. ✅ Space Detail Page - Core collaboration feature

Should-Have (Medium Priority)

8. ⚠️ Toast Notification System - Better UX
9. ⚠️ Theme Variants - User personalization
10. ⚠️ Language Switcher UI - i18n already prepared
11. ⚠️ Onboarding Flow - First-time user experience
12. ⚠️ Network Status Detection - Better error handling
13. ⚠️ Audio Archive - Content organization
14. ⚠️ Memories Page - AI insights overview

Nice-to-Have (Low Priority)

15. 💡 Push Notifications - Engagement (Web Push API)
16. 💡 Analytics Integration - Product insights
17. 💡 Rating System - User feedback
18. 💡 Developer Mode - Power users
19. 💡 Location Services - Geo-tagging
20. 💡 Support System - Better UX than mailto

---

📈 Web-Specific Advantages

Despite missing features, the web app has some unique strengths:

1. Split-View System - View multiple memos simultaneously (not in mobile)
2. Tab System - Browser-like tab management for memos
3. Keyboard Shortcuts - Power user productivity (Cmd+W, Cmd+[, Cmd+])
4. Resizable Panels - Flexible layout customization
5. No App Store Dependency - Instant updates without review
6. SEO Potential - Discoverable via search (when memo URLs added)
7. Cross-Platform Desktop - Works on Windows, Mac, Linux

---

🔄 Next Steps

Phase 1: Core Parity (Weeks 1-4)

• Implement memo detail page with routing
• Implement space detail page
• Add create blueprint functionality
• Add prompts management page
• Implement comprehensive error handling

Phase 2: Monetization (Weeks 5-6)

• Integrate RevenueCat Web SDK
• Implement purchase flows
• Add credits dashboard
• Add subscription management

Phase 3: UX Enhancement (Weeks 7-10)

• Add toast notification system
• Implement 4 theme variants
• Add language switcher UI
• Create onboarding flow
• Add audio archive page
• Add memories overview page

Phase 4: Advanced Features (Weeks 11+)

• Network status detection
• Web Push notifications
• Analytics integration
• Enhanced statistics
• Developer mode enhancements

---

📝 Notes

• Some features are platform limitations (e.g., background audio recording not possible in browsers)
• The mobile app has 3+ years of development vs web app early beta
• Web app focuses on desktop productivity while mobile is on-the-go recording
• Architecture differs: Mobile uses Atomic Design + 33 feature modules, Web uses simpler component structure

---

Document maintained by: Claude Code Last updated: 2025-11-12 Review cycle: Monthly or after major releases