FamilyFriendly App (Node with Express)

This post was written back in the days where Heroku provided free hosting; do not expect any example projects or links to Heroku to work.

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

Desktop (Logged In Google OAuth)

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

• Water.css
• Material Design Icons
• Styling HTML Buttons
• Forcing HTTPS with Express / Heroku
• PNG Tree and Toptal - Royalty Free Images

DEVELOPMENT

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).

• View GitHub Repo