A modern, full-featured health tracking application built with Next.js and Supabase, designed to help users monitor their health symptoms, medications, and overall wellness journey.
- π₯ Symptom Tracking: Log and monitor health symptoms with detailed analytics
- π Visual Analytics: Interactive charts and graphs to visualize health trends
- π Medication Management: Track medication schedules and effectiveness
- π± Responsive Design: Optimized for desktop, tablet, and mobile devices
- π Secure Authentication: Email-based authentication with Supabase
- βοΈ Cloud Storage: Real-time data synchronization across devices
- βοΈ Email Confirmation: Secure account verification system
- π Dark Theme: Modern dark UI for comfortable viewing
- Next.js 14.2.30 - React framework with App Router
- TypeScript - Type-safe development
- Tailwind CSS - Utility-first CSS framework
- React Hook Form - Efficient form handling
- Recharts - Modern chart library for data visualization
- React Hot Toast - Beautiful notifications
- Supabase - Backend-as-a-Service with PostgreSQL
- Supabase Auth - Authentication and user management
- Real-time subscriptions - Live data updates
- Netlify - Production hosting with CI/CD
- GitHub - Version control and automated deployments
healtrack/
βββ pages/ # Next.js pages
β βββ api/ # API routes (minimal - using Supabase)
β βββ _app.tsx # App wrapper with auth context
β βββ index.tsx # Landing page
β βββ dashboard.tsx # Main application dashboard
β βββ login.tsx # Authentication page
β βββ register.tsx # User registration
βββ components/ # React components
β βββ common/ # Reusable components (Header, Footer)
β βββ dashboard/ # Dashboard-specific components
β β βββ SymptomTracker.tsx
β β βββ MedicationTracker.tsx
β β βββ HealthAnalytics.tsx
β βββ forms/ # Form components
β βββ charts/ # Chart components
βββ lib/ # Utility functions and configurations
β βββ database.ts # Supabase client configuration
β βββ auth.tsx # Authentication context and helpers
β βββ utils/ # Helper functions
βββ styles/ # Global styles and Tailwind config
βββ types/ # TypeScript type definitions
βββ public/ # Static assets
Create a .env.local file with your Supabase credentials:
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key- Node.js 18+
- npm or yarn
- Supabase account (free tier available)
-
Clone the Repository
git clone https://github.com/kris07hna/HealTrack.git cd HealTrack -
Install Dependencies
npm install
-
Set Up Supabase
- Create a new project at supabase.com
- Copy your project URL and anon key
- Create
.env.localfile with your credentials
-
Run Development Server
npm run dev
Open http://localhost:3000 in your browser
-
Build for Production
npm run build
- Connect your GitHub repository to Netlify
- Add environment variables in Netlify dashboard
- Deploy automatically on push to main branch
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
- Email/password registration and login
- Email verification system
- Secure session management
- Protected routes and data
- Health metrics overview with visual indicators
- Recent symptoms timeline and trends
- Medication adherence tracking
- Interactive analytics charts
- Quick symptom entry with severity ratings
- Categorized symptom logging
- Detailed notes and trigger identification
- Historical symptom patterns
- Visual trend analysis with charts
- Symptom frequency and severity tracking
- Medication effectiveness insights
- Exportable health reports
- Medication schedule tracking
- Dosage and frequency monitoring
- Adherence rate calculations
- Medication effectiveness correlation
- End-to-end encrypted data storage
- GDPR-compliant data handling
- User-controlled data export/deletion
- No third-party data sharing
HealTrack uses Supabase (PostgreSQL) with the following main tables:
- users - User profiles and preferences
- symptoms - Symptom logs with severity and notes
- medications - Medication tracking and schedules
- health_metrics - General health indicators
- user_settings - Application preferences
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLintnpm run type-check- Run TypeScript checks
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Use TypeScript for all new code
- Follow the existing component structure
- Use Tailwind CSS for styling
- Write meaningful commit messages
Authentication Issues
- Verify Supabase environment variables
- Check email confirmation settings in Supabase dashboard
- Ensure RLS policies are properly configured
Build Errors
- Run
npm run type-checkfor TypeScript errors - Clear
.nextcache:rm -rf .next - Reinstall dependencies:
rm -rf node_modules && npm install
Development Server Issues
- Check port 3000 is available
- Verify Node.js version (18+)
- Check for conflicting processes
MIT License - feel free to use and modify for your needs.
- π« Issues: Open a GitHub issue for bugs or feature requests
- π¬ Discussions: Use GitHub Discussions for questions
- π Documentation: Check the wiki for detailed guides
- Mobile app (React Native)
- Medication reminder notifications
- Doctor/healthcare provider sharing
- Advanced analytics and insights
- Data export to common formats
- Integration with fitness trackers
- β Supabase authentication system
- β Email verification workflow
- β Enhanced dashboard analytics
- β Production deployment on Netlify
- β Responsive design improvements
Built with β€οΈ for better health tracking and management.