Meet Miffy!

Miffy is an AI-powered medical assistant platform that helps users check symptoms, get structured triage guidance, locate nearby care, and navigate their health journey — through a friendly, voice-enabled chatbot interface.

---

Features

🤖 AI Medical Chatbot (MediMate Bot)

• Powered by Google Gemini 2.5 Flash for fast, context-aware medical conversations
• Conversational memory — the full chat history is sent with every message so Gemini remembers prior symptoms, answers, and concerns across the session
• Patient intake flow — on first conversation, collects name, age, gender, weight, height, current medications, allergies, and prior surgeries before giving triage
• Structured triage output when symptoms are described:
  • Severity · Immediate Need for Attention · See a Doctor If · Next Steps · Possible Conditions · Disclaimer
• Multilingual — detects the language of each user message and replies in the same language (English, Hindi, Marathi, Urdu, Kannada, Telugu, Odia, Bhojpuri, and more)
• Quick-prompt chips on the welcome screen for one-tap symptom entry

🎙️ Voice Input

• Click the mic button and speak your symptoms — no typing required
• Uses the browser's MediaRecorder API to capture audio locally
• Audio is sent to the backend where Gemini transcribes it (bypasses Chrome's SpeechRecognition which requires Google's speech servers)
• Live recording and transcribing status indicators with pulse animation

📄 Auto PDF Report Generation

• When the conversation ends (user says "bye", "thank you", or "thanks"), a consultation report PDF downloads automatically
• Report is generated by Gemini from the full chat history and includes:
  • Patient Information · Reason for Consultation · Symptoms Summary
  • Medical History Reported by Patient · Suggested Areas for Clinical Review · Follow-up Questions
• Built with PDFKit on the backend

🗺️ Nearby Hospitals & Pharmacies

• Interactive map powered by OpenStreetMap & Overpass API
• Detects your approximate location via GPS or IP geolocation fallback
• Shows hospitals, clinics, and pharmacies within a 5 km radius
• Includes a legend and radius circle for clarity
• Falls back to prominent Delhi hospitals (AIIMS, Safdarjung, Apollo, Fortis, Apollo Pharmacy, MedPlus) if location detection fails

🚨 Emergency SOS Button

• One-click emergency trigger from the navbar
• Detects location via GPS with IP-based fallback
• Shows a confirmation popup with a Google Maps link
• Auto-hides after a few seconds

---

Architecture

Services and ports:

Service	Path	Port	Purpose
Main Frontend	frontend/	Vite default	React 19 SPA — landing page, map, dashboard
Main Backend	backend/	4000	Express 5 + MongoDB (doctors, admin, uploads)
Auth Server	backend/authServer/	5000	JWT auth microservice (login / signup)
Chatbot Server	MediMateBot/server/	8080	Gemini 2.5 Flash — chat, transcribe, report
Chatbot Client	MediMateBot/client/	Vite default (HTTPS)	React chat UI

Chatbot API endpoints (MediMateBot/server/server.js):

Method	Endpoint	Purpose
POST	/chat	Send message + history → Gemini → structured reply
POST	/transcribe	Send base64 audio → Gemini → transcript text
POST	/report	Send full history → Gemini → download PDF

---

Tech Stack

Layer	Technologies
Chatbot Frontend	React 19, Vite 7, Framer Motion, @vitejs/plugin-basic-ssl (HTTPS)
Chatbot Backend	Express 4, @google/generative-ai, PDFKit, CORS, dotenv
Main Frontend	React 19, Vite 7, Tailwind CSS 4, React Router 7, Framer Motion, Leaflet, Axios
Main Backend	Express 5, Mongoose / MongoDB, JWT + Bcrypt, Multer + Cloudinary, Joi
AI Model	Google Gemini 2.5 Flash

---

Installation

Chatbot backend:

cd MediMateBot/server
npm install

Chatbot frontend:

cd MediMateBot/client
npm install

Main frontend:

cd frontend
npm install

Auth backend:

cd backend/authServer
npm install

Main backend:

cd backend
npm install

---

Environment Variables

MediMateBot/server/.env

GEMINI_API_KEY=your_google_gemini_api_key

backend/authServer/.env

PORT=5000
MONGO_URI=your_mongodb_uri
JWT_SECRET=your_jwt_secret_key

backend/.env

MONGODB_URI=your_mongodb_uri
CLOUDINARY_NAME=your_cloudinary_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_SECRET_KEY=your_cloudinary_secret
PORT=4000

---

Running the Project

All services run independently — each needs its own terminal.

Chatbot backend (port 8080):

cd MediMateBot/server
npm start

Chatbot frontend (HTTPS, Vite default port):

cd MediMateBot/client
npm run dev

Opens on https://localhost:5173. On first visit Chrome will show a self-signed certificate warning — click Advanced → Proceed to localhost. HTTPS is required for microphone access.

Main frontend:

cd frontend
npm run dev

Auth backend (port 5000):

cd backend/authServer
npm run dev

Main backend (port 4000):

cd backend
npm run server

---

Voice Input — How It Works

The mic button uses the browser's native MediaRecorder API (no external libraries):

1. User clicks mic → browser requests microphone permission
2. Audio is recorded locally as a webm blob
3. User clicks mic again to stop recording
4. Blob is converted to base64 and POSTed to /transcribe
5. The backend sends the audio to Gemini 2.5 Flash for transcription
6. The transcript is returned and automatically sent as a chat message

Note: Voice input requires Chrome and microphone permission. The chatbot frontend must be running on HTTPS (handled automatically by the Vite dev config).

---

PDF Report — How It Works

When the user says "bye", "thank you", or "thanks" at the end of a session:

1. The full conversation history is POSTed to /report
2. Gemini generates a structured clinical summary in plain text
3. The backend renders it as a PDF using PDFKit with a report ID, timestamp, and disclaimer
4. The PDF downloads automatically in the browser

---

Chatbot UI

The MediMate Bot UI is styled to match the main Miffy landing page:

• Dark navy-to-teal gradient background matching the landing page hero
• Glassmorphism header with bot avatar, gradient title text, and live "Online" status
• Welcome screen with quick-prompt chips for one-tap symptom entry
• User messages — teal gradient pill bubbles (right-aligned)
• Bot messages — white frosted glass cards with soft shadow (left-aligned)
• Unified pill input bar — text field, mic button, and send button in one rounded container
• Slide-in message animations consistent with landing page motion style