Kawfee

Inspiration

You ever go to a cafe... to study... and not find a table to sit at? This happened quite often to Ashley and I. So, we decided the best way to solve this problem was to create a website that would keep track of how many people are at a coffee shop at any given time.

What it does

Kawfee tracks the user's current web browser location (if given the permission to do so) and displays coffee shops that are closest to the user's location. For every coffee shop, Kawfee will show the user the number of people "checked-in" at that coffee shop, the distance from the user to the coffee shop, and get directions to the coffee shop on Google Maps. If the user is within 10 meters of the selected coffee shop, they can "check-in" while they're there and "check-out" when they leave. Kawfee tracks its user's location every 5 minutes and when the user is more than 25 meters away from the coffee shop it will automatically check them out.

How we built it

All the code was written in HTML, CSS + Bootstrap5, and Javascript. Most of the page organization/layout was done using Bootstrap5 and some of our own custom CSS snippets. We used Google's Places API (Javascript Library) to find coffee shops closest to the user's location. We tracked the user's location using HTML's Geolocation API and passed that response to Google's Places API to create an invisible marker on the map. We then passed this marker (userLocation) to the Places API's nearbySearch function to find all coffee shops around the area. We then stored the result from the Places API call into a database that we created using Firebase. Although Google's Places API provides relatively accurate information about how busy a place is at any given time, it doesn't provide a headcount of how many people are actually at that place. So, we created a data field in each of our database entries to keep track of the number of people CURRENTLY checked-in at a coffee shop. Whenever a user checks-in/out, our database is instantly updated and that information is also relayed to the front-end of our website.

Challenges we ran into

Most of the challenges we ran into had to do with making successful API calls and handling the requests simply because we haven't had much experience in working with APIs. It took some time to properly integrate Bootstrap5 along with our own custom CSS snippets.

Accomplishments that we're proud of

This is our first project together and this is also our first hackathon. We learned all the skills we used in making this project on our own on time, top of being full-time college students. However, when developing Kawfee, we definitely learned much more on both front-end and back-end. We overcame many challenges in terms of creating a responsive user interface, using Google APIs, and developing meaningful products.

What we learned

We learned A LOT about how to make calls to Google's APIs, handle the responses using async JS, and create simple yet effective web page layouts.

What's next for Kawfee

At the moment Kawfee only displays coffee shops near the user's location. We hope to integrate Google's Places API's Autocomplete function into a search bar so that people can search up ANY given location. This will allow people to plan ahead and see which locations (no matter how far) are busy and which ones are relatively empty. We also hope to integrate Google Maps into the website so that people can visually see how far each coffee shop is from their location (or any chosen location).

Built With

• bootstrap5
• css
• firebase
• google-places
• html5
• javascript