Skip to content
Codeino
Work2026 · Self-initiated demo · fictional dental clinic

Marsa Dental & Orthodontics

A dentist's chair on a working clinic system: an FDI tooth chart, work priced tooth by tooth that becomes the bill at the desk, braces followed as a case — session, wires, instalments — and medical alerts that speak up before an extraction or a penicillin prescription.

The patient books a check-up from a phone, the waiting-room screen calls them to room 4 out loud, the dentist marks the chart and the work, the desk takes the session and an instalment, and the owner sees which braces patients are overdue — from anywhere.

The dentist's visit sheet: a penicillin allergy ticked in red, the complaint and diagnosis, and the tooth chart, beside the room's queue
Role
Design, build and film, end to end
Scope
A dental seat on a five-screen clinic system
Stack
Next.js 16 · TypeScript · Postgres · Remotion
Type
In-house demo, fictional clinic
Eighty seconds, all of it the live site: one patient booked, called, treated and billed, filmed screen by screen and cut together. The captions are in Egyptian Arabic.
01

The brief

A dental practice does not run like a GP's. The bill is decided in the chair, tooth by tooth. Braces are not a visit but eighteen or twenty-four of them over two years, paid in instalments that drift if nobody watches. A blood thinner or a penicillin allergy matters before the needle, not after. And the patient leaves with instructions they will have forgotten by the car.

The ask was a dentist's seat on the Marsa clinic system — booking, reception, the waiting-room screen, the doctor's desk and the owner's numbers, all live on one database — without breaking the three physicians already on it, and at the standard a dentist would trust with a working day.

It is a demo, so a stranger has to be able to sit in every chair in a minute. Everything in it is invented and it starts over every day; the clinic it describes is not.

02

What shipped

  • Visit types per doctor: the dentist offers an exam, an orthodontic session and a cleaning online; fillings, root canals, extractions, braces and whitening are booked by the clinic — each with its own length, and a price or “after the exam”
  • An FDI tooth chart in the dentist's view, with tools for decay, filling, root canal, missing, crown and implant, carried over from the last visit
  • Today's work recorded tooth by tooth with its price; the total is what reception collects, the moment the dentist records it
  • Medical alerts on the patient — blood thinners, anaesthetic or penicillin allergy, diabetes, blood pressure, pregnancy — beside the name in every queue, with a warning when today's work or a drug conflicts
  • Braces as a case: session N of M, the wires on now and last time, the total, paid and owed; the next session booked in one click, four weeks on
  • At the desk, a session plus an instalment, never more than the case owes
  • For the owner, revenue per doctor or for the dentist alone, and the braces patients overdue for their session
  • A5 after-care sheets in Egyptian Arabic after an extraction, a filling or whitening; a waiting-room screen for one to four rooms that calls each number aloud
browser checks on a dental visit, at phone width
32
automated tests, the dental ones included
41
procedures priced on the chart
11
click to book the next session
1
A filling on tooth 36 and what the visit comes to
Select a tooth on the chart, then the procedure: the filling on 36 joins today's work at 700, the allergy on file warns about the anaesthetic, and what reception will collect — 1,100 — updates on the spot.
The braces block: session 2 of 24, the wires and the case's money
Braces as a case: session 2 of 24 with a bar for the whole treatment, today's wires against last session's, and the case's total, paid and still owed.
The prescription and the next session booked
A common drug fills the prescription line in one tap; the penicillin one is marked red for this patient. The next session books itself into the first free time four weeks on, and after-care sheets print in A5.
Reception taking the session and an instalment
At the desk, today's session plus an instalment: 2,000 off the case, 11,000 left on it, cash or InstaPay. The form will not take more than the case owes.
The waiting-room screen calling number 9 to room 4, and the patient's phone
One press at the desk: the waiting-room screen chimes and says “رقم 9، اتفضل عيادة 4”, and the patient's own phone turns red with the same words — within a second of each other.
A booking ticket, the owner's overdue braces patients, and a printed after-care sheet
On phones: the patient's ticket, and the owner's list of braces patients overdue for their session — the calls that bring a treatment, and its instalments, back on schedule.
03

Decisions, and why

Anyone can list a stack. The useful part of a case study is the calls that had a real alternative — so each of these says what the tradeoff was, not just what was chosen.

  1. 01

    Visit types belong to the doctor

    Each doctor carries their own list of visit types — length, price or none yet, and whether patients may book it online.

    “Exam or follow-up” fits a physician and nothing else. A filling takes forty-five minutes and an orthodontic session twenty, and free times are cut to the length of the visit asked for, so a root canal is never offered a gap only a check-up fits. Work that needs an exam first is booked by the clinic, not the public.

    Tradeoff · The list lives in a JSON column, which the database checks less strictly than a table. The old exam and follow-up columns are still written, so the version before it kept working while the new one was rolling out.

  2. 02

    The bill is what was done

    The work recorded on the chart, tooth by tooth, is the visit's price; reception sees it the moment the dentist records it.

    At a dentist the price is not known at booking — an exam turns into a filling and an X-ray. Making the sum of procedures the visit's fee means nobody retypes it at the desk, and the owner's revenue is what was collected, not what was booked.

    Tradeoff · Prices come from a fixed list the dentist can override line by line. A clinic would want its own price list and a rule for discounts before going live.

  3. 03

    Braces are a case, not a visit

    An orthodontic case holds the number of sessions and the interval; each session joins it and takes its number when it actually happens.

    Numbering at booking went wrong in testing: a session booked for next month took number four, and the patient who walked in today got five. Counting what happened keeps “session 2 of 24” true however early or late the patient comes. The case's money adds up across its visits, so the desk can take an instalment on any session and is stopped at what the case owes.

    Tradeoff · One open case per patient, and no treatment-plan builder: a plan with quotes for several visits is the next piece.

  4. 04

    Alerts live on the patient

    Medical alerts are kept on the patient, not the visit, and shown beside the name in every queue and on every sheet.

    An allergy ticked today must be there next month, at the desk as much as in the chair. When today's work or a drug conflicts with one — a blood thinner before an extraction, a penicillin allergy and an antibiotic that contains it — the sheet says so in a sentence, in red.

    Tradeoff · The warnings are a short list of pairings, not a drug-interaction database; they remind, the dentist decides. They need a dentist's review before real use.

  5. 05

    The chart is the dentist's view

    Teeth are numbered FDI and drawn as the dentist faces the patient — the patient's right on the left — always left to right, inside a right-to-left page.

    FDI is what dentists in Egypt write, and a chart that mirrored with the page's direction would put tooth 18 where 28 belongs. Each tooth is drawn by its kind, with its roots, so a molar reads as a molar at a glance and the marks sit where the work is.

    Tradeoff · It is drawn for the dentist, not the patient; a patient-facing view would want the mirror image and plain words.

04

A fourth room without touching three

The dentist arrived on a system already live. The migration only adds — new tables, new columns with defaults — so the version before it carried on serving while the new one built, and the physicians' booking, desk and sheets kept every test they had.

It was checked the way a patient would meet it. A script books the dentist on a phone-width browser, follows the booking on a second phone, checks in at the desk, calls the number, listens to what the waiting-room screen says, marks the chart, records a filling, prints the prescription and the after-filling sheet, books the next session, collects the money and confirms the owner's revenue moved by exactly that. All 32 checks passed against the live deployment, and the 52 across every role still did.

The film was made from the same site. Each screen was recorded through the browser's own screencast with its timestamps, a sharp still was taken whenever the page was at rest, and the cut was assembled frame by frame, the cursor drawn from the log of real clicks. The music was synthesised for it, bar lines on every cut.

05

What was deliberately left out

Scope discipline is part of the work. Each of these was considered and cut for a stated reason.

X-rays and photos
Images need storage, consent and retention rules. The chart records an X-ray as a procedure; the image itself is not kept.
Treatment plans and quotes
Work across several visits is recorded visit by visit. A plan the patient approves up front, with a quote, is the next step.
Lab work
Crowns and appliances from a lab have their own dates and costs; nothing tracks them yet.
Reminders by message
The owner's list shows who is overdue; reaching them is a call from the desk. SMS or WhatsApp reminders cost per message and belong to a real clinic's launch.
Staff accounts
Every seat opens with one click by design. A clinic using it for real needs named users and a record of who did what.

Everything in the demo is invented: the clinic, the dentist, the patients, the phone numbers and the prices. The alert pairings and the after-care sheets were written for the demo and have not been reviewed by a dentist. Scheduling, the queue and the dental records are covered by 41 automated tests, a dental visit by 32 browser checks and every role by 52, all passing against the live site on 22 October 2026. The interface is Arabic only, and the spoken call needs a device with an Arabic voice. No dental clinic has used it.

Stack

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Postgres
  • Drizzle ORM
  • Neon
  • Vercel
  • Remotion

Services

  • Product design
  • Interface design
  • Frontend engineering
  • Backend engineering
  • Product film

Need something built to this standard?

We design and build complete systems — a purchase path that works, roles, and an admin panel that actually runs the business. And Arabic here is never a translation layer bolted on at the end.