A full-stack medical appointment platform with CNN based Emergency Response System
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.
- 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)
- Doctors log in via the unified
/joinrole-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
- Secure admin login via unified
/joinrole-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
- 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
| 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 |
| 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) |
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
| 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 |
| 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 |
| 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 |
| 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 |
| Field | Type | Notes |
|---|---|---|
| name | String | Required |
| 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 |
| Field | Type | Notes |
|---|---|---|
| name | String | Required |
| 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 } |
| 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 |
- Node.js v18+
- Python 3.10+
- MongoDB Atlas account (or local MongoDB)
- Cloudinary account
- Razorpay account (optional, for payments)
git clone https://github.com/YashAditya1212/MediSync-full-stack.git
cd MediSync-full-stackcd backend
npm installCreate 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 # optionalStart the backend:
npm run servercd ../frontend
npm installCreate a .env file in the frontend/ folder:
VITE_BACKEND_URL=http://localhost:4000
VITE_CURRENCY=βΉ
VITE_RAZORPAY_KEY_ID=your_razorpay_key_id # optionalStart the frontend:
npm run devThe apps will be running at:
- Frontend (+ Admin Panel): http://localhost:5173
- Backend API: http://localhost:4000
- Admin / Doctor Login: http://localhost:5173/join
cd "../God's Eye/server"
pip install -r requirements.txtCreate 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_secretStart the Flask server:
python app.pycd "../model-implementor"
pip install -r requirements.txtCreate a .env file in God's Eye/model-implementor/:
EMAIL_SENDER=your-gmail@gmail.com
EMAIL_PASSWORD=your-gmail-app-passwordRun 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/cd "../client"
npm install
npm run devDashboard runs at: http://localhost:3000
- Push your code to GitHub
- Create a new Web Service on Render
- Set Build Command:
npm install - Set Start Command:
node server.js - Add all environment variables from your
.env
- Import the repo on Vercel
- Set the Root Directory to
frontend/ - Add
VITE_BACKEND_URLpointing to your Render backend URL - The
vercel.jsonhandles SPA routing β no extra config needed
- Create a second Web Service on Render
- Set Root Directory to
God's Eye/server - Set Build Command:
pip install -r requirements.txt - Set Start Command:
python app.py - Update
GODS_EYE_URLin your backend env to point to the deployed Flask URL
Yash Aditya Mishra
B.Tech Student | DevOps & Cloud Developer
GitHub
This project is for educational and portfolio purposes. Any commercial use is strictly prohibited.
