MeetApp | Devpost

example 2
example 4
example 1
example 3

Inspiration

My friends always argue about where to go, and it is usually the loudest who decides. I thought there must be a fairer way to do this: that what led to MeetApp. It is to provide indecisive friends with a list of suggestions of where to go.

What it does

MeetApp is a Web App that aims to make meeting with your friends easy and hassle-free. It aims to resolve arguments by identifying the venues that are easiest for all friends to get to, and displaying their reviews upfront.

How we built it

Once we came up with the initial idea of our project, we began thinking about technologies and APIs we could use to make it a reality.

We quickly decided to write our frontend in React since it is a widely-used framework that has good documentation, which was particularly useful since most of our team had never used React. The abstractions React provides over the DOM API allowed us to iterate quickly without dealing with verbose and error-prone raw HTML/JS/CSS. We used the Chakra UI component library to make it look nice.

On the server-side we decided to use node.js and express since we were comfortable with the framework.

In researching navigation and location search APIs we found Google had options covering all our needs. On the server side, we used the Google Maps NearbySearch API to get the places of interest around the centroid of all submitted friend positions. Then we used the Maps DistanceMatrix API to get the travel distances and times for each of the potential places. We then ranked them by shortest cumulative travel time, and returned the data to the client.

Challenges we ran into

Learning React

Most of the people on our team had never used react, and the two people who had didn't remember any of it. High-quality tutorials on the React websites helped us learn the basics of the framework.

Find a React maps library

It was a challenge to find a mapping library that we could make work, and supported features like annotations and custom styles.

Since we were using Google APIs for everything else, we used the Google Maps Map SDK for the maps in our webapp. Unfortunately, we found it difficult to find a React wrapper around the SDK, and couldn't get the examples on the Google site to work. There are many 3rd party libraries available, but most had lacking documentation and were unmaintained (the last commit in the library we eventually used was 12 months ago).

Accomplishments that we're proud of

learning React
making a useful webapp
combining Google map APIs for a cool result
the "toggle large person" feature
designing a MeetApp logo as well slides for the science fair, where we use Canva