Deepthi's Reading

Journey

031

The Doctor's Digital Desk Story

The prescription pad, rebuilt

Lovable · React · jsPDF · html2canvas

Edition #031 · 6 chapters · 6 min read

The Doctor's Digital Desk Story

The prescription pad, rebuilt

A digital prescription pad with PDF export and WhatsApp sharing.

An ebook edition of the Doctor's Digital Desk build journey: how it started, what actually happened, the conversations that changed the build, what broke, and what I learned. Written in plain English for readers with no technical background. Tools covered: Lovable, React, PDF.

Start reading Back to the library

Start here

What you'll understand by the end

Not mastery — understanding. By the last page you'll be able to explain these in your own words, even with no technical background.

•what Lovable really is, and what it cannot do
•what PDF really is, and what it cannot do
•what React really is, and what it cannot do
•the difference between what the AI does, what the tool does, and what I do
•why permissions and privacy matter once AI can act on your behalf
•where a real person's judgement is still necessary

The concept ladder — the order I actually learned things

I had an idea worth building

↓

I asked an AI to help me shape it

↓

I learned the AI could explain things but could not act outside the chat by itself

↓

I met the tools that actually do the work

↓

I learned how those tools are connected and permitted

↓

I built something real and watched it break

↓

I learned where my own judgement is still required

Chapter 01

Why Doctor's Digital Desk had to exist

Track 1 · My journey

A prescription has to be legible, printable and sendable to where the patient will actually read it, which is WhatsApp. Handwriting fails at least two of those three.

Learning checkpoint

Before this chapter

I had a problem I could describe in a corridor conversation, but nothing I could hand to anyone.

After this chapter

I still did not know which tools to use, but I knew exactly who I was building for.

What changed my mind

The problem stopped being a complaint and became a specification.

Can you answer these?

?Can you state the problem in one sentence, without naming a solution?
?Do you know who is holding the screen when your product is used?

Chapter 02

Keeping it to one screen

Track 1 · My journey

I asked for a form and a preview, nothing else. Patient details on one side, medicines with dosage, frequency, duration and instructions on the other, and a preview that looks like the clinic's printed pad.

Learning checkpoint

Before this chapter

A blank project and a chat window.

After this chapter

The shape of the product was decided before a single deliberate design decision was made.

What changed my mind

I learned to treat conversation as a design tool, not as preparation for design.

Can you answer these?

?What is the one sentence in your own notes that decided the architecture?
?Are you describing outcomes, or dictating implementation?

Chapter 03

Building it: html2canvas, jsPDF and a wa.me link

Track 1 · My journey

The export is entirely client-side. html2canvas photographs the preview element and jsPDF wraps that image into a document, so what is downloaded is exactly what was on screen. The path I ended up preferring is the WhatsApp one: the prescription is formatted as text, URL-encoded and attached to a wa.me link with the doctor's credentials.

Track 2 · Learn with Deepthi

Turning HTML into a PDF

USED — evidence shows I used it

What did I just discover?: That a browser can produce a printable document from what is already on screen, with no server involved.
What is it, really?: Capturing a rendered element as an image and embedding that image into a generated PDF file.
Think of it like this (analogy): Photocopying the page you are looking at rather than retyping it into a new document.
How does it actually work?: html2canvas redraws the element onto a canvas; jsPDF places that canvas into a document and triggers the download.
Why did it matter to my project?: Because the prescription must print exactly as it appears in the preview.
Where I used it: The export button on the prescription preview.
What this tool cannot do: The result is an image, so the text inside it cannot be selected, searched or read by a screen reader.

Track 2 · Learn with Deepthi

URL encoding

USED — evidence shows I used it

What did I just discover?: That sending text through a link means escaping it first, or the message breaks at the first space or ampersand.
What is it, really?: Converting characters that have meaning in a URL into a safe form the browser will transmit intact.
Think of it like this (analogy): Packing fragile items before posting them.
How does it actually work?: encodeURIComponent transforms the prescription text, which is then appended to a wa.me link.
Why did it matter to my project?: Because the WhatsApp export is a link, and a prescription is full of line breaks and punctuation.
Where I used it: The WhatsApp share, which carries the formatted prescription and clinic credentials.
What this tool cannot do: Very long messages hit URL length limits, so this suits a prescription and not a full record.

Track 2 · Learn with Deepthi

State that does not persist

USED — evidence shows I used it

What did I just discover?: That holding everything in memory is a real design decision with a real consequence.
What is it, really?: Data kept only in the running page, lost on refresh or navigation, because nothing writes it anywhere.
Think of it like this (analogy): Notes on a whiteboard. Perfectly usable until someone wipes it.
How does it actually work?: React state holds the patient details and medicine list for the life of the page.
Why did it matter to my project?: Because storing patient data creates duties — consent, access, retention — that this tool deliberately avoids.
Where I used it: The whole prescription workspace.
What this tool cannot do: No history, no lookup of a previous patient, and an accidental refresh costs the whole form.

Learning checkpoint

Before this chapter

I had screens in my head and a stack I had not yet justified.

After this chapter

A working product, and a much shorter list of things I believed without evidence.

What changed my mind

The stack became a means, not an identity.

Can you answer these?

?Could you rebuild your first screen in an afternoon if you had to?
?Which tool are you using out of habit rather than fit?

Chapter 04

What breaks: the refresh key

Track 1 · My journey

Everything lives in React state. Refresh the page mid-consultation and the prescription is gone, and there is no way to look up a patient seen last week. With no accounts and no storage, this tool is safe precisely because it remembers nothing — that is a trade, not an oversight.

Learning checkpoint

Before this chapter

Something that worked in the demo and failed in real life.

After this chapter

A smaller, blunter, considerably more useful product.

What changed my mind

I stopped defending the first version and started measuring it.

Can you answer these?

?What in your build is complete but unused?
?What would you cut if you had to halve the time it takes to use?

Chapter 05

What actually changed

Track 1 · My journey

Discharge instructions started arriving in the same app the family already uses. The PDF was the feature I planned; the text link was the one that got used.

Learning checkpoint

Before this chapter

A product that worked, and no clear evidence that it mattered.

After this chapter

A clear-eyed view of what the product does and does not fix.

What changed my mind

Success stopped meaning "it is built" and started meaning "it is used".

Can you answer these?

?What behaviour changed because your product exists?
?Would anyone notice if it disappeared tomorrow?

Chapter 06

What I would tell you before you start

Track 1 · My journey

A browser can make a real document with no server behind it. Just be explicit that nothing is being kept, because everyone assumes software remembers.

Learning checkpoint

Before this chapter

You have read what happened. Here is what to take with you.

After this chapter

A method you can reuse on a completely different problem.

What changed my mind

The build became repeatable rather than lucky.

Can you answer these?

?What is your version of the short loop?
?What will you ship this week, even if it is embarrassing?

Appendix

Deepthi's Dictionary

Short loop: Describe, build, use, correct — repeated in hours rather than weeks. The core working method behind this build.
Second use: Whether someone opens the product a second time without being asked. The simplest honest measure of whether it works.
Conversation beat: A single line in a build conversation that changed a decision. Collected, these form the real design document.
Worst day design: Designing for the tired, rushed, distracted user rather than the ideal one in a demo.
Lovable: Lovable — part of the stack used to build Doctor's Digital Desk.
React: React — part of the stack used to build Doctor's Digital Desk.
PDF: PDF — part of the stack used to build Doctor's Digital Desk.