As we emerge from the pandemic, we also gradually adjust to socializing more often with others again. But making friends can be difficult, and the pandemic hasn’t helped. To become friends with someone, it’s important to consistently see each other, but making plans with many people can be difficult when you have to consider everyone’s schedules and preferences. Eventually, this issue led to a solution that we thought of, which is creating a mobile app to plan a meal date with a group of friends.

What it does

Mob is an app to help people decide where, when, and what to eat. Making plans can be hard when you have to juggle everyone’s different tastes and schedules - Mob makes it easy to eat with friends. Plans are more concrete because users find what time works best for them during their busy schedules to catch up with people they haven’t talked to in a long time. The social aspect touches a bit on mental health benefits since many might have felt lonely during quarantine. Our app allows people to find and make new friends while eating a delicious meal. Mob also reinvigorates communities and builds new ones by encouraging people to try new food places to help small businesses.

How we built it

We utilized Figma for our design and prototyping. We used HTML, CSS, and React.js on Visual Studio Code to code our final product. Additionally, we used GitHub for version control and Google Firebase for cloud database services and web hosting.

Challenges we ran into

Since most of us were inexperienced with react.js, we were learning the tool while we code. There were occasions when we encountered an error by trying to run the code, so we had to debug in the terminal. The CSS aspect of the screen display was also taxing because we wanted the display to be both mobile and desktop-friendly. For instance, the calendar that schedules available days did not fully show up on the mobile version, so we had to figure out a way to scroll the screen, and make sure that every element is centered. Another challenge was implementing a Google Maps API to search nearby restaurants. We were able to display an interactive map, but we did not have enough time to complete our implementation of the Google Maps Places API to search for restaurants.

Accomplishments that we're proud of

We’re proud of our brainstorm session when we wireframed our UI/UX design on Figma after choosing a color scheme, target audience, and text fonts. Another accomplishment was coding our home and lobby screens. We successfully coded text boxes for user input, a dropdown menu for dietary restrictions, and a calendar to update meeting times preferences. Finally, we were able to generate a new URL link for every user who wants to create a lobby.

What we learned

We learned how to navigate Figma and react.js to create frames. With Figma, we specifically learned how to make button functions to improve our UI app. Then, we transformed exactly what we wanted into reality with react, which was a new platform for many of us. This means learning how to put HTML code into the JavaScript file, and knowing how to not overwrite code when doing Github commits. We also have a dropdown menu that not only lets the user selects dietary preferences but also lets the user add their own preference. Moreover, most of the team experienced their first-ever hackathon with DubHacks, so we have learned a lot about the processes of submission, judging, and working with a team on a project that attempts to solve a problem in under 24 hours.

What's next for Mob

We are always thinking about interconnecting people’s lives and fostering relationships among peers through food. In the future, we can expand on showing more details about restaurants such as customer reviews and images of the dishes. Furthermore, we would like to build on to the voting section by coding a random generator to randomly select a restaurant. We can also implement a login system to keep track of the user’s preferences and past restaurants so the user doesn’t have to keep answering the same questions because the information will be saved.

Share this project: