MyDietmAPP

Never worry about restaurants in a new area again. With MyDietmAPP, easily locate nearby restaurants that align with your dietary restrictions - and even find relevant menu items!

Comment

📱 Inspiration 🌱

There are over 1.5 billion vegetarians worldwide. In the United States alone, 6.8 million people are unable to consume nuts. Funnily enough, two of our very own team members must eat with these dietary restrictions in mind everyday! Throughout our time together, we have found that there is no easy way to determine if a new restaurant is accommodating towards both of these needs. Therefore, we decided to create MyDietmAPP, an app that allows users to see local restaurants that meet their dietary restrictions, all presented on a well developed map-like interface.

🌆What it does 📍

MyDietmAPP first prompts the user to select their relevant dietary restrictions. It then displays a map interface that shows all restaurants near the user offering dishes that accommodate the user's dietary needs. Clients can contribute to the community by leaving a unique review of their experience, which involves noting the dish name they ate and the dietary restrictions that it met, which allows future user's to benefit from data that they know was created by like-minded authentic humans.

🌀 How we built it 💻

Frontend: We used html, CSS, and JavaScript in a react-native environment to develop the web application that was used to collect relevant data on the users' dietary restrictions. This interface was also used to filter and then show nearby restaurants based on dietary restrictions on a leaflet-embedded map display.

Yelp Fusion API: We used the Yelp Fusion API to scour Yelp for nearby restaurants based on the user's current location. This was the best choice for us because although we were only provided with 300 API calls, the relatively simple setup and the fact that it was free to use made it ideal for our project. The API was used in a JavaScript program to gather restaurant names, addresses, and longitudinal/latitudinal coordinates.

SQL: We used SQL to gather all of our data into one database, which we then had to integrate into our web app.

🚥 Challenges we ran into 🚩

Web scraping: We had originally tried to use web scraping to find different menu items, but ran into difficulties due to websites having security measures to prevent against it. Even when it did work, our algorithm was not very good at recognizing menu items compared with other text.

React-native: We had difficulty setting up a developer environment for react-native in VSCode. It was a rather long and detailed setup process, which meant small slip-ups resulted in us going down a long rabbit hole of error-solving. It turned out that Youtube and ChatGPT ended up being very good resources.

SQL: We struggled with data collection using SQL as we had never used the language before. It was truly a learning process, but we are much more familiar with SQL now.

Frontend/Backend Integration:

🏆 Accomplishments that we're proud of 🔰

  • Embedding an interactive map interface into a web app
  • Using an API to obtain information from websites
  • Creating a fully functional web app with a detailed backend
  • Developed unique strategies to keep the app human-centered at its core
  • Figuring out how to use Navigator web API to find the real time location of the user

📖 What we learned 🧠

  • How to use APIs to get data into a database
  • Using react-native to develop a web app
  • How to use SQL to process large amounts of data

♻️What's next for MyDietmAPP 💹

  • Implement Selenium to use web scraping more effectively so that we can start populating our database and make it more useful to early testers.
  • Add a report feature so that intentional misinformation can be flagged and removed
  • Create an incentive system for users to provide more feedback and use the app more regularly
Share this project:

Updates