Da Grindz
View the Da Grindz Github Organization
Table of contents
Overview
Da Grindz is a nutrition-focused web application designed for the students and staff of UH Mānoa. It combines local campus dining information with personalized meal planning and nutritional tracking to support healthier eating habits and more mindful food choices.
Key Features
- Personalized meal recommendations based on allergies, dietary preferences, and nutritional goals.
- Real-time listings and map locations of on-campus food vendors.
- Calendar-based meal planning based on current and future menus.
- Nutritional intake tracking with progress suggestions.
- UH Mānoa-focused experience including local dishes, events, and promotions from vendors.
Special Sauce: “Mood-Based Meal Matching”
After registration, users set their current “grindz mood” (e.g., ono kine comfort food, grindz for gains, quick bento run, vegetarian vibes, etc.). This affects:
- Meal suggestions from vendors
- Displayed nutritional goals
- UI themes and motivational quotes tied to that mood
Users can update their mood anytime, and it subtly personalizes how the app talks to them and what it shows.
Technologies Used
- Next.js
- TypeScript
- React Bootstrap
- PostgreSQL
- Hosted on GitHub
- Vercel
Deployment
- Production App: Da Grindz
- Hosted on GitHub with automatic deployments from
mainbranch.
User Guide
Landing Page
- Welcome message
- Login / Register buttons
- Info about the purpose and benefits of the app
- Guide to getting started
Dashboard
Displays personalized data:
- Meal recommendations based on current “grindz mood”
- Nutritional overview (calories, macros)
- Quick links to planner, preferences, and vendor menus
Vendors Page
- List of food vendors on campus
- Real-time open/close status
- Weekly menus with filters (e.g. vegetarian, gluten-free)
- Interactive campus map
Preferences Setup
Users can set:
- Dietary restrictions (e.g. gluten-free, halal)
- Cuisine preferences (e.g. Japanese, Hawaiian, Korean)
- Macro goals (protein/carb/fat ratios)
- “Grindz Mood” – a personal filter that tailors recommendations
Allergies Page:
Grindz Mood Page:
Planner Tool
Drag-and-drop meal planning tool:
- See upcoming meals by vendor availability
- Generate shopping lists or macros per day
- Toggle by weekly view or macro goals
Developer Guide
- Stack: Next.js (w/ TypeScript), React Bootstrap, PostgreSQL
- Local Dev:
npm install npm run dev - Database: PostgreSQL schema with Prisma ORM
- GitHub Flow:
- Must pass eslint tests and build before merge
Community Feedback
To better understand the usability and effectiveness of our application, we conducted a test involving five community members. Each participant was asked to go on our website and provide feedback based on their experience. The goal was to gather suggestions for improvement from real users representing our target audience.
- “The website is user friendly and it’s helpful to see all of the food options that are offered on campus in one place. The map is also useful because it shows you where the campus dining options and vending machines are, as well as where meal points are accepted.” - UHM Economics student
- “I really enjoyed the visual asthetics and functionality. I think it could be cool to add a stats page to track water intake and calories/protein/carbs ect. over the course of a month.” - UHM CS student
- “The website is super great for those who want to be conscious about what they’re eating while on campus. As it allows you to track macros and how much water you’re drinking. I would maybe suggest being able to add the food suggestions for my mood addable directly to my planner” - UHM student
- “I love how the site recommends meals based on my mood. It makes the experience more personal and actually helps when I’m too busy to think about what to eat. I think adding more moods or letting users customize their own moods could make it even more interactive.” – UHM Buisness student
- “The Grindz Moods feature is really fun and helpful, sometimes I don’t know what I feel like eating, so having suggestions based on my mood makes it easier to decide.” – UHM Biology student
Development History
The development process for Da Grindz conformed to Issue Driven Project Management practices. In a nutshell:
- Development consists of a sequence of Milestones.
- Each Milestone is specified as a set of tasks.
- Each task is described using a GitHub Issue, and is assigned to a single developer to complete.
- Tasks should typically consist of work that can be completed in 2-4 days.
- The work for each task is accomplished with a git branch named “issue-XX”, where XX is replaced by the issue number.
- When a task is complete, its corresponding issue is closed and its corresponding git branch is merged into master.
- The state (todo, in progress, complete) of each task for a milestone is managed using a GitHub Project Board.
Milestone 1
View Details
Milestone 1 Mockups
Landing Page
Sign In
Sign Up
Dashboard
Planner
Preferences
Milestone 2
M2 Project
Live Deployment on Vercel
View Details
Here are the updated pages during M2.
Logo
Landing Page
Sign In
Sign Up
Dashboard
Planner
Preferences
Milestone 3
View Details
Here are the updated pages during M3.
Landing
Dashboard
The dashboard received a visual update also offers a randomize feature for users who don't know what mood they want.
School Map
Admin
Vendors
Menu Item Forms
Grindz Mood
Preference Editor
Planner
Continuous Integration
Da Grindz uses GitHub Actions to automatically run ESLint and TestCafe each time a commit is made to the default branch. You can see the results of all recent “workflows” at https://github.com/da-grindz/da-grindz/actions.
The workflow definition file is quite simple and is located at .github/workflows/ci.yml.
Team
Da Grindz is designed, implemented, and maintained by: