DoctorOnCall — Online doctor appointments

A full-stack web app where patients book visits, doctors manage schedules and prescriptions, and admins oversee the system — all in one place.

In plain English: what is this?

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.

What you get (features)

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).

Tech stack (short)

Before you start (what to install)

1. Node.js (LTS version is best) — includes npm.
2. A Supabase account (free tier is fine) or any other PostgreSQL database.
3. 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.

Project layout

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)

Setup guide (step by step)

1. Clone the repository

git clone https://github.com/Ujjalzaman/Doctor-Appointment.git
cd Doctor-Appointment

2. Create the database on Supabase

1. Go to supabase.com and sign in.
2. New project → choose organization, name, region, and a strong database password.
3. Wait until the project is ready.
4. Open Project Settings → Database.
5. Under Connection string, choose URI (PostgreSQL).
6. 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.
7. For Prisma, use a connection string that works from your machine. Supabase often provides:
   • Session mode (port 5432) or Transaction pooler (port 6543).
     If you see SSL errors, add ?sslmode=require at the end of the URL (if not already there).

Tip: Keep this URL secret — it is the key to your database.

3. Configure the backend (api/.env)

cd api
cp .env.example .env   # On Windows: copy .env.example .env

Edit api/.env and set at least:

Install dependencies and sync the database schema:

npm install
npx prisma generate

Apply 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 dev

Leave this terminal running. The API should listen on the port you set (e.g. 5050).

4. Configure the frontend (root .env)

In the project root (not inside api/), create or edit .env:

REACT_APP_API_BASE_URL=http://localhost:5050

Use 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 start

Open http://localhost:3000.

5. Admin login (important)

• 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 Auth table in the database with role = 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 = true on an admin row. That account can browse everything but cannot create, update, or delete data through the API.

6. Common issues

Video walkthrough

Older setup steps are also shown in this video (database provider may differ; this README uses Supabase):

Screenshots

Contributing

1. Fork the repo and clone your fork.
2. Create a branch: git checkout -b your-feature-name
3. Make changes, test with npm start (frontend) and npm run dev (API).
4. Commit and push, then open a Pull Request with a clear description.

Author & contact

Ujjal Zaman

• Website / portfolio: ujjalzaman.com
• Email: [email protected]

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.

License & thanks

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.