https://github.com/jernestmyers/catch-me-at

a feature-rich application that allows users to create itineraries by placing markers and descriptions on a google map. built with react on the front and firebase on the back.
https://github.com/jernestmyers/catch-me-at

date-fns firebase-auth firestore firestore-database google-maps-javascript-api nosql-database places-api places-autocomplete react react-google-maps react-router uniqid

Last synced: 7 days ago
JSON representation

a feature-rich application that allows users to create itineraries by placing markers and descriptions on a google map. built with react on the front and firebase on the back.

• Host: GitHub
• URL: https://github.com/jernestmyers/catch-me-at
• Owner: jernestmyers
• Created: 2021-11-06T00:24:22.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-21T19:33:38.000Z (about 1 year ago)
• Last Synced: 2025-05-17T04:35:13.146Z (about 1 month ago)
• Topics: date-fns, firebase-auth, firestore, firestore-database, google-maps-javascript-api, nosql-database, places-api, places-autocomplete, react, react-google-maps, react-router, uniqid
• Language: JavaScript
• Homepage: https://catch-me-at.firebaseapp.com/
• Size: 27.7 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# catch me at

![gif demonstrating the app's features](./catch-me-at-preview3.gif)

## live version

[click here](https://catch-me-at.firebaseapp.com/) for a live version!

## technologies used

 

  

  

   

  

  



## app features

1. uses [Google's Maps JavaScript API and Places API](https://developers.google.com/maps/documentation) and the [@react-google-maps/api](https://react-google-maps-api-docs.netlify.app/#section-introduction) library to allow users to create rich, dynamic map itineraries.

2. integrates Firebase authentication wherein users can either access all the features via their Google account or users can explore the web app as a guest.

3. data for Google account users is persisted to the back end via Google Firebase's Cloud Firestore NoSQL database.

4. users can search for, and connect with, other users via a custom-built autocomplete search bar that scans the collection of user names.

5. users can choose to set their map itineraries as private or public; further, users can select which, if any, of their private connections to share their map with.

6. users can "like" maps, comment on maps, and save publicly-shared maps.

7. imports the [date-fns](https://date-fns.org/) library to format dates and times and to dynamically sort the itinerary events in chronological order.

## areas for improvement

1. skew the Places Autocomplete API to the user's location, if shared, in order to optimize the map search experience.

2. add "loading" indicators to ensure data fetches are complete before user continues interacting with the site.

3. add error handling to alert user to issues.

4. make use of localStorage to ensure data persists appropriately on reloads or other breaks.

5. refactor the autocomplete feature for user connections such that a user can navigate via keyboard.