SmartOPD

• 

  to book your appointment

• 

  ai prediction of disease with percentage based on symptoms

• 

  for dangerous symptoms it suggest to consult you doctor immidiately

• 

  admin can see appointments and pateint details also

• 

  home page with search bar to search hospitals

• 

  you can view many doctors here also there slots with status

Inspiration

Healthcare systems in many hospitals still rely on manual OPD processes, long queues, and inefficient appointment handling. Patients often waste valuable time waiting for consultations, especially during emergencies.

SmartOPD was inspired by the idea of creating a modern digital healthcare platform that simplifies hospital appointment booking and improves queue management for both patients and hospital staff.

The goal was to build a smart, fast, and user-friendly solution that can reduce waiting time and make healthcare access easier.

What it does

SmartOPD is a digital healthcare appointment and queue management system.

The platform allows users to:

• Book appointments online
• Generate appointment tokens instantly
• Search nearby hospitals and doctors
• View doctor availability and queue status
• Access emergency support services
• Manage appointments through an admin dashboard

The system provides a smooth and responsive user experience with role-based login functionality for patients, doctors, and administrators.

How we built it

SmartOPD was built using modern web technologies:

• Next.js
• React.js
• Tailwind CSS
• JavaScript
• LocalStorage

The frontend interface was designed with a clean and responsive UI using Tailwind CSS.

LocalStorage was used to store appointment and login session data for quick and lightweight data handling without requiring a backend database.

Challenges we ran into

During development, we faced several challenges:

• Managing route protection in Next.js
• Handling role-based authentication
• Storing and updating appointment data dynamically
• Preventing auto-login and session conflicts
• Fixing localStorage synchronization issues
• Designing a responsive healthcare dashboard UI

These challenges helped improve our understanding of React state management and frontend architecture.

Accomplishments that we're proud of

We are proud of building:

• A complete appointment booking workflow
• A modern admin dashboard
• Dynamic queue and token management
• Emergency support integration
• Responsive and professional healthcare UI

Despite working without a backend database, the application successfully simulates a real-world OPD management system.

What we learned

Through this project, we learned:

• Advanced React and Next.js concepts
• Client-side state management
• LocalStorage handling
• Responsive UI/UX design
• Authentication flow handling
• GitHub project management and deployment workflow

This project also improved our problem-solving and debugging skills.

What's next for SmartOPD

Future improvements planned for SmartOPD include:

• Firebase or MongoDB integration
• Real-time queue updates
• AI-based symptom checker
• Online payment integration
• Doctor video consultation
• SMS and email notifications
• Multi-hospital support
• Cloud deployment

SmartOPD has the potential to become a scalable healthcare management solution for hospitals and clinics.

Built With

• css
• html
• javascript
• localstorage
• next.js
• react.js
• tailwind