AboutVibe-ProjekteBlog
CTRL K

Meine Projekte

Ein Blick auf meine neuesten Tech-Projekte

Herzlich willkommen zu einem kleinen Showcase! Ich möchte euch heute vier spannende Projekte vorstellen, die ich in meiner Freizeit entwickelt habe. Die Bandbreite reicht von einem hochspezialisierten Schul-Tool über einen KI-gestützten Schachtrainer bis hin zu einem waschechten Retro-Shooter im Browser! Schaut mal rein, was alles möglich ist, wenn man moderne Web-Technologien in die Hand nimmt.

Alle Projekte und ihre Quellen können über den Link zu meinem Freizeit-GitHub unten im Footer erreicht werden.

Inhaltsverzeichnis

SaphBewertungs-Assistent (SaphBewertungBerlin)

Zweck und Hintergrund

Der Bewertungs-Assistent ist eine webbasierte Single-Page-Application, die Lehrkräfte im Land Berlin bei der strukturierten Erfassung und Verwaltung von Schülerbewertungen in der Schulanfangsphase (Saph) unterstützt. Das Tool orientiert sich dabei an der Schul Z 101 01.25.

Lehrerinnen in Berlin stehen vor der Aufgabe, am Ende des Jahres ein Formular mit Bewertungen ausfüllen zu müssen, welches dann zu einem zentralen PDF umgearbeitet wird. Das Problem dabei: Sie bekommen das Formular erst am Ende des Schuljahres. Bewertungen erfolgen aber das ganze Jahr hindurch. Ich habe das PDF als Formular nachgebildet, welches das ganze Jahr über Bewertungen entgegen nehmen und speichern kann und das bereits in der durch den Senat vorgegebenen Struktur, auf die es am Ende ankommen wird. In der Bewertungshistorie können die Lehrerinnen einzelne Bewertungen wieder löschen. Dies ist nützlich, wenn versehentlich eine falsche Bewertung eingegeben wurde.

Am Ende des Schuljahres können die Lehrkräfte für jeden Schüler ein PDF-Zeugnis erstellen. Das System wählt automatisch die am häufigsten vergebene Bewertung für jede Kompetenz aus.

Das Fantastische an diesem Projekt ist der Fokus auf den Datenschutz: Alle eingegebenen Daten bleiben lokal im Browser gespeichert (LocalStorage) – nichts verlässt Deinen Rechner, es gibt keine Server-Kommunikation und keine Benutzerregistrierung.

Das Tool deckt die Kompetenzbereiche für die Fächer Deutsch, Mathematik, Sachunterricht, Kunst, Musik und Sport ab und ermöglicht eine detaillierte Bewertung nach einer 5-stufigen Skala. Sogar ein PDF-Export individueller Bewertungsbögen ist möglich.

Fun Fact: Das Repository wurde ursprünglich aus einem google-gemini/aistudio-repository-template generiert, was zeigt, wie moderne KI-Tools, wie beispielsweise aistudio.google.com, den Start von komplexen Projekten beschleunigen können.

Technologien

Die Anwendung nutzt einen modernen Stack: React 19 mit TypeScript für das Frontend, Vite 6 als Build-Tool und Tailwind CSS 4 für das Styling. Für die Generierung der PDFs kommt jsPDF mit dem autoTable Plugin zum Einsatz. Außerdem ist die Anwendung als PWA (Progressive Web App) konzipiert, was Offline-Nutzung und eine Installation als native App ermöglicht.

Aktivität und Status

ChessTrax

Zweck und Hintergrund

ChessTrax ist ein wirklich mega spannendes Projekt für alle Schachspieler! Es ist dein persönlicher Schachtrainer, der deine verlorenen Partien analysiert, um dir zu helfen, deine individuellen Schwachstellen zu erkennen. Ihr kennt das Motto: “Das beste Schach-Lehrbuch, dass es für Dich geben kann, ist eines, das unmittelbar aus Deinen verlorenen Partien entsteht.”.

Die Anwendung beantwortet dir entscheidende Fragen wie: Welche taktischen Motive übersiehst du ständig? Welche Eröffnungen oder Endspieltypen bereiten dir die größten Schwierigkeiten?.

Du lädst entweder eine PGN-Datei hoch oder gibst einfach deinen Lichess-Benutzernamen ein, um deine letzten Verlustpartien analysieren zu lassen (bis zu 2000 Partien werden abgerufen). Das Ergebnis ist ein umfassender Bericht mit einem persönlichen Trainingsplan, den du als PDF exportieren kannst.

Der KI-Faktor

Hier kommt die KI ins Spiel: Die Analyse wird standardmäßig vom Modell Gemini 2.5 Flash von Google durchgeführt, das für seine Geschwindigkeit und die qualitativ hochwertigen, tiefgehenden Einblicke gelobt wird.

Der Rohbau und die ersten Versionen der App wurden komplett mit AI Studio erstellt, wobei mein Know-how vor allem in der gezielten Formulierung und Hinterlegung des vorbereiteten Prompts liegt, um der KI den Content optimal zu unterbreiten. Für Experimentierfreudige gibt es sogar die Option, andere LLMs wie xAI Grok 4 Fast über OpenRouter oder einen eigenen Gemini API-Schlüssel zu nutzen.

Technologien

ChessTrax setzt hauptsächlich auf TypeScript (97.5%). Es nutzt die Lichess-API zum Abrufen der Partien und integriert verschiedene LLM-Provider, wobei Gemini 2.5 Flash der Standard ist.

Aktivität und Status

Hundefelsen (egor)

Zweck und Hintergrund

Hundefelsen (egor) ist eine Hommage an klassische Ego-Shooter wie Wolfenstein 3D und wurde komplett für den Browser entwickelt.

Das Spiel läuft komplett im Browser, bietet eine 3D-Raycasting-Engine für authentisches Retro-Gameplay und kommt mit acht Leveln, die jeweils mehrere Varianten für Abwechslung bieten. Ein Unterschied zur historischen Vorlage: Bei mir findet sich keine Nazi-Symbolik.

Man kämpft sich durch Horden von vier verschiedenen Gegnertypen (Zombies, Monster, Geister, Hunde) und kann sechs verschiedene Waffen finden, vom Messer bis zum schweren Maschinengewehr. Besonders cool: Es gibt eine Sprung-Mechanik (Taste F), mit der man über Möbel springen kann, sowie ein Speichersystem, das alle Spielstände lokal im Browser-LocalStorage ablegt.

Technische Highlights

  1. Rendering: Die Raycasting-Engine läuft auf Canvas.
  2. Sound: Sound-Effekte werden prozedural mithilfe der Web Audio API erzeugt.
  3. Texturen: Alle Texturen (Wände, Böden, Objekte) werden prozedural generiert – es werden keine Bilddateien benötigt.
  4. Entwicklungs-Tools: Das Projekt enthält sogar einen visuellen Level-Editor und einen Designer Mode (Theme-Editor), um ohne Code neue Texturen zu erstellen und die Level zu bearbeiten (diese laufen nur in der Entwicklungsumgebung).

Entwickelt wurde das Ganze primär mit React 19 und TypeScript.

Aktivität und Status

Markdown Editor Pro (mark)

Zweck und Hintergrund

Der Markdown Editor Pro (mark) ist ein leistungsstarker, webbasierter Markdown-Editor, der auf Einfachheit, Produktivität und vor allem auf Privatsphäre ausgelegt ist. Mein Vorzeige-Projekt Nr. 1. Ich nutze es selbst täglich.

Das ist der Markdown-Editor, den ich immer wollte. Keine Registrierung nötig, denn nichts muss irgendwo in die Cloud gespeichert werden (das störte mich bei stackedit.io), sondern Du kannst, ohne irgendwas zu installieren direkt aus dem Browser heraus in Dein lokales Dateisystem schreiben und von dort lesen. Optional bietet er sogar eine direkte Integration mit GitHub, um .md-Dateien aus deinem Repository zu laden und zu speichern.

Zu den Top-Funktionen gehören:

Da er als PWA (Progressive Web App) umgesetzt wurde, funktioniert er auch offline und kann als native Anwendung installiert werden – super praktisch!.

Technologien

Mark ist ein echtes Frontend-Powerhouse, entwickelt mit React 19.1.1 und TypeScript 5.8.2 unter Verwendung von Vite 7.0.6. Die Code-Verarbeitung übernimmt CodeMirror 6, während marked für das Markdown Parsing und DOMPurify für die sichere HTML-Ausgabe sorgen. Für GitHub wird der @octokit/rest Client verwendet.

Aktivität und Status

notebooklm

NotebookLM zeigte ich nur die 4 URLs meiner Projekte in GitHub. Es bedankte sich mit diesem Video:

| Impressum | Mein GitHubRSS