Skip to content

YashAditya1212/MediSync-full-stack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

11 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

MediSync Logo

MediSync

A full-stack medical appointment platform with CNN based Emergency Response System


What is MediSync?

MediSync is a full-stack healthcare platform built to streamline the entire OPD (Outpatient Department) experience. Patients can browse doctors by speciality, book time slots, manage their appointments, and pay online β€” all from a single interface. Doctors get their own dashboard to manage schedules and mark appointments complete. Admins have full control over the platform through a dedicated admin panel embedded within the frontend.

The heart of the project is God's Eye, an integrated AI-powered accident detection module using YOLOv8 that can analyse CCTV or uploaded footage and trigger emergency response alerts in real time.

The UI is built with an Awards-inspired design philosophy β€” mint green & white palette, glassmorphism cards, smooth animations, a custom cursor, dark mode support, and a starry background system.


Features

Patient Portal

  • Register and log in with JWT-based authentication
  • Browse all doctors, filter by speciality
  • View doctor profiles β€” degree, experience, fees, about
  • Book appointments by selecting a date and 30-minute time slot
  • View all upcoming and past appointments
  • Cancel appointments with slot release back to the doctor
  • Pay appointment fees online via Razorpay
  • Manage personal profile β€” name, phone, address, DOB, gender, profile photo (stored on Cloudinary)

Doctor Dashboard (Admin Panel)

  • Doctors log in via the unified /join role-selection page
  • View all appointments assigned to them
  • Mark appointments as completed or cancel them
  • View personal dashboard with earnings, patient count, and latest appointments
  • Update their own profile information and availability status

Admin Panel

  • Secure admin login via unified /join role-selection page
  • Add new doctors with full profile details and photo upload
  • View and manage all doctors on the platform
  • View all appointments across the entire platform
  • Cancel any appointment
  • Dashboard with platform-wide stats β€” doctors, patients, appointments, latest bookings

God's Eye (AI Module)

  • YOLOv8-powered vehicle accident detection using a custom-trained model (i1-yolov8s.pt)
  • Real-time video inference with SORT multi-object tracking
  • Standalone Next.js 14 dashboard for monitoring detected accidents
  • Interactive map with Leaflet showing accident coordinates
  • Automatic emergency email alert on accident detection via Flask-Mail
  • Accident frame captured and uploaded to Cloudinary on detection
  • Geolocation via geopy / Nominatim reverse geocoding
  • Accessible via the pulsing "God's Eye" button in the MediSync navbar
  • Separate Python model implementor for local CCTV / video file processing

Tech Stack

MediSync

Layer Technology
Frontend React 18, Vite, Tailwind CSS
Backend Node.js, Express.js
Database MongoDB with Mongoose ODM
Authentication JSON Web Tokens (JWT)
Image Storage Cloudinary
File Uploads Multer
Payments Razorpay, Stripe
Password Hashing bcrypt

God's Eye

Layer Technology
AI Model YOLOv8 (Ultralytics), custom-trained i1-yolov8s.pt
ML Runtime PyTorch, TorchVision
Computer Vision OpenCV, cvzone, SORT tracker
Flask Server Python 3, Flask, Flask-Mail, Flask-JWT-Extended, Flask-CORS
Database MongoDB (PyMongo)
Dashboard Client Next.js 14, TypeScript, TanStack Query, React Leaflet, Chart.js
Geolocation geopy, Nominatim (OpenStreetMap)
Image Upload Cloudinary
Email Alerts aiosmtplib (model-implementor), Flask-Mail (server)

Project Structure

MediSync-full-stack/
β”‚
β”œβ”€β”€ frontend/                              # Patient-facing React app (also hosts admin panel)
β”‚   └── src/
β”‚       β”œβ”€β”€ context/
β”‚       β”‚   β”œβ”€β”€ AppContext.jsx             # Global state: doctors list, backend URL, currency
β”‚       β”‚   β”œβ”€β”€ UserContext.jsx            # Auth state: token, user data, login/logout
β”‚       β”‚   β”œβ”€β”€ DarkModeContext.jsx        # Dark mode toggle state
β”‚       β”‚   └── admin/
β”‚       β”‚       β”œβ”€β”€ AdminContext.jsx       # Admin API calls and state
β”‚       β”‚       β”œβ”€β”€ DoctorContext.jsx      # Doctor API calls and state
β”‚       β”‚       └── AdminAppContext.jsx    # Shared admin context
β”‚       β”œβ”€β”€ pages/
β”‚       β”‚   β”œβ”€β”€ Home.jsx                  # Landing page
β”‚       β”‚   β”œβ”€β”€ Doctors.jsx               # Browse & filter doctors
β”‚       β”‚   β”œβ”€β”€ Appointment.jsx           # Book an appointment
β”‚       β”‚   β”œβ”€β”€ MyAppointments.jsx        # View, cancel, and pay for appointments
β”‚       β”‚   β”œβ”€β”€ MyProfile.jsx             # View and edit user profile
β”‚       β”‚   β”œβ”€β”€ Join.jsx                  # Unified role-selection login page
β”‚       β”‚   β”œβ”€β”€ Login.jsx                 # Patient login / Sign Up
β”‚       β”‚   β”œβ”€β”€ About.jsx
β”‚       β”‚   β”œβ”€β”€ Contact.jsx
β”‚       β”‚   β”œβ”€β”€ PrivacyPolicy.jsx
β”‚       β”‚   β”œβ”€β”€ TermsOfService.jsx
β”‚       β”‚   β”œβ”€β”€ GodsEye.jsx               # God's Eye AI module page
β”‚       β”‚   └── admin/                    # Admin + Doctor dashboard pages (merged)
β”‚       β”‚       β”œβ”€β”€ Dashboard.jsx
β”‚       β”‚       β”œβ”€β”€ AddDoctor.jsx
β”‚       β”‚       β”œβ”€β”€ DoctorsList.jsx
β”‚       β”‚       β”œβ”€β”€ AllAppointments.jsx
β”‚       β”‚       β”œβ”€β”€ DoctorAppointments.jsx
β”‚       β”‚       β”œβ”€β”€ DoctorDashboard.jsx
β”‚       β”‚       └── DoctorProfile.jsx
β”‚       β”œβ”€β”€ components/
β”‚       β”‚   β”œβ”€β”€ Navbar.jsx
β”‚       β”‚   β”œβ”€β”€ Footer.jsx
β”‚       β”‚   β”œβ”€β”€ Header.jsx
β”‚       β”‚   β”œβ”€β”€ Banner.jsx
β”‚       β”‚   β”œβ”€β”€ About.jsx
β”‚       β”‚   β”œβ”€β”€ Services.jsx
β”‚       β”‚   β”œβ”€β”€ StatsBar.jsx
β”‚       β”‚   β”œβ”€β”€ WhyChooseUs.jsx
β”‚       β”‚   β”œβ”€β”€ GallerySection.jsx
β”‚       β”‚   β”œβ”€β”€ ContactSection.jsx
β”‚       β”‚   β”œβ”€β”€ DoctorsSection.jsx
β”‚       β”‚   β”œβ”€β”€ TopDoctors.jsx
β”‚       β”‚   β”œβ”€β”€ SpecialityMenu.jsx
β”‚       β”‚   β”œβ”€β”€ RelatedDoctors.jsx
β”‚       β”‚   β”œβ”€β”€ DecorativeLine.jsx
β”‚       β”‚   β”œβ”€β”€ StarryBackground.jsx
β”‚       β”‚   β”œβ”€β”€ CursorAnimation.jsx
β”‚       β”‚   β”œβ”€β”€ ProtectedRoute.jsx
β”‚       β”‚   β”œβ”€β”€ GodsEyeSection.jsx        # God's Eye home page section
β”‚       β”‚   β”œβ”€β”€ GodsEyeShowcase.jsx       # Five-slide vertical auto-scroll showcase
β”‚       β”‚   β”œβ”€β”€ GodsEye/                  # God's Eye UI sub-components
β”‚       β”‚   β”‚   β”œβ”€β”€ Hero.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ Features.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ InputForm.jsx
β”‚       β”‚   β”‚   β”œβ”€β”€ ModelTest.jsx
β”‚       β”‚   β”‚   └── Layouts.jsx
β”‚       β”‚   β”œβ”€β”€ admin/
β”‚       β”‚   β”‚   β”œβ”€β”€ Navbar.jsx
β”‚       β”‚   β”‚   └── Sidebar.jsx
β”‚       β”‚   └── UI/
β”‚       β”‚       β”œβ”€β”€ CustomCursor.jsx
β”‚       β”‚       β”œβ”€β”€ DarkModeToggle.jsx
β”‚       β”‚       └── SmoothScroll.jsx
β”‚       └── assets/                       # Images, SVGs, video assets
β”‚
β”œβ”€β”€ backend/                              # Express REST API
β”‚   β”œβ”€β”€ server.js                         # Entry point, middleware setup
β”‚   β”œβ”€β”€ config/
β”‚   β”‚   β”œβ”€β”€ mongodb.js                    # MongoDB connection
β”‚   β”‚   └── cloudinary.js                # Cloudinary configuration
β”‚   β”œβ”€β”€ models/
β”‚   β”‚   β”œβ”€β”€ userModel.js                  # Patient schema
β”‚   β”‚   β”œβ”€β”€ doctorModel.js                # Doctor schema
β”‚   β”‚   └── appointmentModel.js           # Appointment schema
β”‚   β”œβ”€β”€ controllers/
β”‚   β”‚   β”œβ”€β”€ userController.js             # Patient logic
β”‚   β”‚   β”œβ”€β”€ doctorController.js           # Doctor logic
β”‚   β”‚   └── adminController.js            # Admin logic
β”‚   β”œβ”€β”€ routes/
β”‚   β”‚   β”œβ”€β”€ userRoute.js
β”‚   β”‚   β”œβ”€β”€ doctorRoute.js
β”‚   β”‚   β”œβ”€β”€ adminRoute.js
β”‚   β”‚   └── godsEyeRoute.js               # Proxy routes β†’ Flask server
β”‚   └── middleware/
β”‚       β”œβ”€β”€ authUser.js
β”‚       β”œβ”€β”€ authDoctor.js
β”‚       β”œβ”€β”€ authAdmin.js
β”‚       └── multer.js
β”‚
└── God's Eye/                            # Standalone accident detection system
    β”œβ”€β”€ model-implementor/                # Runs YOLOv8 inference locally
    β”‚   β”œβ”€β”€ app.py                        # Main detection loop (video/CCTV input)
    β”‚   β”œβ”€β”€ models/
    β”‚   β”‚   └── i1-yolov8s.pt             # Custom-trained accident detection model
    β”‚   β”œβ”€β”€ assets/                       # Test video clips
    β”‚   β”œβ”€β”€ modules/
    β”‚   β”‚   β”œβ”€β”€ sort.py                   # SORT multi-object tracker
    β”‚   β”‚   └── send_mail_async.py        # Direct async SMTP email (aiosmtplib)
    β”‚   └── services/
    β”‚       └── apis.py                   # HTTP calls to Flask server
    β”‚
    β”œβ”€β”€ server/                           # Flask REST API (port 8080)
    β”‚   β”œβ”€β”€ app.py                        # Flask app entry point
    β”‚   β”œβ”€β”€ blueprints/
    β”‚   β”‚   β”œβ”€β”€ accident/accident.py      # Accident create/read routes
    β”‚   β”‚   β”œβ”€β”€ auth/auth.py              # JWT auth routes
    β”‚   β”‚   β”œβ”€β”€ emails/emails.py          # Email alert endpoint
    β”‚   β”‚   └── public/public.py          # Video streaming & detection routes
    β”‚   β”œβ”€β”€ modules/
    β”‚   β”‚   └── detect_object_on_video.py # Server-side YOLO inference
    β”‚   └── db-models/
    β”‚       └── models.py                 # MongoDB document models
    β”‚
    └── client/                           # Next.js 14 monitoring dashboard (TypeScript)
        β”œβ”€β”€ app/
        β”‚   β”œβ”€β”€ (auth)/                   # Login page & layout
        β”‚   β”œβ”€β”€ (dashboard)/              # Accident data tables, maps, recent updates
        β”‚   └── (mainboard)/              # Public landing page
        └── components/
            β”œβ”€β”€ auth/                     # LoginForm, UserNav
            β”œβ”€β”€ charts/                   # Chart.js wrappers
            β”œβ”€β”€ dashboard/                # DataTable, MainSection, TopNavbar
            └── misc/
                └── CustomMap.tsx         # React Leaflet accident map

API Reference

User Routes β€” /api/user

Method Endpoint Auth Description
POST /register None Create a new patient account
POST /login None Login and receive JWT
GET /get-profile User Fetch user profile data
POST /update-profile User Update profile + photo upload
POST /book-appointment User Book a doctor appointment
GET /appointments User Get all user appointments
POST /cancel-appointment User Cancel an appointment
POST /payment-razorpay User Initiate Razorpay payment
POST /verifyRazorpay User Verify Razorpay payment
POST /payment-stripe User Initiate Stripe payment
POST /verifyStripe User Verify Stripe payment

Doctor Routes β€” /api/doctor

Method Endpoint Auth Description
POST /login None Doctor login
GET /list None Get all doctors (public)
GET /appointments Doctor Doctor's appointments
POST /complete-appointment Doctor Mark appointment complete
POST /cancel-appointment Doctor Cancel appointment
GET /dashboard Doctor Doctor dashboard stats
GET /profile Doctor Get doctor profile
POST /update-profile Doctor Update doctor profile
POST /change-availability Doctor Toggle availability

Admin Routes β€” /api/admin

Method Endpoint Auth Description
POST /login None Admin login
POST /add-doctor Admin Add a new doctor
GET /all-doctors Admin Get all doctors
POST /change-availability Admin Toggle doctor availability
GET /appointments Admin All appointments platform-wide
POST /cancel-appointment Admin Cancel any appointment
GET /dashboard Admin Platform stats

God's Eye Proxy Routes β€” /api/gods-eye (via Node β†’ Flask)

Method Endpoint Forwards To Description
GET /health Node (direct) Check if Flask server is online
POST /accident/create Flask /api/v1/accident/create Log a new accident event
POST /emails/send-email Flask /api/v1/emails/send-email Trigger emergency email alert
GET /public/ Flask /api/v1/public/ Video stream & detection endpoint

Database Models

User

Field Type Notes
name String Required
email String Required, unique
password String Hashed with bcrypt
image String Cloudinary URL
phone String Default: '000000000'
address Object { line1, line2 }
gender String Default: 'Not Selected'
dob String Date of birth

Doctor

Field Type Notes
name String Required
email String Required, unique
password String Hashed with bcrypt
image String Cloudinary URL
speciality String e.g. 'General physician'
degree String
experience String e.g. '5 Years'
about String
available Boolean Default: true
fees Number Appointment fee
slots_booked Object { date: [times] }
address Object { line1, line2 }

Appointment

Field Type Notes
userId String Reference to User
docId String Reference to Doctor
userData Object Snapshot of user at booking
docData Object Snapshot of doctor at booking
slotDate String Format: DD_MM_YYYY
slotTime String e.g. 10:30 AM
amount Number Fee at time of booking
payment Boolean Default: false
cancelled Boolean Default: false
isCompleted Boolean Default: false

Local Setup

Prerequisites

  • Node.js v18+
  • Python 3.10+
  • MongoDB Atlas account (or local MongoDB)
  • Cloudinary account
  • Razorpay account (optional, for payments)

1. Clone the repository

git clone https://github.com/YashAditya1212/MediSync-full-stack.git
cd MediSync-full-stack

2. Backend setup

cd backend
npm install

Create a .env file in the backend/ folder:

PORT=4000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret_key
CLOUDINARY_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_SECRET_KEY=your_cloudinary_secret_key
ADMIN_EMAIL=admin@medisync.com
ADMIN_PASSWORD=your_admin_password
CURRENCY=INR
GODS_EYE_URL=http://localhost:8080
RAZORPAY_KEY_ID=your_razorpay_key_id           # optional
RAZORPAY_KEY_SECRET=your_razorpay_key_secret   # optional
STRIPE_SECRET_KEY=your_stripe_secret_key       # optional

Start the backend:

npm run server

3. Frontend setup

cd ../frontend
npm install

Create a .env file in the frontend/ folder:

VITE_BACKEND_URL=http://localhost:4000
VITE_CURRENCY=β‚Ή
VITE_RAZORPAY_KEY_ID=your_razorpay_key_id   # optional

Start the frontend:

npm run dev

The apps will be running at:

4. God's Eye β€” Flask server

cd "../God's Eye/server"
pip install -r requirements.txt

Create a .env file in God's Eye/server/:

EMAIL=your-gmail@gmail.com
PASSWORD=your-gmail-app-password
SENDTO=recipient@gmail.com
CLOUD_NAME=your_cloudinary_cloud_name
API_KEY=your_cloudinary_api_key
API_SECRET=your_cloudinary_api_secret
MONGODB_URI=mongodb://localhost:27017/
JWT_SECRET_KEY=your_jwt_secret
FLASK_SECRET_KEY=your_flask_secret

Start the Flask server:

python app.py

5. God's Eye β€” Model implementor

cd "../model-implementor"
pip install -r requirements.txt

Create a .env file in God's Eye/model-implementor/:

EMAIL_SENDER=your-gmail@gmail.com
EMAIL_PASSWORD=your-gmail-app-password

Run detection on a video file:

python app.py --source ./assets/car-crash.mov
# Or process a whole folder of clips
python app.py --folder ./assets/cctv_footage/

6. God's Eye β€” Next.js dashboard (optional)

cd "../client"
npm install
npm run dev

Dashboard runs at: http://localhost:3000


Deployment

Backend β†’ Render

  1. Push your code to GitHub
  2. Create a new Web Service on Render
  3. Set Build Command: npm install
  4. Set Start Command: node server.js
  5. Add all environment variables from your .env

Frontend β†’ Vercel

  1. Import the repo on Vercel
  2. Set the Root Directory to frontend/
  3. Add VITE_BACKEND_URL pointing to your Render backend URL
  4. The vercel.json handles SPA routing β€” no extra config needed

God's Eye Flask Server β†’ Render (separate service)

  1. Create a second Web Service on Render
  2. Set Root Directory to God's Eye/server
  3. Set Build Command: pip install -r requirements.txt
  4. Set Start Command: python app.py
  5. Update GODS_EYE_URL in your backend env to point to the deployed Flask URL

Author

Yash Aditya Mishra
B.Tech Student | DevOps & Cloud Developer
GitHub


License

This project is for educational and portfolio purposes. Any commercial use is strictly prohibited.

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors

Languages