Ben Hammond
Blog: Ben Hammond.Tech

Blog: Ben Hammond.Tech

FamilyFriendly App (Node with Express)

Plot crowd-sourced baby changing table locations for caregivers of all genders

FamilyFriendly App (Node with Express)
Ben Hammond

Published on Mar 18, 2021

4 min read

Delegates and restricts users' CRUD permissions with OAuth2; uses JavaScript Map API to plot user location and data points; integrates a deployed MongoDB Atlas NoSQL database; internally operates on a RESTful API backend in Node and Express with EJS templating

BACKGROUND

Every parent and caregiver is far too familiar with the drama of diaper changing on-the-go. My family will seek out Starbucks while on road trips, knowing they will provide: changing tables accessible by caregivers regardless of gender, assorted snacks, a standard of cleanliness, and of course coffee for us sleep deprived adults.

My wife suggested building an app that would allow an overstressed parent to quickly look and see whether a rest stop option included those basic childcare amenities, and thus Family Friendly was born! As a simple MVP (minimum viable product), the app currently plots a map showing spots that feature a changing table, and what type of restroom it's in (👩 Womens, Both, etc). Users can view this data based on their geolocation, and if they choose to securely log in with their Google account, they can add their own places and report when they encounter (or don't) the unicorn that is changing tables in BOTH bathrooms.

SCREENSHOTS

Mobile
mobile-splash.jpg mobile-reports.jpg
Desktop (Logged In Google OAuth)

desktop-list.png

TECH

  • Front-End: HTML, CSS, Javascript, EJS
  • Back-End: Node.js (Express, Passport), MongoDB Atlas, Mongoose
  • APIs: Google OAuth2, Google Maps Javascript API
  • Development: Git, GitHub, VSCode, Prettier, Draw.io, Trello

RESOURCES

DEVELOPMENT

ERD - Entity Relationship Diagram

Initial Wireframe

POTENTIAL FURTHER DEVELOPMENT

  • Choose an existing place (from Google Places API?) for user to report.
  • Add meta tags etc to html.
  • Display city and country name in list of places.
  • Save a user's last known location, and default to that. Only use geolocation once or when user requests an update.
  • More report options: Parking, Seating, Breastfeeding Room, Play Area, Stroller Friendly, etc.
  • Filter mapped results based on caregiver and child needs.

GETTING STARTED

Please enable geolocation when prompted, and be sure the web address begins with HTTPS (this should be done automatically in Node.js now). Development was done in Brave (a Chromium browser).

 
Share this