DEV Community: Yacham Duniya (CRAN3)

What if you had a visual tool to help you understand DSA?

Yacham Duniya (CRAN3) — Sat, 04 Apr 2026 08:23:49 +0000

So my first Dev.to post was about a project I built and I'm currently working on. So recently I started DSA (Data Structures & Algorithms) and I have to say it's been fun but I'm a visual learner and the concepts were'nt really getting to me at first

The whole idea behind binary search had me on a chokehold for a day and i had myself asking how do i turn this concept into code - P.S I actually did. Don't even get me started on algorithms that are categorised under O(N^2) Insertion sort to be exact

So long story short, I came up with

AlgoTracker - Data-Visualiser

So as the name implies it visualises data, but to be more intricate it shows how these data concepts work in real time, step by step as the image below shows

This is a screenshot of the search panel and below you can see the step counter - This shows you which cell (data) in the array the computer sorted or searched and which it didn't, and how it came to the final result and it also displays the time taken to complete the task and the exact algorithm used - O(N), O(log n), O(N^2) and then there's a graph that also compares the algorithms against each other to know which is faster

Note: Search Notations compare against each other and Sort notations compare against each other, they don't inter-compare so a search algorithm cannot be compared against a sort algorithm

So i'll go into details about each of this features

Sort Panel

So the sort panel is where you insert data to be sorted through any of the sorting options and then the panel gives back the sorted data, time taken to sort and the steps - Sorting refers to arranging unsorted or mixed values in a certain order - and in our case it's ascending so the lowest value to the highest

Right now the only sorting options are Selection & Insertion and they only sort numbers but I'm working on adding string comparisions and other sorting options

Selection Sort
In selection sort each cell in the array is checked from left to right to determine which value is least. As each cell is checked the lowest value that has been encountered is being kept in track or stored ( It’s index is being stored in a variable ). If a cell that contains a even lower value compared to the one in the variable is encountered. The value in the variable is replaced and it points to the new value ( index )

[ 2, 6, 1, 3 ] // Lowest value so far is 2
[ 2, 6, 1, 3 ] // Lowest value so far is still 2
[ 2, 6, 1, 3 ] // Lowest value so far now is 1
[ 2, 6, 1, 3 ] // Lowest value so far is still 1

Once the index which contains the lowest number is determined and/or found. Its value is swapped with the first index in the pair

[ 1, 6, 2, 3 ]

Each pass-through consists of the first step of searching and comparisons and then the second step of swapping. So this pass-through is repeated up until the array is fully sorted.

Below is the code implementation

function selectionSort(array) {
    for(let i = 0; i < array.length - 1; i++) {
                let lowestNumberIndex = i;
            for(let j = i + 1; j < array.length; j++) {
                    if(array[j] < array[lowestNumberIndex]) {
                            lowestNumberIndex = j;
                        }
                    }
                if(lowestNumberIndex != i) {
                        let temp = array[i];
                        array[i] = array[lowestNumberIndex];
                        array[lowestNumberIndex] = temp;
                }
    }
    return array;
}

And below is a screenshot of the sort panel of the visualiser

So you can see the unsorted data and sorted data are displayed - Sorted below and unsorted above and below the sorted data you can see details such as Algorithm, Time & Complexity(The Big O Notation). It shows we used selection sort and it took 0.1ms for the computer to sort the whole array which is pretty fast. Now for the step visualiser

So this is the unsorted data before it gets sorted

This is the first sorting as the definition i gave originally said the whole array is checked from left to right to check which is least, in this case it's 1 so it's position is swapped with the value that is currently stored in index 0 which is 10

Same thing here the scan starts from index 1 since the least value has already been found it starts scanning from index 1 till the end to find the second least value which is 2 so it's postion is swapped with 8

And same thing here up until the end

So if you observe properly it takes 10 steps and 0.1ms to sort 10 values which is pretty fast or could be slow depending on if another algorithm can do it faster

Insertion Sort
Insertion Sort consists of the following steps:

In the first pass-through, we temporarily remove the value at index 1 (the second cell) and store it in a temporary variable. This will leave a gap at that index, since it contains no value. In subsequent pass-throughs, we remove the values at the subsequent indexes
We then begin a shifting phase, where we take each value to the left of the gap and compare it to the value in the temporary variable. If the value to the left of the gap is greater than the temporary variable we shift that value to the right. As we shift values to the right, inherently the gap moves leftward. As soon as we encounter a value that is lower than the temporary removed value, or we reach the left end of the array. The shifting phase is over.
We then insert the temporarily removed value into the current gap.
Steps 1 - 4 represent a single pass-through. we repeat these pass throughs until the pass-through begins at the final index of the array. By then, the array will have been fully sorted.

Below is the code implementation

function insertionSort(arr) { 
    for(let i = 1; i < arr.length; i++){
        console.log(i, arr);
        let temp = arr[i];
        let j;
        for(j = i - 1; j >= 0 && arr[j] > temp; j--){
            arr[j + 1] = arr[j];
        }
        arr[j + 1] = temp;
    }
}

Below is a screenshot of the same sorted data but if you look at the algorithm it says Insertion Sort so this was sorted using insertion and if you pay close attention the time taken was 1ms

So if you compare it against the info we got from selection sort which took 0.1ms to sort it - it tells us Selection Sort is faster in this scenrio but selection sort took 10 steps how many steps did insertion take?

Now this says insertion took 9 steps which is way faster than selection's 10 using this data alone we won't be wrong to say insertion is faster But that is where the graph panel comes in because it compares these data and presents it in a chart to tell you which is faster and the image below clearly shows selection is faster although the main reason is because selection is more efficient as data grows

So this tool not only presented the steps (- The number of steps and how it checked each value in the array -) the computer used to come about the final result, it also compared each algorithm to give which is faster and more efficienct for your code. So as it is an academic tool I believe it's also useful for devs also - well the final product would be.

Now for search

Search Panel

The search panel is still quite similar but different it searches the array of data for any target value of your choice and under this we have Linear Search & Binary Search one of the two fundamental search algorithms - along the line i plan on adding hash table searching as it's way faster than both of them but for now it's just these 2

Linear Search
So linear search is quite simple, it searches each cell in the array from left to right until it finds the target value. That's literally it. No shortcuts, no skipping — just checking every single value one by one until it either finds what it's looking for or reaches the end of the array.

If the target value is at the end of the array — congratulations, it checked everything before getting there. That's O(N) for you.

function linearSearch(array, target) {
    for(let i = 0; i < array.length; i++) {
        if(array[i] === target) {
            return i;
        }
    }
    return -1;
}

Screenshot of Linear Search

Based on this image we can clearly see it took literally no time to search and find the target value which is 6 but it took a total of 6 steps which is basically how an O(N) algorithm works, the number of steps increases as the data increases

Binary Search
Now this one is where it gets interesting. Binary Search doesn't check every cell — it's smarter than that. But the catch is the array has to be sorted first. That's the deal.
Here's how it works — it starts at the middle of the array and checks if the target value is higher or lower than the middle value. If the target is lower it eliminates the entire right half of the array and repeats the process on the left half. If it's higher it eliminates the left half entirely. It keeps halving the search space until it finds the target or runs out of values to check.

So in an array of ten, and you're looking for ten it'll start at 5, then compare 5 to the target value which is 10 so 5 is smaller than 10 meaning 10 would be found on the right hand side so it'll eliminate all of the values at the left of five, that's the basic explanation

This is why it's O(log N) — every step cuts the problem in half. It's genuinely fast.

Below is the code implementation

function binarySearch(array, target) {
    let left = 0;
    let right = array.length - 1;

    while(left <= right) {
        let mid = Math.floor((left + right) / 2);

        if(array[mid] === target) {
            return mid;
        } else if(array[mid] < target) {
            left = mid + 1;
        } else {
            right = mid - 1;
        }
    }
    return -1;
}

Screenshot of the search panel - Binary Search

So right now based on this image we can see it actually took the same time in searching the same value as linear search but in less steps which is 3 compared to linear search's 6 so due to this we can clearly say binary search is faster

As the data size grows, Linear Search grows at the same rate — 20 elements = 20 operations, 100 elements = 100 operations. It's a straight line because it checks everything one by one.
Binary Search barely moves. At 20 elements it only needs about 4-5 operations because it keeps halving the problem. That curved flat line is O(log N) in action. and in our case of 10 elements it only needed 3

Final Thoughts
AlgoTracker started as a personal tool — I needed to see these concepts to understand them and textbooks weren't it at least for me that is. But the more I built it out the more I realised it could genuinely help other visual learners who are in the same boat I was in.
It's still a work in progress — string comparisons, hash table searching, and more algorithms are on the roadmap. But as it stands right now it does what it was built to do: show you exactly what's happening under the hood, step by step, no hand waving.
Live demo: https://algo-tracker-vu7t.vercel.app/
GitHub: https://github.com/Cr4N31/AlgoTracker
If you're learning DSA and you're a visual learner — give it a spin and let me know what you think 👇

I’ve been thinking about this for a while, and I want honest answers, not the polished LinkedIn version.

Yacham Duniya (CRAN3) — Wed, 01 Apr 2026 17:49:30 +0000

Why did you really get into tech?

Not the safe answer. Not “I love problem solving” or “tech is the future.” I mean the real reason. Was it curiosity? Freedom? Money? The idea of building something that actually matters? Escaping something? Proving something?

Because if we’re being real… a lot of us didn’t start this journey dreaming about standups, Jira tickets, or optimizing someone else’s product roadmap.

I’m here looking at my own career, and don’t worry, it’s not your usual cliché “escape the matrix” conversation. It’s more of me trying to understand where exactly I am headed and where I intend to head, if that makes any sense… I hope it does.

But what I mean is how we don’t lose sight of that creative side and the fun part of it all, because I noticed that somewhere along the line, something shifts.

You start off wanting to build. To explore. To create weird, ambitious, maybe even unrealistic things. Like I, for instance—I wanted to make games. Kenzie from Game Shakers lowkey inspired the idea (not really sure how many of you guys watched the show). I had a notebook where I wrote the whole story of the game, and I even hopped on an old Windows application that let you create 3D model characters. All that was missing was the programming skills. I lost the notebook, by the way, and the PC crashed in case anyone was wondering.

Now that I'm thinking about it, It does sting because the plot was peak trust me, this isn't even me exaggerating

Fast forward to the end of high school, when I started learning coding—I self-taught for a while before I got into college. The reality presented to me wasn’t really how I imagined it. It slowly grew into deadlines, salaries, titles, deliverables, stability. And before you even notice it, you’re deep in the “job loop.”

Wake up → code → fix bugs → ship → repeat.

Basically kept in an endless circle with no real development—well, aside from the number of stacks added to your portfolio. And I’m talking to the people who actually got into tech not just for the job aspect, but because of the belief of coding the next Facebook or the next Amazon.

All those original ideas… the ones that made you open your first IDE… they get pushed to “later.” Then “someday.” Then… forgotten.

So here’s the uncomfortable question:

Is this just how it’s supposed to go? Or are we doing something wrong?

Is the system designed this way, where passion is just the entry point and routine takes over? Or do we slowly trade our curiosity for comfort without realizing it?

And more importantly:

How do you avoid becoming someone who once dreamed of building things… but now only maintains them?

It’s a genuine question.

What habits helped you stay creative while working a full-time dev job?
Have you managed to build something meaningful alongside your job?
Or did you consciously choose stability over exploration—and are you okay with that?

No judgment either way. Just trying to understand if there’s a better way to navigate this path without losing the reason we started.

I honestly encourage any feedback you guys have in the comments albeit addition etc.. Thanks for reading :)

Trying out Google AI studio

Yacham Duniya (CRAN3) — Tue, 31 Mar 2026 01:33:52 +0000

This post is my submission for DEV Education Track: Build Apps with Google AI Studio.

What I Built

Went the simple route for this one — I prompted it to build a portfolio website:

Build a simple portfolio template using React + JavaScript and Tailwind for styling. Color palette should have black as the primary and red as the secondary.

And honestly? It came out pretty clean. My portfolio design is still better though 🙂

Demo

My Experience

But real take is the AI studio is really smart, I was skeptical when the news of it's release first dropped and when it was initially released I became even more skeptical, A single tool that can take an hours task and complete it in mere minutes has a way of leaving an impression on you, but as developers we grow, we evolve and we use the tools available to us to provide solutions for the problems that are presented before us and tools like this are revolutionary. First of all

The codebase panel is actually really useful. It lets you edit the generated code directly inside the studio, basically using it as a lightweight IDE. So if something doesn't feel right you can go in and fix it without leaving the tool.
It suggests features as it builds. For the portfolio it suggested a contact form unprompted. On a previous project — a magic card generator from the tutorial — it suggested a filter feature so users could sort cards by type, and a custom artwork feature that it described as one that "tailors specifically to the card's name and visual description." Its words, not mine 😄
I didn't add an API key for Imagen 4 so the image generation side didn't really work — but even without that it was a solid experience.
Still a loyal Claude fanboy though, just to be clear 😂

Imposter Syndrome in the Tech Space

Yacham Duniya (CRAN3) — Sun, 29 Mar 2026 14:06:54 +0000

I started late, struggled with JS, and spent way too long shrinking into self doubt

3 years ago I didn't know what a component was. Didn't know what mount/unmount meant. Big O Notation was just letters and symbols that meant nothing to me.

This year marks 3 years of coding for me. And honestly? It hasn't always felt like progress.

The comparison trap

HTML and CSS came naturally, I picked them up fast and felt good about it. Then JavaScript hit and everything slowed down. It's still the thing I wrestle with most to this day.

What made it worse was social media. I'd open Instagram or TikTok and see developers my age shipping insane projects, explaining complex systems like it was nothing, and I'd just... shrink. That's the only word for it. I'd shrink into this shell of self doubt and start asking myself the same questions on repeat:

What can I build that hasn't already been built?
What separates me from every other developer?
Out of 100 devs, why would anyone pick me?

It wasn't hate. It was a healthy jealousy if that makes sense, I wanted to be where they were, I just couldn't see how to get there from where I was standing.

The shift

I can't point to one moment where everything changed. It was gradual.

I started learning React properly mid last year. This year I picked up DSA, SQL, and Express, because I got convinced pretty quickly that frontend alone doesn't sell, and honestly I wasn't comfortable staying in that lane anyway.

Built a few practice projects, freelanced a little here and there, nothing groundbreaking... well asides the current project I'm working on, the general idea is... well I believe it'll be groundbreaking but currently the current product is all over the place but it's real work. The job market hasn't been the kindest but I'm still pushing. I'm still young, I have time, and I'm not saying that to slack off, I'm saying it because panicking about where I'm not yet has never once helped me get there faster.

What I actually think now

I stopped looking at it as a competition. I started having fun with it. And the moment I did that, the projects started coming, the progress started showing, and the self doubt got quieter.

You're not behind. You're just on your own timeline. And your progress is only measured by how far you can see yourself going, not by what someone else is shipping online. Low-key I'm saying this to convince myself too but nevertheless

If you're in the same headspace I was in, keep building. Even the small stuff counts. It all compounds.

P.S: I still have trouble navigating github sometimes, Thank God for git-repo extensions on VScode lol

Hey Dev.to, I'm Bitrus

Yacham Duniya (CRAN3) — Fri, 27 Mar 2026 18:47:43 +0000

I'll keep the intro short , I'm a full-stack developer from Nigeria, I go by CRAN3 - Honestly its my Call of duty username and basically most of my socials but that's a story for another day, I just shipped something I actually want to talk about.

So here's the thing about me and DSA
I struggled with it. Not because I wasn't trying I actually was. But reading "Binary Search is O(log N)" over and over did nothing for me. I needed to see it happen. I'm just wired that way.
So instead of fighting it, I leaned into it and built AlgoTracker.

What it is
A visual DSA tool. You pick an algorithm, throw in some data, and watch it work in real time, step by step.
It covers Linear and Binary Search, Selection and Insertion Sort, a step visualizer, and my personal favourite which is the time complexity graph that actually runs each algorithm and plots how long it takes based on input size. Seeing O(log N) stay flat while O(N²) shoots up was the moment DSA finally made sense to me.
Built with React, Tailwind CSS v4, and Recharts.
I'm here to build in public and connect with people doing the same. Say hi
https://algo-tracker-vu7t.vercel.app/
https://github.com/Cr4N31

)