MessMate

Inspiration

MessMate was inspired by the everyday frustrations students face in hostel messes, like sudden menu changes, missed announcements, no easy way to give feedback, and poor communication between students and mess incharges. We wanted to create a single platform that makes mess communication transparent, organized, and student-friendly while reducing manual coordination for the committee.

What it does

MessMate is a hostel mess management prototype with separate experiences for students and mess incharges.

Students can: Complete a guided onboarding process. View a dashboard with today's menu. Access announcements. Submit suggestions. View their account page. Mess Incharges can: Complete a dedicated onboarding flow. Access a management dashboard. View menu management, announcements, food ratings, and student feedback sections designed for future integration

How we built it

We designed the interface in Figma and developed the prototype using React, Vite, React Router, and CSS. We built separate onboarding flows for students and mess incharges, created role-specific dashboards, implemented navigation between pages, and maintained a consistent wine-red visual identity with sharp-edged cards throughout the app.

Challenges we ran into

Our biggest challenge was development itself. We worked with limited internet access, multiple laptop formatting issues, and had to avoid adding unnecessary dependencies. We also learned to solve React routing issues, CSS conflicts between pages, responsive layout problems, and navigation flow while building the prototype from scratch.

Accomplishments that we're proud of

We're proud of turning an idea into a fully clickable prototype instead of stopping at mockups. We successfully built complete onboarding flows for both user roles, created two distinct dashboards, maintained a consistent UI system, and connected the application's navigation into a realistic user journey.

What we learned

Building MessMate taught us practical React development, component-based UI design, React Router navigation, CSS organization, responsive design principles, and the importance of designing user flows before implementing features. We also learned how to make product decisions based on real-world constraints while still delivering a polished MVP.

What's next for MessMate

After the hackathon, we plan to turn MessMate into a fully functional application by adding: Real-time announcements shared between committees and students. Menu editing with live updates. Food ratings and analytics. A feedback management dashboard. Secure authentication. AI-powered summaries of student suggestions to help mess committees identify common concerns more efficiently.

Built With

• css3
• figma
• javascript
• react
• react-routor
• vite