Smart OPD – Digital Healthcare Appointment System

Inspiration

In many hospitals and clinics, patients still wait in long queues for appointments. Managing appointments manually creates confusion, delays, and stress for both patients and hospital staff.

We wanted to build a simple and modern digital healthcare solution that allows users to:

  • Book appointments online
  • View nearby hospitals and doctors
  • Reduce waiting time
  • Manage patient queues digitally

The goal of Smart OPD is to make healthcare access faster, smarter, and more organized.


What it does

Smart OPD is a modern web-based healthcare appointment system where users can:

  • Login as patient, doctor, or admin
  • Search nearby hospitals and doctors
  • Book appointments instantly
  • Generate patient tokens automatically
  • View estimated waiting time
  • Access emergency services quickly
  • Manage appointments through an admin dashboard

The system stores appointment data using local storage and displays real-time appointment records inside the admin dashboard.


How we built it

We built Smart OPD using modern frontend technologies:

  • Next.js
  • React.js
  • Tailwind CSS
  • JavaScript
  • LocalStorage for data persistence

The application was designed with a responsive UI and a clean healthcare-themed dashboard to improve user experience.


Challenges we ran into

Some major challenges included:

  • Managing localStorage data correctly
  • Handling login sessions and route protection
  • Fixing dashboard data loading issues
  • Solving 404 API errors
  • Making the UI responsive and professional
  • Deploying and configuring the project on GitHub

Accomplishments that we're proud of

  • Built a complete healthcare appointment system
  • Created role-based login functionality
  • Designed a modern admin dashboard
  • Successfully stored and displayed appointment data
  • Added emergency support features
  • Completed full GitHub deployment

What we learned

Through this project, we learned:

  • Next.js routing and page structure
  • React hooks and state management
  • LocalStorage handling
  • Authentication flow
  • Responsive UI design using Tailwind CSS
  • Git and GitHub deployment

What's next for Smart OPD

Future improvements include:

  • Firebase backend integration
  • Real-time database support
  • AI symptom checker
  • Doctor availability tracking
  • Online payments
  • SMS/email notifications
  • Video consultation support

Built With

Share this project:

Updates