Live-Suche
Die Suche reagiert direkt beim Tippen und macht das Entdecken von Horror- und Thrillerfilmen schnell und unkompliziert.
DarkFrame
Eine Movie-Discovery-App mit React und eigener API, gebaut rund um Suche, Login und gespeicherte Nutzerdaten.
React
Node.js
Express
MongoDB
React Router
JWT
Funktionen
Schnelle Suche und persönliche Filmlisten.
JWT- Authentifizierung
Nutzer können sich registrieren, einloggen und geschützte Bereiche über JWT-basierte Authentifizierung nutzen.
Favoriten & Profildaten
Lieblingsfilme werden in der Datenbank gespeichert und bleiben auch über verschiedene Sessions hinweg erhalten.
Filmdetails & Metadaten
Jeder Film enthält Informationen zu Genre, Regie und Beschreibung, damit Nutzer gezielter stöbern können.
Frontend mit API-Anbindung
Filmdaten, Nutzerkonten, Login und Favoriten sind mit einer REST-API verbunden, sodass die Oberfläche direkt mit Backend-Logik arbeitet.
Wiederverwendbare Komponenten
Die Oberfläche ist aus modularen React-Komponenten aufgebaut, damit die Anwendung einfacher zu warten, zu erweitern und nachzuvollziehen bleibt.
Technischer Ansatz
Architektur & Stack
DarkFrame ist als Single-Page-Application mit klarer Trennung zwischen Frontend und Backend aufgebaut. Der React-Client übernimmt Interface, Routing, Authentifizierungslogik und Nutzerinteraktionen, während Film- und Nutzerdaten über eine eigene REST-API geladen werden.
Im Backend ist die API in Routen, Datenmodelle und Authentifizierungslogik strukturiert. MongoDB speichert Film- und Nutzerdaten, während JWT genutzt wird, um geschützte Bereiche und nutzerspezifische Inhalte abzusichern.
Frontend
React
React Router
Bootstrap
Parcel
Backend & API
Node.js
Express
MongoDB Atlas
Mongoose
REST API
Authentication & Security
JWT
Passport
express-validator
Tools & Deployment
Netlify
Render
Postman
GitHub
dotenv
CORS / Morgan
Learnings
Erkenntnisse
Frontend und Backend verbinden
Durch die Arbeit an beiden Seiten der Anwendung habe ich besser verstanden, wie Interface-Entscheidungen, API-Struktur und Datenbank-Updates zusammenspielen.
Authentifizierung und Sessions
Die Umsetzung mit JWT hat mir gezeigt, wie geschützte Routen, Validierung und nutzerspezifische Daten über den gesamten Stack zusammenarbeiten müssen.
Struktur für bessere Wartbarkeit
Die Arbeit an Frontend und Backend hat mir gezeigt, wie wichtig klare Strukturen und getrennte Verantwortlichkeiten sind, wenn eine Anwendung wachsen soll.