"Where are you?" "I'm here. Where are you?" "I still don't see you." "Ugh just call me." We are tired of the endless back-and-forth texts that inevitably accompany any meet-up between friends. Sure, it's possible to use Find My Friends to track your mates' locations, but the signup and friend adding process is long and arduous, and the features are lacking. It provides no way to communicate and propose meeting times and locations.

The classic application might be when the you and the lads are deciding which pub to go to. It would be useful to know where everyone is, exchange group messages, and suggest and vote on various locations and times.

The app could also be helpful in situations like this weekend's hackathon. It's often difficult to keep track of all of the members on group project teams, particularly at critical junctures of the project. It would be helpful to place markers, send messages, and set times for group meetings, as well as locate suspiciously absent team members.

Coordinate, noun: Each of a group of numbers used to indicate the position of a point: A revolutionary webapp allows you to see the coordinates of all of your mates

Coordinate, verb: To bring the different elements of a complex activity into a relationship that will ensure efficiency or harmony: The lads coordinated their pub crawl on an awesome new web app

What it does

Coordinate allows users to create a group with one click. They are given a unique url which they can share with their friends. The location of every person who joins is shown on the map, and is updated continuously.

Each person can pose suggestions to the group. These suggestions have three optional properties: place, time, and message. Any suggestion that contains a message will appear in the chat window. Suggestions with the place attribute will appear as markers on the map. Suggestions with the time attribute will appear in a window containing possible meeting times.

If a suggestion with multiple attributes is selected in one location, its other attributes will be highlighted in the other locations. For example, if a suggestion with a message and a location is selected in the chat window, then the corresponding pin on the map is highlighted.

Users can also vote on each attribute of the suggestions so they can come to a consensus. For example, if another user has created a suggestion about a venue that you approve of, but the time they suggested doesn't work for you, then you could upvote the location, downvote the time, and create a suggestion for a time that does work for you.

How we built it

There are three components to the web app: frontend, backend, and database. The frontend and backend are run on StdLib, and the database is run on MongoDB.

The frontend is built with Vue, and consists of three app views. The first view is used to create a new group. The group creator enters a group name and gets a unique URL to share. All of the people who click that link are sent directly to the second view, where they sign in. To keep things as simple and easy as possible, users need only enter their name (there is no need for registration with a password because they group is secured with a unique URL). The third, main view is the map. It shows the location of each person in the group, as well as all of the map markers placed by the group members. At the bottom of the screen, there are sections for all of the messages, times, and places that have been suggested. The map was created with the google maps api, and the rest of the GUI was created with Vue.

The backend (and parts of the frontend) are made with Node.js. The backend is responsible for getting the individual user data from the front end (such as their geolocation and the suggestions that they make), and sending that data to the database. It also retrieves the json data from the database for all of the people in the group, and sends that to the frontend to be displayed.

The database, hosted on MongoDB, stores the locations and the suggestions of all of the users.

Challenges we ran into

• The google maps api does not automatically scale or center the map. The zoom level can be any value between 1 and 21, but the documentation does not specify exactly how big the zoom levels are in terms of coordinates. We had to find the coordinate range for several zoom levels and use regression to find the function that maps that range to a zoom level (zoom = ( 6.6 - ln(coordrange) ) / 0.69).

• Geolocation data is not retrieved immediately. It takes about 15 seconds to load the user's location. So, if you try to send or display the location before it is actually ready, you run into issues.

Accomplishments that we're proud of

• Two of the group members did not know web development going into this project. We had to learn javascript on the fly.

What we learned

• We learned a lot more about each of the components that we used (Node.js, StdLib, Google Maps API, etc).

What's next for Coordinate

• Find events and parties on Instagram and Twitter posts, then use the location data from those posts overlay a "heatmap" onto the map to show where those events are currently happening.

• Show google maps directions to the highest voted location. Use the highest voted time to recommend what time each person should leave.

• Display not only the number of votes, but also who voted for what.

Built With

Share this project: