Ihre Projekte. Ein System. Jedes Gerät.
Sie haben den ersten Schritt getan — und genau der macht den Unterschied. Was Sie hier erwartet, ist kein theoretisches Framework. Es ist ein System, das bereits in der Praxis eingesetzt wird: eine Echtzeit-synchronisierte Projekt-Matrix, gebaut mit KI und Supabase.
Was Sie in 8 Schritten lernen:
Konzept verstehen
Was eine Projekt-Matrix ist und warum sie Excel und Notion überlegen ist.
Datenbank einrichten
Supabase als Backend — kostenlos, sicher, in 10 Minuten bereit.
Frontend bauen
HTML, CSS, JavaScript — alles in einer Datei, keine Frameworks nötig.
Live schalten
In Squarespace einbetten und auf allen Geräten synchron nutzen.
Was ist eine Projekt-Matrix?
Eine strukturierte Übersicht aller Aufgaben und Phasen — live synchronisiert, auf jedem Gerät verfügbar, immer aktuell. Ein intelligentes Spreadsheet, das sich selbst aktualisiert.
Warum nicht einfach Excel oder Notion?
Excel / Sheets
Keine Echtzeit-Sync auf eigener Domain. Kein Custom-Design. Abhängigkeit.
Notion / Trello
Nicht einbettbar auf Ihrer Website. Fremdes Branding. Eingeschränkte Anpassung.
Ihre eigene Matrix
100% Ihr Design. Ihre Domain. Ihre Daten. Echtzeit. Kostenlos.
Die Matrix in Aktion
Ein Live-Beispiel: 48 Funktionen, 7 Sektoren, Echtzeit-Sync auf iPhone, iPad und MacBook.
| Status | Phase | Funktion | Sektor | Notizen |
|---|---|---|---|---|
| OK | 1.1 | Apple Sign-In | S1 Core | — |
| P1 | 1.3 | Design-Engine | S1 Core | Theme korrigieren |
| P0 | 0.4 | SecureStore | S0 | Kritisch! |
| OK | 1.7 | Dark Mode Lock | S1 Core | — |
Jeder Status hat eine eigene Farbe: Grün = OK, Rot = Kritisch, Orange = Design.
Grüner Punkt = Supabase verbunden. Änderungen werden sofort synchronisiert.
Jede Funktion hat ein Notizfeld für Entscheidungen, Bugs oder Ideen.
Struktur planen
Definieren Sie zuerst Ihre Spalten. Was wollen Sie tracken? Welche Status-Werte brauchen Sie?
ID
Text / UUID
Phase
Text (1.1, 2.3)
Funktion
Text
Status
Enum
Notizen
Text
Supabase einrichten
Supabase ist eine Open-Source-Alternative zu Firebase — kostenlos, mit PostgreSQL und Echtzeit-Sync.
Die SQL-Query:
CREATE TABLE matrix_state (
id TEXT PRIMARY KEY DEFAULT 'default',
data JSONB NOT NULL DEFAULT '{}',
updated_at TIMESTAMPTZ DEFAULT now()
);
-- Sicherheit
ALTER TABLE matrix_state ENABLE ROW LEVEL SECURITY;
CREATE POLICY "read" ON matrix_state FOR SELECT TO anon USING (true);
CREATE POLICY "write" ON matrix_state FOR ALL TO anon USING (true);Frontend bauen
1. Client initialisieren
const SB_URL = 'https://IHRE-URL.supabase.co';
const SB_KEY = 'Ihr-Anon-Key';
const H = {
'Content-Type': 'application/json',
'apikey': SB_KEY,
'Authorization': 'Bearer ' + SB_KEY
};2. Daten laden
async function load() {
const r = await fetch(
SB_URL + '/rest/v1/matrix_state?id=eq.default',
{ headers: H }
);
return (await r.json())[0]?.data || {};
}3. Daten speichern
async function save(data) {
await fetch(
SB_URL + '/rest/v1/matrix_state?id=eq.default',
{ method: 'PATCH', headers: H,
body: JSON.stringify({ data }) }
);
}Probieren Sie es:
Tippen Sie etwas — es wird automatisch gespeichert:
In Squarespace einbetten
Häufige Probleme:
Nicht sichtbar?
JavaScript im Code-Block muss aktiviert sein. In der Vorschau blockiert Squarespace manchmal Scripts.
Styling kaputt?
Custom CSS hinzufügen: .sqs-block-code { padding: 0 !important; }
Supabase-Fehler?
URL und Anon-Key prüfen. RLS-Policies müssen korrekt gesetzt sein.
Zusammenfassung
Einsatzmöglichkeiten:
Projektmanagement
Redaktionsplanung
Event-Koordination
Inventar-Tracking
Team-Aufgaben
Kunden-Status
Wie viel Zeit sparen Sie?
Wie viele Projekte verwalten Sie?
5 Projekte
Der KI-Prompt, der alles baut
Kopieren Sie diesen Prompt in Claude, ChatGPT oder Cursor.
Erstelle eine interaktive Projekt-Matrix als einzelne HTML-Datei
mit eingebettetem CSS und JavaScript.
Die Matrix soll mit Supabase verbunden sein fuer Echtzeit-Sync.
Spalten: [Sektor, Phase, Funktion, Status, Prioritaet, Notizen]
Status-Werte: [OK, P0, P1, P2, P3] mit Farbcodierung
Funktionalitaet:
- Inline-Editing, Auto-Save (1.5s Debounce)
- Verbindungs-Indikator, Suchfeld, Filter
- Fortschrittsbalken, Checkboxen, Responsive
Supabase Config:
const SB_URL = 'IHRE_URL';
const SB_KEY = 'IHR_KEY';
Stil: Clean, professionell, Squarespace-kompatibel.Die NOVURA Projekt-Matrix verwaltet 48 Funktionen in 7 Sektoren — mit Echtzeit-Sync auf iPhone, iPad und MacBook.
Masterprompt + 3 Bonus-Vorlagen per E-Mail
Kostenlos. Kein Spam. Jederzeit abbestellbar.
Der vollständige Masterprompt
3 Matrix-Vorlagen für verschiedene Branchen
5 fortgeschrittene Supabase-Tricks
Wir respektieren Ihre Privatsphäre. Bereits 340+ Downloads.
