Macrhoos

Inspiration

Proper nutrition is critical for everyone, regardless of physical activity, it allows us to grow physically and mentally - and I would have appreciated a tool like this so much if it had existed when I arrived on grounds.

What it does

MacrHoos (pronounced Mac-roos) is an intuitive nutrition tracking platform tailored specifically for UVA students. It transforms the often overwhelming experience of campus dining into an easy to use, data-driven journey toward better health. At its core, MacrHoos empowers students to make informed dietary choices by providing real-time access to comprehensive nutritional information across all UVA dining halls which otherwise would be decentralized. Users can effortlessly track their daily macronutrients with the beautifully designed interface, pin their favorite meals for quick, repeat access, and visualize their nutritional intake through elegant, color-coded charts. What sets MacrHoos apart is its deep integration with UVA's dining system - its not just another generic calorie tracker, its a solution built by a Hoo, for Hoos.

How I built it

We crafted MacrHoos with a modern, user-first approach, utilizing a clean and responsive web architecture. The frontend leverages HTML5, CSS3, and vanilla JavaScript to ensure maximum accessibility and performance. We implemented a glass-morphism design aesthetic using carefully crafted CSS, featuring dynamic blur effects and transparent overlays that enhance the visual hierarchy while maintaining readability. The application's architecture is built around modular components, with separate JavaScript files handling distinct functionalities like dashboard management, meal searching, and macro calculations. We implemented a robust local storage system for maintaining user preferences and daily tracking information, ensuring data persistence across sessions. The data itself was obtained through a tedious process from the convoluted UVADine website by monitoring and intercepting API calls to get a somewhat useable data set which had to be severely sanitized before use. For the authentication system, I built a robust full-stack solution using Node.js and Express.js for the backend, with MongoDB as our database managed through Mongoose. The authentication flow implements JWT (JSON Web Token) for secure session management, with bcryptjs handling password hashing. The RESTful API endpoints handle user registration and login with the backend through asynchronous fetch requests. User credentials are securely stored in MongoDB, with passwords properly hashed, while JWT tokens are stored in the browser's localStorage for persistent sessions. The system includes comprehensive error handling, duplicate username checking, and automatic login after registration, all while maintaining a smooth user experience with proper feedback mechanisms. This setup ensures both security and scalability while keeping the user experience seamless and intuitive.

Challenges we ran into

As this was my first hackathon experience and I was working solo, time constraints were honestly the biggest hurdle to overcome when trying to build a product that I was both proud of and functional. To this end, my biggest challenges had to do with the cherry-on-top ideas, like having accounts with stored data on a server (I was only able to semi-accomplish this locally). Additionally as it was such a steep learning curve throughout the entire hackathon, but especially on the backend and data-scraping parts, I only had time to create a working product for the dining halls, and was unable to integrate data for the meal exchange and flex dining options on grounds. Additionally, continuity is something which I am trying to fix, more specifically my login portal only works on an npm server on which my food search functionality doesn't work. Finally, I initially ran into a multi-hour road block trying to scrape food data from UVADine through more traditional data scraping measures like selenium and chrome webdriver, but was able to find a more abnormal solution to this problem. Additionally, while filming my demo video, I ran into a bug for the first time ever where deleting a food item from "Today's Meals" led to an interesting NaN value for total carbs, which is something I will have a greater understanding of in the future, specifically that things will go wrong when you least want them to (but I'm sure its an easy fix)

Accomplishments that we're proud of

First and foremost, I am proud of myself for going into this hackathon as a beginner and coming out the end more knowledgable and having created something I know I (and hopefully many others) will use. Additionally, I am really proud of the solution I came up with for getting data from the convoluted UVADine website by noticing the requests being sent out by the website on certain interactions. At the end of the day, I am proud of having built something myself, of my own design.

What we learned

I learned that while I still have a lot to learn, I am also capable of creating really cool things and I don't have to wait for another hackathon to create cool projects that I or others would use. On the hard skills side, I learned a lot more about front-end development, specifically javascript and its quirks. I also learned a lot about how incredibly powerful python can be for a diverse set of tasks, and I'd be lying if I didn't say I learned how to prompt my favorite AI helper a bit better. However, I learned that in the process of asking for assistance from AI, you learn a lot about how to describe problems, possible solutions you can think of, and various ways to approach the same problem, which in many ways is just as important as learning to solve whatever coding problem the AI was gonna solve was.

What's next for Macrhoos

After HooHacks, I sincerely want to pursue this idea further and have it functional for other people to use, ironing out the challenges and bugs I'm facing right now and hopefully have it out next weekend! I know that I would've truly appreciated a resource like this to track my health and nutrition coming on grounds, and as I've accepted the role of being an RA next year, I truly appreciate the value in helping others who come after you. Even though this persona project probably won't become the next 'myFitnessPal', I know at the very least I'll have the opportunity to share my passion for health and nutrition to an incredible amount of people.

Built With

• bcryptjs
• chart.js
• css
• express.js
• github
• html
• javascript
• jwt(json-web-tokens)
• mongodb
• node.js
• python
• restful-api
• sqlite
• visual-studio-code