Full Stack Doctor Appointment Booking App Tutorial

Overview

• Building a full stack doctor appointment booking app using MongoDB, Express, React, and Node.js.
• Features:
  • Three levels of login:
    • Patient Login: book appointments.
    • Doctor Login: manage appointments and earnings.
    • Admin Login: create/manage doctor profiles.
  • Online payment gateway for appointment fees.

Application Features

Homepage

• Contains:
  • Banner
  • Images to choose doctors by specialty
  • Top Doctors list
  • Footer
• Doctors List: Filter options based on specialty.

Appointment Booking Page

• Displays doctor’s details:
  • Name, degree, experience, fee, and booking slot options.
• Account creation required for booking.

Admin Panel

• Dashboards to manage appointments:
  • View/cancel appointments.
  • Add new doctors.
• Doctors list management.

Doctor Dashboard

• Displays:
  • Earnings
  • Appointments
  • Profile updates
• Payment options:
  • Cash or Online (Stripe/Razorpay).

Development Process

Setting Up the Project

• Create a folder prescripto and open it in VS Code.
• Initialize frontend with npm create vite@latest.
• Install required dependencies:
  • npm install axios react-router-dom react-toastify
• Run the project with npm run dev.

Designing the UI

Components Structure

• Create folders for components, pages, and context.
• Create individual files for each component and page.

Navigation Bar

• Contains links to Home, All Doctors, About, and Contact.
• Responsive design with mobile menu.

Individual Doctor Page

• Displays specific doctor information and appointment booking options.

Responsive Design

• Ensure all components are mobile-friendly using Tailwind CSS.
• Media queries for various screen sizes.

Registration and Login System

• Create forms to handle user registration and login.
• Conditional rendering based on user state (sign up vs. login).

Admin Functionality

• Admin dashboard for managing doctor profiles and appointments.

Conclusion

• All UI components created and responsive.
• Next steps include backend development for data storage and management.
• Encouragement to engage with the tutorial through comments and feedback.

Additional Notes

• The tutorial encourages users to follow along and customize the project for personal use.