Next.js 14 Doctor Appointment Booking App 2024

Explore the clerk authentication library, its sign in and sign up components, and how to integrate a clerk project with a Next.js app, with alternatives like building from scratch.

Create a clerk account and project, install clerk in Next.js app, configure environment variables and middleware, then wrap the app with the clerk provider for sign in and sign up.

Build clerk-powered sign-up and sign-in pages in a Next.js 14 app, customize fields like first name, last name, email, and password, and configure public routes.

Configure public and private routes in a Next.js 14 app using clerk middleware, protecting admin pages (doctors list, appointments) while keeping home, sign in, and sign up accessible.

Implement the clerk sign-up and sign-in flow, validate emails with verification codes, and navigate authenticated users to the admin dashboard from a public home.

Learn how to fetch the current user object in a Next.js 14 server component using Clerk, and display id, first name, last name, and email.

Design and style the home page for the Next.js doctor appointment app, with a header, sign-in link, hero heading, paragraph, and two call-to-action buttons (view our services, book an appointment).

Style the sign in page and replicate the same interface for the sign up page by centering the form, overriding custom input and button styles, and adding the wave effect.

Set up a MongoDB connection in a Next.js app using mongoose, configure a local MongoDB URI, create a MongoDB.ts config, and integrate the connection at app startup.

Store user data in a MongoDB users collection to preserve data when changing authentication providers. Define a user model with name, email, clerk user ID, profile pic, and approval.

Create a server action to store the current user’s data in the MongoDB users collection, creating a new user when missing and returning the stored data.

Integrate get user data from MongoDB with the admin dashboard UI, ensuring first login creation and no duplicates, and prepare to move this server action logic to the layout.

Create public and private layouts with a custom wrapper in Next.js 14, routing by path name and applying header rules on sign in, sign up, and book appointment pages.

Build a private layout with a header showing the logged-in user name and a hamburger menu for dashboard, appointments, doctors, patients, and reports, with sign-out handled via clerk.

Learn error handling in the private layout by validating the current user from MongoDB, enforcing is approved, and showing an alert and loader before rendering the dashboard.

Learn to handle loading in a Next.js 14 doctor appointment app by showing a centered spinner while user data loads from MongoDB, then render content after loading completes.

Build a collapsible private layout menu in a Next.js 14 doctor appointment app, triggered by a hamburger to show dashboard, doctors, and appointments; navigate admin paths and highlight the active item.

Implement a bottom menu sign-out button that calls the auth sign-out function, handles errors, shows signed out successfully, and automatically navigates to the home page, with a log-out icon.

Display the users list in the access management module and enable the superadmin to grant or restrict access via a server action on admin/users.

Build a Next.js 14 users table by defining MongoDB columns for name, email, and id, render content, format created at with deejays, and manage approvals and super admin controls.

Discover how to update user permissions with a server action that updates is approved and is_superadmin fields, revalidate the admin/users page, and reflect changes in the user management table.

Implement access control in a Next.js doctor appointment app by storing the current user in a global zustand store to hide is approved and is super admin columns.

Learn to implement the frontend for doctors CRUD in a Next.js 14 app, including listing, adding, editing, and deleting doctors with a reusable doctor form and admin routes.

Design a doctor form UI for the Next.js 14 app, preloading specializations, work days, and work hours, and implement a multi-field, client component form with file upload and validations.

Learn to create a Firebase project and integrate it with a Next.js 14 doctor appointment app, including web app setup, environment variables, and initializing Firebase in code.

Learn to implement a Firebase image upload in a Next.js doctor appointment app using storage helpers, upload bytes, and download URLs, with client and server error handling.

Build and integrate the doctor model with Mongoose, defining fields such as name, email, phone, specializations, start/end times, work days, bio, and profile picture, plus the add doctor action.

Demonstrates a save doctor server action in next.js, creating a doctor via the doctor model with a partial payload and handling success or error responses.

Build a doctors table in a next.js 14 admin interface, fetch doctors with a server action, format dates, and implement edit and delete actions with router navigation.

Pre-populate edit doctor form by fetching data with the id from the URL, then update the doctor by id and revalidate the admin path, while handling the profile picture separately.

Learn to pre-populate and manage doctor profile pictures in the edit form using the entity upload component, building a selected files list with url, thumb, and uuid.

Learn to implement delete doctor functionality in a Next.js 14 app: handle delete by id, manage loading state, server action, revalidate admin doctors, and display success or failure messages.

build the appointment booking user interface for patients, enabling date, time, and a single specialty selection, with check availability and clear actions.

Define an appointment model with date, time, doctor, patient, specialist, status, and fees, then implement a server action to retrieve available doctors by date, time, and specialist.

Test doctor availability by validating work days and work hours in the server action, convert dates to day names, and handle slot timing with dayjs.

Display available doctors in the appointment booking flow and allow users to select a doctor, triggering conditional rendering of patient details after check availability.

Create a patient details form in a Next.js 14 doctor appointment booking app, capturing name, email, phone, age, gender, and problem, with a patient interface and grid layout.

Explore stripe integration in a Next.js app by installing the Stripe library, creating a Stripe account, fixing amount, generating a payment intent token via a server action, then saving appointment.

learn to implement stripe payment intents in a next.js 14 doctor appointment app using server actions, client secret, and a front-end credit card form.

Integrate Stripe UI elements to build a credit card form in a Next.js app using the payment intent workflow, Stripe React, and Elements provider, including address collection in a modal.

Complete the stripe payment flow by using stripe and elements, handling submit and confirming payment, then saving the appointment after payment.

Implement save appointment logic by creating a patient from patient details, obtaining its ID, and saving the appointment with that ID; trigger on payment success and navigate to confirmation.

Handle duplicate patients in the save appointment flow by checking for existing records by name and gender, plus email or phone; update when found, or create new records.

learn how Next.js 14 doctor appointment booking app fetches appointment by id from MongoDB, renders a receipt on the confirmation page, and enables print and download.

Create and render an appointment receipt component for confirmation in the Next.js 14 doctor appointment booking app, using interfaces and props to display doctor, patient, date, time, fee, and status.

Implement and test the print and download capabilities for the appointment receipt using the react-to-print library, wiring a component ref and handling print to render a centered A4 receipt.

Explore testing of the appointment confirmation in a Next.js 14 doctor appointment booking app, including reading id from URL params, auto populating receipt data, and verifying successful payment workflows.