Pollution Tracker

Mit dieser Anwendung können Nutzer beobachtete Umweltverschmutzungen melden (illegale Müllablagerungen, Plastik, Wasser, Luft, Chemikalien...), die Meldungen anderer Nutzer einsehen und die für sie relevanten Meldungen verfolgen.

Hauptfunktionen:

• Meldungen durchsuchen (Kartenansicht + Detailseite mit Foto)
• Echtzeitsuche (RxJS, 300 ms Debounce)
• Kombinierbare Filter (Typ, Zeitraum, eigene Meldungen, Favoriten)
• Verschmutzungen melden, bearbeiten und löschen (nur der Autor kann seine eigenen Meldungen bearbeiten oder löschen)
• Favoriten (Zähler in der Kopfzeile, eigene Seite, Speicherung im localStorage)
• Authentifizierung (Registrierung, Anmeldung, Abmeldung) und Benutzerverwaltung

Frontend (Angular 20)

Aufgebaut mit Standalone-Komponenten und einer Core-/Features-/Shared-Architektur. Der Anwendungszustand (Authentifizierung, Verschmutzungen, Favoriten) wird zentral mit NGXS verwaltet. Private Routen sind durch einen Guard geschützt, und ein HTTP-Interceptor hängt das JWT an die Anfragen an und behandelt abgelaufene Sitzungen. Das Meldeformular nutzt Reactive Forms mit eigenen Validatoren (GPS-Koordinaten, Datum, Foto-URL) und zeigt nach dem Absenden eine Zusammenfassung an.

Backend (Node.js / Express)

Eine REST-API mit Sequelize auf PostgreSQL, abgesichert durch JWT (HTTP-only-Cookie) und Passwort-Hashing mit bcrypt. Die API ist mit Docker containerisiert und wird über eine GitHub Actions-CI/CD-Pipeline auf Render bereitgestellt.

Liste der Verschmutzungen

Der komplexeste Teil des Projekts: Die Liste kombiniert mehrere Datenströme (Verschmutzungen, Suche, Filter, Favoriten und angemeldeter Nutzer) mit RxJS combineLatest, sodass sich die Anzeige sofort aktualisiert, sobald sich einer davon ändert.