/mapapp

Primary LanguageJavaScript

🗺️ Meedle

ezgif-3-45b013568bc5

See it LiveVideo Walkthrough

📎 Description

Meedle is a location sharing app that finds an optimal spot to meet up

💡 Inspiration

Have you ever wanted to meet up with friends but can’t decide where? One friend wants to grab breakfast at the spot by their apartment, while the other insists that they meet closer to their house. You get frustrated and end up cancelling all together. Meedle is a live location sharing application that helps friends find an optimal place to meet in the middle. It keeps track of users’ real time geolocations, and uses the Google Maps API to generate a meeting place that will equalize travel time for all users. Meedle was built with React, Redux, Node.Js, Express, Socket.io, Turf.js, Nodemailer, postgreSQL, and Sequelize. Building this application, we learned how to track users’ geolocation, implement API security, and manage multi-user live data sharing.

🤔 Target Users & Main Features

Users

  • Any group of friends deciding meetup location, or simply wanting to keep track of each other's location

Features

  • Tracker Realtime Geolocations

  • Listen to realtime geo-location change

  • Prompt users to manually input address when geo-location watching fail Image of locationFail Image of userInput

  • Create User Session: generate unique map session for group of friends to share live geo-locations Image of create

  • Generate Invites From One of The Following Options

  • Session Code

  • Email Image of invite

  • Generate The Midpoint

  • Once friends joined the share map, session host will be able to generate the 'midpoint', which is the optimal geocode calculated base on equal travel distance of multiple user's geolocation coordinates Image of midpoint

  • Select Meetup Spot

  • The app will auto generate a list of coffee shops (max. 3) and allow the host to pick the final meeting spot Image of places

  • Generate Route And Find Directions

  • Once meeting spot is selected, a route from user's current location to the meeting point will be automatically generated Image of diection

  • Each individual user will be directed to google map for further tranportatio guides Image of googlemap

🚧 Feature Under Construction

  • Progrssive Web App (PWA): transform the web-app into a PWA and leverage the caching features
  • In-App notification: support in-app notifications

🍰 Tech Stack

  • Front-end: React, StyledComponent, React-Google-Map
  • Backend: Express, PostgreSQL, Sequelize
  • Deployment: Heroku
  • API Usage: Google Map API, Turf.js, Nodemailer