WellnessHub

• 

Inspiration

The inspiration behind SanaHub (formerly envisioned as WellnessHub) stems from UN Sustainable Development Goal 3: Good Health and Well-being. In today’s hyper-connected, fast-paced digital era, maintaining mental peace, proper hydration, and personalized self-care often takes a backseat. We wanted to build a unified, minimalist, and highly accessible wellness dashboard that empowers individuals to monitor their physical and mental state seamlessly, without overwhelming them with data fatigue.

Furthermore, we were inspired by the hackathon's core challenge: proving that clean, self-documenting, and highly modular code can bridge the gap between rapid development and comprehensive automation.

What it does

SanaHub is a production-ready, highly interactive personal health ecosystem that tracks core pillars of daily well-being:

Mental Well-being Sync: Features a dynamic daily mood logger and an automated, fluidly animated breathing exercise widget (configured on a 4-4-4 second loop) to actively assist users in stress reduction.

Physical & Hydration Analytics: Includes an interactive fluid-tracking component that logs daily water intake against a target goal, visualized using smooth progress bars.

Intelligent Wellness Log: A rule-engine driven module where users can input sleep duration, stress indicators, and skin concerns to instantly receive tailored health and lifestyle recommendations.

Real-time Synchronization: Powered by a cloud database that securely saves and fetches user records instantly.

How we built it

We engineered the application using a modern, scalable, and ultra-modular frontend-to-backend pipeline:

Frontend Architecture: Built using React and Vite for blazing-fast build times, utilizing a strict modular directory structure (/components, /views, /lib) to ensure maximum readability for AI repository scanners.

UI/UX Design: Crafted an accessible, responsive, and calming interface using Tailwind CSS with a curated palette of emerald, teal, and slate tones, accented by Lucide React iconography.

Backend & State: Integrated Supabase as a Serverless Backend-as-a-Service (BaaS) for secure user authentication, relational database management (profiles, mood_logs, wellness_metrics), and real-time asynchronous data mutations via the Supabase JS client.

Challenges we ran into

One of the primary technical hurdles was designing the application to be entirely self-explanatory for an automated AI repository reporter like PresentMeApp. Writing fully functional backend logic with Supabase while ensuring that the repository remained free of an initial README.md meant our code structure, variable naming conventions, and inline commenting had to be exceptionally precise.

We also faced challenges building fallback states for the Supabase queries, ensuring that if a user clones the project without setting up environment variables locally, the application seamlessly switches to local state simulation without crashing.

Accomplishments that we're proud of

Pixel-Perfect Engineering: Successfully built a fully responsive dashboard that looks stunning across mobile, tablet, and desktop viewports.

Zero-Markdown Readability: Writing code so clean and structured that an AI model can scan our entire file hierarchy and perfectly interpret our architectural choices and app workflows.

Interactive Fluid Animations: Achieving smooth CSS-based animations for the rhythmic deep-breathing widget without relying on bloated, heavy third-party animation libraries.

What we learned

This hackathon completely flipped the script on standard documentation workflows. We learned how to write code with an "AI-first reader" mindset—understanding that clean separation of concerns, explicit component naming (e.g., BreathingTimer.jsx instead of a generic Widget.jsx), and purposeful typing are critical for modern automated CI/CD and AI auditing tools. We also deepened our expertise in structuring efficient, normalized relational tables in Supabase for swift time-series health tracking.

What's next for SanaHub

While SanaHub is fully functional, our vision extends much further:

True Vision Integration: Transitioning the mock wellness form into a real Vision-Language pipeline where users can take a photo of their skin condition for immediate, advanced classification and dermaceutic recommendations.

Cross-Platform Portability: Using Electron or React Native to ship the codebase natively to desktop and mobile environments.

Predictive Health Indexing: Utilizing historical Supabase metrics to calculate a weekly holistic "Well-being Score" using light, on-device machine learning.

Built With

• api
• gemini
• javascript
• json
• lucide
• query
• react
• supabase
• tanstack
• typescript
• vite