• Overview
• Features
• Tech Stack
• Prerequisites
• Installation
  • Frontend Setup
  • Backend Setup
• Project Structure
• Available Scripts
• Routes & Pages
• API Documentation
• Usage Guide
• Deployment
• Troubleshooting
• Contributing
• License

The Diabetes Prediction Application is a comprehensive full-stack web platform designed to help users assess their diabetes risk through intelligent machine learning models. It features a modern React frontend and a robust Flask backend API, providing a seamless, secure, and user-friendly interface for health risk assessment.

Architecture:

• Frontend: React + Vite SPA deployed on Vercel
• Backend: Flask API with scikit-learn ML model deployed on Render
• Database: Trained ML model (diabetes_model.pkl) with scikit-learn

Key Highlights:

• ⚡ Lightning-fast predictions with Vite + React frontend
• 🔒 Secure client-side authentication with localStorage
• 🧠 scikit-learn powered ML model for diabetes prediction
• 🌐 RESTful API with CORS support for cross-origin requests
• 📱 Fully responsive design for all devices
• 🎨 Clean and intuitive user interface
• 🚀 Full-stack deployment on Vercel (frontend) & Render (backend)
• 📊 Probability-based predictions with accuracy metrics

Before you begin, ensure you have the following installed on your system:

git clone https://github.com/yourusername/diabetes-frontend.git
cd Diabetes_Frontend-main

npm install

This will install all required packages:

• React and React DOM
• React Router for navigation
• ONNX Runtime for optional ML inference
• ESLint for code quality
• Vite as the build tool

Create a .env file in the root directory:

VITE_API_URL=https://your-backend-api.com
VITE_PORT=5173

npm run dev

The frontend will be available at http://localhost:5173

cd backend

On Windows:

python -m venv venv
venv\Scripts\activate

On macOS/Linux:

python3 -m venv venv
source venv/bin/activate

pip install -r requirements.txt

This will install:

• Flask web framework
• flask-cors for CORS support
• scikit-learn for ML model
• numpy and pandas for data processing
• joblib for model loading
• gunicorn for production server

Ensure diabetes_model.pkl exists in the backend/ directory. This is the trained ML model.

python app.py

The backend API will be available at http://localhost:5000

Run this to set up both frontend and backend at once:

Windows:

# Frontend setup
npm install

# Backend setup
cd backend
python -m venv venv
venv\Scripts\activate
pip install -r requirements.txt
python app.py

macOS/Linux:

# Frontend setup
npm install

# Backend setup (in another terminal)
cd backend
python3 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
python app.py

Diabetes_Frontend-main/
│
├── public/                          # Static assets
│   ├── diabetes_model.onnx         # Optional ONNX ML model
│   └── ort/                        # ONNX Runtime files
│
├── src/                            # Frontend source code
│   ├── components/                 # Reusable React components
│   │   ├── Footer.jsx              # Footer component
│   │   ├── Navbar.jsx              # Navigation bar
│   │   └── PredictionForm.jsx      # Prediction form
│   │
│   ├── pages/                      # Page components
│   │   ├── Home.jsx                # Home page
│   │   └── Prediction.jsx          # Prediction page
│   │
│   ├── App.jsx                     # Main app component
│   ├── Login.jsx                   # Login page
│   ├── ProtectedRoute.jsx          # Route guard component
│   ├── main.jsx                    # Application entry point
│   └── index.css                   # Global styles
│
├── backend/                        # Backend source code
│   ├── app.py                      # Flask application (main server)
│   ├── diabetes_model.pkl          # Trained scikit-learn model
│   ├── requirements.txt            # Python dependencies
│   ├── Procfile                    # Deployment configuration
│   ├── runtime.txt                 # Python runtime version
│   └── venv/                       # Virtual environment (local development)
│
├── eslint.config.js               # ESLint configuration
├── vite.config.js                 # Vite configuration
├── vercel.json                    # Vercel deployment config (frontend)
├── package.json                   # Node.js dependencies & scripts
├── index.html                     # HTML template
└── README.md                      # Documentation (this file)

Run these commands in the project directory:

# Start development with hot reload
npm run dev

# In another terminal, check code quality
npm run lint

# Build for production
npm run build

# Preview the production build
npm run preview

The backend Flask API provides endpoints for prediction and health checks.

Development: http://localhost:5000
Production: https://your-backend-api.com

GET /

Response:

{
  "message": "Diabetes Prediction API is running!"
}

Status Code: 200 OK

POST /predict
Content-Type: application/json

Request Body:

{
  "pregnancies": 6,
  "glucose": 148,
  "bloodPressure": 72,
  "skinThickness": 35,
  "insulin": 0,
  "bmi": 33.6,
  "dpf": 0.627,
  "age": 50
}

Success Response (200):

{
  "prediction": 1,
  "probability": 78.45
}

Error Response (400):

{
  "error": "Error message describing what went wrong"
}

The backend has CORS enabled for all origins in development. For production, configure allowed origins in app.py:

CORS(app, resources={r"/predict": {"origins": ["https://your-frontend-url.com"]}})

• Home Page: Accessible to all users
• Login Page: Accessible to all users (redirects if already logged in)
• Prediction Page: Protected by ProtectedRoute - requires authentication
• Authentication: Client-side via localStorage (isLoggedIn, username)

• Overview of the application
• Information about diabetes prediction
• Call-to-action buttons for login/prediction

• Simple authentication form
• Input: Username
• Stores credentials in localStorage
• Redirects to prediction page on success

• Accessible only when authenticated
• Input health parameters (age, BMI, glucose, etc.)
• Real-time prediction results
• Display risk assessment

The form collects the following health metrics:

{
  age: number,
  gender: string,
  bmi: number,
  bloodPressure: number,
  glucose: number,
  insulinLevel: number,
  pregnancies: number,
  skinThickness: number
}

Default Behavior: The app calls the remote API endpoint:

POST https://diabetes-k80q.onrender.com/predict
Content-Type: application/json

{
  "feature1": value,
  "feature2": value,
  ...
}

Optional: Use local ONNX Runtime by enabling the diabetes_model.onnx inference in your code.

Login Form → Validate Input → Store in localStorage 
  → Set isLoggedIn=true → Redirect to /predict

localStorage.setItem('isLoggedIn', 'true');
localStorage.setItem('username', 'username');

localStorage.removeItem('isLoggedIn');
localStorage.removeItem('username');

This project is configured for Vercel deployment:

# Install Vercel CLI (if not already installed)
npm i -g vercel

# Deploy from root directory
vercel

1. Push to GitHub: git push origin main
2. Connect GitHub repo to Vercel dashboard
3. Vercel will auto-deploy on every push

The vercel.json file is already configured with:

• SPA routing (all routes redirect to index.html)
• Proper caching headers
• Environment variables support

Production URL: https://your-app.vercel.app (configured in Vercel dashboard)

Deploy the Flask backend to production using Render or Heroku.

1. Create Render Account: Visit render.com

2. Push Backend to GitHub (if not already):

   git add backend/
   git commit -m "Add backend code"
   git push origin main

3. Connect Repository:

   • Create new Web Service
   • Connect your GitHub repo
   • Select root directory: backend/

4. Configure Environment:

   • Runtime: Python 3
   • Build Command: pip install -r requirements.txt
   • Start Command: gunicorn app:app

5. Deploy: Click "Create Web Service"

Production URL: https://your-backend-api.onrender.com

# Install Heroku CLI
# Visit: https://devcenter.heroku.com/articles/heroku-cli

# Login to Heroku
heroku login

# Create new Heroku app
heroku create your-app-name

# Set buildpack
heroku buildpacks:set heroku/python

# Deploy
git push heroku main

VITE_API_URL=https://your-backend-api.onrender.com
VITE_PORT=5173

Set in deployment dashboard:

FLASK_ENV=production

Default Vite setup with React Fast Refresh enabled.

Code quality rules enforce:

• React best practices
• Proper hook usage
• Code consistency

Create .env file for custom configuration:

VITE_API_URL=https://your-api-endpoint.com
VITE_MODEL_PATH=/diabetes_model.onnx

I welcome contributions! Here's how to help:

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

• Follow ESLint rules: npm run lint
• Keep components small and focused
• Use meaningful commit messages
• Add comments for complex logic
• Test your changes locally

Run linting to ensure code quality:

npm run lint

Fix linting issues automatically:

npm run lint -- --fix

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

For questions, issues, or suggestions:

• Open an Issue
• Start a Discussion
• Email: your-email@example.com