Blup

A web app to find public drinking fountains.

A community-driven platform where users can contribute by spotting and adding new fountains, verifying existing ones, reporting problems or malfunctions.

Made with Node.js, Express.js, MongoDB (Mongoose.js) and EJS, Blup started as my heavily customized final project for the 'The Web Developer Bootcamp 2021' course and is currently a work in progress for a full-fledged, production-ready web app.

Deployed version is a prototype with functioning core features and a database populated by fake data.


Source code Website
Image
Main fountains map (fake data)

Technologies

Backend

Frontend

Visit Website

What I did

Software architecture

  • Designed the application following the Model–View–Controller pattern
  • Implemented an extra Service layer in order to decouple business logic from Express.js controllers
  • Implemented a Publish/Subscribe system using Node.js events in order to handle background tasks

Backend

  • Used Express.js to create a server and define RESTful routes
  • Used MongoDB with Mongoose.js to model data and handle CRUD operations
  • Used EJS templating language to generate server-side rendered views
  • Used JOI for data validation in CRUD operations
  • Used express-session and Passport middlewares to handle authentication and authorization
  • Used multer and cloudinary middlewares to handle file upload
  • Used sanitize-html module, express-mongo-sanitize middleware and Helmet middleware to provide basic security

Frontend

  • Developed a mobile-first and fully responsive interface with Bulma. I choose a css-only framework like Bulma because I felt DOM manipulation was not extensively covered during the course and I wanted to practice more with frontend JavaScript
  • Written several scripts for page navigation and interaction: changing tabs, closing notifications, opening and closing modals, navbar behaviour
  • Written my own form validation functions, using ES6 classes and the Template Method design pattern
  • Implemented AJAX operations to dynamically change page content when posting or deleting verifications, comments and reports
  • Used Mapbox GL JS to display registered fountains on a cluster map
  • Used Glide.js to implement a simple image carousel