gfonde
- Janina Jakob
- Nina Flütsch
- Nicola Bächi
| Person | Rolle |
|---|---|
| Janina Jakob | Designerin |
| Nina Flütsch | Entwicklerin |
| Nicola Bächi | Entwickler |
Studio Web & Mobile 1 / 3. Semester / 2025
gfonde.lu ist deine explorative Webseite, um Events zu entdecken, die du sonst nirgends findest. Als Alternative zu den grossen Portalen geben wir kleinen Veranstaltungen die Bühne, die sie verdienen.
Wir erklären, dass wir gemeinschaftlich Urheber des eingereichten Materials sind bzw. über alle notwendigen Rechte am verwendeten geistigen Eigentum verfügen. Wir bestätigen zudem, dass keine Rechte Dritter verletzt werden und dass wir berechtigt sind, das Material einzureichen und zu nutzen.
Der Designprozess ist in der Dokumentation von Seite 4-11 einsehbar.
- Apify scraped Instagram Posts von vordefinierten Instagram-Seiten
- AI Agent liest Informationen aus Bild und Beschreibung des Posts
- Daten werden in der Datenbank gespeichert
- Frontend erhält die Daten der Datenbank über das Backend und stellt sie dar
- shadcn: Für die Kalender-Komponente
- tresjs: Für die 3D-Szene
- nuxt/icon: Für Icons
Im Frontend werden die Daten über bereitgestellt die API von unserem Nuxt-Server bezogen und in einen State geladen, der global in der App verfügbar ist (siehe hier). Das ist der einzige Datenaustausch zwischen Frontend und Backend
Unsere Seite besteht aus den folgenden drei Seiten:
- /: Die Startseite, wo die Plakatsäule dargestellt wird
- /events: Die Events in einem Karousel aufgelistet mit der Möglichkeit nach Datum zu filtern
- /event/[name]: Die Detailseite eines Events mit weiteren Infos und Link zum Instagram-Post
Folgend alle Komponenten und ihr Nutzen:
| Name | Nutzen |
|---|---|
| /ui | Alle importiere Komponenten von shadcn |
| DateTime.vue | Formatierungslogik einer Zeitangabe eines Events |
| EventCard.vue | Karte eines Events im Karousel |
| Pillar.vue | Parent-Komponent für die Darstellung der 3D-Säule |
| PillarBase.vue | Der Sockel der Säule |
| PillarTop.vue | Das Dach der Säule |
| Poster.vue | Für die Darstellung der Plakate auf der Säule in der 3D-Szene |
Folgend alle Composables und ihr Nutzen:
| Name | Nutzen |
|---|---|
| useCarouselInteraction.ts | Logik von Klick- und Touchinteraktion mit dem Karousel |
| useEventData.ts | Definierung und Instanzierung des States für die Events aus der Datenbank |
| useEventFiltering.ts | Filterlogik für den Kalender auf der Karousel-Seite |
| usePosters.ts | Logik für die Platzierung der einzelnen Poster in der 3D-Szene |
Unsere Backend-Logik befindet sich in unserem n8n-Workflow. Folgend werden die einzelnen Nodes des Workflows erklärt:
-
Schedule Trigger: Löst den Workflow zu einem von uns definierten Zeitpunkt aus
-
Apify: Greift über die API von Apify auf den von uns definierten Scrape-Task zu, führt diesen aus und gibt das Resultat an den nächsten Node weiter
-
Error & Image Filter: Filtert fehlerhafte Resultate und Posts raus, die Reels bzw. Videos sind
-
Data-Extraction-Loop: Für jeden Posts wird nun der folgende Ablauf ausgeführt:
- Image to Binary: Umwandlung des Bilds des Posts zu einem Binary, da der AI-Agent das Bild nicht analysieren kann
- Merge Image & Data: Zusammenfügen des Binaries des Bildes und die zugehörigen Informationen des Posts, um diese gebündelt dem AI-Agent übergeben zu können
- AI-Agent: Nimmt die Input-Daten (Bild und Beschreibung), extrahiert Daten basierend auf einen von uns definieren Prompt und formatiert sie in JSON gemäss einem Beispiel und gibt dieses JSON weiter
- Catch Error: Im Fehlerfall wollen wir, dass nichts weiter passiert, da es teilweise unerklärliche Fehler aufgrund der Inkonsistenz der AI gibt
- Merge: Image & Data: Kombinieren des JSON des AI-Agents und des Binaries des Fotos für das Ablegen in der Datenbank
-
Filter past Events: Filtert Events raus, die bereits vergangen sind
-
Get existing rows with same URL: Greift auf die Datenbank zu und überprüft, ob es bereits Events gibt, die die gleiche Post-URL hinterlegt haben
-
If no events returned: Wenn die DB-Abfrage Resultate zurückgibt, wird hier abgebrochen, um Duplikate zu vermeiden, falls sie leer ist, wird weitergemacht
-
Boolean & Data Merge: Über diesen Merge werden die Daten des Events weitergegeben aber nur im Fall wenn der vorherige If-Node auch ein true weitergibt
-
Database-Loop: Für jedes JSON + Bild wird folgendes für das korrekte Abspeichern in der Datenbank ausgeführt:
- Crypto: Generierung einer einzigartigen UUID für das Abspeichern des Bildes
- Merge: UUID & Row Data: Kombinieren des JSON, des Bildes und der UUID für die gebündelte Abspeicherung
- Image Upload: Hochladen des Bildes auf einen S3-Bucket (über Supabase)
- Create New Row: Erstellung eines neuen Datensatzes mit den Daten
- Filter ID: ID des neu erstellten Datensatzes wird weitergegeben für eine Beziehung zu einer anderen Tabelle
- Split Out Dates: die einzelnen Daten (wann das Event stattfindet) des Events werden aus extrahiert, um seperat zu speichern
- Merge: Dates & ID: ID des Events und die dazugehörigen Daten
- Create New Event-Dates Row: Erstellt für jedes Datum des Events einen neuen Datensatz mit einer Referenz auf das Event über die ID
Ich finde, unser Endresultat kann sich sehen lassen. Insgesamt haben wir eine sehr gute Arbeit geleistet. Das gesamte Layout ist stimmig und wirkt durchdacht. Die einzelnen Elemente wiederholen sich bewusst, ebenso die Sterne, was zu einer klaren visuellen Linie führt. Dadurch entsteht ein deutlicher Wiedererkennungseffekt, der das Design konsistent und professionell wirken lässt.
Besonders positiv empfinde ich, dass alle gestalterischen Komponenten gut zusammenspielen und technisch wie auch visuell funktionieren. Die Seite ist präsentationsfähig und bietet gleichzeitig eine solide Grundlage, um sie in Zukunft weiterzuentwickeln und auszubauen. Sie wirkt nicht abgeschlossen im negativen Sinn, sondern offen für Weiterführung.
Die Definition des Padding war sehr zeitaufwendig und erforderte viel Präzision. Zusätzlich mussten wir ein Layout, in dessen Gestaltung ich mehrere Stunden investiert hatte, wieder verwerfen. Dieser Prozess war zwar frustrierend und teilweise auch ärgerlich, jedoch hat sich im Nachhinein gezeigt, dass genau solche Rückschläge wichtig sind. Aus diesen Fehlern entstehen neue, oft bessere Lösungen, die das Projekt letztlich voranbringen.
Auch die Typografie ist aus meiner Sicht sehr effizient und gezielt eingesetzt. Sie unterstützt die Struktur der Seite, verbessert die Lesbarkeit und fügt sich harmonisch in das Gesamtbild ein. Schriftgrössen, Abstände und Hierarchien sind gut aufeinander abgestimmt und tragen zur Klarheit des Designs bei.
In diesem Projekt hatten wir die Chance viele neue Tools kennenzulernen und erste Erfahrungen damit zu sammeln. Darunter waren Vue, Nuxt, Tailwind, Supabase und n8n.
Wir benutzten AI für die Strukturierung der gescrapten Daten der Instagram-Posts und dabei machte uns die Unzuverlässigkeit von der AI zu schaffen. Für den gleichen Post als Eingabe bekamen wir teilweise sehr unterschiedliche Resultate. Die Justierung des Prompts war zeitintensiv und verbesserte die Resultate nur minimal. An einem Punkt mussten wir uns mit der Inkonsistenz der AI abfinden und fokussierten uns auf die wichtigsten Konstellationen an Daten.
Apify war sehr einfach aufzusetzen und zu warten. Auch die Integrierung in unseren Workflow war simpel, da es einen vordefinierten Node für Apify in n8n bereits gibt. Leider bemerkten wir mit der Zeit, dass gesetzte Parameter bei einem Scraping-Durchlauf nicht berücksichtigt werden. In unserem Fall wollen wir nur Posts scrapen, die maximal einen Tag alt sind, wir erhielten jedoch teilweise Posts, die bereits mehrere Monate alt waren. Diese Ungenauigkeit machte uns Probleme und wir mussten die dann in unserem Workflow korrigieren.
Da Nuxt 4 noch sehr neu ist, erwies sich das Hilfeholen als Herausforderung. Für viele AIs ist das Update noch zu früh und sie schlagen veraltete Lösungsvorschläge vor. Im Internet gibt es im Verhältnis auch weniger Posts, eben weil das Update noch nicht lange draussen ist. Oft erforderte es ein Ausprobieren, um auf eine Lösung zu kommen, was rein vom Lerneffekt wahrscheinlich besser war, jedoch deutlich mehr Zeit eingenommen hat.
n8n war unser Tool der Wahl für unseren Automatisierungs-Workflow. Wir waren bereits zu Beginn positiv überrascht, wie intuitiv das Bauen eines Workflows ist. Über das ganze Projekt gesehen hatten wir nur sehr wenig Probleme mit der Plattform und würden es wieder benutzen. Dieses Tool war für uns beide neu und im Rahmen dieses Projekts konnten wir uns vertieftes Know-How darüber aneignen und das war für uns ein grosser Erfolg.
TresJS ist ThreeJS aber für Vue optimiert. Das habe primär ich (Nici) gebraucht, um die Säule als 3D Element auf der Startseite zu platzieren. Die Dokumentation dazu ist teilweise ein wenig knapp aber war trotzdem ausreichend, um auch als neuer Benutzer klarzukommen. Schlussendlich war ich mehr als zufrieden über die Developer-Experience mit dieser Library und würde sie wieder verwenden.
Für mich was es das erste Mal, dass ich mit einem Framework gearbeitet habe und viel mitnehmen konnte. Zudem lerne ich den Prozess eines Deployments kennen und konnte praktische Erfahrung in der Zusammenarbeit mit GitHub kennenlernen. Generell konnte ich aus der Zusammenarbeit mit Nici und seiner Erfahrung viel lernen.
Wir konnten, trotz einiger Zusatzschlaufen, unsere Grundidee einer Eventplattform erfolgreich umsetzen und eine innovative Webseite schaffen. Der Prozess verlief mal schneller, mal langsamer, war jedoch grundsätzlich zielgerichtet und führte stetig vorwärts. Auch den Übergang zur spezialisierten Ansicht für Menschen mit einer Sehbeeinträchtigung konnten wir sauber lösen. Damit stellen wir sicher, dass unsere Plattform inklusiv gestaltet ist und ein möglichst breites Publikum erreicht.
Die Arbeit in der Gruppe hat gut funktioniert. Der Austausch im Team war konstruktiv, Ideen konnten offen eingebracht und gemeinsam weiterentwickelt werden. Durch die gute Zusammenarbeit konnten Probleme effizient gelöst und Entscheidungen fundiert getroffen werden. Jeder brachte seine Stärken ein, was sich positiv auf den gesamten Arbeitsprozess und das Endresultat ausgewirkt hat.
Zusammenfassend sind wir mit dem Ergebnis sehr zufrieden. Der Arbeitsprozess war intensiv, lehrreich und durch die funktionierende Teamarbeit besonders wertvoll.
Falls die Webapplikation nicht mehr unter der offiziellen URL gfonde.lu funktioniert, ist eine statische Version der Website vom 15. Januar 2026 hier einsehbar.