Blup

Una web app per trovare fontanelle d'acqua pubbliche.

Una piattaforma comunitaria in cui gli utenti possono contribuire trovando e registrando nuove fontane, oppure verificando la presenza di quelle già segnalate o riportando problemi e malfunzionamenti.

Realizzato con Node.js, Express.js e MongoDB (Mongoose.js) e EJS, Blup nasce come il mio progetto finale per il corso 'The Web Developer Bootcamp 2021' ed è attualmente un work in progress per una web app completa e pronta per l'uso in produzione.

La versione attualmente rilasciata è un prototipo con le core feature funzionanti ed un database popolato da fake data.


Source code Website
Image
Mappa principale delle fontane (fake data)

Tecnologie

Backend

Frontend

Prova Blup

Cosa ho fatto

Software architecture

  • Ho progettato l'applicazione seguendo il pattern Model–View–Controller
  • Ho implementato un Service layer al fine di disaccoppiare la business logic dai controller Express.js
  • Ho implementato un sistema Publish/Subscribe tramite gli eventi Node.js al fine di gestire le operazioni in background

Backend

  • Ho usato Express.js per la creazione del server e la definizione di rotte RESTful
  • Ho utilizzato MongoDB con Mongoose.js per la modellazione dei dati e la gestione delle operazioni CRUD
  • Ho utilizzato il linguaggio di templating EJS per generare le view e sfruttare il server-side rendering
  • Ho utilizzato JOI per la validazione dati nelle operazioni CRUD
  • Ho usato i middleware express-session e Passport per gestire autenticazione e autorizzazione
  • Ho utillizzato i middleware multer e cloudinary per gestire l'upload dei file
  • Ho fatto uso del modulo sanitize-html e dei middleware express-mongo-sanitize ed Helmet per garantire la sicurezza base dell'app

Frontend

  • Ho sviluppato una interfaccia mobile-first e totalmente responsive con Bulma. Ho scelto un framework css puro (senza Javascript incluso) come Bulma perché non ritenevo di aver apprfondontio abbastanza la manipolazione del DOM durante il corso, ho colto quindi l'occasione per fare più pratica con JavaScript per il frontend
  • Ho scritto numerosi script per la navigazione e l'interazione con l'interfaccia: cambio tab, chiusura notifiche, apertura e chiusura modali, comportamento della navbar
  • Ho scritto da zero delle funzioni per la validazione client-side dei form, utilizzando le classi ES6 ed il Template Method pattern
  • Ho implementato delle operazioni AJAX per aggiornare dinamicamente il contentuto della pagina quando si inseriscono od eliminano verifiche, commenti e segnalazioni
  • Ho usato Mapbox GL JS per mostrare le fontane registrate su una mappa a cluster
  • Ho utilizzato Glide.js per implementare un semplice carousel per le immagini