Einleitung
Nachhaltig leben - für uns bedeutet das, dass jeder mit seinen täglichen Entscheidungen einen kleinen Beitrag leisten kann, der sich zusammen mit vielen anderen zu etwas Großem summiert.
EcoQuest hilft, sich neue, umweltfreundliche Gewohnheiten anzueignen. Die Web-App bietet unterschiedliche Challenges zu Themen wie Strom sparen, Wasserverbrauch senken, Mobilität und Konsum. Damit orientieren wir uns an den Big Points des ressourcenschonenden Handelns. Schon kleine Veränderungen können hier einen Beitrag für die Energieeffizienz und den Klimaschutz leisten.
In EcoQuest können sich User ein persönliches Konto anlegen und sich für eine oder mehrere spannende Challenges eintragen. Eine Challenge geht ca. zwei Wochen. In diesem Zeitraum können über abgeschlossene To Dos Punkte gesammelt werden.
Dabei unterscheiden wir zwischen täglichen und einmaligen To Dos. Tägliche To Dos wie “Stecke ungenutzt elektronische Geräte aus” geben einen Punkt und können jeden Tag einmal abgehakt werden. Sie dienen dazu, Gewohnheiten aufzubauen und einen Blick für mögliche Verbesserungen im Alltag zu entwickeln. Einmalige To Dos können dagegen im gesamten Zeitraum der Challenge nur einmal umgesetzt werden. Aktionen wie “Organisiere einen Kleidertausch und spende nicht-genutzte Gegenstände” oder “Prüfe deinen Reifendruck, um den Benzinverbrauch zu reduzieren” sind aufwändiger und geben daher 10 Punkte. Diese Aktionen wirken auch nach Ablauf der Challenge weiter.
Das Punktesystem stellt dabei Motivation durch Gamification her. Der gesamte, aber auch der tägliche Fortschritt wird in animierten Grafiken dargestellt. Der tägliche Abschluss eines To Dos erhält den persönlichen Streak aufrecht. In einem persönlichen Dashboard werden alle noch offenen täglichen To Dos aufgelistet, was einen praktischen Überblick ermöglicht. Die Web-App kann durch eine Lernwelt erweitert werden, in der kurze Informationseinheiten mit Quiz das Wissen steigern und ebenfalls Punkte zu den jeweiligen Challenges geben.
Das eigene Profil können User bearbeiten und einen Avatar wählen oder einen eigenen hochladen. Das bietet einen guten Grundstock für zukünftige Erweiterungen, insbesondere im Community-Bereich: Punkte-Ranglisten, Badges bei besonderen Errungenschaften, die gemeinsame Teilnahme mit Freund:innen oder ein Pinnwand-System für Fotos und kurze Nachrichten fördern den spielerischen Aspekt weiter und steigern die Motivation sowie das Durchhaltevermögen.
Methodik
Die Umsetzung von EcoQuest erfolgte in einem vierköpfigen Entwicklerteam, das sich in wöchentlichen Meetings über den aktuellen Entwicklungsstand ausgetauscht hat.
Dabei hatten wir 2 Backend-Entwickler, die die technische Grundlage von EcoQuest implementiert haben. Hierfür haben wir eine REST-API mit Node.js und Express umgesetzt, über die das Frontend mit der Datenbank kommunizieren kann. Die Datenhaltung erfolgte über MongoDB, wodurch Benutzer, Challenges und Fortschrittsdaten flexibel in einer dokumentenbasierten Struktur gespeichert werden konnten. Zusätzlich wurde ein Session-Management implementiert, das die Registrierung, Anmeldung und Authentifizierung von Nutzer:innen ermöglicht und geschützte API-Endpunkte absichert.
Ein weiterer zentraler Bestandteil war die Umsetzung der Challenge-Logik im Backend. Dazu zählen unter anderem die Verwaltung von Challenge-Teilnahmen, das Speichern von Fortschritten sowie die Berechnung von Streaks und weiteren Nutzerinteraktionen. Die API wurde während der Entwicklung regelmäßig getestet, beispielsweise mit Postman und Hoppscotch, um eine zuverlässige Integration mit dem Frontend sicherzustellen.
Für das Frontend hatten wir ebenfalls zwei Entwickler:innen, die für ein konsistentes UI gesorgt haben. Die Gestaltung der Seite wurde zunächst in Figma angelegt, ausgehend von einer Challenge-Detail-Seite. Nachdem das Branding der Seite stand, konnten anhand der Entwürfe gemeinsam mit dem Backend-Team die gewünschten Funktionen und User Stories diskutiert werden. Abschließend wurde gemeinsam der Funktionsumfang des MVP definiert, damit entsprechend Prioritäten gesetzt werden können.
Da uns HTML und CSS bereits größtenteils vertraut waren, konnten wir direkt mit React und Vite in die Entwicklung einsteigen und haben dabei über Git kooperiert. Nach der API-Integration konnten wir die Daten aus der MongoDB anzeigen lassen, Challenges filtern, User anlegen und diese einloggen und an Challenges teilnehmen lassen und vieles mehr. Die unterschiedlichen Seiten, Menüs und Modale haben wir nach den Figma-Vorlagen gebaut und mit Animationen und ansprechendem Feedback für die User gestaltet. EcoQuest ist dabei komplett responsiv gestaltet.
Genutzte Tools waren Git & GitHub (Versionierung), VSCode, Postman/Hoppscotch (API Testing) und Figma (UI-Konzeption), sowie allgemeine KI unterstützung innerhalb der Programme und in LLMs.
Ergebnis
Der abschließende Stand der Web-App entspricht unserem MVP, teils ist der Funktionsumfang sogar übertroffen. Wir haben früh mit der praktischen Arbeit begonnen, wobei uns das unterschiedliche Vorwissen in der Gruppe sehr geholfen hat. Die wöchentlichen Meetings haben die nötige Verpflichtung in die Gruppenarbeit gebracht.
Durch die Nutzung von Git konnten wir schnell und sicher zusammen am Code arbeiten, was eine große Erleichterung war. Trotzdem war der gemeinsame Blick auf denselben Bildschirm hilfreich, insbesondere bei undefinierten Fehlerbildern. Beim Coden und Debugging waren KI-Tools hilfreich, aber ohne den Code zu verstehen waren die Snippets nicht nutzbar. Fast aller dort vorgeschlagene Code musste umfangreich überarbeitet werden, für die persönliche Lerngeschwindigkeit sind die Chats aber sehr nützlich.
Team
Sebastian May
Backend Entwickler - Challenges
Susanne Koellner
Frontend-Entwicklerin - UX/UI Design, Dashboard, Challenge Details + Menüs
Nasr Al-Qershi
Backend Entwickler - Users
Bibek Pant
Frontend-Entwickler - Setup, Layout, Challenges, Profile, Login + Registration
Mentor:in
Hamza Saeed
