DEV Community: Aisha Muhyiddeen Ahmad

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

Aisha Muhyiddeen Ahmad — Wed, 19 Nov 2025 11:39:18 +0000

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.

When One State Rules Them All

Aisha Muhyiddeen Ahmad — Mon, 03 Nov 2025 10:28:20 +0000

How I learned that structure decides behavior
It started as a simple toggle, making the sidebar collapse.
Turned into a full layout lesson in communication, structure, and shared state.

The Challenge
The moment I added collapse behavior to my sidebar, everything else began to react like it had a mind of its own, the dashboard felt like it had lost its balance.
At first, I thought the issue was styling. Maybe I needed better width control or transition effects.
But the problem ran deeper. The sidebar knew when it was open or closed, but the layout didn’t.
Each component was living in its own little world.
That’s when I realized the problem wasn’t in the sidebar’s logic…
…it was where the logic lived.

Behind the Build
At first, I placed my

useState

directly inside the Sidebar component. It made sense at the time. That’s where the toggle button lived, that’s where the action happened.
A simple

useState

to manage open and close.
But soon I noticed a problem:
When the sidebar collapsed, the rest of the layout didn’t know what just happened. The header shifted, the content, and everything felt out of sync.

So I lifted the state up to the Layout , the real parent of everything.
That single change made all the difference:

const [isOpen, setIsOpen] = useState(true);

Then I passed it down as props:
To the Sidebar, to toggle it.
To the Header, to adjust spacing and visibility.
To the Main Content, to respond smoothly to layout shifts.
Once I passed isOpen to the Header, everything finally aligned.

The icons on the header when the sidebar isOpen stopped disappearing.
The layout adjusted perfectly. And the dashboard started behaving as one connected system.

Reflection

Building my dashboard is like debugging my own thinking.
It’s easy to focus on one part of the interface and forget the bigger picture it belongs to.

That’s the quiet beauty of React, how a single shared state can bring scattered pieces into sync.
And maybe, it’s not just a lesson in code but in connection too.
When one truth is shared clearly, everything starts to align.
Building my dashboard is like debugging my own thinking.
It’s easy to focus on one part of the interface and forget the bigger picture it belongs to.
Sometimes, it’s not the component that needs fixing, it’s the structure that defines how everything connects.

A single truth made the layout consistent.
And in a way, that’s what leadership and design share
In React, that shared understanding is state lifting.
When communication is clear, behavior becomes predictable.

Giving My Dashboard a Voice

Aisha Muhyiddeen Ahmad — Tue, 28 Oct 2025 10:35:01 +0000

After building the base of my dashboard a space that grows as I grow.
I wanted to give it something more than just structure “A Voice”
A way to guide me, respond to my clicks, and reflect where I am in my little learning world.
So, I started working on the Sidebar and Header, the parts that make a dashboard feel alive.

It started with navigation.
I was learning how to connect pages and how to make the flow using React Router.
I learned how to define routes, switch between pages, and (my favorite part) how I can display the current page name dynamically on the header.
It felt like giving my dashboard awareness. It felt like my code was whispering, “I see you. You’re here.”

Active State and Layout Wrapping
Next, I discovered how to highlight the active page.
It wasn’t just static links anymore; it was reactive, present.
Then came the layout component, the quiet architecture that wraps everything together, the sidebar, header, and content together and each piece had to align. It taught me a bigger lesson about structure: even in code, everything needs a “home” that ties the pieces together.

Mapping Links
Instead of manually typing every link, I learned to map over an array to render multiple links.
It felt like finding a new shortcut cleaner, smarter, and scalable.
Each link now lives in an array, easy to edit, easy to extend.

The Mystery of the Vanished Styles
Then came one of those classic developer moments.
Suddenly, my Tailwind styles stopped working, everything disappeared.
The colors. The spacing. My layout turned into plain HTML.
I stared at my config, rewrote paths, and restarted. Nothing worked. After almost an hour of debugging I noticed I had accidentally removed index.cssfrom main.jsx while setting up routes.
Just one missing import.
One tiny mistake that silenced everything.

When It Finally Worked
When I fixed it and refreshed the page, my dashboard came back brighter, organized, and present.
The sidebar lit up as I clicked through links. The header whispered my location.
Everything felt... connected.
And I realized something: this dashboard isn’t just learning how to work.
It’s learning how to speak.
To respond, to guide, to mirror how I move through my own learning journey still a little messy, but slowly finding rhythm.
Quietly Building, Boldly Innovating

A Dashboard That Grows With Me

Aisha Muhyiddeen Ahmad — Fri, 24 Oct 2025 20:17:57 +0000

I call it the SandBox, a dashboard that grows as I grow.

Here’s the idea
Instead of building a “complete” project at once, I learn one concept, practice it, and then bring it into my dashboard. Each card, widget, or feature becomes proof of what I’ve learned, something I truly understand.

SandBox isn’t just another project. It’s my playground to experiment with what I’m learning in real-time from React components, navigation, and state management.
Step 1: The Messy Lab - Here is where I learn new concepts, I get to try, fail, debug.

Step 2: SandBox - Once I understand the concept, I rebuild it in my Sandbox as a feature with a little bit of UX thinking.
This way, it becomes more than just a static showcase. It’s a living record of my learning journey, a space where every new concept has a purpose.

No pressure to know everything at once. No need to learn features for the sake of completing a project. Just steady growth one step, one feature, one lesson at a time.
Quietly Building, Boldly Innovating