Deepthi's Reading

Quality

019

The Chart Insights Story

Compliance, at a glance

Lovable · React · Recharts · date-fns

Edition #019 · 6 chapters · 6 min read

The Chart Insights Story

Compliance, at a glance

TJC compliance dashboard with combined heat maps across standards and quarters.

An ebook edition of the Chart Insights 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, Charts.

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 Charts really is, and what it cannot do
•what Lovable 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 Chart Insights had to exist

Track 1 · My journey

Two audit cycles, months apart, living in two separate documents. Nobody was ever going to open both and hold them side by side, so the question that actually mattered — did the documentation gaps get better? — was never being asked.

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

Asking for a comparison, not a dashboard

Track 1 · My journey

I did not ask for a dashboard of the latest audit. I asked for August and February on the same screen, per unit. That single phrasing produced a different product: a comparison heatmap instead of two identical views you flick between.

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: React, Recharts and a report utility

Track 1 · My journey

Findings are typed records — standard, Element of Performance, the written finding, the score — held in findingsData.ts. HeatMapComparison does the period-against-period work, and I pushed the summarising logic out of the components into a generateReport utility so the screen only displays and the file only calculates. Shadcn tabs separate the overview from the comparisons.

Track 2 · Learn with Deepthi

Element of Performance

USED — evidence shows I used it

What did I just discover?: That a standard is not one requirement — it breaks into numbered Elements of Performance, and audits score those.
What is it, really?: The specific, checkable item beneath a broader accreditation standard.
Think of it like this (analogy): A recipe step rather than the recipe.
How does it actually work?: Each finding record carries both the standard and the EP so a score attaches to something precise.
Why did it matter to my project?: Because "we failed the standard" is unactionable; a failed EP names the fix.
Where I used it: The finding records in findingsData.ts and every row of the comparison view.
What this tool cannot do: An EP score says the item failed, not why the process allowed it.

Track 2 · Learn with Deepthi

Period-over-period comparison

USED — evidence shows I used it

What did I just discover?: That comparing two audits is a different product from displaying the latest one.
What is it, really?: Putting the same measure from two time points side by side so change, not level, is the visible thing.
Think of it like this (analogy): Two X-rays of the same joint, months apart, on one light box.
How does it actually work?: Both datasets are keyed the same way, joined by unit and standard, then rendered as one grid showing both values.
Why did it matter to my project?: Because the useful question in audit work is direction of travel.
Where I used it: The HeatMapComparison component, August against February.
What this tool cannot do: Two points make a line, not a trend. Three cycles would say much more.

Track 2 · Learn with Deepthi

Utility functions

USED — evidence shows I used it

What did I just discover?: That moving calculation out of a component and into its own file is what makes an export feature possible later.
What is it, really?: A plain function in its own module that takes data in and returns a result, with no interface attached.
Think of it like this (analogy): A calculator on the desk, separate from the paperwork it fills in.
How does it actually work?: generateReport receives the findings array and returns a consolidated summary object; the screen just displays it.
Why did it matter to my project?: Because logic buried in a screen has to be rewritten for every new output — PDF, email, print.
Where I used it: generateReport.ts, which will feed the download once that is real.
What this tool cannot do: It is only a benefit if the function stays pure and does not reach back into the interface.

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

The button that lies

Track 1 · My journey

There is a download report button in this build that produces no file, and a search field in the header that is not connected to anything. I am recording that rather than hiding it, because an interface that promises an action it cannot perform is worse than one that is visibly incomplete.

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

Comparison turned an audit into a trend. The unit that improved and the unit that slipped are now two colours in the same picture, which is a very different meeting from reading last quarter's findings out loud.

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

Decide early which parts are real and label the rest. Then keep the calculating out of the components — the day the report becomes a real file, only one file has to change.

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 Chart Insights.
React: React — part of the stack used to build Chart Insights.
Charts: Charts — part of the stack used to build Chart Insights.