MedAIgo-dashboard

🚀 MedAlgo – Real-Time Data Connection Guide

This README explains how to connect your React (Vite) app to a real-time backend using Firebase Firestore. You can directly copy–paste and follow these steps for hackathons, demos, or production-ready prototypes.

---

🧠 What does this feature do?

✔ Enables real-time data updates (no refresh) ✔ User input updates dashboard instantly ✔ Suitable for medical analytics, live monitoring, dashboards ✔ No backend server required

---

🏗️ Tech Stack

• React (Vite)
• Firebase Firestore (Real-Time Database)
• Tailwind CSS (UI)

---

🔴 Real-Time Architecture Flow

User Input
   ↓
Firebase Firestore (Real-Time)
   ↓
React App Listener (onSnapshot)
   ↓
Dashboard / Charts Update Instantly

---

✅ STEP 1: Create Firebase Project

1. Go to Firebase Console
2. Click Create Project
3. Project name: medalgo-realtime
4. Disable Google Analytics (optional)
5. Click Create

---

✅ STEP 2: Create Firebase Web App

1. Open Project Settings
2. Click </> Add Web App
3. App name: medalgo
4. Register App
5. Copy the Firebase Config

Example:

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

---

✅ STEP 3: Enable Firestore Database

1. Firebase Console → Firestore Database
2. Click Create Database
3. Choose Test Mode
4. Select nearest region

---

✅ STEP 4: Install Firebase in React App

Open terminal in your project root:

npm install firebase

---

✅ STEP 5: Create Firebase Config File

📁 src/firebase.js

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);

---

✅ STEP 6: Send Data to Firestore (User Input)

Example inside App.jsx

import { useState } from "react";
import { collection, addDoc } from "firebase/firestore";
import { db } from "./firebase";

function App() {
  const [value, setValue] = useState("");

  const sendData = async () => {
    await addDoc(collection(db, "liveData"), {
      value: Number(value),
      timestamp: Date.now()
    });
    setValue("");
  };

  return (
    <div className="p-6">
      <input
        type="number"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        className="border p-2 mr-2"
        placeholder="Enter value"
      />
      <button
        onClick={sendData}
        className="bg-blue-600 text-white px-4 py-2"
      >
        Send
      </button>
    </div>
  );
}

export default App;

---

✅ STEP 7: Receive Data in Real-Time

import { useEffect, useState } from "react";
import { collection, onSnapshot } from "firebase/firestore";
import { db } from "./firebase";

const [liveValues, setLiveValues] = useState([]);

useEffect(() => {
  const unsubscribe = onSnapshot(collection(db, "liveData"), (snapshot) => {
    const data = snapshot.docs.map(doc => doc.data());
    setLiveValues(data);
  });

  return () => unsubscribe();
}, []);

✔ Data updates instantly ✔ No refresh required

---

📊 STEP 8: Display Live Data

{liveValues.map((item, index) => (
  <p key={index}>Live Value: {item.value}</p>
))}

---

▶️ Run the Project

npm install
npm run dev

Open:

http://localhost:5173

---

🏥 MedAlgo Real-Time Use Cases

• Live patient vitals
• Real-time risk score calculation
• Instant dashboard updates
• Emergency monitoring
• Hackathon demos

---

🎯 Why Judges Will Like This

✔ Real-time system ✔ No fake data refresh ✔ Scalable ✔ Industry-relevant

---

🔮 Next Enhancements

• Connect live data to charts
• Add multiple inputs (BP, HR, Age)
• Add medical risk algorithms
• Authentication (doctor / patient)

---

✅ Summary

✔ Firebase provides real-time connection ✔ Easy to implement ✔ No backend server needed ✔ Perfect for MedAlgo & hackathons

---

📌 You can copy–paste this README directly into your project.