OS

Ein persönliches „Betriebssystem" für Studium, Projekte und Alltag: Kalender, Todos, Habits, Fokus-Timer, Projekte mit Notizen und Karteikarten, Finanzen, Wochenrückblick – in einer App, die sich auf das reduzieren lässt, was man wirklich nutzt.

Die App ist eine reine Web-App (React + Vite). Sie läuft ohne Konto und ohne Server; alle Daten liegen im Browser. Wer will, schaltet zusätzlich einen Login mit Cloud-Sync frei (Supabase) und hat denselben Stand auf allen Geräten.

Habits	Projekte	Finanzen	Unterwegs

(Screenshots mit Beispieldaten)

---

Schnellstart

npm install
npm run dev      # Entwicklung, http://localhost:5173
npm run build    # Produktions-Build nach dist/
npm run preview  # gebauten Stand lokal ansehen
npm run lint     # Oxlint
npm test         # Vitest (Logik in src/lib)
npm run test:e2e # Playwright (Oberfläche, gegen den Produktions-Build)

Ohne weitere Einrichtung startet die App im lokalen Modus: kein Login, keine Cloud, Daten nur auf diesem Gerät.

Was drin ist

Bereich	Inhalt
Start	Tagesüberblick in vier wählbaren Stilen (Standard, Gamified, Life OS, Locked In) – der Stil prägt Start, Todos und Habits
Locked In	Kompromissloser Fokus-Modus: ein Ziel, eine Phase, nur das Nötigste – solange er läuft, ist die ganze App monochrom
Kalender	Tages-, Wochen- und Monatsansicht, Tagesblöcke, ICS-Export
Todos	Eisenhower-Matrix, Dauer, Deadlines, Projektzuordnung
Wochenplan	Ziel der Woche, sieben Tagesspalten, offene Aufgaben nach Eisenhower – dazu ein Tagesplan mit den drei Prioritäten von heute
Sammeln	Notizen in Ordnern, Tags, [[Wikilinks]] und Graph-Ansicht
Habits	Gewohnheiten mit Wochenzielen, Streaks, Bereichen und Habit-Stacking
Fokus	Pomodoro-Timer mit Sessions-Protokoll
Projekte	Übersicht nach Zugehörigkeit (Area/Ordner) mit Fortschritt, dazu Ordner, Areas, Board, Blatt-Ansicht mit Blöcken, Workflow, Vorlagen
Lernen	Lernpläne und Karteikarten mit Spaced Repetition
Periode	Fokus-Perioden (14/30/90 Tage, Halbjahr, Jahr) mit Wochenzielen, Zwischenphasen und Zielmethoden (SMART, OKR, WOOP, 5/25-Regel)
Finanzen	Konten, Budgets, Ausgaben, Sparziele, CSV-Import
Beruf & Karriere	Bewerbungs-Pipeline mit Fristen, Karriereziele, Weiterbildung
Alltag	Routinen als Checklisten mit Rhythmus, Tagesbilanz und Serie – dazu der tägliche Körper-Check-in
Leisure & Kultur	Medienbibliothek: Filme, Serien, Bücher & mehr
Wochenrückblick	Wochenabschluss mit Statistik und Mentor-Hinweisen

Welche Bereiche erscheinen, legt der Einrichtungsassistent über ein Profil fest – jederzeit änderbar unter Einstellungen → Profil / Navigation.

Daten

Alle Daten liegen in localStorage, jeder Bereich unter einem eigenen Schlüssel (todos, habits, projekte …). Der gemeinsame Zugriff läuft über den Hook useStored (src/lib/useStored.js): Alle Komponenten mit demselben Schlüssel sehen Änderungen sofort.

Unter Einstellungen → Daten gibt es einen vollständigen JSON-Export und den passenden Import (Backup und Umzug auf ein anderes Gerät).

Geräte koppeln (iPhone ↔ Mac ↔ …)

Mit Supabase synchronisiert die App ihren kompletten Zustand live zwischen allen angemeldeten Geräten:

1. Supabase-Projekt anlegen auf supabase.com (kostenlos).
2. Datenbank einrichten: Im Dashboard → SQL Editor den Inhalt von supabase/schema.sql einfügen und Run klicken. (Legt die Tabelle app_state, die Sicherheitsregeln und Realtime an.)
3. Zugangsdaten eintragen: .env.example nach .env.local kopieren und VITE_SUPABASE_URL + VITE_SUPABASE_ANON_KEY aus Project Settings → API einsetzen. Beim Deployment dieselben zwei Werte als Umgebungsvariablen hinterlegen.
4. Auf beiden Geräten mit demselben Account anmelden (E-Mail + Passwort). Beim ersten Mal einmal Registrieren und den Bestätigungs-Link in der E-Mail anklicken – danach auf jedem weiteren Gerät nur noch Anmelden.

Fertig: Was du auf dem Mac änderst, erscheint sofort auf dem iPhone – und umgekehrt. Ohne Supabase-Werte läuft die App weiter im lokalen Modus.

Deployment

• Vercel: vercel.json ist hinterlegt (Vite-Build, SPA-Rewrite). Nur die beiden Supabase-Variablen unter Settings → Environment Variables ergänzen.
• GitHub Pages: .github/workflows/deploy.yml baut und veröffentlicht bei jedem Push auf main. Die Supabase-Werte kommen aus den Repository-Secrets; fehlen sie, entsteht ein Build im lokalen Modus.

Der Build nutzt base: "./", läuft also auch unter einem Unterpfad (username.github.io/OS/). Als PWA lässt sich die Seite auf dem iPhone über Teilen → Zum Home-Bildschirm installieren.

Offline: Ein Service Worker (vite-plugin-pwa) legt den gebauten Stand in den Cache – nach dem ersten Besuch startet die App auch ohne Netz, die Daten liegen ohnehin lokal. Eine neue Fassung wird im Hintergrund geholt und beim nächsten Öffnen aktiv; der Versions-Stempel unten in den Einstellungen zeigt, welcher Stand gerade läuft. Nicht im Cache liegen die dekorativen Schriften von Google Fonts – ohne Netz greifen dort die System-Schriften.

Tests

npm test prüft die Logik in src/lib mit Vitest (17 Dateien) – Datums- rechnung, Habit-Streaks und Disziplin, Spaced Repetition, Wochenbericht, Finanz-Auswertungen, Projekt-Fortschritt, Eisenhower-Einteilung, Termin- Wiederholungen, Routinen-Rhythmus und -Serie, Bewerbungs-Pipeline, Tags und Wikilinks, Navigation, Locked-In-Zeitfenster, Datums-Erkennung sowie die Zielmethoden (SMART-Prüfung, OKR-Fortschritt, 5/25-Aufteilung) und den Wochenplan (Wochenraster, Eisenhower-Verteilung, Wochenziel, Erledigt-Tag).

npm run test:e2e fährt zusätzlich den Produktions-Build hoch und klickt ihn mit Playwright durch (27 Tests): Einrichtung, alle Bereiche öffnen, Todo mit Datums-Erkennung anlegen und nachträglich ändern, Routine abhaken (inklusive Startseite und Neuladen), Termin, Bewerbung und Buchung nachträglich ändern, Bewerbung durch die Pipeline schieben, die Zielmethoden durchspielen, jeden der vier Stile auf Start, Todos und Habits – dazu ein Start mit absichtlich kaputten Altdaten und ein Durchlauf mit abgeschaltetem Netz.

.github/workflows/ci.yml führt Lint, Tests, Oberflächen-Tests und Build auf jedem Pull Request aus; deploy.yml wiederholt sie vor jedem Deployment.

Aufbau

src/
  main.jsx         Einstieg, Fehlergrenze um die App
  App.jsx          Navigation, Routing, einmalige Daten-Migrationen
  components/      Seiten und Bausteine (eine Datei pro Bereich)
  lib/             Logik ohne Darstellung: Rechnungen, Speicher, Konstanten
  index.css        Tailwind + Akzentfarben als CSS-Variablen
e2e/               Oberflächen-Tests (Playwright)
docs/              Architektur-Übersicht und Screenshots
supabase/          SQL-Schema für den Sync

Faustregel: components/ zeigt an, lib/ rechnet. Was zwei Seiten teilen, gehört in lib/ – geteilte Darstellung in components/Bausteine.jsx und components/LeerHinweis.jsx.

Ausführlicher: docs/architektur.md.

Die Versionsnummer in den Einstellungen kommt aus der package.json, das Datum daneben aus dem Build (vite.config.js → src/lib/version.js).

Technik

React 19 · Vite 8 · Tailwind CSS 4 · Oxlint · Supabase (optional)

Lizenz

MIT