DEV Community: Arpit Godghate

ArchScope Dev Journal

Arpit Godghate — Mon, 27 Apr 2026 20:34:55 +0000

Github - https://github.com/arpitg24/ArchScope
Web - https://archscope-app.vercel.app/

April 28, 2026

Auto-Layout for Expanded Metrics

Implemented an intelligent auto-layout system that preserves graph structure while expanding spacing when simulation metrics are displayed. When nodes expand to show latency, utilization, and cost details, the graph automatically scales vertically by 15% to prevent overlap. The layout algorithm:

Calculates relative Y positions from the top-most node
Scales vertical spacing while preserving horizontal positions
Maintains the exact original graph structure
Restores original positions on reset

Demo Preset

Added a comprehensive "Demo" preset showcasing a production-ready architecture with:

Client → Rate Limiter → Load Balancer
Load Balancer → 2 API Servers
Each API Server → Cache + Database
Rate Limiter → Message Queue → 2 Workers
Workers connect to dedicated API servers

This preset demonstrates realistic system patterns including rate limiting, message queuing, and worker pools.

April 26, 2026

Fast Forward Feature

Added a fast-forward feature that completes simulations in 2 seconds instead of real-time, useful for quick testing and iteration.

April 25, 2026

Authentication System

Implemented a complete authentication system:

JWT-based authentication
Supabase database integration
Profile/login UI enhancements
Logout functionality
Schema design improvements

April 24, 2026

Database Setup

Set up Supabase database and integrated authentication-related code changes.

April 23, 2026

Authentication Routes

Added authentication routes, cleaned up code, and implemented login button functionality.

April 20, 2026

Guide Page Mobile Support

Implemented comprehensive mobile-friendly guide page:

Added mobile detection
Implemented hamburger menu for mobile
Made guide page scrollable on mobile
Improved mobile UX
Desktop-only guidance when on mobile

Invitation to contribute to ArchScope

Arpit Godghate — Wed, 15 Apr 2026 12:59:36 +0000

Inviting collaborators to contribute to ArchScope, an architecture analysis tool to test your system designs.

find more details in this blog - https://lnkd.in/dTNmy5G6

Github - https://github.com/arpitg24/ArchScope

try it yourself and let me know what you think -
https://lnkd.in/d-VggTsr

Please comment on any bugs or features that should be addressed.

PS: please try it on a pc, layouts would overlap over a mobile

ArchScope Engineering Update: Multi-Selection & Undo/Redo Implementation (April 14, 2026)

Arpit Godghate — Tue, 14 Apr 2026 19:55:54 +0000

Implementing Multi-Selection and Undo/Redo in ReactFlow: A Technical Deep Dive

Introduction

Today, we are implementing a comprehensive multi-selection system with undo/redo functionality. This was a technical challenge that tested our understanding of ReactFlow's internal state management.

The requirement was to make a box to select and move multiple components, the kind present in file systems, where, when you click and drag, a box appears and whatever is inside the box is selected and moves like a single unit.

These design requirements were as follows:

Visual selection box with Shift+drag interaction
Multi-component selection with visual feedback
Group movement capabilities
Keyboard shortcuts for productivity
Undo/redo functionality for all operations
Copy/paste support for selected components

Step 1: The Selection Box Implementation

Initial Challenges

Our first hurdle was implementing the selection box without interfering with ReactFlow's built-in interactions. ReactFlow has its own panning, node selection, and event handling systems that can conflict with custom implementations.

Problem: The selection box wasn't appearing or was triggering ReactFlow's pan instead.

Root Cause: ReactFlow's event system captures mouse events at multiple levels, making it difficult to inject custom selection logic without breaking existing functionality.

Solution Approach:

// We needed precise event target detection
const isReactFlowPane = target.classList.contains('react-flow__pane');
const isNode = target.closest('.react-flow__node');
const isHandle = target.closest('.react-flow__handle');
const isControl = target.closest('.react-flow__controls');
const isMiniMap = target.closest('.react-flow__minimap');

// Only start selection on empty canvas with Shift key
if (event.button === 0 && isReactFlowPane && !isNode && !isHandle && !isControl && !isMiniMap && event.shiftKey) {
  // Start selection logic
}

Coordinate Transformation Hell

The second major challenge was coordinate transformation. ReactFlow uses its own coordinate system with viewport transformations (zoom and pan), but mouse events provide screen coordinates.

Problem: Selection bounds weren't matching actual component positions.

Solution: We implemented manual coordinate transformation:

const viewport = reactFlowRef.current?.getViewport();
const nodeScreenX = node.position.x * (viewport?.zoom || 1) + (viewport?.x || 0);
const nodeScreenY = node.position.y * (viewport?.zoom || 1) + (viewport?.y || 0);

Step 2: The Undo/Redo Nightmare

This became the most challenging part of the implementation. Our initial attempts at implementing undo/redo were plagued by state management issues.

Attempt 1: Simple State Snapshots

Approach: Store snapshots of nodes and edges in a history array.

Problem: ReactFlow's internal state management interfered with our manual state setting, causing race conditions and inconsistent state.

Code That Failed:

const saveToHistory = useCallback(() => {
  const currentState = { nodes: [...nodes], edges: [...edges] };
  setHistory(prev => [...prev, currentState]);
}, [nodes, edges]);

const undo = useCallback(() => {
  const prevState = history[historyIndex - 1];
  setNodes(prevState.nodes);  // This caused conflicts with ReactFlow
  setEdges(prevState.edges);
}, [history, historyIndex]);

Attempt 2: Debounced State Saving

Approach: Use setTimeout to delay state saves and avoid conflicts.

Problem: This created timing issues and still didn't solve the core problem of ReactFlow's state interference.

Attempt 3: ReactFlow Instance Access

Approach: Use ReactFlow's instance methods to get current state.

Problem: Still faced race conditions and state inconsistency.

The Breakthrough: External State Management

After multiple failed attempts, we realized the fundamental issue was trying to work within ReactFlow's state management system. The solution was to implement a completely external state management system.

Final Solution:

// SimpleUndoRedo class - completely independent
export class SimpleUndoRedo {
  private history: HistoryState[] = [];
  private currentIndex: number = -1;

  saveState(nodes: any[], edges: any[]) {
    const currentState: HistoryState = {
      nodes: JSON.parse(JSON.stringify(nodes)),
      edges: JSON.parse(JSON.stringify(edges))
    };
    // ... history management logic
  }

  undo(): HistoryState | null {
    if (this.currentIndex > 0) {
      this.currentIndex--;
      const state = this.history[this.currentIndex];
      return {
        nodes: JSON.parse(JSON.stringify(state.nodes)),
        edges: JSON.parse(JSON.stringify(state.edges))
      };
    }
    return null;
  }
}

Key Insights:

Deep Cloning: Using JSON.parse(JSON.stringify()) to create true copies
External Storage: Keeping history outside React's state system
Direct State Setting: Setting nodes/edges directly without ReactFlow interference
Timing Control: Using setTimeout to ensure state changes complete

Step 3: Performance Optimization

The Infinite Loop Crisis

Problem: Our implementation caused "Maximum update depth exceeded" errors due to infinite re-renders.

Root Cause: The nodes array was being recreated on every render, causing ReactFlow to continuously update.

Solution: Memoization

const memoizedNodes = useMemo(() => 
  nodes.map((n) => ({
    ...n,
    data: { 
      ...n.data, 
      highlighted: n.id === highlightedNodeId,
      isMultiSelected: selectedNodes.includes(n.id)
    },
    selected: selectedNodes.includes(n.id) || n.id === selectedNode?.id,
  })), 
  [nodes, highlightedNodeId, selectedNodes, selectedNode]
);

Technical Lessons Learned

1. State Management Is Harder Than It Looks

ReactFlow's internal state management is complex and not easily extensible. Sometimes the best solution is to work around it rather than with it.

2. Deep Cloning Is Essential

JavaScript object references can cause subtle bugs. Deep cloning ensures true state independence:

// Bad: Shallow copy
const bad = { nodes: nodes, edges: edges };

// Good: Deep copy
const good = { 
  nodes: JSON.parse(JSON.stringify(nodes)), 
  edges: JSON.parse(JSON.stringify(edges)) 
};

3. Performance Requires Memoization

In React applications with complex state, memoization isn't optional - it's essential for preventing infinite loops and performance issues.

4. User Experience Matters More Than Perfect Code

Sometimes a "hacky" solution that works well for users is better than a "perfect" solution that's brittle.

The Final Architecture

Our final implementation consists of:

SelectionBox Component: Handles visual selection box rendering
SimpleUndoRedo Class: Independent state management for history
Enhanced Simulator Component: Main orchestration with all features
Multi-Selection Logic: Shift+drag and Shift+click interactions
Keyboard Shortcuts: Comprehensive shortcut system
Visual Indicators: CSS-based feedback for selected components

Performance Metrics

Memory Usage: ~50 history states (configurable)
Rendering Performance: Optimized with memoization
Event Response Time: <16ms for all interactions

Check out ArchScope - https://archscope-app.vercel.app/
Its an architecture analysis tool that can be used to evaluate your High level designs under varying loads.

Introducing ArchScope: Visual System Architecture Simulator

Arpit Godghate — Mon, 13 Apr 2026 12:25:47 +0000

What is ArchScope?
ArchScope is an interactive web-based tool that lets you design, visualise, and test system architectures with real-time performance simulations. Think of it as a digital playground for architects and engineers to experiment with different system designs before committing to expensive infrastructure decisions.

Core Features:

Visual Architecture Design
Real-time connections with animated data flow visualization
Performance Simulation Engine
Accurate metrics including latency, throughput, utilization, and cost calculations
Time-series visualization showing system behavior over time
Comprehensive Analytics
Bottleneck detection with actionable suggestions
Cost analysis per hour and per month
Latency breakdown by component
Advanced Configuration
Rate limiting algorithms: Token bucket, fixed window, sliding window, leaky bucket
Cache configuration: TTL, hit rates, Redis integration
Queue settings: Max messages, processing times
Custom cost overrides: Override default pricing with real-world rates

Technology Stack:

Next.js 16 with TypeScript for robust development
React Flow for interactive diagram visualisation
TailwindCSS for clean, responsive UI
Recharts for performance charts
Lucide React for minimalist icons

What Makes ArchScope Different?
Unlike static diagramming tools, ArchScope brings your architecture to life. While existing tools help you document existing infrastructure, ArchScope lets you test hypothetical designs and predict performance before deployment.

Real-World Use Cases:

Capacity Planning: Test if your current architecture can handle Black Friday traffic
Cost Optimisation: Compare serverless vs. container-based approaches
Migration Planning: Simulate moving from monolith to microservices
Performance Debugging: Identify bottlenecks before they impact users

Try It Out
Visit ArchScope:

Start with a preset architecture or build from scratch
Configure simulation parameters (users, requests, duration)
Hit "Run Simulation" and watch your system come to life
Analyse the results and iterate on your design

I'd love to hear your thoughts on ArchScope:

What architectures did you design?
How did the simulation results help your planning?
What features would you like to see added?
Any feedback on the user experience or pricing accuracy?

I Built a 20-Hour DBMS Interview Prep System Using LLMs — Does It Actually Work?

Arpit Godghate — Fri, 10 Apr 2026 11:49:57 +0000

I used LLMs to build a complete DBMS interview prep system. Here's exactly how - and I want your honest feedback.

Instead of randomly Googling "DBMS interview questions", I ran an experiment using LLMs as my study partner. The results surprised me.

Step 1: Curate the right questions
I asked the LLM: "What are the most frequently asked DBMS questions in senior backend interviews?", not once, but iteratively. I cross-referenced across difficulty levels, topics, and interview formats until I had a distilled list of 100 questions spanning 10 modules - from basics like normalisation all the way to replication, sharding, and MVCC.

Step 2: Find the minimal set of resources
Here's where it got interesting. I gave the LLM my 100 questions and asked: "What is the smallest set of resources that covers all of these with zero overlap?" It mapped every question to exactly 3 resources:

InterviewBit DBMS/SQL articles (free) - for fundamentals + SQL practice
DDIA by Martin Kleppmann (only 5 specific chapters) - for the deep "why" behind transactions, indexing, replication, and storage
LeetCode Top SQL 50 - for hands-on query practice

Total estimated time: ~20 hours. No fluff, no 40-hour courses.

Step 3: Interview-style learning
This was the game-changer. After studying, I asked the LLM to act as an interviewer:

It asked me each question one by one
I answered as if I were in a real interview
It evaluated my response - not just for correctness, but for what a recruiter at a senior level would actually want to hear (trade-offs, real-world examples, depth vs. rambling)

This feedback loop forced me to articulate answers clearly instead of just "knowing" the concept in my head.

Why I'm sharing this:
I genuinely don't know if this approach is better or worse than traditional prep. It felt efficient, but I want to pressure-test it with people who've been on the other side of the table.

A few specific questions for you:

If you've interviewed candidates, does this kind of structured prep actually show in interviews, or does it come across as rehearsed?
Are there blind spots in using an LLM as both curriculum designer and mock interviewer?
What would you add or change to this method?

I'll share the full 100-question study guide with the 7-day plan in the comments if anyone wants it.

Would love to hear what's worked (or not worked) for you.