JPJustin Praßl
← /projects/skilltree-visualizer
BeruflichReact Web-AppAbgeschlossen

Interaktive Entwicklungspfad-App

Karrierepfade sichtbar machen — für Teams, die wachsen.

Zeitraum
Sep 2025 — Dez 2025
Rolle
Fullstack Engineer
Branche
HR & Personalentwicklung
Slug
skilltree-visualizer

Was war das Problem?

Interne Entwicklungspfade existierten nur auf Papier oder in unübersichtlichen Listen. Teamleiter konnten Fortschritte ihrer Mitarbeiter kaum nachvollziehen, und Mitarbeiter hatten keine transparente Übersicht über ihren eigenen Entwicklungsstand.

Weshalb eine Lösung?

Ohne visuelle Darstellung bleibt Personalentwicklung abstrakt. Teamleiter verlieren den Überblick, Mitarbeiter verlieren die Orientierung — und wertvolles Know-how bleibt unsichtbar.

Was wurde gebaut?

Eine interaktive Web-App, die Entwicklungspfade als "Skilltrees" grafisch darstellt. D3 und React Flow wurden harmonisch kombiniert, damit die Visualisierung technisch stabil und visuell überzeugend ist. Login läuft über Microsoft Entra ID mit bestehenden Mitarbeiter-Accounts.

Wie wurde es umgesetzt?

  1. 01

    Next.js App Router als Basis — serverseitige und clientseitige Komponenten sauber getrennt

  2. 02

    D3.js und React Flow kombiniert für interaktive, skalierbare Skilltree-Darstellung

  3. 03

    Microsoft Entra ID als SSO — Mitarbeiter melden sich mit bestehenden Unternehmens-Accounts an

  4. 04

    Vollständiges Backend in Bun für Datenverarbeitung und Persistenz

  5. 05

    Personio-API-Anbindung für automatisierten Abruf von Mitarbeiterstammdaten

  6. 06

    Rollenkonzept: Mitarbeiter sehen ihren eigenen Baum, Teamleiter erhalten erweiterte Verwaltungsfunktionen

Was kam dabei raus?

Teamleiter können Entwicklungen ihrer Mitarbeiter erstmals transparent nachvollziehen und gezielt steuern. Mitarbeiter sehen ihren Entwicklungsbaum und können eigenständig Anpassungen vornehmen.

Ein Projekt, das wirklich gut werden soll?

Egal ob Fullstack-Produkt oder einfach ein Sparring auf Augenhöhe — schreib mir kurz, was ansteht.