🧠 Inspiration

At the StartWell Student Wellness Hackathon, we aimed to build something that helps students improve their mental, physical, and emotional wellness with AI. The increasing stress and lack of personalized support motivated us to create ZenBot, a smart and supportive wellness companion.


💡 What it does

ZenBot is a full-stack web app that connects students with intelligent wellness agents. The system includes:

  1. 🧠 Mental Health Agent – Offers mood-based wellness tips and calming content.
  2. 🥗 Diet Agent – Suggests personalized meal recommendations based on user goals.
  3. 💪 Fitness Agent – Provides energy-level based workout plans.
  4. 🎯 Goal Tracker Agent – Lets users track hydration, sleep, and focus goals.

Other features:

  • 🔐 Secure login/register with JWT token-based auth
  • 🖥️ A beautiful, dashboard-based UI
  • ⚙️ Real-time AI interactions with each agent via protected endpoints

🛠️ How we built it

Frontend:

  • ✅ Built in React with TypeScript (.tsx)
  • Tailwind CSS for styling
  • Axios for secure API communication
  • React Router for routing
  • JWT stored in localStorage for protected dashboard access
  • Each AI agent is a dedicated TSX component inside /pages/Dashboard.tsx

Backend:

  • FastAPI (Python) for modular API endpoints
  • Separate routes for each agent (mental.py, diet.py, fitness.py, goal.py)
  • JWT Auth endpoints for login and register
  • MongoDB for authentication database

Frontend sends POST requests to backend agents, then receives and displays AI-generated suggestions in real-time within the dashboard interface.


🚧 Challenges we ran into

  • Connecting secure TSX forms to FastAPI backend cleanly
  • Managing JWT tokens on protected frontend routes
  • Handling multiple async agent responses inside a dynamic UI
  • Designing for clarity across 4 agents on one dashboard
  • Styling dashboard while maintaining performance and clarity

🏆 Accomplishments that we're proud of

  • A clean, modular full-stack AI wellness app
  • Frontend agents built entirely in TSX with responsive cards
  • All agent requests handled securely via token-based auth
  • Interactive dashboard with dynamic insights and logout logic
  • Ready-to-deploy full solution

📚 What we learned

  • Best practices in structuring React + TypeScript projects
  • Connecting TSX frontend securely to Python FastAPI backend
  • Designing usable wellness apps that encourage behavior change
  • JWT auth and session management in single-page applications

🚀 What's next for ZenBot

  • Add voice input and audio responses via ElevenLabs
  • Deploy backend on Render and frontend on Netlify
  • Add graph-based goal tracking (e.g., Recharts)
  • Introduce gamified challenges and wellness streaks
  • Expand to mobile app with React Native and Expo

🔗 GitHub Repository:{https://github.com/Ze-Salamander24f2004663/ZenBOT}

Built With

Share this project:

Updates