This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

A privacy-first web application that transcribes and summarizes doctor-patient conversations into structured clinical notes, featuring distinct doctor and patient views.

• 🎙️ Local Audio Recording: Browser-based audio capture with real-time duration tracking
• 🔒 Privacy-First: All AI processing (Whisper + Ollama) runs locally
• 👩‍⚕️ Doctor View: Structured SOAP format clinical notes with review/edit capabilities
• 👤 Patient View: Simplified, jargon-free summaries with consent-based sharing
• 📝 Consent Management: Digital consent workflow for recording and summary sharing
• 🎨 Mobile-Responsive: Clean, modern UI that works on desktop and mobile devices

• Frontend: React 18 + TypeScript + Vite
• Styling: Tailwind CSS
• Backend: Flask (Python)
• AI Models: Whisper (transcription) + Ollama (summarization)
• Storage: Local storage (MVP) / JSON files
• Icons: Lucide React

1. Node.js (v18+)
2. Python (v3.8+)
3. Ollama - Install from ollama.ai
4. FFmpeg (for Whisper audio processing)

# Install dependencies
npm install

# Start development server
npm run dev

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

# Navigate to backend directory
cd backend

# Create virtual environment
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install Python dependencies
pip install -r requirements.txt

# Start Flask server
python app.py

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

1. Install Ollama: Download from ollama.ai

2. Pull a language model:

   ollama pull llama3.2  # or another model of your choice

3. Install Whisper:

   pip install openai-whisper

1. Login → Doctor dashboard
2. New Session → Patient consent form
3. Recording → Real-time audio capture
4. Processing → Whisper transcription + Ollama summarization
5. Review → Edit SOAP notes and patient summary
6. Share → Generate secure patient link

1. Access Link → Patient summary view
2. Review → Easy-to-read consultation summary
3. Feedback → Optional satisfaction feedback

terrahacks-2025/
├── src/
│   ├── components/
│   │   ├── DoctorDashboard.tsx    # Doctor's main interface
│   │   ├── ConsentForm.tsx        # Patient consent workflow
│   │   ├── RecordingSession.tsx   # Audio recording interface
│   │   └── PatientView.tsx        # Patient summary display
│   ├── hooks/
│   │   └── useAudioRecorder.ts    # Audio recording custom hook
│   ├── services/
│   │   └── api.ts                 # Backend API integration
│   ├── types/
│   │   └── index.ts               # TypeScript interfaces
│   └── App.tsx                    # Main app component
├── backend/
│   ├── app.py                     # Flask API server
│   └── requirements.txt           # Python dependencies
└── README.md

1. Role Selection: Choose "Doctor Login"
2. Consent Form: Fill patient information and consent checkboxes
3. Recording: Start/stop audio recording (mock or real)
4. AI Processing: Watch Whisper + Ollama generate notes
5. Review: Show structured doctor notes
6. Patient View: Switch to patient-friendly summary
7. Privacy: Highlight local processing and consent features

• No persistent database (uses localStorage)
• Mock authentication system
• No real-time speaker diarization
• No EMR integration
• Not HIPAA-compliant (demo purposes)

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

Create a .env file in the root directory:

VITE_API_URL=http://localhost:5000/api
OLLAMA_HOST=http://localhost:11434

• Primary Colors: Medical blue (#0891b2) and standard blue (#3b82f6)
• Typography: System fonts with clear hierarchy
• Components: Glass-morphism effects and smooth transitions
• Mobile-first: Responsive design for all screen sizes

This project is for demonstration purposes only. Not intended for production medical use.

This is a hackathon project. Feel free to fork and improve!

Built for TerraHacks 2025 🌍

The RecordingSession component now makes real API calls to the Flask backend:

• ✅ Automatic Backend Detection: Checks if Flask server is running
• ✅ Real AI Processing: Uses Whisper + Ollama when available
• ✅ Graceful Fallback: Mock data when backend offline
• ✅ Status Indicators: Visual feedback for backend connection

# Terminal 1: Frontend
npm run dev

# Terminal 2: Backend (Windows)
start-backend.bat

# Or Linux/Mac:
./start-backend.sh

The app automatically switches from demo mode to real AI processing! 🚀

You can also install eslint-plugin-react-x and eslint-plugin-react-dom for React-specific lint rules:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
])