Travel Buddies

Isn't it frustrating navigating through the lively but hectic Atlanta alone? Let us help you find a travel buddy!

Comment

Inspiration

The inspiration for the project began during fall break. Two of our group members, Julie and Reese, planned to head to the airport with their friend Emily. Since they had an early morning flight and they discovered that the MARTA wouldn’t be running at the time, they pre-ordered an UberX to arrive at the dorm. Their friends Ayush and David happened to have flights at similar times, but realized the night before that they would be unable to take the MARTA to the airport. As the Uber had one spot remaining, Reese extended an invitation to David, but didn’t know Julie and Emily had already promised Ayush the last spot. Once everyone realized what had happened, there was some confusion as new Ubers were called and decisions had to be quickly made on how everyone would reach their flights. Thus, our group wanted to help prevent such a situation from occurring again in the future. We wondered if there was a way that we could use a web application to coordinate which groups would go to the airport together, and help everyone find others to travel with.

What it does

Our website allows Georgia Tech students to input their travel plans to the airport, view students with similar plans, and get in touch with those students to travel together. The way the user interface works is similar to a survey, where a person can enter in their name, phone number, GT email address, date of travel, the time range during which they would be willing to leave, flight time, location where they want to be picked up at, and any additional comments they might want to add. Once they select the “Go” button, they will be redirected to a site that will show them all the people who are leaving on the same date, as well as their contact information. The user can then contact whomever they choose to set up travel plans together.

How we built it

Overall, we used the MERN stack to build our application. We first followed a tutorial on the MongoDB website that allowed us to create a database and add information to it. It also demonstrated how to display the information using react.js onto a website, and implement the server-client model. It used an employee database as an example. Thus, after first successfully creating and utilizing the employee database, we worked to change the database from storing employees to storing students and the various information associated with each student. Additionally, we wanted to find a way to filter through all of the data and only present some of the information based on what the user inputted into the form. We created a filter function in the server folder, and used it to select the data displayed in a new page. To develop the front-end of our website, we mainly used Javascript, HTML & CSS, and React. We started by creating a Figma to model our vision for our website. Then we took our template from a MongoDB documentation that created Person objects and assigned properties of Name, Position, etc. to them. We changed the format of this template using the box model element in CSS to wrap around our HTML that displays the user's key contact information on the second page. We also implemented new input functions to take in more user properties, including a drop down menu that allows users to select their leaving time range in 30 minute intervals. Additionally, we used the CSS overflow property to implement a scrolling feature to scroll through the box that contains the user’s information.

Challenges we ran into

Before HackGT, we struggled with connecting to MongoDB Atlas. By reading documentation from MongoDB, we were able to get the connection set up on each of our Mac and Windows laptops this weekend, enabling all of us to test our application locally.

The MERN stack is something we’ve all wanted to learn how to use, but it’s not something we’re not very familiar with. We all had varying levels of experience with HTML, CSS, JavaScript, React, and databases, so we all challenged ourselves by learning as we worked.

Accomplishments that we're proud of

Our goal coming into the hackathon was to submit something that worked - however basic it might be - and we are proud that we were able to create a project that fits our vision and functions the way we want it to. We also had plenty of time to exceed our expectations and add on features to make our website cleaner, more organized, and more efficient. Overall, we are proud of the knowledge that we gained by preparing for this hackathon and during the hackathon itself, where we continued to look for new features to implement to ensure that we were always taking our project one step further.

What we learned

We all gained a clear understanding of the various aspects of implementing a web application, especially in regards to using the MERN stack. We practiced with brainstorming ideas and platforms, and creating an initial front-end design using the Figma website. Additionally, we learned how to utilize a MongoDB tutorial and the server-client model to fit the purpose of our website. We got to work with languages both on the front-end and the back-end, and better understand how to work with a MongoDB database and connect it to react.js. Overall, we had the chance to learn more about the function of each part of a full-stack MERN application. We also found how to effectively split up project roles while continuously collaborating to optimize our work together.

What's next for Travel Buddies

We want to make the filter function more advanced by filtering based on overlapping leaving time range and on-campus location, in addition to its current function of filtering by travel date. We also plan on adding usernames and passwords, so users can update their travel plans, if they change, and find travel buddies for their new schedules. We also want to allow users to specify their preferred mode of transportation, rideshare (Uber/Lyft), or MARTA, so that they can travel the way they want. The user interface is also a key feature that can be improved, by making it more visually-appealing and intuitive so that it can fit the needs of every user.

Long-term, we want people to be able to form Uber/Lyft carpools on our site, calculating the price per member in advance. Our website would aid in selecting relevant travel plans, such as preventing someone from using the MARTA when it’s not in operation and comparing prices of possible rideshares.

Built With

Share this project:

Updates