Mein Portfolio

×

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 – 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 – 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 – 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.

×

Contact Manager Livio

Contact Manager Livio – Moderne Web-Kontaktverwaltung mit Python & Flask Dieses Projekt hat sich von einer Desktop-Anwendung zu einer modernen Web-App entwickelt. Es kombiniert ein elegantes Glassmorphism-Frontend mit einer leistungsstarken RESTful API im Backend. Die Highlights: • Modernes Web-UI: Ein responsives Design mit Glassmorphism-Effekten, flüssigen Animationen und Interaktivität. • Dark- & Lightmode: Ein integrierter Theme-Toggle ermöglicht den Wechsel zwischen verschiedenen Farbmodi. • Intelligente Suche: Echtzeit-Filterung der Kontakte direkt im Browser für maximale Geschwindigkeit. • Toggle-Ansicht: Die Kontaktliste lässt sich flexibel ein- und ausblenden ("Alle anzeigen" Toggle), um den Fokus zu wahren. • RESTful Backend: Die gesamte Datenlogik wird über eine Flask-API gesteuert, was eine saubere Trennung von UI und Daten ermöglicht. • Persistenz: Kontakte werden sicher auf dem Server gespeichert und automatisch alphabetisch sortiert. Technisch demonstriert das Projekt die Transformation klassischer Logik in eine moderne Web-Architektur unter Nutzung von Python (Flask), Jinja2 und modernem JavaScript.

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

×

Strukturplan

Lade Diagramm...

Klicken zum Vergrößern

### Livio Contact Gateway Der Contact Manager "Livio" ist als **RESTful Service Architecture** konzipiert. **Technische Merkmale:** - **Entkopplung:** Das Frontend agiert als "Consumer" der Backend-API, was eine einfache Erweiterung auf Mobile-Apps ermöglicht. - **Layered Persistence:** Daten werden über eine Abstraktionsschicht (Registry) verwaltet, um Unabhängigkeit von der finalen Speichertechnologie zu gewährleisten. - **Modulares Setup:** Als gekapseltes Modul (Blueprint) bietet es eine skalierbare Basis für professionelles Kontaktmanagement.