Drink Happy

Drink Happy Home Page
The Shop
Posts
Friends and Requests
Points Guide

Inspiration

We wanted to build a web application that promotes healthier beverage choices through an engaging and interactive experience. Many health tools focus on food or exercise, but we wanted to create something specifically for drinks, where users can track their consumption and receive feedback that encourages better habits.

What it does

DrinkHappy is a web app where users log their daily beverage intake and earn points based on hydration, sugar, and caffeine content. Points are awarded for healthy choices such as drinking water or staying within recommended limits. Drinks that exceed those limits do not earn points. The platform uses the Gemini API to identify beverages based on user input, allowing users to type or upload descriptions of their drinks. Based on the recognized drink and amount, points are calculated automatically.

The application includes several core features:

A profile page displaying total points, daily stats, and a bio
A social feed where users can post beverage updates
Reaction buttons such as “like” or “stop drinking that”
A shop where points can be used to unlock additional profile pictures
A leaderboard displaying who has the most points amongst you and your friends
A guide page that educates users about healthy beverage choices

How we built it

The frontend was built using React with Next.js and styled using Tailwind CSS. We developed a custom theme system to support both dark and light modes for a consistent user interface. MongoDB is used for storing user data. Gemini API integration enables drink recognition from user-submitted descriptions. We divided across team members to handle the profile system, point logic, shop interface, post feed, and backend communication.

A graph of the tools and frameworks we used is linked here.

Challenges we ran into

This was the first hackathon for most members of the team, so we encountered several challenges throughout development.

Integrating the Gemini API required navigating multiple libraries, backend logic, and resolving confusion caused by inconsistent documentation. We resolved this through hands-on testing and iteration.

Designing a consistent UI across both dark and light themes took time and coordination. We used Tailwind CSS to create a custom theme and applied it across all components to maintain a cohesive look and feel.

Accomplishments that we're proud of

We successfully built a complete application with a working point system, drink recognition via AI, a functioning post feed, a customizable profile system, and a responsive theme. All of these components were integrated and tested within the hackathon timeframe.

What we learned

We gained experience in full-stack development, including working with React, Next.js, MongoDB, and Tailwind CSS. We also learned how to integrate a third-party AI API into a real application and how to manage frontend and backend coordination. Additionally, we practiced collaborative development through GitHub and resolved technical challenges efficiently under time constraints.

What’s next for DrinkHappy

We plan to extend the platform by adding more interaction (e.g. comments) to posts, persistent reaction storage, and expanding the shop with more profile customization options and gamification. Future improvements also include drink logging analytics, social features and streaks, and enhanced user interaction features.