mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 21:41:09 +02:00
d36b321d9d
Applied formatting to 1487+ files using pnpm format:write - TypeScript/JavaScript files - Svelte components - Astro pages - JSON configs - Markdown docs 13 files still need manual review (Astro JSX comments)
318 lines
5.8 KiB
Markdown
318 lines
5.8 KiB
Markdown
# Picture - AI Image Generation Platform
|
|
|
|
Ein Monorepo mit drei Apps für AI-basierte Bildgenerierung und -verwaltung.
|
|
|
|
## 🏗️ Architektur
|
|
|
|
```
|
|
picture/
|
|
├── apps/
|
|
│ ├── mobile/ # React Native + Expo (iOS & Android)
|
|
│ ├── web/ # SvelteKit Web App
|
|
│ └── landing/ # Astro Landing Page
|
|
├── packages/
|
|
│ ├── shared/ # Geteilte Business Logic, Types, API
|
|
│ └── memoro-ui/ # Shared UI Component Library
|
|
└── supabase/ # Database & Edge Functions
|
|
```
|
|
|
|
## 🚀 Quick Start
|
|
|
|
### Voraussetzungen
|
|
|
|
- Node.js 20+
|
|
- pnpm 9+
|
|
- Expo CLI (für Mobile)
|
|
|
|
### Installation
|
|
|
|
```bash
|
|
# Dependencies installieren
|
|
pnpm install
|
|
|
|
# Alle Apps starten
|
|
pnpm dev
|
|
```
|
|
|
|
### Einzelne Apps starten
|
|
|
|
```bash
|
|
# Mobile App (React Native + Expo)
|
|
pnpm dev:mobile
|
|
# Expo Server läuft standardmäßig auf Port 8081
|
|
|
|
# Web App (SvelteKit)
|
|
pnpm dev:web
|
|
# Dev Server: http://localhost:5173
|
|
|
|
# Landing Page (Astro)
|
|
pnpm dev:landing
|
|
# Dev Server: http://localhost:4321
|
|
```
|
|
|
|
## 📦 Apps
|
|
|
|
### Mobile App (`apps/mobile`)
|
|
|
|
**Tech Stack:**
|
|
|
|
- React Native 0.81 + Expo SDK 54
|
|
- Expo Router (File-based Routing)
|
|
- NativeWind (Tailwind für React Native)
|
|
- Zustand (State Management)
|
|
|
|
**Features:**
|
|
|
|
- ✅ Native iOS & Android Experience
|
|
- ✅ Bildgenerierung mit AI Models
|
|
- ✅ Gallery mit Infinite Scroll
|
|
- ✅ Image Detail View mit Zoom
|
|
- ✅ Archive Funktionalität
|
|
- ✅ Offline-fähig
|
|
|
|
**Starten:**
|
|
|
|
```bash
|
|
pnpm dev:mobile
|
|
```
|
|
|
|
### Web App (`apps/web`)
|
|
|
|
**Tech Stack:**
|
|
|
|
- SvelteKit 2.x + Svelte 5
|
|
- Tailwind CSS
|
|
- Server-Side Rendering (SSR)
|
|
|
|
**Features:**
|
|
|
|
- ✅ Volle Web-Anwendung
|
|
- ✅ Responsive Design
|
|
- ✅ SEO-optimiert durch SSR
|
|
- ✅ Image Upload mit Drag & Drop
|
|
- ✅ Masonry Gallery Layout
|
|
|
|
**Starten:**
|
|
|
|
```bash
|
|
pnpm dev:web
|
|
```
|
|
|
|
### Landing Page (`apps/landing`)
|
|
|
|
**Tech Stack:**
|
|
|
|
- Astro 5.x
|
|
- Tailwind CSS
|
|
- Static Site Generation
|
|
|
|
**Features:**
|
|
|
|
- ✅ Ultraschnell (0 JS by default)
|
|
- ✅ SEO-optimiert
|
|
- ✅ Marketing-optimiert
|
|
- ✅ Statically Generated
|
|
|
|
**Starten:**
|
|
|
|
```bash
|
|
pnpm dev:landing
|
|
```
|
|
|
|
## 📚 Shared Packages
|
|
|
|
### `@picture/shared`
|
|
|
|
Geteilte Business Logic zwischen allen Apps:
|
|
|
|
- Supabase Types & API Clients
|
|
- Image Utilities
|
|
- Validation Logic
|
|
- Date Formatting
|
|
- Constants
|
|
|
|
### `@picture/memoro-ui`
|
|
|
|
Shared UI Component Library mit CLI Tool:
|
|
|
|
- Wiederverwendbare UI Components
|
|
- Cross-platform (React Native & Web)
|
|
- CLI für Component Management
|
|
|
|
Siehe [UI Library Docs](./packages/memoro-ui/README.md)
|
|
|
|
## 🛠️ Scripts
|
|
|
|
### Development
|
|
|
|
```bash
|
|
pnpm dev # Alle Apps parallel starten
|
|
pnpm dev:mobile # Nur Mobile App
|
|
pnpm dev:web # Nur Web App
|
|
pnpm dev:landing # Nur Landing Page
|
|
```
|
|
|
|
### Build
|
|
|
|
```bash
|
|
pnpm build # Alle Apps bauen
|
|
pnpm build:mobile # Mobile Production Build
|
|
pnpm build:web # Web Production Build
|
|
pnpm build:landing # Landing Page Build
|
|
```
|
|
|
|
### Quality
|
|
|
|
```bash
|
|
pnpm lint # Alle Packages linten
|
|
pnpm type-check # TypeScript Type Checking
|
|
```
|
|
|
|
### Cleanup
|
|
|
|
```bash
|
|
pnpm clean # Alle Build-Artefakte & node_modules löschen
|
|
```
|
|
|
|
## 🗄️ Datenbank
|
|
|
|
Das Projekt verwendet **Supabase** für:
|
|
|
|
- PostgreSQL Database
|
|
- Authentication
|
|
- Storage (für Bilder)
|
|
- Edge Functions (AI Image Generation)
|
|
|
|
### Environment Variables
|
|
|
|
Erstelle eine `.env` Datei im Root mit:
|
|
|
|
```bash
|
|
# Supabase
|
|
SUPABASE_URL=https://your-project.supabase.co
|
|
SUPABASE_ANON_KEY=your-anon-key
|
|
SUPABASE_SERVICE_KEY=your-service-key
|
|
```
|
|
|
|
### Supabase Setup
|
|
|
|
Siehe [SETUP_REPLICATE.md](./docs/SETUP_REPLICATE.md) für Details zur Supabase & Replicate Integration.
|
|
|
|
## 📖 Dokumentation
|
|
|
|
- [Monorepo Architektur](./docs/features/MONOREPO_ARCHITECTURE.md)
|
|
- [Shared UI Components](./docs/features/SHARED_UI_COMPONENTS.md)
|
|
- [Database Plan](./docs/Database_Plan.md)
|
|
- [Project Plan](./docs/Project_Plan.md)
|
|
|
|
## 🚢 Deployment
|
|
|
|
### Mobile (EAS Build)
|
|
|
|
```bash
|
|
cd apps/mobile
|
|
eas build --platform ios --profile production
|
|
eas build --platform android --profile production
|
|
```
|
|
|
|
### Web (Cloudflare Pages)
|
|
|
|
```bash
|
|
cd apps/web
|
|
pnpm build
|
|
# Deploy über Cloudflare Pages Dashboard
|
|
# Build Command: pnpm build
|
|
# Output Directory: build
|
|
```
|
|
|
|
### Landing (Cloudflare Pages)
|
|
|
|
```bash
|
|
cd apps/landing
|
|
pnpm build
|
|
# Deploy über Cloudflare Pages Dashboard
|
|
# Build Command: pnpm build
|
|
# Output Directory: dist
|
|
```
|
|
|
|
## 🧰 Tech Stack Summary
|
|
|
|
```yaml
|
|
Package Manager: PNPM Workspaces
|
|
Language: TypeScript 5.x
|
|
Backend: Supabase (PostgreSQL, Auth, Storage)
|
|
AI Models: Replicate API
|
|
|
|
Mobile:
|
|
- React Native 0.81
|
|
- Expo SDK 54
|
|
- Expo Router
|
|
- NativeWind
|
|
|
|
Web:
|
|
- SvelteKit 2.x
|
|
- Svelte 5
|
|
- Tailwind CSS
|
|
- Vite
|
|
|
|
Landing:
|
|
- Astro 5.x
|
|
- Tailwind CSS
|
|
- Static Generation
|
|
```
|
|
|
|
## 🔧 Troubleshooting
|
|
|
|
### "Tried to register two views with the same name"
|
|
|
|
Dieses Problem tritt auf, wenn React Native Dependencies dupliziert sind (typisch bei PNPM Workspaces).
|
|
|
|
**Fix:**
|
|
|
|
```bash
|
|
# Alle node_modules und Lock-File löschen
|
|
rm -rf node_modules apps/*/node_modules packages/*/node_modules pnpm-lock.yaml
|
|
|
|
# Neu installieren
|
|
pnpm install
|
|
```
|
|
|
|
Die PNPM overrides in `package.json` sollten dies in Zukunft verhindern.
|
|
|
|
### Metro Bundler Cache Issues
|
|
|
|
Wenn die Mobile App nicht korrekt lädt:
|
|
|
|
```bash
|
|
# Metro Cache löschen
|
|
pnpm dev:mobile -- --clear
|
|
|
|
# Watchman Cache löschen
|
|
watchman watch-del-all
|
|
```
|
|
|
|
### TypeScript findet `@picture/shared` nicht
|
|
|
|
1. Überprüfe `tsconfig.json` paths in der jeweiligen App
|
|
2. Stelle sicher, dass `babel-plugin-module-resolver` installiert ist (Mobile)
|
|
3. Restart TypeScript Server in deiner IDE
|
|
4. Bei Mobile: Check `metro.config.js` watchFolders
|
|
|
|
### Supabase Types nicht gefunden
|
|
|
|
```bash
|
|
# Types neu generieren
|
|
cd packages/shared
|
|
pnpm generate:types
|
|
```
|
|
|
|
## 🤝 Contributing
|
|
|
|
1. Erstelle einen Feature Branch
|
|
2. Committe deine Changes
|
|
3. Pushe zum Branch
|
|
4. Öffne einen Pull Request
|
|
|
|
## 📝 License
|
|
|
|
Private Project
|