Retour à tous les projets

Pollution Tracker

Angular TypeScript NGXS Node . js PostgreSQL

Cette application permet aux utilisateurs de signaler les pollutions qu'ils observent (dépôts sauvages, plastique, eau, air, produits chimiques...), de consulter les signalements des autres utilisateurs et de suivre ceux qui les intéressent.

Fonctionnalités principales :

  • Consulter les signalements (liste sous forme de cartes + page de détail avec photo)
  • Recherche en temps réel (RxJS, debounce de 300 ms)
  • Filtres combinables (type, période, mes signalements, mes favoris)
  • Déclarer, modifier et supprimer une pollution (seul l'auteur peut modifier ou supprimer ses propres signalements)
  • Favoris (compteur dans l'en-tête, page dédiée, sauvegarde dans le localStorage)
  • Authentification (inscription, connexion, déconnexion) et gestion des utilisateurs

Front-end (Angular 20)

Développé avec des composants standalone et une architecture core / features / shared. L'état de l'application (authentification, pollutions, favoris) est centralisé avec NGXS. Les routes privées sont protégées par un guard, et un intercepteur HTTP ajoute le JWT aux requêtes et gère les sessions expirées. Le formulaire de déclaration utilise les Reactive Forms avec des validateurs personnalisés (coordonnées GPS, date, URL de la photo) et affiche un récapitulatif après l'envoi.

Back-end (Node.js / Express)

Une API REST avec Sequelize sur PostgreSQL, sécurisée par JWT (cookie HTTP-only) et par le hashage des mots de passe avec bcrypt. L'API est conteneurisée avec Docker et déployée sur Render via un pipeline CI/CD GitHub Actions.

Liste des pollutions

La partie la plus complexe du projet : la liste combine plusieurs flux de données (pollutions, recherche, filtres, favoris et utilisateur connecté) avec combineLatest de RxJS, ce qui met l'affichage à jour instantanément dès que l'un d'eux change.