MediOra (Doctors Appointment Web App)

MediOra is a full-stack doctor appointment platform with role-based panels for patients, doctors, and admins.

Live URL: MediOra

What You Can Do

• Sign up and log in as a patient
• Log in as doctor or admin
• Browse doctors by specialty
• View doctor profiles and available booking slots
• Book appointments with selected date/time
• Cancel appointments (patient, doctor, admin by role)
• Pay online with Razorpay
• View role-specific dashboards:
  • Patient: profile + appointments
  • Doctor: appointments + earnings + status updates
  • Admin: doctor management + full appointment monitoring

Features

• Role-based authentication with JWT (user, doctor, admin)
• Protected backend routes with middleware access control
• Doctor listing, filtering, related doctors, and slot visibility
• Appointment booking with slot conflict prevention
• Razorpay order creation + signature verification
• Admin doctor CRUD actions (add/delete doctor)
• Admin and doctor dashboards with recent activity and metrics
• Cloudinary support for doctor image upload
• Redesigned MediOra frontend UI across all roles

Tech Stack

• Frontend: React 18, Vite, JavaScript, Tailwind CSS
• Backend: Node.js, Express (ESM)
• Database: MongoDB
• ORM/ODM: Mongoose
• Auth/Security: JWT (jsonwebtoken), bcryptjs
• Payments: Razorpay
• Media: Cloudinary + Multer
• HTTP client: Axios
• UI libs: lucide-react, react-hot-toast

Optimization and Architecture Notes

• API layer is modular (routes → controllers → models)
• JWT middleware validates token and role before protected actions
• Slot booking map is maintained in doctor document (slots_booked)
• Backend includes global Express error handler for stable responses
• MongoDB connection uses cached connection pattern for serverless safety
• Frontend uses shared service modules and axios interceptor flow

How It Works (Workflow)

1. Patient/doctor/admin logs in and receives a JWT.
2. Frontend stores token and sends it as Authorization: Bearer <token>.
3. Backend middleware validates token and attaches userId + userRole.
4. Patient browses doctors and books a slot.
5. Backend creates appointment and marks doctor slot as booked.
6. Patient can pay online:
   • Create order via Razorpay
   • Verify payment signature on backend
   • Mark appointment as paid
7. Doctor can view appointments, mark completed, or cancel.
8. Admin can monitor all appointments and manage doctors.

Installation

1) Clone

git clone https://github.com/pawanshekhawat/Doctors-Appointment-WebApp.git
cd Doctors-Appointment-WebApp

2) Install dependencies

cd backend
npm install

cd ../frontend
npm install

3) Configure environment variables

Create backend/.env:

# Core
PORT=4000
MONGODB_URI=your_mongodb_connection_string
JWT_SECRET=your_jwt_secret

# Admin login (optional; defaults exist in code but set your own for safety)
ADMIN_EMAIL=admin@mediora.com
ADMIN_PASSWORD=admin

# Razorpay
RAZORPAY_KEY_ID=your_razorpay_key_id
RAZORPAY_KEY_SECRET=your_razorpay_key_secret

# Cloudinary
CLOUDINARY_NAME=your_cloudinary_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_api_key
CLOUDINARY_SECRET_KEY=your_cloudinary_secret_key

Create frontend/.env:

VITE_BACKEND_URL=http://localhost:4000

4) Run backend

cd backend
npm run start

5) Run frontend

cd frontend
npm run dev

Default local URLs:

• Frontend: http://localhost:5173
• Backend: http://localhost:4000

API Endpoints

Health

• GET /

User

• POST /api/user/register
• POST /api/user/login
• GET /api/user/get-profile (auth: user)
• PUT /api/user/update-profile (auth: user)

Doctor

• POST /api/doctor/login
• GET /api/doctor/list
• GET /api/doctor/:doctorId
• GET /api/doctor/related/:doctorId
• GET /api/doctor/slots/:doctorId
• GET /api/doctor/get-profile (auth: doctor)
• PUT /api/doctor/update-profile (auth: doctor)
• GET /api/doctor/dashboard (auth: doctor)

Appointment

• POST /api/appointment/book (auth: user)
• GET /api/appointment/user-appointments (auth: user)
• PUT /api/appointment/cancel/:appointmentId (auth: user)
• GET /api/appointment/doctor-appointments (auth: doctor)
• PUT /api/appointment/cancel-by-doctor/:appointmentId (auth: doctor)
• PUT /api/appointment/complete/:appointmentId (auth: doctor)

Admin

• POST /api/admin/login
• POST /api/admin/add-doctor (auth: admin)
• GET /api/admin/dashboard (auth: admin)
• GET /api/admin/doctors (auth: admin)
• DELETE /api/admin/doctor/:doctorId (auth: admin)
• GET /api/admin/appointments (auth: admin)
• PUT /api/admin/appointment/:appointmentId (auth: admin)

Razorpay

• POST /api/razorpay/create-order (auth: user)
• PUT /api/razorpay/verify-payment (auth: user)

Project Structure

Doctors-Appointment-WebApp/
  backend/
    config/
    controllers/
    middleware/
    models/
    routes/
    scripts/
    server.js
  frontend/
    src/
      components/
      pages/
      services/
      utils/

Notes

• This is a personal/portfolio-level project and a strong base for production hardening.
• For production use, add stronger validations, rate limiting, audit logging, and automated tests.

Contribution

Contributions are welcome. Open an issue first for major changes so implementation direction stays aligned.

License

MIT License | Open Source Initiative