Building the Learning Tracker the Part That Finally Made Everything “Real”.

This was the turning point.
The moment Sandbox stopped being “a dashboard idea” and started feeling like an actual learning companion, something I could actually rely on.
It happened when I started to build the Learning Tracker page.

In my head, it sounded simple:
A form inside a modal
Log what I learned
A table on the page to display the entries
But from the first click, reality humbled me.

The First Challenge: The Form and the Table Were Living in Two Different Worlds
My layout looked like this:
A button on the page
A modal that opens the form
A table that stays on the page
And somehow these two needed to talk.
The answer introduced me to my first real React communication pattern:
Passing Data Through Props
onAddRecord()
<MyForm onAddRecord={handleNewRecords} closeForm={closeLearningTrackerForm} />

The form (child) talks to the page (parent)
The child calls the function → the parent receives the data → the table updates.
That was my first “Ahh… this is how real React apps communicate” moment.

But Then… the Data Kept Disappearing
Everything worked until I navigated away.
I’d add a new learning record
The table updated…
But when I refreshed or moved to another page?
Gone.
Clean slate.
Fresh like nothing ever happened.
That’s when it hit me:
If the dashboard is supposed to track my growth, then the data must stay.
So I added my first persistence layer: localStorage.
const [records, setRecords] = useLocalStorage("learnRecords", []);
Then inside handleNewRecords, I saved updates straight into localStorage:
localStorage.setItem("learnRecords", JSON.stringify(updatedRecords));

I saved every learning record:
refresh? still there
navigate? still there
close browser? still there
That was the moment Sandbox finally started acting like a proper “companion,” not just UI.

The Turning Point: Auto-Updating Stats
Once data persistence worked perfectly, a new question popped up:
“If Sandbox is tracking my learning, why should I manually update stats?”
Exactly.
Manual stats made no sense.

So I switched to event-based updates:
Every time a new learning record comes in → recalculate hours
Every new concept added → update the count instantly
So I made the stats update automatically whenever a new learning record is added, no extra buttons, no manual syncing.
Now the dashboard responds instantly:
Hours spent
Concepts learned

Later, I’ll refactor this with Context so the syncing becomes even cleaner, but for now, the dashboard updates itself the moment I log something new.
And that feels surprisingly good

What I Learned
Data flow matters more than I thought
Props → modal → parent page is a powerful pattern
Persistence (localStorage) is the heart of any progress-based app
Auto-syncing makes the dashboard feel alive
This was the moment Sandbox stopped being an idea…
and became something I trust.