Back to all projects

Pollution Tracker

Angular TypeScript NGXS Node . js PostgreSQL

This application allows users to report pollution they observe (illegal dumping, plastic, water, air, chemical...), browse the reports of other users and keep track of the ones they care about.

Main features:

  • Browse pollution reports (card list + detail page with photo)
  • Real-time search (RxJS, 300 ms debounce)
  • Combinable filters (type, date range, my reports, my favourites)
  • Report, edit and delete pollution (only the author can edit or delete their own reports)
  • Favourites (counter in the header, dedicated page, saved in localStorage)
  • Authentication (sign up, log in, log out) and user management

Front-end (Angular 20)

Built with standalone components and a core / features / shared architecture. Application state (authentication, pollution, favourites) is centralised with NGXS. Private routes are protected by a guard, and an HTTP interceptor attaches the JWT and handles expired sessions. The report form uses Reactive Forms with custom validators (GPS coordinates, date, photo URL) and shows a summary once submitted.

Back-end (Node.js / Express)

A REST API with Sequelize on PostgreSQL, secured with JWT (HTTP-only cookie) and bcrypt password hashing. The API is containerised with Docker and deployed to Render through a GitHub Actions CI/CD pipeline.

Pollution list

The most complex part of the project: the list combines several data streams (pollution, search, filters, favourites and the logged-in user) with RxJS combineLatest, so the display updates instantly whenever any of them changes.