This repo contains the complete frontend for a patient-facing healthcare portal. Your task is to build a backend that powers it.
Every page, button, and form is already built. You just need to make the data flow correctly between the frontend and your server.
- Clone this repo and open
index.htmlin a browser - Use the demo credentials below to explore all pages (no backend needed)
- Open
js/app.jsand change the base URL to your server address - Build your backend to support each feature described below
| Field | Value |
|---|---|
| patient@demo.com | |
| Password | demo123 |
Patients can create a new account by entering their name, email, password, phone number, date of birth, gender, and blood group.
Returning patients can log in using their email and password. After a successful login or registration, the frontend stores a token and uses it to identify the patient on all future requests.
After logging in, patients land on a summary page that shows:
- How many upcoming appointments, active prescriptions, lab reports, and pending bills they have
- Their recent appointments, prescriptions, and lab reports
- Basic health information like blood pressure, blood sugar, heart rate, blood group, height, and weight
Patients can search for doctors by name or specialty. They can filter results by specialty, location type (online or in-clinic), and sort by rating or consultation fee.
Clicking on a doctor shows their full profile — qualifications, hospital, fee, availability, and a short bio.
Patients can book an appointment by selecting a date and an available time slot for that doctor.
Patients can view all their appointments — upcoming, past, and cancelled — in separate tabs.
For upcoming appointments, they can reschedule (choose a new date and time) or cancel.
For completed appointments, they can view the consultation summary including the diagnosis and doctor's notes.
Patients can upload their own medical documents such as blood test reports, X-rays, prescriptions, or discharge summaries.
They can browse all uploaded records, filter by type, and view or download individual files. They can also delete records they no longer need.
Patients can view all prescriptions that doctors have issued to them.
Each prescription shows the doctor's name, the diagnosis, the list of medicines with dosage and frequency, and the validity period.
Prescriptions are separated into active (still valid) and past (expired) tabs.
Patients can view diagnostic test results ordered by their doctors.
Each report shows the test name, date, and the results for each parameter — including whether a value is within the normal range or flagged as High or Low.
Patients can also download the full report as a PDF.
Patients can search for medicines by name or category, add them to a cart, and place a home delivery order.
When placing an order, they provide a delivery address and choose a payment method (cash on delivery, UPI, or online).
They can also view their past orders and their current delivery status.
Patients can view all invoices generated by their doctors — pending, paid, and overdue.
Clicking on a bill shows a full invoice breakdown of what was charged (consultation fee, tests, etc.).
Patients can pay a pending bill by selecting a payment method.
Patients can view and edit their personal information (name, phone, address) and health information (blood group, weight, height, allergies, chronic conditions).
They can also change their password. The password change requires them to confirm their current password first.
Patients receive alerts whenever something important happens — such as an appointment being confirmed or cancelled, a new prescription being issued, lab results becoming available, or a new bill being generated.
Notifications are shown as unread until the patient opens or marks them as read. Patients can delete individual notifications or mark all as read at once.
Patients can press a large SOS button that sends an emergency alert to all their saved emergency contacts, along with their current location and basic medical info (blood group, allergies, conditions).
They can manage their emergency contact list — add, edit, or remove contacts, and mark one as the primary contact.
They can also view nearby hospitals based on their current GPS location.
- The frontend sends a token with every request after login — your backend must validate it
- Enable CORS on your server so the frontend can communicate with it
- For the medical records upload, your backend must accept file uploads
- When something goes wrong, return a clear error message explaining what failed
| Area | Weight |
|---|---|
| All 12 features working correctly | 40% |
| Login and authentication working | 20% |
| Correct data returned for each feature | 20% |
| Proper error handling | 10% |
| Clean and readable code | 10% |
MediConnect Patient Portal — BackForge Healthtech Competition