Studienganggenerator

Dieses Projekt entstand an meiner Hochschule im Rahmen des Moduls “Web Development, Webdesign und Usability”. Zusammen mit Studierenden aus dem Studiengang Medieninformatik sollte in einem Team von 4 Personen ein Studienganggenerator entwickelt werden, der basierend auf den Interessen und Hobbys von Studieninteressierten passende Studiengänge vorschlägt. Zusätzlich sollte es eine Suchfunktion für die Studiengänge und eine Visualisierung der Module der jeweiligen Studiengänge geben.

In diesem Modul stand vor allem das Thema Projektmanagement und die Interaktion zwischen dem Designteam und dem Entwicklungsteam im Vordergrund. Ich war Teil des Entwicklungsteams und habe nur gelegentlich am Design gearbeitet.

Backend

Für unser Backend wurde das PHP Framework Laravel von unserem Dozenten vorgegeben. Laravel hat ein eigenes Datenbank ORM namens Eloquent, das sehr gut in das Ökosystem von Laravel integriert ist. Da Laravel keine native Unterstützung für OpenAPI bietet, haben wir das Package Scramble verwendet.

Die größte Herausforderung in diesem Projekt war es, basierend auf Interessen und Hobbys passenden Studiengänge vorzuschlagen. Hierfür haben wir vordefinierte Interessen mit Studiengängen verknüpft und diese gewichtet. Dadurch konnten wir nicht nur passende Studiengänge vorschlagen, sondern auch einen Wert für die Passgenauigkeit der Vorschläge berechnen.

Um auch Interessen und Hobbys zu werten, die nicht vordefiniert waren, haben wir zusätzlich auf das KI Cluster des Forschungszentrums unserer Hochschule zurückgegriffen.

Frontend

Auch im Frontend wurde uns das Framework Next.js im SPA-Modus vorgegeben. Zusätzlich haben wir Tailwind CSS für das Styling verwendet und damit alle Komponenten selbst implementiert. Für die Anbindung an das Backend haben wir den OpenAPI-Client-Generator Orval verwendet und uns damit einen SWR-Client generieren lassen.

Unser Frontend besteht aus 3 Hauptseiten:

• Studiengangsuche: Hier kann nach Studiengängen mit Hilfe von Filtern und einer Volltextsuche gesucht werden.
• Modulübersicht: Hier werden die Module eines Studiengangs visualisiert.
• Studienganggenerator: Der Generator besteht aus mehreren Schritten, in denen Interessen ausgewählt werden können. Als Ergebnis werden passende Studiengänge vorgeschlagen.

Da unser Generator in mehreren Schritten funktioniert und dadurch einen mehr oder weniger komplexen State mit Validierungslogik hat, haben wir diesen Teil mit Redux umgesetzt. Redux war hierfür wirklich sehr hilfreich und hat die Logik gut strukturiert und von der UI getrennt.

Zusätzlich haben wir dnd kit für die Sortierung der Interessen und Hobbys verwendet: