Health Advisor - Frontend

AI-powered personal health management system frontend built with React, TypeScript, and Tailwind CSS.

Features

• 🔍 Disease Prediction - AI-powered disease prediction based on symptoms
• 📊 BMI Calculator - Calculate Body Mass Index with personalized suggestions
• 📄 Report Analysis - Upload and analyze medical reports with automatic insights
• ⏰ Medication Reminders - Smart reminders for timely medication intake

Tech Stack

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Utility-first CSS framework
• React Router - Client-side routing

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Install dependencies:

npm install

2. Start the development server:

npm run dev

3. Open your browser and navigate to http://localhost:5173

Build for Production

npm run build

The production build will be in the dist directory.

Preview Production Build

npm run preview

Project Structure

src/
├── components/
│   └── Layout.tsx          # Main layout with navigation and footer
├── pages/
│   ├── Home.tsx            # Landing page with feature overview
│   ├── DiseasePrediction.tsx  # Disease prediction interface
│   ├── BMICalculator.tsx   # BMI calculator with suggestions
│   ├── ReportAnalysis.tsx  # Medical report upload and analysis
│   └── Reminders.tsx       # Medication reminder management
├── App.tsx                 # Main app component with routing
├── main.tsx               # Application entry point
└── index.css              # Global styles and Tailwind imports

Features Overview

Disease Prediction

• Add symptoms via text input or common symptom buttons
• AI-powered prediction with confidence scores
• Visual feedback and result display

BMI Calculator

• Support for metric and imperial units
• Automatic BMI calculation and categorization
• Personalized health suggestions based on BMI range
• Visual BMI scale indicator

Report Analysis

• Drag-and-drop file upload
• Support for PDF and text files
• Automatic parameter extraction and analysis
• Abnormalities detection and insights generation

Medication Reminders

• Create, edit, and delete reminders
• Custom scheduling (daily, weekly, or custom days)
• Enable/disable reminders
• Next reminder display
• Local storage persistence

Integration with Backend

The frontend is designed to integrate with a backend API. Currently, the API calls are mocked. To connect to your backend:

1. Update API endpoints in each page component
2. Replace mock data with actual API calls
3. Handle authentication if required
4. Add error handling for API failures

Example API Integration

Replace mock functions in pages with actual API calls:

// Example: Disease Prediction
const handlePredict = async () => {
  setLoading(true);
  try {
    const response = await fetch('/api/disease-predict', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ symptoms })
    });
    const data = await response.json();
    setPrediction(data);
  } catch (error) {
    console.error('Prediction failed:', error);
  } finally {
    setLoading(false);
  }
};

Styling

The project uses Tailwind CSS with a custom color palette defined in tailwind.config.js. The brand colors are accessible via the brand-* classes.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is part of the Health Advisor system.

Contributing

1. Follow the existing code style
2. Use TypeScript for type safety
3. Ensure responsive design for mobile devices
4. Test all features before committing

---

Note: This is a frontend-only implementation. Backend integration is required for full functionality.