Forem: Sumit Roy

Save time and focus on the right part with this hack

Sumit Roy — Thu, 31 Jul 2025 09:56:50 +0000

Sumit Roy

Jul 29 '25

Automate Your Job Hunt 🚀 with n8n 🤖

#career #hiring #n8n

Comments 1

3 min read

Automate Your Job Hunt 🚀 with n8n 🤖

Sumit Roy — Tue, 29 Jul 2025 19:48:21 +0000

The Problem: Job Search Fatigue

When it comes to switching jobs, the part most people are frustrated about isn’t the interviews, it’s the endless job search. Going through job boards, tailoring applications, and racing to apply before listings close can quickly become overwhelming and exhausting. Wouldn’t it be great if this tedious process could be automated?

Why n8n? (Not Zapier, IFTTT, or Custom Code)

Enter n8n - A powerful, open-source automation tool that lets you build custom workflows with a simple drag-and-drop interface. Unlike Zapier or IFTTT, n8n is free to use locally, so you don’t have to worry about pricing tiers, cloud management, or infrastructure headaches. You can get started in minutes and run everything on your own machine. If you want to try it out, follow the instructions here to install it locally.

Architecture Overview: The Job Search Machine

Once we are comfortable with the n8n workflow and it's up and running on your local machine, it's time to build that workflow that we've been talking about. The overall idea is to fetch relevant job postings, analyze them against your resume, generate tailored cover letters, and organize everything for easy review and application.

Building Block by Block

Alright, let me walk you through each piece of this workflow (and trust me, it took some trial and error to get right):

Job Board RSS: I started with LinkedIn because, well, that's where most of the decent jobs are posted. Used rss.app to create an RSS feed - there are other RSS generators out there, but this one worked without too much hassle. Then I connected it to n8n's RSS node so it automatically pulls in new listings.
Data Processing: This is where things get interesting. I run the raw job data through three different LLMs:
- First one extracts the important stuff and puts it in JSON format
- Second one rates how well my skills actually match (sometimes brutally honest)
- Third one writes a cover letter that doesn't sound like every other template out there
Storage: Everything ends up in a Google Sheet because I'm basic like that, but it works. I can sort by match percentage, filter out the obvious rejections, and focus on the ones where I might actually have a shot.

If you want to mess around with this yourself, I've got the workflow JSON here.

The Gotchas and Solutions

Few of things we need to take care if you are someone who don't want to pay hefty fees for the LLM:

Respect Rate Limits: Add wait nodes with around 50 secs timeout in between necessary nodes (especially if you’re on a free tier).
Handle Errors Gracefully: There might be some error while parsing the data or some other intermittent error and we end up with some noise in google sheet. We can easily filter them out from sheet using some basic formulas.

Results and Insights

Automating my job search not only saved me hours but it also helped me focus on roles that truly fit my skills and interests. With less manual effort, I could concentrate on preparing for interviews and making better career decisions.

Future Enhancements

We can add some sort of notification built in with this workflow so that if there is something which perfectly matches my profile we can get alerted immediately.

Using obsidian without claude MCP? Try this and I bet your notes will be more refined and complete

Sumit Roy — Sat, 12 Jul 2025 10:19:43 +0000

Sumit Roy

Jun 24 '25

Connect Claude AI with Obsidian: A Game-Changer for Knowledge Management 🚀

#productivity #mcp #ai #llm

Comments 1

5 min read

Check out how I designed a simple system desing diagram builder and what happened next

Sumit Roy — Fri, 11 Jul 2025 07:22:02 +0000

Education Track: Build Apps with Google AI Studio

Sumit Roy

Jul 5 '25

📋My own system designer - Darwin

#deved #learngoogleaistudio #ai #gemini

Comments 38

2 min read

Checkout the next phase of my system design diagram builder

Sumit Roy — Fri, 11 Jul 2025 07:21:01 +0000

Sumit Roy

Jul 10 '25

🎨 Evolving Darwin: How I made a MVP with vibe coding

#vibecoding #ai #learngoogleaistudio #deved

Comments 2

11 min read

The next update is here for my system design diagram builder

Sumit Roy — Fri, 11 Jul 2025 02:03:54 +0000

Sumit Roy

Jul 10 '25

🎨 Evolving Darwin: How I made a MVP with vibe coding

#vibecoding #ai #learngoogleaistudio #deved

Comments 2

11 min read

🎨 Evolving Darwin: How I made a MVP with vibe coding

Sumit Roy — Thu, 10 Jul 2025 11:55:53 +0000

Remember when I told you about my journey building Darwin, that simple HLD designer that started as a rebellion against bloated diagramming tools? Well, plot twist – I've been secretly obsessing over it for last few days, and the app you see today at darwin-topaz.vercel.app is basically Darwin on steroids. But here's the kicker: it's still ridiculously simple to use.

The "Oh Crap, People Actually Use This" Moment

When I posted that DEV blog about Darwin, I figured maybe 5 people would check it out, say "neat" and forget about it.

Instead I wake up to like 28 comments, people suggesting features I should've thought of, and - this was the crazy part - folks actually using it for real interviews. Not just playing around with it, but actual system design interviews.

That's when it clicked. I didn't just build a tool for myself. I accidentally solved a problem other people had too. So what started as a weekend thing to scratch my own itch suddenly became this thing I couldn't stop thinking about.

From Basic Sketch Tool to Something Actually Useful

So where Darwin started vs where it is now - it's pretty different. The first version was basically like drawing on a napkin digitally. You could drag some boxes around, draw arrows between them, export a PNG. That was literally it.

But I've added a bunch of stuff since then, and honestly each feature has its own little story:

Note: The prompts below also needed some modifications after the machine generated the code. Some small bug fixing, but definitely something which improved my productivity by 10x

The Mobile Thing I Completely Missed 📱

Remember how I said people were using Darwin? Yeah, well turns out some of them were trying to use it on their phones. Which... didn't work. At all.

Picture this: you're in an interview trying to explain how Netflix's architecture works while pinching and zooming on a tiny screen. Not exactly the professional vibe you're going for.

So instead of just making the desktop version "responsive" (air quotes because we all know how that usually goes), I went a different route. Built this radial menu thing that pops up when you tap the add button on mobile.

Here's the actual code that creates this magic:

const ringConfig = [
  { radius: 90, itemCount: 4 },
  { radius: 160, itemCount: 5 },
  { radius: 230, itemCount: 6 },
];
const ANGLE_RANGE_DEG = 90;
const START_ANGLE_OFFSET = 10;
// Calculate position for each component in the radial menu
const x = ring.radius * Math.cos(angle * Math.PI / 180);
const y = ring.radius * Math.sin(angle * Math.PI / 180);
// Staggered animation timing for that satisfying cascade effect
const totalDelay = (globalElementIndex * 25);

Prompt: Add a radial menu when someone presses the add button for smaller screens. Keep the icons similar to what we have now for each component.

Smart Responsive Design That Actually Works 🍥

But mobile wasn't just about the radial menu. I had to completely rethink how the entire interface adapts. Here's my approach using a custom hook:

const isMobile = useMediaQuery('(max-width: 767px)');
const isDesktop = useMediaQuery('(min-width: 768px)');

// Desktop gets a sidebar drawer, mobile gets the radial menu
if (isDesktop) {
  return <ComponentDrawer />; // Traditional sidebar
}
// Mobile gets the fancy radial menu
return <RadialComponentMenu />;

This wasn't just about screen size – I had to think about touch interactions, finger-friendly button sizes, and how people actually hold their phones. The delete and undo buttons only appear on mobile when you need them, positioned perfectly for your thumb.

Prompt: Add undo and trash icon for smaller screens. Place the trash icon just right of the add button and undo just above the add button.

The Component Library That Actually Makes Sense

You know what was embarrassing? Having a system design tool with like six components. "Hey, design Netflix with just a Load Balancer and Database!" Yeah, not happening.

I've expanded the component library to include all the usual suspects, and here's how I organized them:

export enum ElementType {
  User = 'USER',
  WebClient = 'WEB_CLIENT',
  MobileClient = 'MOBILE_CLIENT',
  ApiGateway = 'API_GATEWAY',
  LoadBalancer = 'LOAD_BALANCER',
  Microservice = 'MICROSERVICE',
  MessageQueue = 'MESSAGE_QUEUE',
  Cache = 'CACHE',
  Database = 'DATABASE',
  CDN = 'CDN',
  AuthService = 'AUTH_SERVICE',
  Search = 'SEARCH',
  ObjectStorage = 'OBJECT_STORAGE',
  TextBox = 'TEXT_BOX',
  Custom = 'CUSTOM',
}

Each component gets its own config with proper colors, icons, and descriptions:

[ElementType.MessageQueue]: {
  icon: <MessageQueueIcon />,
  color: 'bg-orange-100 border-orange-300',
  textColor: 'text-orange-800',
  defaultName: 'Message Queue',
  description: 'An asynchronous communication buffer between different services (e.g., RabbitMQ, Kafka).',
},

The best part? I color-coded everything so you can instantly tell what type of component you're looking at. Message queues are orange, databases are purple, caches are indigo. Your brain starts recognizing patterns without you even thinking about it.

Prompt: Add more components such as cache, queue, object storage, cdn and search

Undo/Redo Like Magic 🪄

This one's embarrassing. I shipped a design tool without undo. Do you know how many perfectly good diagrams I accidentally destroyed while testing? Too many.

But implementing undo/redo properly is trickier than you'd think. Here's my solution using a custom history hook:

export const useHistory = <T>(initialPresent: T) => {
  const [state, setState] = useState<History<T>>({
    past: [],
    present: initialPresent,
    future: [],
  });

  const set = useCallback((newPresent: React.SetStateAction<T>) => {
    setState(s => {
      // Don't create history entries for identical states
      if (JSON.stringify(resolvedNewPresent) === JSON.stringify(s.present)) {
        return s;
      }

      return {
        past: [...s.past, s.present],
        present: resolvedNewPresent,
        future: [], // Clear redo stack when making new changes
      };
    });
  }, []);
};

Now you can Cmd+Z your way out of any mistake, just like in real life. (If only it worked that way everywhere, right?)

Prompt: Add undo functionality if user presses cmd+z by using a history hook

Multi-Select for the efficiency ✄

Here's where things get fun. I implemented area selection – hold Space and drag to select multiple elements. Want to move your entire backend cluster? Click, drag, done.

const handleDeleteSelected = useCallback(() => {
  if (selectedElementIds.length === 0) return;

  setDiagram(currentDiagram => {
    const idsToDelete = new Set(selectedElementIds);
    const newElements = currentDiagram.elements.filter(el => !idsToDelete.has(el.id));
    const newConnectors = currentDiagram.connectors.filter(conn => 
      !idsToDelete.has(conn.from) && !idsToDelete.has(conn.to)
    );
    return { elements: newElements, connectors: newConnectors };
  });

  setSelectedElementIds([]);
}, [selectedElementIds, setDiagram]);

The selection state automatically cleans up when you undo/redo, so you never end up with ghost selections pointing to elements that don't exist anymore.

Desktop Prompt: Add functionality to select multiple components if user presses space and then drag. Components in this area will get selected.

Mobile Prompt: For smaller screens if user taps on component it should get selected and keep on selecting until it taps on the already selected component

Export That Doesn't Suck 🚛

The original export was basically "take a screenshot and hope for the best." Now I've got smart cropping that calculates the exact bounds of your diagram:

const handleExportImage = async (format: 'png' | 'jpeg') => {
  const getElWidth = (el: ElementData) => el.width || ELEMENT_CONFIG[el.type].defaultWidth || ELEMENT_DIMENSIONS.width;
  const getElHeight = (el: ElementData) => el.height || ELEMENT_CONFIG[el.type].defaultHeight || ELEMENT_DIMENSIONS.height;

  // Calculate the bounding box of all elements
  const minX = Math.min(...elements.map(el => el.x));
  const minY = Math.min(...elements.map(el => el.y));
  const maxX = Math.max(...elements.map(el => el.x + getElWidth(el)));
  const maxY = Math.max(...elements.map(el => el.y + getElHeight(el)));

  const width = maxX - minX + PADDING * 2;
  const height = maxY - minY + PADDING * 2;
};

No more giant images with 90% whitespace. Your diagram gets exported with perfect cropping and consistent padding.

Prompt: Add export functionality so that user can export in png and jpeg format. Also create a json format which can be exported and can be used in case we import the same.

The Community That Shaped Darwin

The comments on my original post were pure gold. Here are some that actually made it into the app:

@sanskaromar asked for better mobile support – and honestly, that comment alone probably saved Darwin from becoming another "desktop-only" relic.

Someone suggested multi-select features, and it was such an obvious "why isn't this already a thing?" moment that I implemented it immediately.

Multiple people asked about collaboration features and version history. Those are still on my roadmap, but here's the thing – I want to keep Darwin simple. Real-time collaboration means backends, databases, user accounts, and suddenly I'm building Slack for diagrams. That's not the Darwin way.

The Technical Stack (For My Fellow Code Nerds)

Here's what powers Darwin 2.0:

React 19 with hooks for everything (useState is my best friend)
TypeScript because I learned my lesson about runtime errors the hard way
Vite for lightning-fast development (seriously, hot reload is instant)
html-to-image for clean PNG/JPEG exports
Pure frontend – no backend, no database, no drama

The architecture is beautifully simple:

components/     # UI components and canvas logic
hooks/         # Custom hooks for undo/redo, responsive design  
examples/      # Sample architectures to get started
types.ts       # TypeScript definitions
constants.tsx  # Component configs and styling

One thing I'm particularly proud of is the canvas interaction system. Instead of using a heavy library like Fabric.js or Konva, I built the entire thing with vanilla React and DOM events. It's fast, it's lightweight, and I understand every line of code.

The Drag-and-Drop Magic

Want to see something cool? Here's how I implemented the drag-from-palette feature:

const handlePointerDown = (e: React.PointerEvent, type: ElementType) => {
  const target = e.currentTarget;
  target.setPointerCapture(e.pointerId);

  const handlePointerMove = (moveEvent: PointerEvent) => {
    const dx = Math.abs(moveEvent.clientX - startX);
    const dy = Math.abs(moveEvent.clientY - startY);

    if (dx > 5 || dy > 5) {
      dragInfoRef.current.isDragging = true;
      setDragPreview({ type, x: moveEvent.clientX, y: moveEvent.clientY });
    }
  };

  const handlePointerUp = (upEvent: PointerEvent) => {
    if (dragInfoRef.current.isDragging) {
      // Dispatch custom event to canvas for element creation
      const dropEvent = new CustomEvent('hld-drop', {
        detail: { type: type, clientX: upEvent.clientX, clientY: upEvent.clientY }
      });
      canvasEl.dispatchEvent(dropEvent);
    }
  };
};

It handles mouse, touch, and pen input seamlessly. The drag preview follows your cursor with a subtle pulse animation, and dropping creates the element exactly where you expect it.

Real People, Real Systems, Real usecases

Are you prepping for system design interviews? Darwin is perfect for practicing those classic questions - design Instagram, build a chat system, create a video streaming platform. The components are all there, and you can iterate quickly without getting bogged down in complex UI.
You can even start with some samples like

E-commerce platforms with proper load balancing and microservices
Social media architectures that would make Twitter jealous
Video streaming systems that rival Netflix's complexity

Building a side project and need to document your architecture? Skip the heavyweight tools and sketch it out in Darwin. Export a clean PNG for your README, share it with your team, or use it in presentations. No accounts, no subscriptions, just pure functionality.

Teaching system design concepts? Darwin makes it easy to build diagrams on the fly during lectures or workshops. The mobile-friendly interface means students can follow along on their phones, and the example architectures give you ready-made starting points.

I'd love to see what you build! If you create something cool with Darwin - whether it's a system design for your startup, an interview prep diagram, or just experimenting with architectures - share it! Tag me on social media, post it in the discussions on GitHub, or just drop a comment below.

The Open Source Adventure Begins

Here's where things get interesting. Darwin is now fully open source at github.com/sroy8091/darwin, and I'm both excited and terrified.

The repo includes everything – complete source code, setup instructions, example architectures, and even a proper contributing guide. Want to run it locally? It's literally three commands:

git clone https://github.com/sroy8091/darwin.git
cd darwin  
npm install && npm run dev

Want to contribute? Here's what I'm looking for:

New component types (blockchain components, anyone?)
Better accessibility features
Performance optimizations
Mobile interaction improvements
Export format additions (SVG support is coming!)

Just check the issues page or create a new one. I'm particularly interested in ideas from people who actually use system design tools in their daily work.

What's Next for Darwin?

I've got a roadmap that's both ambitious and realistic:

Short term (next month):

SVG export for crisp vector graphics
Keyboard shortcuts for power users
Component grouping and templates
Better mobile touch interactions

Medium term (next quarter):

Flowchart components for algorithm interviews
Auto-layout algorithms for cleaner diagrams
Component search and filtering
Diagram versioning and history

Long term (the dream):

System simulation (imagine clicking "play" and watching traffic flow)
AI-powered diagram generation from text descriptions
Maybe, maybe some light collaboration features

The Philosophy That Keeps Darwin Simple

Here's the thing that keeps me up at night: how do I add features without turning Darwin into the bloated tools I originally hated?

My rule is simple: Every feature must make the core use case better, not just add more stuff.

When someone suggests real-time collaboration, I ask: "Does this help a developer quickly sketch a system architecture?" When they suggest advanced theming, I ask: "Does this help communicate technical concepts better?"

If the answer is no, it doesn't go in Darwin. That's how we stay focused.

Why Darwin Matters (Beyond My Ego)

Look, there are plenty of diagramming tools out there. Lucidchart costs $12/month and has every feature imaginable. Draw.io is free and works fine. Miro is beautiful and collaborative.

But none of them were built specifically for developers creating system designs. They're all generic tools trying to be everything to everyone.

Darwin is different because:

It's fast – no loading screens, no account setup, no feature tours
It speaks developer – components that actually matter for system design
It's mobile-first – works perfectly on phones and tablets
It's free forever – no subscriptions, no feature gates, no vendor lock-in
It's open source – don't like something? Fix it yourself

The Community I'm Building

This isn't just about a tool anymore. I'm accidentally building a community of developers who care about simple, focused software.

The response to the original blog was incredible. People shared their own frustrations with existing tools, suggested improvements, and even offered to contribute. That's when I knew Darwin was bigger than just my personal itch to scratch.

If you've read this far, you're probably the kind of developer I built Darwin for. You value simplicity over features, you understand that constraints breed creativity, and you believe that tools should get out of your way and let you work.

Try Darwin Today (And Help Me Make It Better)

Want to give it a shot? Head over to darwin-topaz.vercel.app and start dragging some components around. It works in any browser, on any device, no signup required.

Found a bug? Have an idea? The GitHub repo is at github.com/sroy8091/darwin. Issues and pull requests are not just welcome – they're desperately needed.

And if you build something cool with Darwin, tag me on social media or drop a comment below. I love seeing what people create with simple tools.

The Real Lesson Here

Building Darwin taught me something important: sometimes the best way to solve a problem is to ignore everything everyone else is doing and just build what you actually need.

I didn't set out to compete with billion-dollar companies or build the next unicorn startup. I just wanted a simple tool that let me quickly sketch system architectures without fighting the interface.

Turns out, that's exactly what a lot of other developers wanted too.

Darwin isn't trying to be the best diagramming tool in the world. It's trying to be the best system design tool for developers who value simplicity over features.

And honestly? I think we're getting there.

Darwin is open source and looking for contributors! Check out the GitHub repo and let's build something great together. Because the best tools are built by the people who actually use them.

📋My own system designer - Darwin

Sumit Roy — Sat, 05 Jul 2025 02:58:31 +0000

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

What I Built

I was tired of bloated webapps for practicing system design problem or creating one. So I thought of creating my own. I started with simple canvas with few components such as load balancer, api gateway and database and a custom element.

Then I started adding features step by step

Step 1:
Add arrows to connect different components
Step 2:
Add edit option in components where I can drag the components and move them in canvas, edit their names, resize them and delete them from canvas
Step 3:
Make the canvas size infinite
Step 4:
Add zoom options using mouse scroll in canvas
Step5:
Add few more components such as User, Web client, Cache, etc and add scrollbar in the components section
Final Step:
Add export functionality to export this design in png or jpeg format

And voila the app is live and functional.

Demo

Check it out here and share your designs

Future scope

Now it's time to add more features. Few of them are

Add an option to create flow chart as well
Option to copy a single element
Ability to move multiple elements at once and many more.

Suggest your ideas in comments to make this bigger and better. So that we can have our own canvas opens source and free without any telemetry

My Experience

There were few moments when gemini was approaching correctly but not making the code changes. I had to ask specifically to continue making the code changes and then it moves ahead. That was annoying a bit, but the results were really cool. I like vibe coding a lot with this new tool. Planning to build more for the public for free.

Create your own design and share it in the chat and inspire us with your suggestions

🎉 Friday Fun: Building a B-Tree Visualizer (Because We're Nerds)

Sumit Roy — Fri, 04 Jul 2025 12:01:18 +0000

It's Friday afternoon. Your brain is fried from the week. You could mindlessly scroll social media... OR you could build something cool that helps visualize those B-Trees we talked about yesterday.

Guess which one we're doing?

The Weekend Project That Actually Teaches You Something

Remember yesterday's B-Tree enlightenment? Let's build a simple visualizer to see these tree structures in action. Because sometimes the best way to understand something is to watch it work.

What We're Building

A simple web-based B-Tree visualizer that:

Shows how insertions affect tree structure
Visualizes tree balancing in real-time
Demonstrates why B-Trees are perfect for databases
Looks cool enough to show off to your colleagues

The Tech Stack (Keep It Simple)

HTML5 Canvas: For drawing the tree
Vanilla JavaScript: Because not everything needs a framework
CSS: To make it not look like 1995
Coffee: Essential for any Friday coding session

The Core Algorithm (Simplified)

class BTreeNode {
    constructor(degree) {
        this.keys = [];
        this.children = [];
        this.isLeaf = true;
        this.degree = degree; // Max keys = 2*degree - 1
    }

    insert(key) {
        // If leaf, insert and sort
        if (this.isLeaf) {
            this.keys.push(key);
            this.keys.sort((a, b) => a - b);

            // Split if too many keys
            if (this.keys.length >= 2 * this.degree) {
                return this.split();
            }
        }
        // If internal node, find right child and recurse
        else {
            let i = 0;
            while (i < this.keys.length && key > this.keys[i]) {
                i++;
            }
            return this.children[i].insert(key);
        }
    }

    split() {
        // This is where the magic happens
        // Split node and promote middle key
        const mid = Math.floor(this.keys.length / 2);
        const midKey = this.keys[mid];

        // Create new node with right half
        const newNode = new BTreeNode(this.degree);
        newNode.keys = this.keys.splice(mid + 1);

        // Current node keeps left half
        this.keys = this.keys.slice(0, mid);

        return { promotedKey: midKey, newNode: newNode };
    }
}

The Visualization Magic

function drawTree(canvas, rootNode) {
    const ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Start drawing from root
    drawNode(ctx, rootNode, canvas.width / 2, 50, 0);
}

function drawNode(ctx, node, x, y, level) {
    const nodeWidth = 60 * node.keys.length;
    const nodeHeight = 40;

    // Draw node rectangle
    ctx.fillStyle = level === 0 ? '#4a90e2' : '#7ed321';
    ctx.fillRect(x - nodeWidth/2, y, nodeWidth, nodeHeight);

    // Draw keys
    ctx.fillStyle = 'white';
    ctx.font = '14px Arial';
    node.keys.forEach((key, i) => {
        ctx.fillText(key, x - nodeWidth/2 + 10 + i * 50, y + 25);
    });

    // Draw children recursively
    if (!node.isLeaf) {
        const childY = y + 80;
        const childSpacing = nodeWidth / node.children.length;

        node.children.forEach((child, i) => {
            const childX = x - nodeWidth/2 + childSpacing * (i + 0.5);

            // Draw connection line
            ctx.strokeStyle = '#333';
            ctx.beginPath();
            ctx.moveTo(x - nodeWidth/2 + childSpacing * i, y + nodeHeight);
            ctx.lineTo(childX, childY);
            ctx.stroke();

            // Draw child node
            drawNode(ctx, child, childX, childY, level + 1);
        });
    }
}

The Interactive Part

// Add some user interaction
document.getElementById('insertBtn').addEventListener('click', () => {
    const value = parseInt(document.getElementById('keyInput').value);
    if (!isNaN(value)) {
        insertWithAnimation(value);
        document.getElementById('keyInput').value = '';
    }
});

function insertWithAnimation(key) {
    // Highlight the path the insertion takes
    animateInsertion(key).then(() => {
        tree.insert(key);
        drawTree(canvas, tree.root);
    });
}

Why This Is Actually Useful

Building this visualizer teaches you:

Tree traversal: You see exactly how searches navigate the tree
Balancing behavior: Watch splits happen in real-time
Performance characteristics: Count the levels as the tree grows
Index design intuition: See why column order matters in compound indexes

Weekend Challenge Extensions

Once you have the basic version working:

Level 2: Add deletion (way trickier than insertion!)

Level 3: Show disk read animations (pause at each node access)

Level 4: Compare B-Tree vs Binary Tree performance

Level 5: Simulate actual database queries with range searches

The Real Payoff

Next Monday, when someone asks "Why is this query slow?", you'll be able to visualize the B-Tree traversal in your head. You'll think about:

How many levels the tree has
Whether the query can use the index structure efficiently
Where the disk seeks are happening

Share Your Creation

If you build this (or something similar), drop a link in the comments! Let's see different approaches to visualizing these data structures.

Bonus points if you:

Add sound effects for splits and searches
Include a "database query simulator" mode
Make it responsive for mobile viewing
Add dark mode (because it's 2025)

Weekend Motivation

Sure, you could binge Netflix this weekend. But imagine walking into Monday's standup with "Oh, I just built a B-Tree visualizer to better understand database performance."

That's the kind of weekend project that turns you from a developer who uses databases into a developer who understands databases.

What's your favorite way to learn complex concepts? Building visualizations? Reading code? Drawing diagrams? Share your learning hacks in the comments!

Next Week: We start a new Daily Doses cycle with fresh Monday motivation!

Part of the 🌈 Daily Dev Doses series - because the best way to understand something is to build it yourself

Use codecrafters to learn by building the most fundamental concepts of computer science

Sumit Roy — Fri, 04 Jul 2025 03:08:42 +0000

Sumit Roy

Jun 16 '25

Build your own shell : Codecrafters Edition

#programming #codecrafters #python

Comments 2

2 min read

Get you anime avatar for github

Sumit Roy — Fri, 04 Jul 2025 03:06:51 +0000

Education Track: Build Apps with Google AI Studio

Sumit Roy

Jul 3 '25

🎴Git-Sensei: Where Coding Style Meets Anime Destiny

#deved #learngoogleaistudio #ai #gemini

Comments 12

2 min read

🎴Git-Sensei: Where Coding Style Meets Anime Destiny

Sumit Roy — Thu, 03 Jul 2025 20:51:58 +0000

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

What I Built

A git sensei who can read your coding scrolls from github repos and assigns you an anime character. Do you know what's the anime character for torvalds, find out here -> Git Sensei

You can also download this and set it as your GitHub avatar directly from this app.

Demo

Landing Page

Searching Loader

Final Character

My Experience

Assistant Tool

The tool is really simple and moreover to similar to any chatbox we have seen for any LLM. It also serves as showing output from the assistant and worklog of it. It gives us the steps assistant is taking to build this app

Code Editor

The code editor is too basic to build actual apps. It has some capabilities but I think adding more details might help in actual coding. For now it serves more of a code review tool than code writing tool

Preview

The preview part is also good. It shows various screen size option. You can drag the window and check if it looks good for all sizes. It also can load preview while assistant is coding. So I think that kind of shows how's the progress going UI wise.

Conclusion

The coding experience is surprisingly good, the autofix sometimes hallucinate so needed some nudge to go towards the right path. It would have been nice if we would get an overview of what's the strategy and overall idea before or after implementing just like we get for gemini cli it would be easy to find and resolve bugs.

Use your github username to find out what anime character are you from naruto or demon slayer and post it here in the comments. Let's see who is Naruto Uzumaki among us