Inspiration
Most health apps focus on either nutrition, exercise, or analytics—but rarely all three in a way that feels fast, intelligent, and easy to use. I wanted to build a dashboard that athletes, students, and everyday users could rely on to understand their habits clearly, supported by AI-driven insights.
The goal was simple: Turn raw numbers into meaningful guidance.
This project grew from my own experience training for endurance events and needing a smarter way to monitor progress without switching between multiple apps.
What it does
BioFit AI is a modern health dashboard that allows users to:
Log meals and workouts
Visualize daily/weekly progress using interactive charts
Receive AI-powered recommendations
Track habits in real time with Firestore syncing
Switch instantly between English and Chinese
It combines clean UI, fast performance, and actionable insights into one unified tool.
How we built it
The project was built using a modular and scalable architecture:
Frontend
Vite + React + TypeScript for a fast, maintainable environment
Tailwind CSS for responsive UI and layout
Recharts for interactive, real-time charts
Backend / Database
Firebase Firestore for real-time syncing
Firebase Auth for secure user login
AI Engine
Custom OpenAI-compatible API endpoint
Secure environment variables to protect API keys
Generates personalized tips, training analysis, and habit insights
i18n
react-i18next for full bilingual support (EN / 中文)
Challenges we ran into
Managing real-time Firestore updates without causing unnecessary re-renders
Integrating TypeScript types with Firebase and custom utilities
Ensuring API keys stayed fully secure and never exposed in the client
Designing a bilingual interface without duplicating UI code
Handling chart performance when datasets became large
Structuring the project so components remained clean and reusable
Each challenge pushed the architecture to become more reliable and scalable.
Accomplishments that we're proud of
A polished, responsive dashboard that feels modern and intuitive
Fully functional AI-powered insights integrated safely
Real-time meal & workout tracking with smooth UI updates
Clean bilingual UI that switches instantly
A strong, organized TypeScript codebase
A project structure that can grow into a full production app
What we learned
This project taught us how to:
Build secure client-side architecture with environment-protected API keys
Optimize React components for real-time data
Design a scalable i18n system
Structure Firestore collections efficiently
Integrate AI reasoning into a user-friendly health interface
Turn user data into meaningful visualization and actionable insights
Log in or sign up for Devpost to join the conversation.