readme.md

Blup

Blup is 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.

Try a deployed prototype with fake data here: https://blup-stg.herokuapp.com/

Currently a work in progress for a full-fledged, production-ready app.

Features

Find a fountain

Use the main map to see if there are fountains near you.

Click on the map pointer to know more about a fountain. In this case there are three verifications, which means that at least 3 people have indeed either seen the fountain or have stopped by it. There are also two active reports, clicking on the "Show" button will take you to the fountain page where you'll find more details.

Know more about a fountain thanks to community contributed data

On a fountain page you can look at its photos, find out verifications' authors (by clicking on the verifications count button), read comments and reports.

Sign up and contribute

Create an account to be able to add a fountain, comment, send verifications, add reports or mark them as solved.

Built with:

Backend

• Node.js
• Express.js
• Mongoose.js
• MongoDB
• EJS
• Joi
• Multer
• Cloudinary
• Helmet
• Passport

Frontend

• Bulma
• Mapbox GL JS
• Glide.js
• bulma-collapsible

To do

Backend

• Find fix for upload size limit problem (see this issue ) or an alternative to using Multer altogether
• Avoid repeating geocoding if address doesn't change when editing a fountain
• Fix redirect to favicon 404 bug
• Remove images operations from fountains controller, add images specific routes instead
• Add retry logic to api calls (e.g. cloudinary)
• Add user profile view (user fountains etc...)
• Add users reputation system

Frontend

• Use mapbox cdn only where needed
• Find fix for Glide.js touchscreen bug (see this issue) or even better develop your own image carousel
• Improve form validation rules
• Add "file is uploading" animation
• Add a visual enanchement to new comments or reports when they are posted
• Add search by address function
• Add function to select point on a map to add a new fountain (get address and autocomplete form)

Acknowledgments

• YelpCamp from The Web Developer Bootcamp 2021 by Colt Steele, which I took as a starting point for the project after attending the course
• Bulletproof node.js project architecture article by Sam Quinn, for insights on software architecture