Serenity

A gamified wellness and health tracker to help the user to remain motivated and healthy.

Comment

Inspiration

Most health apps lean on guilt, streaks that shame the user when their streak has been broken, and red badges nagging the user to log something. That wears off fast. We wanted the opposite: something that responds to your care instead of pressuring the user into it. The idea started small and concrete: what if drinking enough water earned the user's companion something nice? Like a fancy water bowl? Once that clicked, it was easy to picture self-care as something visible and a little delightful, rather than just one more checklist.

What it does

Tracks the user's water intake and motivates them to stay healthy. Serenity pairs that tracking with a small companion creature whose mood and appearance reflect how well the user is actually taking care of themselves each day: water intake, mood, sleep, and daily habits all contribute to how the companion looks and feels. Reaching a water goal unlocks a reward automatically, and points earned from health actions unlock more accessories the user can equip.

How we built it

The frontend is plain HTML, CSS, and JavaScript, a single-page app with a sidebar nav across Dashboard, Mood, Health, Nutrition, Habits, Companion, and Settings screens, plus an animated SVG companion whose expression and colour shift with the day's stats. The backend is PHP with a MySQL database: PDO prepared statements, session-based authentication, and a "care score" that is computed server-side from that day's logged water, mood, sleep, and habit data, the same score that drives the companion's mood and unlocks rewards. AI (Claude, Sonnet5(free)) was used to aid in fixing errors in my codes/programms.

Challenges we ran into

Tuning the care-score formula was harder than expected; it needed to weight water, mood, sleep, and habits so no single missed entry tanked the companion's mood while still feeling like it genuinely tracked effort. We also had to guard the points economy server-side (e.g., capping bonuses to once per day) so it couldn't be gamed by re-logging the same entry. And moving from an early local-storage prototype to real accounts meant redesigning the data model around a proper relational schema instead of a single blob of client-side state.

Accomplishments that we're proud of

Getting a genuinely full-stack build working, real accounts and a MySQL backend, not just a static mockup, was a big milestone. We're especially proud that the core hook actually works end to end: hit your water goal and the bowl unlocks automatically; healthy actions earn points, which allows the user to purchase more accessories for their pet. The whole project also remained cohesive across seven screens, with dark mode and a responsive layout down to mobile.

What we learned

Wrapping habit tracking in a small "game" layer changes how you think about the data; it stopped being "log this metric" and became "how does this metric make the companion feel," which pushed us to think harder about what actually deserves a reward. However, on the technical side of this project, we got real practice with session-based PHP auth, PDO prepared statements, and designing a schema that could grow, plus a reminder that even a small points system needs deliberate balancing to feel fair rather than arbitrary.

What's next for Serenity

Wearable and step-count integration, deeper nutrition tracking, opt-in accountability circles for friends, a native mobile version, more companion species and evolution stages, and an admin-side analytics view so we can see which habits actually stick.

Share this project:

Updates