Skip to content

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.

Notifications You must be signed in to change notification settings

jernestmyers/catch-me-at

Repository files navigation

catch me at

gif demonstrating the app's features

live version

click here for a live version!

technologies used

react firebase html5 css3 javascript

app features

  1. uses Google's Maps JavaScript API and Places API and the @react-google-maps/api 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 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.

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published