HealthVerse

• 

  Profile page

• 

  Facts page

• 

  Habit page

• 

  Home page

• 

  Dashboard page

🧠 About HealthVerse

🌍 Inspiration

Health tracking often feels like a chore — numbers, streaks, and reminders that fade away.
We wanted to reimagine it as something alive and rewarding — a 3D world that grows with your wellness.
Every habit logged, every XP gained, and every insight learned contributes to a virtual ecosystem that reflects your real-life consistency.

🛠️ How I Built It

HealthVerse was built using Next.js 15, Supabase, and React Three Fiber (Three.js) to create an immersive wellness experience.
We designed modular pages for Habits, Facts, World, and Dashboard, each powered by real-time Supabase data and gamified XP logic.

• Frontend: Next.js (App Router) + Tailwind CSS + Framer Motion for animations
  
• Backend: Supabase (Auth, Database, Storage)
  
• 3D World: React Three Fiber + Drei + GLTF models (nature assets, character models)
  
• Gamification Engine: XP, streaks, level-ups, and world evolution logic tied to daily user actions
  
• Deployment: Supabase hosted backend
  

💡 What I Learned

Building HealthVerse taught us how to blend 3D interactive environments with real-time data systems — creating a bridge between behavioral design and immersive technology.
We learned to optimize heavy 3D rendering within Next.js, manage Supabase sessions on both server and browser, and design a consistent UI across multiple modules.

🚧 Challenges Faced

• 3D Scene Optimization: Managing model sizes and lighting for smooth rendering on web.
  
• Supabase Auth Persistence: Syncing browser and server sessions in Next.js 15’s App Router.
  
• User Experience Balance: Keeping it visually rich yet lightweight and fast for all devices.
  

✨ The Outcome

HealthVerse transforms habit tracking into a visual and emotional journey.
Users can see their growth, not just as numbers — but as a living, evolving world that mirrors their dedication and mindfulness.

Built With

• next.js
• supabase
• tailwind
• three.js