Beep Beep I'm Going Places

search screen
title screen

Inspiration

Deciding on the perfect place to spend your time can be difficult. It is easy to overlook desirable places and activities, especially with a busy schedule and little knowledge about an area. Taking inspiration from popular tools that students use to manage their schedules, our project helps to eliminate these issues.

What it does

Our project allows users to find popular businesses near any location. Users can choose a location to start their search by clicking anywhere on the map, or entering a location into the search bar. Pins will appear on the map to indicate popular businesses near the selected location. Users can click on these pins, or the search results in the side bar, to visit the Yelp page for these businesses. Users can then add or remove businesses from their Favorites List . From the Favorites List, users can add businesses to their calendar in either the monthly, weekly, or daily view. From the daily and weekly views, users can edit the specific time and duration of their planned activity.

How we built it

Our technology stack is built on NextJS, a meta-framework built on top of React that, among other various features, comes with prepackaged with a backend. This was extremely useful and time-saving for us since we did not need to worry about cross origin resource sharing and could intuitively establish routes for our backend.

We also used Firebase to manage our users and to store user data. We want our users to be able to keep track of any locations they are interested in as well as the schedules they want to plan out. Firebase has a myriad of services beyond just authentication and data storage, yet provides an easy and simple way to use any or multiple of them.

To make choosing activities as seamless as possible, we used Leaflet to generate interactive maps that allow users to pick a point on the map or search for a city and see many of the popular places surrounding it. The popular places were obtained using Yelp's Business Search API, which contained extremely helpful data on a certain place's name, exact location, phone number, and more. Once a user has selected some activities they can choose when and how much time to spend on each one through an interactive calendar we generated using the FullCalendar JavaScript library and save those plans in our database.

Challenges we ran into

The interactive calendar is one of the main features of our application. However, we ran into many issues when trying to populate the calendar. We originally planned to use a different calendar tool, but it had limited documentation about its features, and we were spending too much time attempting to figure out how to implement the calendar. After switching to use FullCalendar, we had less trouble implementing it. However, we still had difficulty displaying the calendar entries.

A significant part of our application relies on adding and removing business from each user's entry in the database. We ran into many challenges surrounding this step. It took a lot of research and experimenting to figure out how to correctly send this data to the database and update the specific parts of each data entry. Then, we had to correctly reflect these changes on the screen. The

the feature of a business being added to the database
the location calculations and pins
the interactive calendar

Accomplishments that we're proud of

Our team endured many challenges throughout this weekend, including various code bugs and learning how to use Leaflet and FullCalendar. However, as a team, we were able to resolve and find workarounds to many of them!

What we learned

We were able to grow our existing knowledge in NextJS, React, and REST API concepts and how to use complex libraries and services to our advantage. We also learned more about each other as teammates!

What's next for Beep Beep I'm Going Places

We plan on growing our web application by finding ways to fix the aforementioned issues regarding the calendar and adding more features that can enhance the satisfaction of our users! For example, we discussed exporting .ics calendar files so they can save their activity plans on their phones as well.