Mind-Mesh

Mind Mesh is a personal wellbeing simulator that turns your habits, moods, and routines into an interactive virtual world powered by real-time AI insights.

Comment

Project Story -- Mind Mesh

About the Project

Mind Mesh was born out of a simple but stubborn frustration: life gets overwhelming, and every existing "productivity" or "well-being" app feels scattered. You track your habits in one place, your mood in another, your focus somewhere else... and none of them actually talk to each other or show you the bigger picture.

I wanted something more honest and immersive --- a system that reflects what's going on inside you in real time. Something that doesn't just store data but responds to it.

That idea grew into Mind Mesh:\ a dynamic, AI-powered environment where your mental, physical, and social health become a living world you can see, interact with, and learn from.

What Inspired Me

I'm a software engineering student who switched fields completely. I'm still early in the journey, still figuring out my coding signature, but I've always been drawn to systems that understand people better than checklists and streak counters.

I've always wondered how moods, habits, stress, routine, and mental energy feed into each other. The idea of a "mind ecosystem" suddenly made too much sense to ignore.

And honestly? I always wanted an avatar that reacts to how my day went.

How I Built It

Mind Mesh is built on a stack that balances performance with experimentation.

Frontend

  • Next.js\
  • React 19 (client-only components where needed)\
  • Tailwind CSS\
  • Three.js + React Three Fiber + Drei for the 3D world\
  • Dynamic imports to prevent the environment from crashing the app

AI + Data Layer

  • Firebase Hosting\
  • Firestore for logs, habits, mood entries, and world state\
  • Firebase Auth\
  • Firebase Cloud Functions\
  • Gemini API for insights, trend detection, and environment behavior\
  • Realtime syncing between user data and visual world updates

Core Features Implemented

  • A responsive virtual environment that changes based on user logs\
  • An avatar whose mood, energy, and animations shift based on the day\
  • A logbook for mental, physical, and social health\
  • AI-generated insights that highlight patterns\
  • "World State Engine" that converts raw logs into weather, lighting, clutter, energy, and focus levels\
  • Realtime updates with no page refresh

What I Learned

This project pushed my coding instincts hard.

Key Lessons

  • Client vs server components matter more than expected\
  • Three.js demands careful rendering in frameworks like Next.js\
  • Structuring logic around a world-state engine makes scaling easier\
  • AI models need strict schema and prompts to behave\
  • Firebase speeds up iteration dramatically\
  • Debugging becomes easier when you trust your style and commit to consistent structure

Most importantly:\ Even as a newer coder, you can build ambitious systems if you break them down and keep moving.

Challenges I Faced

  • Getting 3D scenes to render in Next.js without React errors\
  • Handling animation and state updates without lag\
  • Designing an environment that is symbolic but still functional\
  • Balancing creativity with performance\
  • Wrestling with weird errors like ReactCurrentOwner\
  • Teaching AI to stay predictable and aligned with world logic

Every time the environment crashed, it taught me the architecture a bit better.

Closing Thoughts

Mind Mesh is more than a wellness tracker or a habit app.\ It's a living reflection of the user --- a quiet ecosystem that grows, dims, expands, and reacts as they do.

Building this project grew my skills, sharpened my instincts, and showed me how powerful it can be when technology helps people understand themselves better.

And honestly... seeing your mind world shift in real time feels powerful in a way no checklist app ever has.

Built With

Share this project:

Updates