managarten/memoro/apps/web
Till-JS 926ca231b5 feat: add i18n localization with language switcher to all web apps
- Add svelte-i18n configuration with SSR support to all web apps
- Create LanguageSelector component for each app with brand colors
- Add German and English locale files
- Integrate language switcher into login pages via headerControls snippet
- Fix Tailwind v4 @source directives for shared package scanning
- Update AppSlider styling to match login container design

Apps updated:
- Memoro (gold #f8d62b)
- Märchenzauber (pink #FF6B9D)
- ManaDeck (purple #8b5cf6)
- ManaCore (indigo #6366f1)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-25 01:41:25 +01:00
..
docs chore: initial commit - consolidate 4 projects into monorepo 2025-11-22 23:38:24 +01:00
src feat: add i18n localization with language switcher to all web apps 2025-11-25 01:41:25 +01:00
static feat: add i18n localization with language switcher to all web apps 2025-11-25 01:41:25 +01:00
.env.example chore: initial commit - consolidate 4 projects into monorepo 2025-11-22 23:38:24 +01:00
.gitignore chore: initial commit - consolidate 4 projects into monorepo 2025-11-22 23:38:24 +01:00
.npmrc chore: initial commit - consolidate 4 projects into monorepo 2025-11-22 23:38:24 +01:00
APPLE_SIGNIN_COMPLETE_GUIDE.md chore: initial commit - consolidate 4 projects into monorepo 2025-11-22 23:38:24 +01:00
GOOGLE_SIGNIN_COMPLETE_GUIDE.md chore: initial commit - consolidate 4 projects into monorepo 2025-11-22 23:38:24 +01:00
package.json fix: add missing @manacore/shared-branding dependency to web apps 2025-11-24 22:30:44 +01:00
postcss.config.js feat: unify UI components, AppSlider, and login screens across apps 2025-11-24 21:53:44 +01:00
README.md chore: initial commit - consolidate 4 projects into monorepo 2025-11-22 23:38:24 +01:00
svelte.config.js feat: add i18n localization with language switcher to all web apps 2025-11-25 01:41:25 +01:00
tailwind.config.js feat: add i18n localization with language switcher to all web apps 2025-11-25 01:41:25 +01:00
tsconfig.json chore: initial commit - consolidate 4 projects into monorepo 2025-11-22 23:38:24 +01:00
vite.config.ts chore: initial commit - consolidate 4 projects into monorepo 2025-11-22 23:38:24 +01:00

Memoro Web - SvelteKit Companion App

Web companion application for Memoro, built with SvelteKit. This is a hybrid architecture where the web app shares the same Supabase backend with the React Native mobile apps.

Architecture

  • Frontend: SvelteKit 2.x + TypeScript
  • Styling: TailwindCSS 3.x
  • Backend: Supabase (shared with mobile apps)
  • State Management: Svelte stores
  • Internationalization: svelte-i18n

Features

Core Features

  • Authentication (Email/Password + OAuth)
  • Audio recording (Web Audio API)
  • Memo management (CRUD operations)
  • Real-time updates (Supabase Realtime)
  • Spaces & collaboration
  • Multi-language support (32 languages)
  • Dark mode + 4 theme variants
  • Responsive design

Web-Specific Features

  • Progressive Web App (PWA) support
  • Server-Side Rendering (SSR)
  • SEO optimization
  • Fast page loads

Getting Started

Prerequisites

  • Node.js 18+
  • npm or pnpm
  • Supabase project (use the same one as mobile apps)

Installation

  1. Clone the repository

  2. Install dependencies:

    npm install
    
  3. Copy .env.example to .env and add your Supabase credentials:

    cp .env.example .env
    
  4. Start the development server:

    npm run dev
    
  5. Open http://localhost:5173

Build for Production

npm run build
npm run preview

Project Structure

memoro-web/
├── src/
│   ├── lib/
│   │   ├── components/      # Reusable Svelte components
│   │   ├── stores/          # Svelte stores for state management
│   │   ├── services/        # API services (Supabase, etc.)
│   │   └── utils/           # Utility functions
│   ├── routes/
│   │   ├── (public)/        # Public routes (login, register)
│   │   ├── (protected)/     # Protected routes (dashboard, memos)
│   │   ├── +layout.svelte   # Root layout
│   │   └── +page.svelte     # Home page
│   ├── app.css              # Global styles (TailwindCSS)
│   └── app.html             # HTML shell
├── static/                  # Static assets
└── package.json

Deployment

  1. Push to GitHub
  2. Connect to Vercel
  3. Add environment variables
  4. Deploy

Netlify

  1. Push to GitHub
  2. Connect to Netlify
  3. Build command: npm run build
  4. Publish directory: build
  5. Add environment variables
  6. Deploy

License

Proprietary - All rights reserved