mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-27 11:32:54 +02:00
refactor: restructure
monorepo with apps/ and services/ directories
This commit is contained in:
Wuesteon
parent
25824ed0ac
commit
ff80aeec1f
4062 changed files with 2592 additions and 1278 deletions
|
|
@ -1,474 +0,0 @@
|
|||
# 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:**
|
||||
```typescript
|
||||
// 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:**
|
||||
```typescript
|
||||
// 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:**
|
||||
```typescript
|
||||
// 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:**
|
||||
```typescript
|
||||
// Zustand for global state
|
||||
// 33 feature modules with own stores
|
||||
// Context API for feature-specific state
|
||||
```
|
||||
|
||||
**Web:**
|
||||
```typescript
|
||||
// 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:**
|
||||
```typescript
|
||||
// Expo Router (file-based)
|
||||
// Native navigation with gestures
|
||||
// Tab navigation at bottom
|
||||
// Stack navigation for details
|
||||
```
|
||||
|
||||
**Web:**
|
||||
```typescript
|
||||
// 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
|
||||
Loading…
Add table
Add a link
Reference in a new issue