UMD Dining Hall Menu Nutrition Application

UI of website
Features of website

Inspiration

When each of our group mates asked 10 of our friends whether they knew about the UMD dining hall website 46/50 students did not know that it existed. We decided to create a more useful and innovative application that allows students to customize what they want to eat and its nutritional facts

What it does

This Project Is a Web Scraping Project that scrapes the University Of Marylands Nutrition Website for food and then uses the scraped data to track food that a user can enter. With this information our site tracks things such as Carbs, Fats, Protein, and Calories. The project aims to help a user, particularly a University Of Maryland Student track their food so they can achieve their fitness goals.

How we built it

The app.py file is The Back- End of the project and uses Flask in Python as well as the BeautifulSoup4 parsing library. In the templates folder, there is an index.html file which is responsible for the front-end and creating the website. The index.html file uses HTML, JavaScript, and JSON.

Challenges we ran into

The collaborative efforts of our front-end development team faced challenges in software selection, downloading Flask, and coordinating group meetings for idea implementation. Integrating front-end code with the back-end presented complexities, requiring a deep understanding of both domains. Learning and implementing HTML/CSS posed a learning curve for the team. On the back end, challenges included mastering Python web-scraping for data extraction from the UMD website and ensuring the daily execution of the scraping process for timely updates. Despite these hurdles, the teams' dedication and collaborative problem-solving were instrumental in overcoming challenges and creating the robust UMD Dining Hall Menu Nutrition Application.

Accomplishments that we're proud of

The "UMD Dining Hall Menu Nutrition Application" boasts several notable features. Our space bar functionality enables users to effortlessly search for specific food items, enhancing accessibility. The nutrition counter provides a detailed breakdown of nutrients for each menu item, empowering users to make informed dietary choices. A convenient drop-down bar offers a selection of dining halls, streamlining the process of finding desired food options. The inclusion of a food info button allows users to access detailed information about items from a specific hall. Moreover, the app prioritizes visual appeal by offering access to pictures, creating an engaging user experience. With seamless navigation and comprehensive information, our application is designed to cater to the diverse needs of the University of Maryland community.

What we learned

We've learned that this project adopts a clear separation of concerns between the back-end and front-end components. The back-end, implemented in Python using the Flask framework, serves as the backbone of the application and incorporates web scraping functionalities through the BeautifulSoup4 parsing library. On the front-end, an interactive user interface is created using HTML, JavaScript, and JSON, with the index.html file in the templates folder taking responsibility for website creation. This modular approach indicates a well-organized architecture, leveraging Flask for server-side functionality, BeautifulSoup for web scraping, and a combination of HTML, JavaScript, and JSON for a dynamic and engaging user experience.

What's next for UMD Dining Hall Menu Nutrition Application

To make the app more visually appealing and promoting the app for students to use on any device

Built With

Submitted to

Career Launch 2024 - Break Through Tech

Created by

Focusing primarily on the backend development. Delving into the world of Python web scraping, I honed my skills using BeautifulSoup4 to extract and manipulate data seamlessly. I took charge of debugging sessions, meticulously addressing issues and optimizing the codebase for enhanced performance. Taking the lead in creating the presentation for the expo, I effectively communicated our achievements and the intricacies of our work.

Rahul Nair
I worked on the front end development. Learned how to download flask, worked with vs code, phyton html and more. I incorporated the code to add the images and place them side by side as well as the search bar menu for finding food items.

Olaronkea Afolabi
It was my first time using flask and building an app. I used flask through VS code which I am quite familiar with.

Morolasaiye Aina
I worked heavily on designing the actual web scraper using Beautiful Soup 4, as well as integrating the web scraper into the actual website, which gave the website its functionality(IE, Buttons that work, search bars that work etc)

Natanel Solomonov
Jasmine Emeruwa