Live-Suche
Die Suchergebnisse aktualisieren sich direkt beim Tippen, sodass sich einzelne Titel schnell finden lassen.
DarkFrame
DarkFrame ist eine Full-Stack-App zur Entdeckung von Thriller- und Horrorfilmen. Das Frontend basiert auf React und TypeScript und greift auf eine eigene Node/Express REST-API zu.
React
TypeScript
Redux Toolkit
Node.js
Express
MongoDB
React Router
JWT
Funktionen
Eine persönliche Filmsammlung
JWT- Authentifizierung
Der Zugriff auf Nutzerkonten läuft über JWT-basierte Authentifizierung. Geschützte Bereiche sind nur nach dem Login verfügbar.
Favoriten & Profildaten
Lieblingsfilme werden in der Datenbank gespeichert und bleiben mit dem jeweiligen Profil verknüpft.
Filmdetails & Metadaten
Jeder Film hat eine eigene Detailansicht mit Informationen zum Genre und zur Regie. Weitere Metadaten geben zusätzlichen Kontext beim Stöbern.
Frontend mit API-Anbindung
Der Client liest und aktualisiert Film- sowie Nutzerdaten über eine eigene REST API.
Gemeinsamer State mit Redux
Redux Toolkit verwaltet gemeinsam genutzte Film- und Nutzerdaten und hält sie innerhalb der App konsistent.
Technischer Ansatz
Architektur & Stack
DarkFrame ist als Single-Page-Application mit React und TypeScript aufgebaut. Redux Toolkit kümmert sich um gemeinsam genutzten State, während lokale UI-Zustände direkt in den Komponenten bleiben.
Das Frontend kommuniziert mit einer separaten Node/Express REST API. Persistente Daten werden in MongoDB gespeichert. JWTs übernehmen die Authentifizierung der Nutzersessions.
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 von DarkFrame habe ich besser verstanden, wie stark das Verhalten im Frontend von API-Design und persistenten Daten abhängt.
Authentifizierung und Sessions
Durch den Login-Flow mit geschützten Routen habe ich JWT-basierte Authentifizierung deutlich besser verstanden, einschließlich des Verhaltens einer Session nach einem Seiten-Refresh.
Migration zu TypeScript
DarkFrame entstand ursprünglich als JavaScript-Projekt. Später habe ich das bestehende Frontend schrittweise auf TypeScript migriert, wodurch Annahmen im ursprünglichen Code deutlich leichter sichtbar wurden.