Health & Fitness Dashboard

A comprehensive health tracking dashboard built with Next.js that helps users monitor their sleep patterns, physical activity, heart rate, weight, and workout routines. The application syncs with Notion to visualize your health data and provides detailed analytics for better health insights.

Features

• Sleep Analysis

  • Sleep pattern visualization
  • Sleep composition tracking
  • Daily sleep statistics
  • Sleep quality metrics

• Health Metrics Tracking

  • Resting heart rate monitoring
  • Step count tracking
  • Weight progression
  • Historical data analysis

• Workout Management

  • Muscle group analysis
  • Exercise tracking
  • Workout calendar
  • Training progress visualization

• Data Visualization

  • Interactive charts
  • Customizable date ranges
  • Detailed analytics
  • Real-time updates

Tech Stack

                        

• Next.js 14 - React framework
• TypeScript - Type safety
• Supabase - Authentication & Database
• Notion API - Data storage & sync
• Tailwind CSS - Styling
• Lucide Icons - UI Icons
• Vercel Analytics - Analytics
• Google Fonts - Inter & Outfit fonts

Getting Started

Prerequisites

• Node.js 18.17 or higher
• npm or yarn
• Supabase account

Installation

1. Clone the repository:

git clone https://github.com/yourusername/health-dashboard.git

2. Install dependencies:

npm install
# or
yarn install

3. Set up environment variables:

cp .env.example .env.local

Add your Supabase and Notion credentials to .env.local:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
NOTION_API_KEY=your_notion_api_key
NOTION_DATABASE_ID=your_notion_database_id

4. Start the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the application.

Project Structure

├── app/
│   ├── components/
│   │   ├── charts/        # Chart components
│   │   ├── layout/        # Layout components
│   │   └── forms/         # Form components
│   ├── hooks/             # Custom hooks
│   ├── types/             # TypeScript types
│   ├── constants/         # Constants and configurations
│   └── page.tsx           # Main dashboard page
├── public/                # Static assets
└── styles/               # Global styles

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

---

Built with ❤️ using Next.js and deployed on Vercel.