GreatStack
Learn How to make MERN Stack Doctor Appointment Booking App using React JS, MongoDB, Express and Node JS | Compete Full Stack React JS project for Resume š Source Code Download Link is pinned in the comment below. š Live Preview: https://prescripto.vercel.app/ š Download the assets: https://greatstack.dev/assets/prescripto-full-stack š Figma Design: https://greatstack.dev/go/figma-prescripto SUBSCRIBE: @GreatStackDev ------------------- In this tutorial we are going to learn How to create a Full Stack Doctor Appointment Booking system. This is step by step tutorial we will use React JS, MongoDB, Express JS and Node JS to build our own appointment booking website, so It will be a MERN Stack project. You can use thi project for your Resume or College projects. This full stack appointment booking system can be used by a doctor or a hospital. Because in this project we have created 3 level of authentication. 1st one is for Patients, so that patient can login on the website, book appointment with doctor and manage the booked appointment. 2nd one is doctor login, so that doctor can login and check the appointment and their earning. Doctor can update their profile also from dashboard. 3rd one is Admin Dashboard where admin can manages the appointment and admin can also manage the doctor profile. In this full stack application we will integrate the online payment gateways so that user can pay the appointment fee online on this website. You can also customize this full stack appointment booking app and use this project for your college projects and your personal portfolio or resume. ------------------- Watch Full Stack E-commerce Website tutorial: š https://youtu.be/7E6um7NGmeE Watch Full Stack Food Order Website tutorial: š https://youtu.be/DBMPXJJfQEA Watch Full Stack Chat App tutorial: š https://youtu.be/gbocZlm71nE Watch Full Stack Music Streaming Website š https://youtu.be/KdGfhSpT6pc Watch Full Stack Blog Website Tutorial š https://youtu.be/HdWCh_4XE1Q ------------------------------------- Build more React JS projects: Complete Portfolio Website In React: š https://youtu.be/4ag1LsgIUc0 Build ChatGPT Clone In React: š https://youtu.be/EzkWAviyYgg Build AI Image Generator with OpenAI In React š https://youtu.be/PZG2MvOjud0 Create Weather App In React š https://youtu.be/7JqdjWB88Kk ------------------------------------- Timestamps: 00:00 Project Overview 08:14 Create a React Project 12:30 Add Tailwind CSS In React Project 17:17 Create Components and Pages in React project 28:40 Create Home Page 01:49:51 Create All Doctors Page 02:08:54 Create Doctor Appointment Page 03:03:26 Create About and Contact Page 03:20:12 Create Login Page 03:36:12 Create Patient Profile page 04:04:44 Create Appointments page for patients 04:17:18 Make the website responsive 04:35:07 Create Backend Server 05:00:23 Create MongoDB model to store Doctors Data and User Data 05:13:23 Create API to add Doctor data in Database 05:46:44 Create API for Admin Login 06:03:57 Create Admin Panel 07:29:29: Create Add doctor functionality in Admin Panel 07:57:34 Display all doctors list in Admin panel 08:29:53 Display all doctors on frontend website from Database 08:43:18 Create Patient Login and Registration system 09:25:34 Display and update patient profile data on website 10:15:45 Create Appointment Booking Functionality 10:56:03 Display Booked appointments on Website 11:13:58 Create Appointment Cancellation Feature for Patient 11:34:13 Integrate Online payment gateway to make online payment 12:14:57 Display and Manage Appointment for Admin panel 12:49:48 Create Dashboard Page for admin panel 13:17:32 Create doctor panel ( doctor dashboard ) 13:41:31 Display and manage appointments in Doctor panel 14:33:07 Create Dashboard page for Doctor panel 14:53:25 Display and Update profile data In Doctor panel ------------------------------------- Images Credit: https://www.pexels.com/ https://unsplash.com/ https://www.freepik.com/ ------------------------------------- Connect with me: š https://linktr.ee/iamavinashkr Connect with GreatStack: Instagram: https://instagram.com/GreatStackDev Twitter: https://twitter.com/GreatStackDev Facebook: https://facebook.com/GreatStack
Complete understanding of the topic
Hands-on practical knowledge
Real-world examples and use cases
Industry best practices
Take your learning to the next level with premium features