Lernende haben Material in verschiedenen Formaten (PDF, Fotos von Notizen) und benötigen…

Lernende haben Material in verschiedenen Formaten (PDF, Fotos von Notizen) und benötigen eine zentrale App, die daraus automatisch Karteikarten und Lernzettel erstellt und das Lernen über ein bewertetes Spaced-Repetition-System (Anki-Logik) sowie einen Klausur-Modus mit Timer steuert. Ziel: Zeitersparnis bei der Karten-Erstellung und effizienteres Lernen durch gezielte Wiederholung.

Erfolg messbar an:
(1) Nutzer erstellt pro Woche mindestens 1 Ordner mit mind. 2 Dokumenten und erhält automatisch Karteikarten;
(2) Nutzer absolviert pro Woche mind. 1 Klausur mit 15–25 Fragen und erhält eine Prozent-Auswertung;
(3) Karteikarten werden über mindestens 3 Tage wiederholt, wobei die Intervalle sich nach der Anki-Logik richten (< 1 Min, < 5 Min, ~10 Min, mehrere Stunden).

Default: Annahme, dass die App primär für Einzelpersonen gedacht ist, nicht für Klassen oder Schulen.

• Plattform: Responsive Web-App, hostbar auf Vercel/Netlify (kostenlose Plattform).
• Datenhaltung: Nur ein Gerät, alle Daten bleiben lokal im Browser (IndexedDB/LocalStorage), kein Konto erforderlich.
• KI & Textauszug: OpenAI GPT-4o-mini für Text und Karten-Generierung, PDF.js für den Textauszug im Browser.

Rolle: Lernender (einzeln, ohne Konto).
Es gibt nur eine Benutzerrolle. Alle Daten bleiben auf dem Gerät des Nutzers. Es gibt keine Zusammenarbeit, keine Klassen und keine Lehrer-Accounts.

1. Nutzer öffnet die Web-App und legt einen Ordner für ein Thema an.
2. Nutzer lädt PDF-Dateien oder Bilder hoch; PDF.js extrahiert Text im Browser, OpenAI generiert Karteikarten und einen Lernzettel pro Dokument oder für alle Dokumente im Ordner auf einmal.
3. Nutzer wählt Lernmodus: einzelne Dokumente des Ordners oder den gesamten Ordner mit allen Karten in einem gemeinsamen Stapel.
4. Nutzer lernt Karteikarten: Vorderseite anzeigen (mit Bild, falls vorhanden), Rückseite aufdecken, eine von 4 Bewertungen wählen, System berechnet nächstes Wiederholungsintervall (Anki-Logik).
5. Nutzer startet einen Klausur-Modus: 15–25 Fragen, Multiple-Choice und freie Texteingabe, 30-Minuten-Countdown, Prozent-Auswertung am Ende.
6. Falsch beantwortete Klausur-Fragen werden automatisch als neue Karteikarten in den gemeinsamen Ordner-Stapel zurückgespielt.
7. Nutzer ruft Lernzettel auf und liest die kompakte Zusammenfassung.
8. Im Ordner-Detail können einzelne Dokumente gelöscht werden.

Ordner- und Dokumentenverwaltung:

• Ordner anlegen, umbenennen, löschen.
• PDF- und Bild-Upload mit lokalem Textauszug (PDF.js für PDFs; Bilder werden gespeichert und angezeigt, ohne OCR).
• Dokumente pro Ordner auflistbar mit Status und Bildvorschau.
• Einzelne Dokumente im Ordner löschbar.

Karteikarten-Generierung:

• Was es tut: OpenAI erstellt aus extrahiertem Text und Bildreferenzen Frage/Antwort-Karteikarten.
• Eingabe: Extrahierter Text plus Bildreferenzen aus dem Dokument.
• Regeln: Mindestens 7 Karteikarten pro Dokument; Vorderseite = Frage/Fachbegriff, optional mit Bild; Rückseite = Antwort + Erklärung. Wenn eine Frage auf ein Bild Bezug nimmt, wird das Bild direkt neben oder unter der Vorderseite angezeigt. Bilder werden aus PDF.js oder hochgeladenen Bilddateien als Blob-/Data-URL geladen. Es erfolgt keine OCR auf Bildern.
• Karten aller Dokumente eines Ordners landen in einem gemeinsamen Stapel für das Lernen.

Lernen pro Ordner oder pro Auswahl:

• Was es tut: Der Nutzer kann wählen, ob er nur einzelne Dokumente oder den gesamten Ordner lernt.
• Regeln: Beim Lernen über den gesamten Ordner werden alle Karteikarten aller Dokumente des Ordners in einen gemeinsamen Stapel zusammengefasst. Die Wiederholungsintervalle (Anki-Logik) gelten pro Karte, nicht pro Dokument.

Must:

• Ordner anlegen, umbenennen und löschen.
• PDF- und Bild-Upload mit lokalem Textauszug (PDF.js).
• KI-generierte Karteikarten (mind. 7 pro Dokument, Vorderseite = Frage/Fachbegriff, Rückseite = Antwort + Erklärung).
• Spaced-Repetition mit 4 Bewertungsstufen und Intervallen (<1 Min, <5 Min, ~10 Min, mehrere Stunden).
• Klausur-Modus mit 15/20/25 Fragen je nach Schwierigkeit, Mix Multiple-Choice/freier Text, 30-Minuten-Timer, Prozent-Auswertung, Fehler-Rückführung.
• Automatischer Lernzettel als Text/Markdown.
• Lokale Speicherung aller Daten (IndexedDB/LocalStorage), kein Konto.

Later:

• Export/Import von Ordnern als JSON.
• Dunkelmodus.
• Push-Benachrichtigungen für fällige Wiederholungen.
• Mehrere Dokumente pro Ordner gleichzeitig.

Never:

• Mehrbenutzer-Modus, Klassen, Lehrer-Accounts.
• Cloud-Synchronisation zwischen Geräten.
• Eigener Backend-Server oder Cloud-Datenbank.
• Bezahlfunktionen oder Abonnements.

Ordner-Detail:

• Liste hochgeladener Dokumente mit Status (Text extrahiert / Karteikarten generiert) und Bildvorschau bei Bild-Dokumenten.
• Button „Datei hochladen“ (PDF/Bild).
• Jede Datei hat einen eigenen Lösch-Button, damit einzelne Dateien aus dem Ordner entfernt werden können, ohne den ganzen Ordner zu löschen.

Karteikarten-Lernansicht:

• Vorderseite: Frage oder Fachbegriff (groß, zentral).
• Optional: Bild aus dem Dokument direkt unter der Frage (maximale Breite 100%, abgerundete Ecken 8px, grauer Platzhalter mit Hinweis „Bild nicht verfügbar“, wenn die Bild-URL fehlt oder nicht geladen werden kann).
• Button „Rückseite anzeigen“.
• Rückseite: Antwort und Erklärung.
• 4 Bewertungs-Buttons: „Sehr schwer“, „Schwer“, „Gut“, „Einfach“.
• Fortschrittsanzeige (z. B. 5 von 20 Karten).

Lernmodus-Auswahl:

• Beim Öffnen eines Ordners kann der Nutzer wählen: nur einzelne Dokumente lernen oder den gesamten Ordner mit allen Karten in einem gemeinsamen Stapel.

• Komponentenbibliothek: Radix UI primitives mit Tailwind CSS; keine schweren UI-Kits.
• Farben: Primär #2563EB (Blau), Sekundär #059669 (Grün), Gefahr #DC2626 (Rot), Hintergrund #FAFAFA (hell) / #111827 (dunkel), Text #111827 (hell) / #F3F4F6 (dunkel).
• Schrift: Inter, 16px Basis, Überschriften 20–32px.
• Eckigeradius: 8px (Karten), 4px (Buttons).
• Abstände: 16px Standard, 24px Sektionen.
• Modus: Helle Standardansicht; Dunkelmodus ist Later, nicht Must-have.
• Tönungsstil: Klar, schulbuchartig, wenig Ablenkung, große Karten-Vorderseiten, gut lesbare Timer.
• Bildanzeige: Bild direkt unter oder neben der Karten-Vorderseite platziert, max. Breite 100%, gerundete Ecken 8px, bei Fehlender/ungültiger Bild-URL grauer Platzhalter mit Hinweis „Bild nicht verfügbar“. Referenz-Apps: Anki (Karten-Ansicht), Quizlet (Lernmodi), Notion (Lernzettel).
• UI-Referenz aus Screenshot: Themen-Kacheln mit Farbmarkierungen (Grün = Biologie, Orange = Geschichte, Blau = Mathematik), Ordner-Liste links, Fortschrittsbalken pro Thema, Kachel für „Alle Themen ansehen“. Siehe images/screenshot-1.jpg.

OpenAI API (GPT-4o-mini) für: Karteikarten-Generierung aus extrahiertem Text und Bildreferenzen, Klausur-Fragen-Generierung aus Karteikarten, Lernzettel-Zusammenfassung. API-Schlüssel kommt vom Nutzer (LocalStorage), kein Backend-Proxy. PDF.js (browserseitig) für PDF-Textauszug. Bilder werden als Data-URLs oder Blob-URLs im IndexedDB gespeichert und in der Karteikarten-Ansicht angezeigt. Keine weiteren Integrationen.

Keine Benutzerkonten, kein Login, keine Registrierung. Alle Daten bleiben auf dem Gerät. OpenAI API-Schlüssel wird vom Nutzer einmalig in den Einstellungen eingegeben und im LocalStorage gespeichert (Sicherheitshinweis: jeder mit Zugriff auf den Browser kann den Key auslesen; Alternative wäre ein Backend-Proxy, liegt aber außerhalb des Must-have-Scope).

Performance: Textauszug und KI-Generierung dürfen die UI nicht blockieren (Web Worker oder async). PDF-Extraktion unter 30 Sekunden für bis zu 20 Seiten. Datenschutz: Keine Daten verlassen das Gerät außer die an OpenAI gesendeten Texte; API-Schlüssel nie im Quellcode hardcodiert. Barrierefreiheit: Tastaturbedienung für alle Buttons, Kontrast nach WCAG AA, Screenreader-Labels für Karten-Vorderseite/Rückseite und Timer.

Keine Karteikarten vorhanden: Klausur-Modus zeigt Hinweis „Erst Dokumente hochladen und Karteikarten generieren“ statt leerer Quiz. Weniger als 15 Karten im Ordner: Klausur nutzt alle verfügbaren Karten (15–25 ist Ziel, nicht Hard-Mindestanzahl). PDF ohne Text (gescannte Seiten): Hinweis „Kein Text extrahierbar, bitte manuellen Text eingeben“. OpenAI-Key ungültig oder fehlt: Einstellungen zeigen Fehler, KI-Buttons deaktiviert. Timer abläuft während Nutzer bei Frage: Klausur wird automatisch beendet und ausgewertet. Browser-Tab geschlossen: Fortschritt bleibt in IndexedDB erhalten, Timer läuft nicht weiter (kein Hintergrund-Service). LocalStorage voll: Fehlermeldung beim Speichern des API-Schlüssels. Bild in Dokument fehlt oder kann nicht geladen werden: Karteikarte wird ohne Bild angezeigt, Hinweis „Bild nicht verfügbar“. Keine OCR auf hochgeladenen Bildern oder gescannten PDF-Seiten.

Reine Frontend-Web-App (React oder Vanilla JS), statisch gehostet auf Vercel oder Netlify (kostenlose Tier). Alle Daten lokal im Browser via IndexedDB (strukturierte Daten: Ordner, Dokumente, Karteikarten, Wiederholungsintervalle) und LocalStorage (nur OpenAI API-Schlüssel). PDF.js für PDF-Textauszug im Browser. OpenAI GPT-4o-mini für Karteikarten- und Lernzettel-Generierung. Kein Tesseract.js, keine OCR auf Bildern. Kein Backend-Server, keine Cloud-Datenbank, keine eigene Auth. OpenAI API-Schlüssel kommt direkt vom Nutzer-Browser (Risiko: jeder mit Browser-Zugriff kann den Key auslesen; ein Backend-Proxy wäre sicherer, liegt aber außerhalb des Must-have-Scope).

Not needed: Neues Projekt, kein bestehender Code.

1. Ordner anlegen/löschen und lokale Speicherung in IndexedDB.
2. Datei-Upload, PDF.js-Textauszug und lokale Speicherung der Dokumente.
3. OpenAI-Integration: Karteikarten-Generierung und Speicherung pro Dokument.
4. Spaced-Repetition-Lernansicht mit 4 Bewertungsstufen und Intervallberechnung.
5. Klausur-Modus mit Zufallsauswahl, Timer, Prozent-Auswertung und Fehler-Rückführung.
6. Lernzettel-Generierung, Einstellungen (API-Key) und „Alle Daten löschen“.

• Ordner können angelegt, umbenannt und gelöscht werden; die Liste zeigt alle Ordner mit Dokumentenzahl.
• PDF- und Bild-Upload extrahiert Text im Browser (PDF.js); Status wechselt auf „Text extrahiert“.
• Pro Dokument werden mindestens 7 Karteikarten generiert, jede mit Vorderseite und Rückseite; Karteikarten mit Bildbezug zeigen das Bild neben der Vorderseite (siehe UI-Referenz images/screenshot-1.jpg).
• Einzelne Dokumente können im Ordner-Detail gelöscht werden, ohne den Ordner zu löschen.
• Karten-Wiederholung: 4 Bewertungsstufen berechnen Intervalle (<1 Min, <5 Min, ~10 Min, mehrere Stunden); fällige Karten werden in der Lernliste angezeigt.
• Lernen über den gesamten Ordner: Alle Karten aller Dokumente des Ordners werden in einem gemeinsamen Stapel angezeigt.
• Klausur-Modus: Leicht=15, Mittel=20, Schwer=25 Fragen; Fragen zufällig aus Ordner-Karten; 30-Minuten-Timer läuft im Hintergrund; bei Ablauf/Abgabe wird Prozentzahl korrekter Antworten angezeigt.
• Falsch beantwortete Klausur-Fragen werden als neue Karteikarten in den gemeinsamen Ordner-Stapel zurückgespielt.
• Lernzettel wird als strukturierter Text/Markdown generiert und kann kopiert oder heruntergeladen werden.
• OpenAI-API-Schlüssel wird in Einstellungen gespeichert und bleibt nach Seitenneuladen erhalten.
• Alle Daten bleiben lokal (IndexedDB/LocalStorage); kein Netzwerkaufruf außer an OpenAI.
• Barrierefreiheit: Alle Buttons per Tastatur bedienbar, WCAG-AA-Kontrast, Screenreader-Label für Karten, Timer und Bildvorschauen.

• Host: Vercel (kostenlose Hobby-Tier) oder Netlify (kostenlose Starter-Tier), Entscheidung liegt beim Deployment-Verantwortlichen.
• Build: statische Frontend-Build-Dateien (React oder Vanilla JS), keine Server-Funktionen.
• Umgebungen: Produktion (vercel.app / netlify.app) und optional Preview-Deployments pro Pull-Request.
• Secrets: keine serverseitigen Secrets; OpenAI-API-Schlüssel wird vom Nutzer clientseitig in LocalStorage gespeichert (Sicherheitshinweis: lokal auslesbar, kein Backend-Proxy im Scope).
• CI/CD: automatischer Build und Deploy bei Push auf Hauptbranch über GitHub-Verbindung des Hosts.
• Domäne: kostenlose Subdomain des Hosts; eigene Domain optional später.

• Default: Der Nutzer gibt seinen eigenen OpenAI-API-Schlüssel einmalig in den Einstellungen ein; der Schlüssel bleibt im LocalStorage (Sicherheitshinweis: lokal auslesbar, kein Backend-Proxy im Scope).
• Default: Keine PWA, nur responsive Web-App.