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:
- Supabase-Projekt anlegen auf supabase.com (kostenlos).
- 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.)
- 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.
- 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
