Projekte
Jede Karte unten enthält einen kurzen Überblick, den Tech‑Stack, Screenshots (klicke auf das Bild, um eine Slideshow zu öffnen) sowie Links zum Code und – falls verfügbar – zur Live‑Vorschau.
MyFlix App
Überblick: Eine Full‑Stack‑Movie‑App, die Schritt für Schritt entwickelt wurde: zuerst eine sichere RESTful Node/Express‑API, danach zwei Frontends (React und Angular), die beide dasselbe Backend nutzen. Die Live‑Vorschau zeigt den Angular‑Client, der mit der deployten API verbunden ist.
Tech‑Stack Backend: Node.js, Express, MongoDB Atlas (Mongoose), JWT‑Authentifizierung, Passport, bcrypt, express‑validator, CORS, Deployment auf Render.
Tech‑Stack Frontend (Angular): Angular, Angular Material, TypeScript, RxJS, responsives Layout, Deployment via GitHub Pages.
Tech‑Stack Frontend (React): React, modernes JavaScript (ES6+), clientseitiges Routing, wiederverwendbare Komponenten, Bootstrap / React‑Bootstrap.
Chat App
Überblick: Eine plattformübergreifende Mobile‑Chat‑App mit React Native und Expo. Nutzer wählen einen Anzeigenamen und eine Hintergrundfarbe, senden Nachrichten, teilen Bilder (Kamera/Galerie) und den aktuellen Standort über eine kleine Karten‑Vorschau. Nachrichten werden in Echtzeit mit Firebase Firestore synchronisiert und lokal mit AsyncStorage gecached, damit letzte Chats offline verfügbar bleiben. Die UI folgt grundlegenden Accessibility‑Best‑Practices und passt sich an unterschiedliche Bildschirmgrößen an.
Tech‑Stack: React Native, Expo, Firebase (Firestore, Auth, Storage), Gifted Chat, Async Storage, NetInfo, React Navigation, Expo Camera/Image Picker/File System/Sharing/Location, react‑native‑maps.
Meet App
Überblick: Eine serverlose Progressive Web App (PWA) mit React, die sich mit der Google Calendar API verbindet. Nutzer können Events nach Stadt suchen, Details ansehen und Eventdaten in responsiven Charts visualisieren. Die App funktioniert offline über Cache‑Daten und folgt Test‑Driven Development (TDD).
Tech‑Stack: React, Vite, Google Calendar API (OAuth 2.0), AWS Lambda (serverless Backend), Recharts, Jest & Jest‑Cucumber (TDD/BDD), Workbox, vite‑plugin‑pwa, Atatus, GitHub Deployment.
Hinweis: Google OAuth ist hier im „Testing“-Modus und auf Testnutzer beschränkt – externe Nutzer könnten beim Login blockiert werden. Repo und Screenshots zeigen das vollständige Verhalten.
What Do I Cook?
Überblick:
Ein kleines Full‑Stack‑Rezept‑Tool: Nutzer geben Zutaten ein, die sie bereits zu Hause haben, und finden passende Rezepte.
Die App ruft ein eigenes Node/Express‑Backend auf, das die Spoonacular‑API kapselt, Daten vereinheitlicht und eine saubere REST‑Schnittstelle bereitstellt.
Im Frontend lassen sich Rezeptdetails in einem Modal anzeigen, Favoriten in localStorage speichern und zwischen lokaler Entwicklung und deployter API wechseln.
Tech‑Stack Backend: Node.js, Express, Spoonacular REST API Integration, dotenv, CORS‑Konfiguration, Render‑Deployment.
Tech‑Stack Frontend:
HTML5, CSS3 (responsives Layout mit Flexbox und kleinen Bootstrap‑Utilities), Vanilla JavaScript (ES6+),
Fetch API, Bootstrap 5 Modals, localStorage, GitHub Pages Deployment.
Pokedex App
Überblick: Eine kleine Web‑App mit Vanilla JavaScript, die Daten aus der Pokémon‑API lädt und in einer Liste anzeigt. Beim Klick auf ein Pokémon werden Details (Name, Bild, Größe) in einem Bootstrap‑Modal dargestellt. Das war mein erstes JavaScript‑Projekt – Fokus: API‑Integration, DOM‑Manipulation und zugängliche UI‑Patterns.
Tech‑Stack: HTML5, CSS3, JavaScript (ES5/ES6), Fetch API, PokeAPI (REST API), Bootstrap 4, jQuery, IIFE‑Pattern (Kapselung), Polyfills (IE11‑Support), GitHub Pages Deployment.
Portfolio Website
Überblick: Eine responsive, mehrseitige Portfolio‑Website mit Dark‑UI‑Theme, semantischer HTML‑Struktur und grundlegenden Accessibility‑Checks. Sie zeigt Projekte, Skills und Kontaktinfos und dient als zentraler Hub.
Tech‑Stack: HTML5, CSS (Grid/Flex), Vanilla JavaScript, Git, a11y‑Checks, GitHub Pages Deployment.