The Challenge
Modern healthcare providers face complex challenges in managing patient data, appointments, doctor schedules, and medicine inventories. Existing systems often lack real-time updates, secure role-based access, and a unified platform for both patients and administrators. The need was to develop an efficient, secure, and user-friendly system that streamlines medical practice management, enhances patient engagement, and provides robust administrative controls without compromising data privacy or operational efficiency.
My Solution
I developed MedNova, a comprehensive MERN stack healthcare platform designed to simplify medical practice management. The system features a robust backend API for business logic, a user-friendly frontend for patients to manage appointments and browse medicines, and a powerful admin dashboard for role-based management of doctors, staff, departments, and inventory. Key integrations include JWT for secure authentication, MongoDB for flexible data storage, Multer & Cloudinary for efficient file uploads, and Firebase for OTP authentication. The platform is designed for scalability, security, and a seamless user experience across all modules.
My Role & Contributions
As the full-stack developer, I designed and built the complete MedNova ecosystem from scratch. I engineered the backend API with Node.js and Express, implementing JWT authentication, MongoDB schemas for various entities (Users, Doctors, Appointments, Medicines), and integrating Multer/Cloudinary for file management. On the frontend, I developed intuitive user and admin interfaces using React.js, focusing on appointment booking, doctor search, medicine browsing, and secure user profiles. I also implemented Firebase for OTP authentication, ensuring a secure and reliable user experience.
Key Features
Appointment Booking & Management
Patients can easily book, reschedule, or cancel appointments, with doctors managing their schedules efficiently.
Doctor Profiles & Search
Comprehensive doctor profiles with specializations, availability, and smart search capabilities for patients.
Medicine Browsing & Inventory
Users can browse medicines, while admins manage inventory, stock levels, and medicine details.
Secure User Authentication
Robust JWT-based authentication for all roles (Admin, Doctor, Staff, User) with Firebase OTP login for users.
Admin & Management Dashboard
Powerful dashboard to manage users, roles, departments, medicines, analytics, and staff.
AI Chat Assistant & Messaging
Integrated AI chat for patient queries and real-time messaging support for internal communication.
Relative Appointment Management
Users can manage appointments for their family members or dependents through their profile.
Cloudinary File Management
Integrated Cloudinary for secure and efficient storage of images and documents (e.g., doctor certifications).
Medicine Purchase & History
Users can purchase medicines through the platform, with a comprehensive history of orders and payments.
Statistics & Analytics
Admin dashboard provides key statistics and analytics for informed decision-making and operational insights.
RESTful API Architecture
Robust and scalable RESTful API powering all frontend and admin features, built with Node.js and Express.js.
Scalable MERN Architecture
Built using React.js, Node.js, MongoDB, and Express.js for high performance and future growth.
Technology Stack
React.js
UI Library
Tailwind CSS
Utility-First CSS
CSS3
Styling Language
Node.js
Runtime Environment
Express.js
Web Framework
Mongoose
MongoDB ODM
MongoDB
NoSQL Database
Cloudinary
Media Management
Firebase
Auth & Messaging
Postman
API Testing
Git
Version Control
GitHub
Code Hosting
Visual Showcase
Hosting & Deployment
MedNova's frontend applications (User App and Admin Dashboard) are deployed on platforms like Vercel or Netlify for optimal global performance. The robust Node.js backend API is hosted on Render or a secure VPS for scalable operations. MongoDB Atlas provides secure, managed cloud database services, while Cloudinary efficiently handles all image and file storage. Firebase is utilized for reliable OTP authentication and potential cloud messaging services.
The Application Data Flow
1. User Authentication & Login
User enters phone number. Frontend sends a request to Firebase for OTP. Upon successful verification, backend authenticates and issues a JWT token.
{ "phone": "+1234567890", "otp": "123456" }
$match / $lookup / $sort
2. Doctor Search & Appointment Slot Selection
User searches for doctors by specialty or name. Backend queries MongoDB to find matching doctors and their available appointment slots.
3. Appointment Confirmation & Notifications
User books a slot. Backend updates appointment status in MongoDB and sends email/push notification confirmations to both user and doctor.
{ "doctorId": "...", "slotId": "...", "userId": "..." }
upload.single('image')
4. Admin & Doctor Profile Management
Admin/Doctor uploads profile pictures or documents. Frontend sends files via Multer to backend, which then uploads them to Cloudinary and saves URL in MongoDB.
5. Medicine Purchase & Inventory Update
User purchases medicines. Backend processes the order, updates medicine inventory in MongoDB, and records the purchase history.
{ "userId": "...", "items": [ { "medId": "...", "qty": 2 } ] }
Under the Hood: How it Works
Detailed explanation of the core third-party services and networking protocols used in the MedNova infrastructure.
JWT (JSON Web Tokens)
Stateless Authentication & Authorization
Why we use it: To securely identify users (patients, doctors, admins, staff) without storing session data on the server, making the API stateless and scalable.
How it works:
- Upon successful login (e.g., Firebase OTP), the Node.js backend signs a JWT containing
userIdandrole. - This token is sent to the frontend, which stores it securely (e.g., HTTP-only cookie, localStorage).
- Every subsequent request includes this JWT in the
Authorizationheader, allowing the backend to verify user identity and permissions.
Firebase Auth (OTP) & FCM
User Authentication & Cloud Messaging
Why we use it: For a simple, fast, and secure phone number login using OTP, and robust push notification capabilities for appointment reminders or system alerts.
How it works:
- User enters phone. Frontend uses Firebase SDK to send an OTP SMS.
- User submits OTP. Firebase verifies it, returning a
credentialto the frontend, which is then sent to our backend for JWT issuance. - For FCM, user apps register for a token. Backend uses Firebase Admin SDK to send targeted push notifications (e.g., "Your appointment is confirmed!").
Cloudinary & Multer
Image/File Upload & Management
Why we use it: To handle various file uploads (e.g., doctor certifications, profile pictures) efficiently and securely, offloading storage and optimization to specialized services.
How it works (Doctor Certification Upload):
- Doctor uploads a PDF certificate. Frontend sends it to the backend using a
FormDataobject. - The Node.js backend uses
Multermiddleware to parse the incoming file data. - The file is then streamed to
Cloudinaryfor storage. Cloudinary returns a secure URL, which the backend saves in the MongoDBDoctormodel.
MongoDB & Mongoose
Flexible NoSQL Database with ODM
Why we use it: For its flexible schema model, high performance with JSON-like documents, and scalability, perfectly suited for diverse healthcare data (users, doctors, medicines, appointments).
How it works (Appointment Management):
- Mongoose schemas like
AppointmentModeldefine the structure for appointment data (patient ID, doctor ID, date, status). - When a patient books, the backend uses Mongoose to
create()a new appointment document. - Doctors can
update()an appointment's status (e.g., "Completed") and retrieve their full schedule using powerful Mongoose queries.
Platform Sub-Systems
User App
- Appointment Booking: Securely book, view, and manage doctor appointments.
- Doctor Search & Profiles: Find specialists, view doctor profiles, and check availability.
- Medicine Catalog: Browse and search for medicines, view details, and manage purchases.
- AI Chat Assistant: Get instant help and answers to medical queries.
Doctor/Staff Panel
- Appointment Dashboard: View and manage assigned patient appointments and schedules.
- Profile Management: Update personal details, availability, and certifications (Cloudinary).
- Internal Messaging: Communicate securely with admin and other staff members.
- Patient Records Access: Secure, authorized access to relevant patient medical history.
Admin Console
- User & Role Management: Control access and permissions for all platform users.
- Medicine Inventory: Full control over medicine stock, pricing, and details.
- Department & Staff: Manage medical departments and assign staff roles.
- Analytics & Reporting: Monitor key performance indicators and system activity.
Folder Architecture
📂 MEDNOVA_ROOT │ ├── 📂 admin # Admin Dashboard Frontend (React.js) │ ├── 📂 public # Public assets (e.g., index.html) │ ├── 📂 src │ │ ├── 📂 assets # Images, icons, static files │ │ ├── 📂 components # Reusable UI (Sidebar, Navbar, CardSection) │ │ ├── 📂 context # Global state (AdminContext, ThemeContext) │ │ ├── 📂 pages # Route-based screens (Admin/, Doctor/, Staff/) │ │ ├── 📄 App.jsx # Main App structure and routing │ │ └── 📄 Login.jsx # Login page for all admin roles │ └── 📄 .env # Admin specific environment variables │ ├── 📂 backend # Node.js + Express API Server (Core Logic) │ ├── 📂 config # DB connection, Cloudinary setup │ ├── 📂 controllers # Request handlers (admin, doctor, patient logic) │ ├── 📂 middlewares # Authentication (JWT), File Upload (Multer) │ ├── 📂 models # Mongoose Schemas (User, Doctor, Appointment, Medicine) │ ├── 📂 routes # API Endpoints (/api/users, /api/doctors, /api/medicines) │ ├── 📄 server.js # Entry point & server configuration │ └── 📄 .env # Secret Keys (Mongo URI, Cloudinary, JWT Secret) │ └── 📂 frontend # Main User-Facing Frontend (React.js) ├── 📂 public # Public assets ├── 📂 src │ ├── 📂 assets # Images, icons, etc. │ ├── 📂 component # Reusable UI (Navbar, Footer, AIChat) │ ├── 📂 context # App-wide contexts (Auth, Firebase, Theme) │ ├── 📂 pages # Route-based screens (Home, Appointment, MedicineList, MyProfile) │ ├── 📄 App.jsx # Main App structure │ └── 📄 main.jsx # React entry point └── 📄 .env # Frontend environment variables (Backend API URL, Firebase config)
What's Next?
Liked this project? Explore more of my work or get in touch to discuss your next big idea!