Inspiration
Tracking macros while eating at UMD dining halls is a nightmare. The official university nutrition site is built on legacy technology, is difficult to navigate on mobile, and doesn't allow you to save a "daily total." We wanted to build TerpTracker—a premium, MyFitnessPal-inspired experience tailored specifically for the University of Maryland community.
What it does
TerpTracker is a full-stack nutrition dashboard that:
- Live Scrapes: Pulls real-time data from all three UMD dining halls (South Campus, Yahentamitsi, and 251 North).
- Macro Tracking: Automatically calculates calories, protein, carbs, and fats as you select items from the daily menu.
- Intuitive UI: Provides a sleek, high-contrast dark mode interface that makes it easy to switch between meals (Breakfast, Lunch, Dinner) and days of the week.
- Smart Summaries: Gives users a real-time progress bar of their nutritional intake for the day.
How we built it
We split into two specialized streams to maximize our time:
- Frontend: Built with Next.js 15 and TypeScript. We focused on a "premium-first" design using CSS Modules, custom Google Fonts (Inter/Outfit), and glassmorphism effects to ensure the app felt like a modern startup product.
- Backend: Developed in Python using FastAPI. We built a robust scraper with BeautifulSoup to parse the complex, multi-layered tables of the UMD nutrition site and stored the data in a SQLite database.
- The Bridge: We used a Next.js API route as a proxy layer to seamlessly translate the Python backend's data into the frontend's reactive state.
Challenges we ran into
Our biggest hurdle was the "Final Hour Merge." We had two distinct tech stacks—a Node.js frontend and a Python backend—running on different ports and environments. Resolving the git merge conflicts between our environments and setting up a real-time data adapter in the final 20 minutes was an adrenaline-filled challenge that required deep networking and Git expertise.
Accomplishments that we're proud of
We are incredibly proud of the UI/UX. Most student projects look like "student projects," but we managed to build something that feels like a polished, production-ready app. Additionally, successfully scraping and structuring the messy, unstructured data from the official UMD site was a major technical win.
What we learned
We learned the true value of Modular Architecture. Because we kept the frontend and backend strictly separated via an API contract, we were able to work in parallel right up until the final merge. We also gained deep experience in automated web scraping and handling legacy system bottlenecks.
What's next for TerpTracker
- Smart Swaps: An AI-powered feature that suggests "healthier swaps" (e.g., "Trade that burger for the Grilled Chicken at the Grill station to stay under your fat goal").
- Mobile App: Transitioning to a PWA (Progressive Web App) for on-the-go tracking.
- Personalization: Allowing users to set their own custom macro targets and save their history via a persistent user profile.
Built With
- beautiful-soup
- css
- fastapi
- next.js
- react
- sqlite
- typescript
Log in or sign up for Devpost to join the conversation.