Multimodal Voice Notes (Frontend)

Modernes, mobiles React-Frontend für persönliche Sprachnotizen mit n8n-CRUD-API als Backend.

Features

• Notizen anzeigen in einer responsiven Kartenansicht (mobile first).
• Suche nach Titel, Kurzbeschreibung, Kategorie und Tags (Key Topics, People, Places).
• Filter nach Kategorie.
• Detailansicht mit vollständiger Zusammenfassung, Transkript, Topics, People, Places, Mood, Action Items, Reflection Notes und Bildstatus.
• CRUD vollständig:
  • Erstellen (POST)
  • Bearbeiten (PATCH, optional zentral auf PUT umstellbar)
  • Löschen (DELETE mit Bestätigungsdialog)
• Robuste Datenverarbeitung für Felder, die als Array oder JSON-String von der API kommen können.
• Zustände für UX: Loading, Error, Empty State.

Tech Stack

• Vite
• React
• TypeScript
• Tailwind CSS
• GitHub Actions (Build + Deploy)
• Tailscale + rsync für sicheren Deploy auf Proxmox-LXC
• Nginx als statisches Hosting

Projektstruktur

src/
├─ api/
│  └─ notesApi.ts
├─ components/
│  ├─ Header.tsx
│  ├─ NoteCard.tsx
│  ├─ NoteDetail.tsx
│  ├─ NoteForm.tsx
│  └─ StatusBadge.tsx
├─ types/
│  └─ voiceNote.ts
├─ utils/
│  └─ normalizeNote.ts
├─ App.tsx
├─ index.css
└─ main.tsx

Lokales Setup

1. Abhängigkeiten installieren:

npm install

2. .env anlegen (auf Basis von .env.example):

cp .env.example .env

3. .env befüllen:

VITE_API_BASE_URL=https://n8n.example.ts.net/webhook
VITE_API_KEY=change-me

4. Development-Server starten:

npm run dev

5. Produktionsbuild testen:

npm run build
npm run preview

API-Konfiguration

Die API-Aufrufe sind in src/api/notesApi.ts gekapselt.

Endpunkte

• GET ${VITE_API_BASE_URL}/notes
• POST ${VITE_API_BASE_URL}/notes
• PATCH ${VITE_API_BASE_URL}/notes?id=<id>
• DELETE ${VITE_API_BASE_URL}/notes?id=<id>

Auth Header

Alle Requests senden automatisch:

x-api-key: <VITE_API_KEY>

PATCH ↔ PUT umstellen

In src/api/notesApi.ts gibt es:

const UPDATE_METHOD: 'PATCH' | 'PUT' = 'PATCH';

Falls dein n8n-Workflow PUT erwartet, ändere nur diese Konstante.

Formularverhalten für Array-Felder

Die Felder keyTopics, people, places, mood, actionItems, reflectionNotes werden im UI kommasepariert eingegeben. Beim Speichern werden sie zu Arrays konvertiert.

Beim Laden akzeptiert das Frontend:

• echte Arrays (z. B. ['a', 'b'])
• JSON-Strings (z. B. "[\"a\",\"b\"]")
• einfache CSV-Strings (z. B. "a,b")

Deployment über GitHub Actions

Workflow-Datei: .github/workflows/deploy.yml

Trigger

• Push auf master

Schritte

1. Checkout
2. Node 20 Setup
3. npm ci
4. npm run build
5. Join ins Tailnet via tailscale/github-action@v3
6. SSH-Key laden (webfactory/ssh-agent)
7. known_hosts setzen
8. dist/ via rsync auf deinen LXC übertragen

Benötigte GitHub Secrets

• TAILSCALE_AUTHKEY
• DEPLOY_HOST
• DEPLOY_USER
• DEPLOY_PATH
• DEPLOY_SSH_KEY

Nginx Beispielkonfiguration (Proxmox-LXC)

server {
    listen 80;
    server_name _;

    root /var/www/voice-notes;
    index index.html;

    location / {
        try_files $uri /index.html;
    }
}

Sicherheits-Hinweis

VITE_API_KEY liegt im Browser-Bundle und ist daher für Benutzer sichtbar. Für echte Produktionsumgebungen sind empfehlenswert:

• ein Backend/BFF als Schutzschicht,
• kurzlebige Tokens,
• oder Zugriff nur über ein privates Netzwerk (z. B. Tailscale-only).