top of page
Search

Doctor Appointment Booking System

Updated: Apr 5

React Doctor Appointment Booking System

A modern, sleek, and interactive Doctor Appointment Booking System built using React + TypeScript. This project allows users to browse available doctors, book appointments, and manage their scheduled visits—all without a backend!

Built for learning! This project showcases TypeScript mastery by using type annotations, interfaces, Context API, and useReducer for state management while keeping everything in local storage.

Features

List of Available Doctors – View doctor details & available time slots. Book Appointments – Select a doctor & schedule an appointment. Manage Appointments – View & cancel booked appointments. Global State Management – Uses Context API + useReducer for handling state. Modern UI with TailwindCSS – Fully responsive, clean, and user-friendly. Local Storage Persistence – Appointments are saved even after page refresh. Navigation with React Router – Easily switch between Home, Doctors, and Appointments pages.

Tech Stack

Frontend:

  • React (Component-based UI)

  • TypeScript (Static typing for better code quality)

  • Tailwind CSS (Modern styling with utility-first approach)

  • React Router (Navigation between pages)

  • React Hook Form with TypeScript and form validation.

State Management:

  • Context API + useReducer (Manages doctors & appointments globally)

  • Local Storage (Persists data without backend)

Developer Tools:

  • Vite (Fast React development setup) + React 18

Hosting(Optional)

  •  Vercel Hosting


Resources:

Install Plugins: Tailwind CSS IntelliSense, es7+ (ES7+ React/Redux/React-Native snippets)

Browser: Use the latest version of Google Chrome/Microsoft Edge.

Version Control: GitHub

Setting Up the Vite + React Project

Create a React Project: Create a project folder "React" and open it in VS Code.

Let’s start by setting up Vite with React. Check the following URL's: Scaffolding Your First Vite Project  Note: While creating a project select "Typescript" as a variant. Installing Tailwind CSS as a Vite plugin to integrate it with React

Installing the necessary dependencies:

> npm install react-icons react-router-dom react-hook-form >npm install uuid (package used to generate unique IDs)

>npm install --save-dev @types/uuid (If you're using TypeScript, you also need to install the type definitions for uuid)

Delete "App.CSS" & Remove everything from index.css files.

> Run your build process with "npm run dev" -> http://localhost:5173/ NOTE: Encapsulate the 'App' component with 'BrowserRouter' in the 'main.jsx'

createRoot(document.getElementById('root')).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
)

Deploying code (GitHub Commands):

git init

git add .

git commit -m "first commit"

git branch -M main

git push -u origin main

Vercel Deployment:

Note: Vercel serves static files but doesn’t automatically handle client-side routing in Vite + React Router apps. Solution: You need to tell Vercel to redirect all requests to index.html, allowing React Router to handle routing.

  1. Create a vercel.json file in your project root (if it doesn’t exist already).

  2. Add the following configuration: {

  "rewrites": [

    { "source": "/(.*)", "destination": "/index.html" }

  ]

}


Kommentare

bottom of page