DEV Community

Cover image for I Built a Tool to Visualize DSA. Let’s Learn Together! (DSA View View πŸ‘€πŸ‘€)

I Built a Tool to Visualize DSA. Let’s Learn Together! (DSA View View πŸ‘€πŸ‘€)

nyaomaru on July 15, 2026

Hoi hoi! I’m @nyaomaru, a frontend engineer currently fighting the intense European heatwave by building DIY window screens here in the Netherland...
Collapse
 
koda2026 profile image
Harun - solo dev

Hoi hoi nyaomaru! πŸ‘‹

First off, a massive shoutout and thank you for the instant πŸ’– on my SQL trigger post earlier today! You were literally the first person to react, and it honestly made my whole day. πŸš€

Now, about this article β€” the F1 car analogy is absolutely brilliant. 🏎️ As a 12-year-old building an AI coding mentor entirely on my Android phone, I feel this deep in my bones. AI can write my boilerplate in seconds, but when my database silently drops a referral or an API fails gracefully, the AI can't fix it for me. I have to understand the layers underneath, exactly like you said.

The "stepping backward mid-loop" feature in DSA View View sounds like an absolute superpower. Losing the thread in the middle of a complex loop is exactly where my brain breaks when studying algorithms! Being able to visually see the data flow and step backward instead of just staring at text is exactly how beginners like me need to learn.

I'm definitely starring the repo ⭐ and using this to level up my fundamentals. Thanks for building this for the community, and thanks again for supporting my journey! Let's keep learning together! 😸πŸ’ͺ

Collapse
 
nyaomaru profile image
nyaomaru

Thank you so much for the kind comment! πŸ˜ΈπŸ’–

I think strong fundamentals will still be important no matter how much AI improves, so if DSA View View can help you even a little, that makes me really happy!

I’ll keep developing it, so if you ever have any requests or ideas, feel free to leave an issue or comment anytime. πŸ‘€

Let’s keep learning together! πŸ’ͺ😸

Collapse
 
koda2026 profile image
Harun - solo dev

Thank you! 😸 And since you opened the door β€” I'd love to show you
my little tool too!

I built KODA (koda-aicodementor.netlify.app), a free AI coding mentor
for beginners, coded entirely on my Android phone πŸ˜…. It explains
concepts step-by-step in simple words, then sends learners to a
Codewars kata to practice.

I realized our tools are two halves of the same learning loop:
KODA explains the "why" in words, and DSA View View shows the "how"
with real data flow. 🀯

If you ever get a chance to try it, even ONE piece of feedback from a
senior engineer would mean the world to me. Either way β€” let's keep
learning together! πŸ’ͺ😸

Thread Thread
 
nyaomaru profile image
nyaomaru

I tried your interesting app, but I couldn't make an account.

POST https://bkeydwcovzdmwuflhfni.supabase.co/auth/v1/signup
500 Internal Server Error
Enter fullscreen mode Exit fullscreen mode

This error is 500 error so I can't know the error detail.

Please check your netlify server log. πŸ‘

Thread Thread
 
nyaomaru profile image
nyaomaru

And one more tip, error message shouldn't use window.alert() because it stops browser process and not userfriendly.

You should make toast or modal or banner (or combine them) to show alert message! πŸ‘

Collapse
 
nazar-boyko profile image
Nazar Boyko

Stepping backward through the timeline is the feature that would've saved me hours on LeetCode, since the place I lose the thread is always mid-loop, not at the end. Quick one on the internals, does the runtime handle recursion like DFS on a tree where each frame has its own copy of the locals? That's exactly where "watch the state change" tools usually fall apart, and if you nailed it that's the killer case.

Collapse
 
nyaomaru profile image
nyaomaru

Thanks for the nice question! 😸

The short answer is almost "yes", with one caveat.

Recursive calls run as real JavaScript calls, so each DFS invocation has its own parameters and local variables. At every recorded step, DSA View View deep-clones the variables visible at that execution point and records the logical call stack.

When you step backward, it selects an earlier snapshot rather than trying to reverse the execution itself. The recursion view also reconstructs the call depth and tracks the arguments and return value of each call.

The current limitation is that it doesn’t yet provide a "debugger-style view" showing the local variables of every suspended frame at the same time. The Variables panel currently reflects the selected execution step.

So DFS itself works, but the full per-frame locals UI is still one of the gaps I’d like to close. Recursive bugs are already confusing enough without the tool hiding half the stack πŸ˜…

I’ve created an issue for this feature and will work on it πŸ‘‡
github.com/nyaomaru/dsa-view-view/...

Thank you for pointing out such an important use case! πŸ‘

Collapse
 
nazar-boyko profile image
Nazar Boyko

thank you for sharing!

Collapse
 
mousheng_xu_e002b5fecf4ff profile image
Mousheng Xu

The F1 analogy landed for me. I hit exactly this last month building a video pipeline: my motion stage was silently falling back to static frames because it couldn't load an fp8 model. No crash, no traceback β€” the pipeline reported success on every scene. If I hadn't understood what was happening underneath, I'd have shipped a hundred "working" videos with no motion in them.

That's the part AI-assisted speed doesn't save you from: a graceful fallback is a great place for bugs to hide, and you can only find them if you understand the layer below.

Also β€” stepping backward through the timeline is the right call. The place you lose the thread is always mid-loop.

Collapse
 
nyaomaru profile image
nyaomaru

Nice catch! I’m really glad you found it before shipping a hundred β€œworking” videos with no motion πŸ˜…

That example perfectly shows the danger of graceful fallbacks. The pipeline can report success while silently producing the wrong result.

AI can help us implement things faster, but that doesn’t automatically make the implementation correct. I think humans still need to understand the layers underneath, verify the behavior, and take responsibility for that correctness.

And I’m really happy the mid-loop point resonated with you! That exact moment where you lose the thread is what I wanted DSA View View to make visible. 😸

Collapse
 
hoornet profile image
Jure

this is pretty awesome! bravo!

Collapse
 
nyaomaru profile image
nyaomaru

Thx! Have a nice coding! 😸

Collapse
 
cathylai profile image
Cathy Lai

Thanks for sharing, nice idea!

Collapse
 
nyaomaru profile image
nyaomaru

Thank you for nice comment 😸

Collapse
 
ayushh profile image
Ayush Sharma

nice

Collapse
 
nyaomaru profile image
nyaomaru

Thx!

Collapse
 
kristinz profile image
KristinZ

cool, star-ed it :)

Collapse
 
nyaomaru profile image
nyaomaru

Thanks!! That made me really happy 😸 Happy coding!

Collapse
 
emekaugbanu profile image
Emeka Ugbanu - Software Developer

Nice πŸ‘

Collapse
 
nyaomaru profile image
nyaomaru

Thx! Have a nice coding πŸ‘

Collapse
 
buddingdeveloper profile image
Ebenezer

Nice work!

Collapse
 
nyaomaru profile image
nyaomaru

Thank you! Please enjoy coding 😸

Collapse
 
abrarulrhythm profile image
Abrarul Rhythm

Great work!

Collapse
 
nyaomaru profile image
nyaomaru

Thank you! 😸