managarten/apps/picture

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

# Dependencies installieren
pnpm install

# Alle Apps starten
pnpm dev

Einzelne Apps starten

# 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:

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:

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:

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

🛠️ Scripts

Development

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

pnpm build            # Alle Apps bauen
pnpm build:mobile     # Mobile Production Build
pnpm build:web        # Web Production Build
pnpm build:landing    # Landing Page Build

Quality

pnpm lint             # Alle Packages linten
pnpm type-check       # TypeScript Type Checking

Cleanup

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:

# 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 für Details zur Supabase & Replicate Integration.

📖 Dokumentation

• Monorepo Architektur
• Shared UI Components
• Database Plan
• Project Plan

🚢 Deployment

Mobile (EAS Build)

cd apps/mobile
eas build --platform ios --profile production
eas build --platform android --profile production

Web (Cloudflare Pages)

cd apps/web
pnpm build
# Deploy über Cloudflare Pages Dashboard
# Build Command: pnpm build
# Output Directory: build

Landing (Cloudflare Pages)

cd apps/landing
pnpm build
# Deploy über Cloudflare Pages Dashboard
# Build Command: pnpm build
# Output Directory: dist

🧰 Tech Stack Summary

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:

# 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:

# 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

# 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