Milo Radio App
Milo Radio App
×

Milo Radio App

Milo Radio – Die neue Generation der Progressive Web App (PWA) Dieses Projekt wurde komplett neu aufgebaut und auf ein professionelles Level gehoben. Es ist nun eine leistungsstarke Full-Stack-Lösung, die eine strikte Trennung zwischen Frontend und Backend verfolgt, um maximale Performance und Skalierbarkeit zu gewährleisten. Die Highlights: • Frontend & Backend Architektur: Ein modernes JS-Frontend kommuniziert mit einem spezialisierten PHP/PostgreSQL-Backend. Dies sorgt für eine klare Struktur und blitzschnelle Ladezeiten. • Datenanalyse & Trends: Milo Radio trackt jetzt anonymisierte Hörgewohnheiten, um persönliche Top-Listen und globale Trends zu erstellen. Nutzer sehen in Echtzeit, was gerade angesagt ist. • Offline-First & PWA: Dank fortschrittlichem Service-Worker-Caching bleibt die App installierbar und auch bei instabilem Internet jederzeit einsatzbereit. • Echtzeit-Metadaten: Über einen optimierten Backend-Proxy werden Songtitel und Interpreten ohne Verzögerung direkt in der UI angezeigt. • Dynamisches Management: Ein geschütztes Admin-Dashboard ermöglicht die vollständige CRUD-Verwaltung der Senderliste direkt über die Web-Oberfläche. Technisch setzt Milo Radio auf ein modulares Design mit PostgreSQL 18, einer robusten API und modernsten Web-Standards – gebaut für die Zukunft des Radios.


Tech-Stack: HTML, CSS, JS, PHP, JSON
×

Strukturplan

Lade Diagramm...
Klicken zum Vergrößern
### Milo Central Streaming Architecture Die Milo Radio App basiert auf einer **Event-Driven Streaming-Architektur** mit integrierter **Analyse-Schnittstelle**. **Architektur-Highlights:** - **Signal Abstraction:** Die Audio-Logik ist vom User Interface entkoppelt, was eine unterbrechungsfreie Wiedrebgabe garantiert. - **Analytics Integration:** Ein dediziertes Monitoring-System (In-App Analysis) trackt Stream-Performance und Nutzerinteraktionen, um die Verbindungsstabilität zu optimieren. - **Provider Agnostic:** Durch die Zwischenschicht des "Stream Servers" können verschiedene Radio-Provider nahtlos angebunden werden. - **Visual Signal Processing:** Eine dedizierte Pipeline verarbeitet Audiodaten für visuelle Effekte, getrennt vom eigentlichen Audio-Thread.
Scrum Quiz App
Scrum Quiz App
×

Scrum Quiz App

Scrum Quiz – Interaktive Vorbereitung auf PSM1-Zertifizierungen Dieses Projekt ist ein interaktives Quiz-Tool, das speziell dafür entwickelt wurde, Scrum-Wissen zu testen und sich gezielt auf Prüfungen wie die Professional Scrum Master I (PSM I) vorzubereiten. Die Highlights: • Mehrsprachig: Bietet Unterstützung für Deutsch und Englisch (questions_de.json / questions_en.json). • Konfigurierbar: Die Anzahl der Fragen kann individuell (1-120) festgelegt werden. • Dynamischer Timer: Der Zeitdruck passt sich automatisch an die gewählte Fragenanzahl an. • Quiz wiederholen: Ermöglicht das sofortige erneute Starten mit denselben Einstellungen. • Dynamische Engine: Eine JavaScript-basierte Logik verwaltet den Pool, berechnet Ergebnisse in Echtzeit und bietet Feedback inkl. Korrekturhinweisen. • Modernes Design: Minimalistisches, reaktionsfähiges UI (style.css), optimal für Desktop und Mobile. • Client-Side: Die gesamte Logik läuft im Browser (bereitgestellt über Strato). Technisch besticht das Projekt durch seine Modularität, wobei JSON-Datenstrukturen für eine saubere Trennung von Inhalten und Logik sorgen.


Tech-Stack: HTML, CSS, JavaScript
×

Strukturplan

Lade Diagramm...
Klicken zum Vergrößern
### Interactive Exam Engine Die Scrum Quiz App nutzt eine **Stateful Engine**, die den Prüfungsstatus in Echtzeit verwaltet. **Architektur-Highlights:** - **Encapsulation:** Die Prüfungsfragen sind strikt von der Logik getrennt und werden dynamisch geladen. - **Real-time Processing:** Das System validiert Antworten on-the-fly, ohne die Seite neu laden zu müssen. - **Data Integrity:** Durch die Verwendung von strukturierten Datenquellen ist die Erweiterung um neue Fragenkataloge nahtlos möglich.
SmartCalc – Taschenrechner
×

SmartCalc – Taschenrechner

SmartCalc – Wissenschaftlicher Web-Rechner mit Python & Flask Dieser wissenschaftliche Taschenrechner hat sich von einer Desktop-Anwendung zu einer modernen Web-App entwickelt. Er bietet mathematische Präzision gepaart mit einem eleganten Web-UI. Die Highlights: • Sicherer Rechen-Parser: Eine serverseitige Logik mit Whitelist-Validierung und RegEx-Preprocessing verhindert Code-Injection und sorgt für Stabilität. • Erweiterte Mathematik: Volle Unterstützung für komplexe Operationen wie Trigonometrie (sin, cos, tan), Logarithmen (log, ln), Wurzeln (√) und Potenzen (^). • Modernes Web-UI: Ein intuitives Glassmorphism-Design, das für Desktop und Mobile optimiert ist, inklusive Dark- & Light-Mode Support. • Intelligenter Verlauf: Eine REST-API gesteuerte Historie ermöglicht das Einsehen und Verwalten vergangener Berechnungen direkt im Browser. • Performance: Durch die serverseitige Berechnung in Python bleibt das Interface flüssig und zuverlässig. Technisch demonstriert das Projekt die Portierung komplexer mathematischer Logik in eine moderne Web-Umgebung mittels Flask, Jinja2 und Vanilla JS.


Tech-Stack: Python (Flask), Jinja2, CSS, JS
×

Strukturplan

Lade Diagramm...
Klicken zum Vergrößern
### Modulare Berechnungs-Architektur Die SmartCalc App folgt dem **Model-View-Controller (MVC)** Muster innerhalb eines autonomen Moduls. **Highlights:** - **Entkopplung:** Das UI kommuniziert ausschließlich über eine RESTful API mit der Logik. - **Sicherer Parser:** Die mathematische Engine validiert Eingaben über eine Whitelist, bevor sie berechnet werden. - **Modularität:** Das gesamte Modul ist als Flask Blueprint gekapselt und kann einfach in andere Systeme migriert werden.
Portfolio-Flask
Portfolio-Flask
×

Portfolio-Flask

Portfolio-Flask – Modernes Webdesign & Modulare Architektur Diese Portfolio-Anwendung ist das Schaufenster meiner Arbeit und gleichzeitig ein Beweis für meine Fähigkeiten in der Fullstack-Entwicklung. Sie vereint ein ästhetisches Design mit einer hochmodernen, modularen technischen Architektur. Die Highlights: • Zentrales Projekt-Hub: Das Portfolio dient als primäre Basis, über die verschiedene eigenständige Projekte (Scrum Quiz, Livio, SmartCalc) modular auf derselben Domain gebündelt werden. • Modulare Blueprint-Architektur: Durch den nahtlosen Einsatz von Flask-Blueprints wird eine saubere Trennung und einfache Erweiterbarkeit des gesamten Ökosystems gewährleistet. • Dynamische Content-Verwaltung: Inhalte wie Projektdaten und der "About Me" Text werden über JSON und Markdown gesteuert, was eine strikte Trennung von Logik und Inhalt ermöglicht. • Premium Design System: Ein konsequentes Dark-Mode-Konzept mit CSS-Gradients, Glassmorphism-Effekten und flüssigen Animationen sorgt für eine hochwertige Nutzererfahrung. • Automatisierte Kontakt-Engine: Ein integriertes Formular mit Flask-Mail Anbindung ermöglicht die direkte und sichere Kommunikation. • Responsive Architektur: Durch intelligente CSS-Breakpoints und ein flexibles Container-Modell passt sich die App perfekt an alle Endgeräte an. Technisch basiert die App auf Python und Flask, nutzt eine modulare Struktur zur Integration verschiedener Web-Module und implementiert moderne SEO- sowie Performance-Standards.


Tech-Stack: Python (Flask), Jinja2, CSS, JS
×

Strukturplan

Lade Diagramm...
Klicken zum Vergrößern
### Die Hub-and-Spoke Architektur Dieses Portfolio basiert auf einer **Clean Architecture**. Der zentrale Kern (Controller) orchestriert den Datenfluss zwischen den verschiedenen spezialisierten Modulen (Spokes). **Vorteile dieses Ansatzes:** - **Sicherheit:** Strikte Trennung von Geschäftslogik und Datenhaltung. - **Skalierbarkeit:** Neue Features (wie der Taschenrechner oder das Quiz) lassen sich als unabhängige Blueprints integrieren. - **Wartbarkeit:** Klare Abhängigkeiten ohne zirkuläre Referenzen.
Online-Bibliothek mit Ollama einbindung
Online-Bibliothek mit Ollama einbindung
×

Online-Bibliothek mit Ollama einbindung

Online-Bibliothek – Sichere Webverwaltung mit RAG-KI-Bibliothekar Dieses Projekt demonstriert eine hochmoderne Bibliotheksplattform. Sie kombiniert klassische Bibliotheksverwaltung mit modernsten KI-Technologien. Die Highlights: • Rolle-basierter Zugriff: Differenzierte Dashboards für "Mitarbeiter" (CRUD-Kunden- & Buchverwaltung, Ausleih-Historie) und "Kunden" (Medien leihen/zurückgeben, E-Book Reader). • RAG-basierter KI-Bibliothekar: Ein interaktiver Chatbot (gemma3:12b via Ollama API), der auf Basis des echten Buchbestands, der Buch-Zusammenfassungen und Inhaltsverzeichnisse personalisierte Empfehlungen gibt. • KI-gestütztes E-Book-Parsing: Beim Upload einer PDF liest das System automatisch den Text aus und generiert über die KI den Buchtitel, Autor, ISBN sowie Zusammenfassungen und Inhaltsverzeichnisse. • E-Mail Verifikations-Workflow: Maximale Sicherheit bei der Neuregistrierung durch Verifizierungscodes vor der Passwortvergabe. • Sichere Datenhaltung: Implementiert über SQLite3 mit sauber getrennten Beziehungen und kaskadierenden Löschungen (ON DELETE CASCADE) für Datenintegrität. Technisch demonstriert die App ein anspruchsvolles RAG (Retrieval-Augmented Generation) System und zeigt die Verknüpfung von künstlicher Intelligenz mit klassischem Web-CRUD in Python (Flask).


Tech-Stack: Python (Flask), SQLite, Bootstrap, Ollama AI, Jinja2
×

Strukturplan

Lade Diagramm...
Klicken zum Vergrößern
### RAG-gestützte Bibliotheks-Architektur Die Online-Bibliothek ist als modulares Flask-Blueprint konzipiert und implementiert ein RAG (Retrieval-Augmented Generation) System. **Technische Kernaspekte:** - **RAG-Integration (Retrieval-Augmented Generation):** Bei Benutzerfragen extrahiert das System den Buchbestand und die KI-Zusammenfassungen aus der Datenbank und injiziert diese als Kontext in den System-Prompt für die Ollama API (`gemma3:12b`). - **Asynchrones E-Book-Parsing:** PDF-Dokumente werden serverseitig via `pypdf` zerlegt. Die Texte werden per API an Ollama übermittelt, um vollautomatisch strukturierte Metadaten (Titel, Autor, ISBN, Zusammenfassungen, Inhaltsverzeichnis) zu generieren. - **Relationales Schema:** Das SQLite3-Schema sichert Datenintegrität durch Foreign Keys und automatisches kaskadierendes Löschen (`ON DELETE CASCADE`) verknüpfter Ausleihen und Analysen.
×