A full-stack web app where patients book visits, doctors manage schedules and prescriptions, and admins oversee the system — all in one place.
This project is like a small clinic website:
- Patients can browse doctors, book a time that works for them, pay attention to confirmations, track an appointment with a tracking ID, and see prescriptions and invoices in their own area.
- Doctors can see who booked them, manage their available hours, write prescriptions, and keep their profile up to date.
- Admins get an overview: doctors, patients, appointments, reviews, and more (including optional read-only “demo” admin accounts for safe showcases).
You do not need to be a developer to use the live site. The instructions below are for people who want to run or customize the project on their computer.
| For… | What they can do |
|---|---|
| Visitors | Home, about, services, blog, contact, search and filter doctors, book appointments. |
| Patients | Sign up / sign in, dashboard, favourites, appointments, invoices, prescriptions, track appointment with ID. |
| Doctors | Sign up (with email verification), dashboard, appointments, patients, schedule, prescriptions, reviews, blogs, invoices, profile settings. |
| Admins | Separate admin area: dashboard stats, manage appointments, doctors, patients, specialties, reviews, transactions. Demo admins (isDemo in database) can view everything but cannot change data (enforced by the API). |
Other useful pieces
- Email-related flows (e.g. resets, notifications) when you configure Gmail app password.
- Cloudinary for profile and content images.
- Modern UI (React + Ant Design) and a structured API (Node + Express + TypeScript + Prisma).
| Layer | Tools |
|---|---|
| Website (frontend) | React, Redux Toolkit, Ant Design, React Router, Axios |
| API (backend) | Node.js, Express, TypeScript |
| Database | PostgreSQL (this project is set up to use Supabase — hosted Postgres with a friendly dashboard) |
| ORM | Prisma |
- Node.js (LTS version is best) — includes
npm. - A Supabase account (free tier is fine) or any other PostgreSQL database.
- Optional but recommended for full features: Google account (app password for mail), Cloudinary account (images).
You do not have to install Prisma or TypeScript globally — the steps below use npx.
Doctor-Appointment/ ← React app (run from here with npm start)
├── api/ ← Backend API (Express + Prisma)
│ ├── .env.example ← Copy to .env and fill in
│ └── prisma/
│ └── schema.prisma ← Database models
├── .env ← Frontend: API URL (see below)
└── project_setup.txt ← Short checklist (Supabase details are in this README)
git clone https://github.com/Ujjalzaman/Doctor-Appointment.git
cd Doctor-Appointment- Go to supabase.com and sign in.
- New project → choose organization, name, region, and a strong database password.
- Wait until the project is ready.
- Open Project Settings → Database.
- Under Connection string, choose URI (PostgreSQL).
- Copy the string. It looks like
postgresql://postgres.[ref]:[YOUR-PASSWORD]@aws-0-...pooler.supabase.com:6543/postgres
Replace[YOUR-PASSWORD]with the password you set for the project. - For Prisma, use a connection string that works from your machine. Supabase often provides:
- Session mode (port
5432) or Transaction pooler (port6543).
If you see SSL errors, add?sslmode=requireat the end of the URL (if not already there).
- Session mode (port
Tip: Keep this URL secret — it is the key to your database.
cd api
cp .env.example .env # On Windows: copy .env.example .envEdit api/.env and set at least:
| Variable | What to put |
|---|---|
DATABASE_URL |
Your Supabase PostgreSQL URI (from step 2). |
PORT |
e.g. 5050 (default in many setups). |
JWT_SCRET / JWT_EXPIRED_IN |
Strong secret and expiry (see .env.example). |
BACKEND_LOCAL_URL |
Often http://localhost:5050/api/v1/auth/ for local dev. |
BACKEND_LIVE_URL |
Your deployed API URL + /api/v1/auth/ when you host the API. |
EMAIL_PASS |
Gmail App Password (for emails). |
GMAIL_APP_EMAIL / ADMIN_EMAIL |
Addresses used by the app for sending mail. |
CLOUND_NAME, API_KEY, API_SECRET |
From Cloudinary dashboard. |
Install dependencies and sync the database schema:
npm install
npx prisma generateApply the schema to Supabase (pick one path that matches your workflow):
- Fresh project / no migration history yet:
npx prisma db push
- If you use Prisma Migrate and have migration files:
npx prisma migrate dev
Start the API:
npm run devLeave this terminal running. The API should listen on the port you set (e.g. 5050).
In the project root (not inside api/), create or edit .env:
REACT_APP_API_BASE_URL=http://localhost:5050Use your real API origin in production (no trailing slash required; the app adds /api/v1 when needed).
Install and run the website:
cd .. # back to Doctor-Appointment root
npm install
npm startOpen http://localhost:3000.
- Normal users sign up as patient or doctor from the app.
- Admin users are not created from the sign-up form. You add them in the
Authtable in the database withrole = admin(and a hashed password consistent with how your app stores passwords), or use your own seed script. - For a safe demo for employers or clients, set
isDemo = trueon an admin row. That account can browse everything but cannot create, update, or delete data through the API.
| Problem | What to try |
|---|---|
| Frontend cannot reach API | Check REACT_APP_API_BASE_URL, CORS, and that the API is running. |
| Database connection failed | Verify DATABASE_URL, password, sslmode=require, and Supabase project status. |
| Prisma errors after pulling changes | Run npx prisma generate again; then db push or migrate dev. |
Older setup steps are also shown in this video (database provider may differ; this README uses Supabase):
- Fork the repo and clone your fork.
- Create a branch:
git checkout -b your-feature-name - Make changes, test with
npm start(frontend) andnpm run dev(API). - Commit and push, then open a Pull Request with a clear description.
Ujjal Zaman
- Website / portfolio: ujjalzaman.com
- Email: ujjalzaman@gmail.com
Have a product idea, a similar project, or want to collaborate? Reach out via the website or email — I’m happy to hear from you.
This repository is shared for learning and portfolio use. If you ship a public product, review dependencies’ licenses and add your own license file if needed.
Thank you for reading — and happy building.