Kanban-Workflow mit Drag & Drop
Bewerbungen lassen sich per Drag & Drop zwischen den einzelnen Phasen verschieben. Änderungen werden direkt in der UI sichtbar und im Hintergrund mit der Datenbank synchronisiert.
Job Tracker
Eine Full-Stack-Anwendung zur Organisation von Bewerbungen, Follow-ups und Bewerbungsphasen in einem klar strukturierten Workflow. Nutzer können Bewerbungen über einen interaktiven Kanban-Workflow per Drag & Drop verwalten, in eine detaillierte Tabellenansicht wechseln, ältere Einträge archivieren und ihre Daten über eine eigene REST API und ein MongoDB-Backend synchron halten.
Funktionen
Von einem chaotischen Bewerbungsprozess
Von einem chaotischen Bewerbungsprozess
zu einem übersichtlichen Ablauf.
Board- und Tabellenansicht
Zwischen visueller Board-Ansicht und strukturierter Tabelle wechseln: je nachdem, ob ein schneller Überblick oder ein detaillierter Vergleich gebraucht wird.
Optimistische UI-Updates
Statusänderungen fühlen sich sofort an, weil die Oberfläche direkt aktualisiert wird, während die Anfrage an das Backend im Hintergrund läuft. Falls etwas fehlschlägt, kann der vorherige Zustand wiederhergestellt werden.
Suche und Filter
Bewerbungen lassen sich schnell über Suche und Status-Filter eingrenzen, ohne dass Daten mehrfach verwaltet werden müssen.
Archiv statt Löschen
Statt Bewerbungen direkt zu löschen, können sie archiviert werden. So bleibt alles erhalten, ohne die Übersicht zu verlieren.
Responsives Design
Die Anwendung funktioniert sowohl auf Desktop als auch mobil, mit angepassten Layouts und Interaktionen für kleinere Screens.
Technischer Ansatz
Architektur & Stack
Die Anwendung ist als separate Full-Stack-Anwendung aufgebaut, mit einem React-Frontend und einer Node.js/Express-API auf Basis von MongoDB. Frontend und Backend werden unabhängig voneinander bereitgestellt, ähnlich wie in einer realen Produktionsumgebung.
Im Frontend wird der State zentral verwaltet. Board, Tabellenansicht, Suche, Filter und Archivlogik werden aus derselben Datenbasis abgeleitet, wodurch die Oberfläche über alle Ansichten hinweg konsistent bleibt.
Statusupdates werden optimistisch umgesetzt: Die UI reagiert sofort, während die Backend-Anfrage im Hintergrund läuft. So fühlt sich die Anwendung schneller an, ohne die Synchronisierung zwischen Frontend und Datenbank zu verlieren.
Frontend
React
JavaScript
CSS
Vite
Responsive Design
Drag & Drop
Backend
Node.js
Express
MongoDB
REST API
Daten & Tools
MongoDB Atlas
Mongoose
Axios
GitHub
Postman
Vercel & Render
Learnings
Erkenntnisse
Verantwortung für Entscheidungen
Das war mein erstes Projekt, das ich nach dem Kurs komplett selbst geplant und umgesetzt habe, inklusive aller technischen und konzeptionellen Entscheidungen.
Arbeiten entlang realer Abläufe
Statt Features isoliert zu bauen, habe ich mich daran orientiert, wie Bewerbungsprozesse tatsächlich ablaufen, und die Anwendung darauf aufgebaut.
Komplexität im Griff behalten
Mehrere Ansichten, Drag-and-Drop und synchronisierte Updates haben gezeigt, wie wichtig eine klare State-Struktur wird, je größer eine Anwendung wird.