DEV Community: Subham Kumar

Multi-Agent Systems Explained: Coordinator Pattern, Task Tool & Context Injection

Subham Kumar — Thu, 11 Jun 2026 04:15:15 +0000

As AI applications become more powerful, developers often discover a problem:

One AI agent is not always enough.

A single agent can answer questions, use tools, and complete simple tasks.

But what happens when the task becomes very large?

For example:

Writing a complete market research report
Analyzing hundreds of documents
Collecting data from multiple sources
Researching and summarizing complex topics

One agent can quickly become overloaded.

This is where Multi-Agent Systems become useful.

Instead of one AI doing everything, we create multiple specialized AI agents.

Each agent gets a specific job.

One agent researches.

One agent analyzes.

One agent writes.

One agent validates information.

A special agent called the Coordinator manages all of them.

Think of it like a sports team.

A football team does not have one player doing everything.

Different players have different responsibilities.

Multi-agent systems work the same way.

In this guide, you'll learn:

What multi-agent systems are
Why single agents fail
What a coordinator pattern is
How the Claude Task Tool works
What context injection means
How parallel agent execution improves speed
Common mistakes to avoid
Important Claude Certified Architect exam concepts

Why Single AI Agents Can Fail

Before learning multi-agent systems, let's understand why a single agent can struggle.

Problem 1: Context Overflow

Every Large Language Model (LLM) has a memory limit called a context window.

Simple Analogy

Imagine a student carrying books in a backpack.

If the backpack becomes too full, the student cannot carry anything else.

The same thing happens with AI agents.

As the conversation grows:

User messages increase
Tool results increase
Previous responses increase

Eventually the context becomes too large.

User Messages
      +
Tool Results
      +
Previous Responses
      ↓
Context Window Fills Up

This is called Context Overflow.

Problem 2: Sequential Bottlenecks

A single agent usually performs tasks one after another.

Example:

Research Papers
      ↓
Read News
      ↓
Analyze Reports
      ↓
Write Summary

Everything happens sequentially.

This takes time.

Problem 3: Specialization Gap

A single agent tries to do everything.

It may be:

researcher
analyst
writer
editor
validator

at the same time.

This often leads to average-quality results.

Real-Life Analogy

Imagine hiring one person to be:

doctor
lawyer
teacher
engineer

at the same time.

Possible?

Maybe.

Ideal?

Not really.

Specialists usually perform better.

What Is a Multi-Agent System?

A Multi-Agent System uses multiple AI agents working together.

Each agent has a specific responsibility.

Example:

Research Agent
      ↓
Analysis Agent
      ↓
Writing Agent
      ↓
Validation Agent

Instead of one overloaded agent, work is divided into smaller tasks.

Real-Life Team Analogy

Imagine building a house.

You don't hire one person to do everything.

You have:

Architect
Electrician
Plumber
Painter
Carpenter

Each specialist focuses on one job.

A Multi-Agent System follows the same idea.

Understanding the Hub-and-Spoke Architecture

The most common architecture is called the Hub-and-Spoke Pattern.

Sounds complicated.

It's actually simple.

What Is a Hub?

The hub is the center.

In AI systems, the hub is called the Coordinator.

What Are Spokes?

The spokes are specialized sub-agents.

           Research Agent
                  |
                  |
Analysis Agent --- Coordinator --- Writing Agent
                  |
                  |
          Validation Agent

The coordinator sits in the middle.

Important Rule: All Communication Goes Through the Coordinator

This is one of the most important concepts.

Good:

Research Agent
      ↓
Coordinator
      ↓
Writing Agent

Bad:

Research Agent
      ↓
Writing Agent

Sub-agents should not communicate directly.

Everything goes through the coordinator.

Responsibilities of the Coordinator

The coordinator is like a project manager.

Its job is not to do all the work.

Its job is to manage the work.

Task Decomposition

Large tasks are broken into smaller tasks.

Example:

User asks:

Create a market research report about electric vehicles.

Coordinator breaks it into:

Research Market Size
Research Competitors
Analyze Government Policies
Study Customer Trends
Write Final Report

Delegation

After splitting tasks, the coordinator assigns work.

Example:

Research Agent → Market Data
Analysis Agent → Trends
Writing Agent → Final Report

Result Aggregation

After agents finish their work:

Agent Outputs
      ↓
Coordinator
      ↓
Final Report

The coordinator combines everything.

Error Handling

If an agent fails:

Agent Error
      ↓
Coordinator Detects Problem
      ↓
Retry or Assign New Agent

The coordinator manages failures.

What Is the Claude Task Tool?

The Task Tool allows a coordinator to create sub-agents.

Think of it as an agent factory.

Coordinator
      ↓
Task Tool
      ↓
New Sub-Agent

Without the Task Tool, the coordinator cannot create new agents.

Why the Coordinator Needs Task Tool Access

The coordinator must have permission to use the Task Tool.

Without it:

No Task Tool
      ↓
No Sub-Agent Creation

This is an important Claude Certified Architect exam concept.

Creating a Sub-Agent

When creating a sub-agent, we provide an agent definition.

Example Agent Definition

research_agent = {
    "description": "Research specialist",

    "prompt": "Find recent EV market trends",

    "allowed_tools": ["web_search"],

    "model": "claude-sonnet"
}

Line-by-Line Explanation

Description

"description": "Research specialist"

Defines the role.

Prompt

"prompt": "Find recent EV market trends"

Defines the task.

Allowed Tools

"allowed_tools": ["web_search"]

Defines what the agent can access.

Model

"model": "claude-sonnet"

Defines which Claude model will be used.

Context Isolation Explained

One of the most misunderstood concepts is Context Isolation.

What Does Context Isolation Mean?

Sub-agents start with an empty memory.

They do not automatically know:

previous conversations
user preferences
previous tool results

Real-Life Analogy

Imagine hiring a contractor.

The project manager knows the full project history.

The contractor does not.

The contractor only knows what the manager explains.

The same applies to sub-agents.

What Is Context Injection?

Context Injection means passing important information into the sub-agent prompt.

Bad Prompt:

Research this topic.

Good Prompt:

Research electric vehicle market trends.
Focus on reports from the last 5 years.
Return 5 key findings.
Avoid duplicate sources.

The second prompt gives useful context.

Parallel vs Sequential Agent Execution

Sequential Execution

Agent 1
   ↓
Agent 2
   ↓
Agent 3

Total Time:

A1 + A2 + A3

Slow.

Parallel Execution

Agent 1
Agent 2
Agent 3
   ↓
Coordinator

Total Time:

max(A1, A2, A3)

Much faster.

Practical Example: Market Research System

Imagine a company wants a report on electric vehicles.

The coordinator creates:

Research Agent

Find market size.

Competitor Agent

Research competitors.

Policy Agent

Analyze regulations.

Writing Agent

Prepare final report.

Workflow Diagram

User Request
      ↓
Coordinator
      ↓
-------------------------
|     |      |         |
Research Competitor Policy Writing
Agent   Agent    Agent   Agent
-------------------------
      ↓
Coordinator
      ↓
Final Report

Task Tool Access Rules

Who Should Have Access?

Coordinator.

Coordinator
      ↓
Task Tool Access

Who Should Not Have Access?

Normal worker agents.

Research Agent
Writing Agent
Analysis Agent

Usually no Task Tool access.

Hierarchical Architecture Exception

Sometimes an agent can act as another coordinator.

Example:

Main Coordinator
       ↓
Research Coordinator
   ↙     ↓      ↘
Paper   News   Policy
Agent   Agent  Agent

In this case, the Research Coordinator may receive Task Tool access.

Common Mistakes

Mistake 1: Giving Every Agent Task Tool Access

This creates chaos.

Agents may keep creating more agents.

Mistake 2: Sequential Spawning

Bad:

Create Agent 1
Wait
Create Agent 2
Wait
Create Agent 3

Good:

Create Agent 1
Create Agent 2
Create Agent 3

at the same time.

Mistake 3: Poor Context Injection

Bad:

Research this topic.

Good:

Research EV market trends from the last five years.

Mistake 4: Letting Sub-Agents Communicate Directly

Always route communication through the coordinator.

Mistake 5: Simply Merging Outputs

The coordinator should synthesize results.

Not just copy and paste them.

Claude Certified Architect Exam Tips

Remember these facts:

Coordinator = Central Control

Task Tool = Creates Sub-Agents

Sub-Agents Start With Empty Context

Context Must Be Injected

Parallel Execution Is Faster

All Communication Goes Through Coordinator

Key Takeaways

Multi-Agent Systems divide work among specialized AI agents.
A coordinator manages all sub-agents.
The Hub-and-Spoke pattern is a common architecture.
The Task Tool allows coordinators to create sub-agents.
Sub-agents start with blank context.
Context Injection provides required information.
Parallel execution is faster than sequential execution.
Coordinators handle delegation, aggregation, and error handling.
Worker agents usually should not have Task Tool access.

FAQ

What is a Multi-Agent System?

A system where multiple AI agents work together to complete tasks.

What is a Coordinator Agent?

An agent that manages sub-agents and combines their results.

What is the Task Tool?

A Claude tool that allows coordinators to create sub-agents.

Why do sub-agents start with blank context?

Because context is isolated. They only know what is passed in their prompt.

What is Context Injection?

Providing important information to a sub-agent through its prompt.

Why is Parallel Execution Important?

It reduces latency and improves performance.

Should all agents have Task Tool access?

No. Usually only coordinators should have it.

What is the Hub-and-Spoke Pattern?

A design where a coordinator sits at the center and manages multiple specialized agents.

Conclusion

As AI applications become more advanced, one agent is often not enough.

Multi-Agent Systems solve this problem by dividing work among specialized agents.

The coordinator acts like a project manager, assigning tasks, collecting results, and producing the final answer.

Understanding coordinators, Task Tools, context injection, and parallel execution is essential for building modern AI systems and passing the Claude Certified Architect certification.

Claude Agentic Loop Explained: Guide to stop_reason, Tool Use, and Claude Agents

Subham Kumar — Thu, 11 Jun 2026 03:56:48 +0000

If you are learning the Anthropic Claude API, preparing for the Claude Certified Architect exam, or building AI agents, there is one concept you must understand:

The Claude Agentic Loop.

At first, terms like:

Agentic AI
Tool Use
stop_reason
Claude Agents

can feel confusing.

But don't worry.

This guide explains everything in very simple language.

Think of Claude as a smart person.

A smart person can answer questions.

But sometimes they need information from somewhere else.

They may need to:

Check a database
Search for information
Look up an order
Call another service

That is exactly how Claude agents work.

By the end of this guide, you will understand:

What an agentic loop is
What stop_reason means
Difference between tool_use and end_turn
How Claude tools work
Why Claude API is stateless
How to build a simple Claude agent

What Is a Claude Agent?

An AI agent is an AI system that can:

Think
Decide
Use tools
Observe results
Continue working until a task is complete

Real-Life Analogy

Imagine a chef.

The chef is the brain.

Kitchen tools are the hands.

The chef decides:

"I need a knife."

But the knife does not move by itself.

Someone must pick it up and use it.

Similarly:

Claude = Brain
Tools = Hands
Your Code = Worker who executes actions

Chatbot vs Agent

Many beginners think a chatbot and an agent are the same thing.

They are not.

Normal Chatbot

User asks question
       ↓
Claude answers
       ↓
Conversation ends

Example:

User:

What is the capital of India?

Claude:

New Delhi.

Done.

Agent

User asks question
       ↓
Claude thinks
       ↓
Needs tool?
   /      \
 Yes      No
  ↓        ↓
Use Tool  Final Answer
  ↓
Get Result
  ↓
Think Again
  ↓
Final Answer

Example:

Where is my order 4821?

Claude cannot know this information automatically.

It needs to:

Use an order lookup tool
Receive order information
Generate a final answer

This process is called an Agentic Loop.

What Is a Claude Agentic Loop?

The Claude Agentic Loop is the repeated process where Claude:

Receives a request
Thinks about it
Decides whether a tool is needed
Uses a tool if required
Receives the result
Thinks again
Returns the final answer

Flow Diagram

User Request
      ↓
Claude Reasons
      ↓
Need Tool?
   /      \
 Yes      No
  ↓        ↓
Tool Call  Final Answer
  ↓
Tool Result
  ↓
Claude Reasons Again
  ↓
Final Answer

This loop continues until Claude decides the task is complete.

Understanding Conversation Roles

Claude conversations contain roles.

System Role

The system role defines Claude's behavior.

Example:

You are a helpful customer support agent.

Think of it as Claude's job description.

User Role

Represents messages from the human.

Example:

{
    "role": "user",
    "content": "Where is my order?"
}

Assistant Role

Represents Claude's responses.

Example:

{
    "role": "assistant",
    "content": "I can help with that."
}

Why Roles Matter

Think of a play.

System = Director
User = Customer
Assistant = Claude

Each role has a different responsibility.

Claude uses these roles to understand context.

What Is stop_reason?

This is one of the most important concepts in Claude agent development.

Simple Definition

stop_reason tells your application:

Why Claude stopped generating the current response.

Your code should always check it.

Important stop_reason Values

tool_use

Meaning:

I need a tool.

Claude is asking your application to execute a tool.

Claude does not execute tools itself.

Your code must do it.

end_turn

Meaning:

I am finished.

Claude is telling your application:

The task is complete.

The agent loop should stop.

tool_use vs end_turn

stop_reason	Meaning	Action
tool_use	Claude needs a tool	Execute tool and continue
end_turn	Claude is finished	Stop the loop

Easy Memory Trick

tool_use  = Continue Working
end_turn  = Stop Working

Simple Order Lookup Example

Suppose a user asks:

Where is my order 4821?

Claude identifies that this is an order lookup request.

Claude requests:

lookup_order

Claude returns:

stop_reason = tool_use

Your application executes the tool.

Tool returns:

Status: Shipped
Carrier: DHL
Delivery: Tomorrow

Claude receives the result and generates:

Your order has been shipped and will arrive tomorrow.

Now Claude returns:

stop_reason = end_turn

The loop stops.

Why Claude API Is Stateless

Another very important concept.

What Does Stateless Mean?

Stateless means:

Claude does not automatically remember previous API calls.

Every request starts fresh.

Example

First API request:

My name is Akash.

Second API request:

What is my name?

Claude will not know unless the first message is included again.

Maintaining Conversation History

You must send previous messages every time.

messages = [
    {
        "role": "user",
        "content": "My name is Akash"
    },
    {
        "role": "assistant",
        "content": "Nice to meet you Akash"
    },
    {
        "role": "user",
        "content": "What is my name?"
    }
]

Now Claude has context.

Defining a Tool

Let's create a simple tool.

lookup_order_tool = {
    "name": "lookup_order",
    "description": "Look up order information",
    "input_schema": {
        "type": "object",
        "properties": {
            "order_id": {
                "type": "string"
            }
        }
    }
}

Line-by-Line Explanation

Name

"name": "lookup_order"

The tool identifier.

Claude uses this name when requesting the tool.

Description

"description": "Look up order information"

Helps Claude understand when to use the tool.

Input Schema

"input_schema"

Defines the expected inputs.

order_id

"order_id"

The order number provided by the user.

Claude Does Not Execute Functions

Many beginners assume Claude can run Python code.

It cannot.

Claude only requests:

Please call lookup_order

Your application executes the function.

Tool Function Example

## Simple mock database lookup
def lookup_order(order_id):

    orders = {
        "4821": {
            "status": "Shipped",
            "carrier": "DHL"
        }
    }

    return orders.get(order_id, "Order not found")

Explanation

Create Function

def lookup_order(order_id):

Creates the tool function.

Mock Database

orders = {

Stores sample order information.

Order Details

"4821": {
    "status": "Shipped"
}

Sample data.

Return Result

return orders.get(order_id, "Order not found")

Returns matching order details.

Building the Agent Loop

A simplified example:

while True:

    response = call_claude(messages)

    if response.stop_reason == "end_turn":
        break

    if response.stop_reason == "tool_use":

        result = execute_tool()

        messages.append(result)

Line-by-Line Explanation

Infinite Loop

while True:

Continue until Claude finishes.

Call Claude

response = call_claude(messages)

Send conversation history.

Check Completion

if response.stop_reason == "end_turn":

Claude is finished.

Stop Loop

break

Exit the loop.

Check Tool Request

if response.stop_reason == "tool_use":

Claude needs a tool.

Execute Tool

result = execute_tool()

Run the requested tool.

Save Tool Result

messages.append(result)

Add result back to the conversation history.

Correct Message Order

Always follow this order:

User Question
      ↓
Assistant Tool Request
      ↓
Tool Result
      ↓
Assistant Final Response

This order is important because Claude needs the complete context.

Real-World Example

Imagine a travel booking agent.

User:

Book me a flight from India to Australia.

Claude may:

Search flights
Compare prices
Select best option
Book ticket
Generate confirmation

This is agentic behavior.

Why Tool Selection Should Be Model-Driven

Bad approach:

Always call Tool A
Always call Tool B
Always call Tool C

Problems:

Expensive
Inflexible
Unnecessary

Better approach:

Provide available tools
Let Claude decide

This is what makes a system agentic.

Common Mistakes

Mistake 1: Reading Claude's Words Instead of stop_reason

Bad:

if "done" in response.text:
    stop()

Good:

if response.stop_reason == "end_turn":
    stop()

Mistake 2: Using Loop Count as Main Exit Condition

Bad:

if iteration == 5:
    stop()

Good:

if response.stop_reason == "end_turn":
    stop()

Mistake 3: Forgetting Conversation History

Without history, Claude loses context.

Always maintain the messages array.

Mistake 4: Assuming Claude Executes Tools

Claude only requests tools.

Your application executes them.

Mistake 5: Wrong Message Order

Always append:

Assistant Tool Request
       ↓
Tool Result

in that sequence.

Claude Certified Architect Exam Tips

Remember these facts:

Fact 1

tool_use = Continue Loop

Fact 2

end_turn = Stop Loop

Fact 3

Claude API is stateless.

Fact 4

Always send full conversation history.

Fact 5

Claude chooses tools.

Fact 6

Your code executes tools.

Key Takeaways

Claude agents can think, use tools, and continue working until a task is complete.
The repeated cycle is called an Agentic Loop.
stop_reason tells your application why Claude stopped.
tool_use means execute a tool and continue.
end_turn means stop the loop.
Claude does not execute tools directly.
Your application executes tools.
Claude API is stateless.
Always send conversation history with every request.

FAQ

What is a Claude Agentic Loop?

A repeated cycle where Claude reasons, requests tools, receives results, and completes a task.

What does tool_use mean?

Claude wants your application to execute a tool.

What does end_turn mean?

Claude has finished and the loop should stop.

Does Claude execute Python functions?

No. Claude only requests tool calls.

Why is Claude API stateless?

Because it does not automatically remember previous API requests.

What is the difference between a chatbot and an agent?

A chatbot answers and stops. An agent can use tools and continue working.

Should I stop when Claude says "I'm done"?

No. Use:

response.stop_reason == "end_turn"

Why is stop_reason important?

It is the official mechanism for controlling Claude agent loops.

Conclusion

The foundation of modern Claude agents is the Agentic Loop.

Claude can decide when it needs tools, request them, receive results, and continue reasoning until the task is complete.

The key signal controlling this process is:

stop_reason

Remember:

tool_use = Continue
end_turn = Stop

Once you understand these concepts, you will have a strong foundation for building Claude agents and preparing for the Claude Certified Architect certification.

26. Remove Duplicates from Sorted Array

Subham Kumar — Thu, 27 Nov 2025 17:03:07 +0000

Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same.

Consider the number of unique elements in nums to be k. After removing duplicates, return the number of unique elements k.

The first k elements of nums should contain the unique numbers in sorted order. The remaining elements beyond index k - 1 can be ignored.

Input: nums = [1,1,2]
Output: 2, nums = [1,2,_]
Explanation: Your function should return k = 2, with the first two elements of nums being 1 and 2 respectively.
It does not matter what you leave beyond the returned k (hence they are underscores).

Solution

So the array is sorted, means numbers are in increasing order but duplicates can be there like [0,0,1,1,2,2].

The question says remove duplicates in place, which basically means we don’t create new array.
We just take the same array and push all unique values to the front.

My way to think is very simple:

Take two variables
x stays at the place where the last unique element is
i runs the whole array
whenever I find a value bigger than nums[x], that means it’s a new unique value
so I increase x and put that value at nums[x]

That’s it.

Code:

var removeDuplicates = function(nums) {
    let x = 0
    for(let i = 0 ; i < nums.length; i++){
        if(nums[x] < nums[i]){
            x = x + 1
            nums[x] = nums[i]
        }
    }
    return x + 1
}

Now why x + 1?

Because x is index.
Index starts from 0.
But the answer they want is count of unique values.
So if last unique element is at index 2, then total unique are 3 → that’s why x + 1.

This is literally the whole logic. Simple two-pointer trick. If you want I can also explain the dry-run in the same simple tone.

Similar to this question there is one more question can solve to get better at it.

leetCode Question no 27.

Given an integer array nums and an integer val, remove all occurrences of val in nums in-place. The order of the elements may be changed. Then return the number of elements in nums which are not equal to val.

Consider the number of elements in nums which are not equal to val be k, to get accepted, you need to do the following things:

Change the array nums such that the first k elements of nums contain the elements which are not equal to val. The remaining elements of nums are not important as well as the size of nums.
Return k.

Input: nums = [3,2,2,3], val = 3
Output: 2, nums = [2,2,,]
Explanation: Your function should return k = 2, with the first two elements of nums being 2.
It does not matter what you leave beyond the returned k (hence they are underscores).

How to Update a React Native App Without Play Store (Using Google Drive + JSON)

Subham Kumar — Fri, 21 Nov 2025 03:12:38 +0000

Publishing an Android app on the Play Store takes time.
But what if you want to share your app immediately with your users and still push updates easily?

Good news:
You can build your own mini update system without any server — just using:

Google Drive
One JSON file
One APK file
A few lines of React Native code

In this article i will explains the whole process step-by-step in a clean, simple way.

Why Do We Need This?

When you distribute your app as an APK (e.g., via Google Drive, WhatsApp, Telegram), users will install it once.

But what happens when you release a new version?

They don’t automatically know.

So we create a small, smart system where:

You upload a new APK to Google Drive
You update a JSON file on Google Drive
Your app checks the JSON every time it opens
If a new version is available → show update popup
User downloads & installs the latest APK

This feels like a real update system — but without servers or Play Store.

How the System Works

Think of your app as a student.
Think of your JSON file as the teacher.

Every time the app opens, it asks:

Teacher, what’s the latest version?
The JSON replies:

{
  "latestVersion": "1.0.5",
  "downloadUrl": "YOUR_APK_LINK"
}

Your app compares:

Installed version (e.g., 1.0.0)
Latest version from JSON (e.g., 1.0.5)
If JSON version is higher → app shows an Update alert.

That’s it!

Step 1 — Create a JSON File on Google Drive

Make a file: update.json

{
  "latestVersion": "1.0.5",
  "changelog": "• Faster performance\n• Bug fixes\n• Small UI changes",
  "downloadUrl": "https://drive.google.com/uc?export=download&id=APK_FILE_ID",
  "forceUpdate": false
}

Upload to Google Drive → Right-click → Share →
Anyone with link → Viewer

Now convert the Drive URL:
Example Drive link:
https://drive.google.com/file/d/1abcXYZ/view?usp=sharing
Direct JSON link:
https://drive.google.com/uc?export=download&id=1abcXYZ

Save this — your app will fetch this URL.

Step 2 — Update Version in Your React Native App

Go to:
android/app/build.gradle
Update:

versionCode 2
versionName "1.0.1"

Always increase versionCode before building a new APK.

Step 3 — React Native Code to Check for Updates

Use this code in App.js or your root screen:

import { Alert, Linking } from "react-native";
import DeviceInfo from "react-native-device-info";
import { useEffect } from "react";

const CHECK_URL = "https://drive.google.com/uc?export=download&id=YOUR_JSON_ID";

export default function App() {

  useEffect(() => {
    checkForUpdate();
  }, []);

  async function checkForUpdate() {
    try {
      const response = await fetch(CHECK_URL);
      const data = await response.json();

      const current = DeviceInfo.getVersion();
      const latest = data.latestVersion;

      if (isUpdateNeeded(current, latest)) {
        Alert.alert(
          "Update Available",
          data.changelog,
          [
            { text: "Update", onPress: () => Linking.openURL(data.downloadUrl) },
            { text: "Later", style: "cancel" }
          ]
        );
      }
    } catch (err) {
      console.log("Failed to check update:", err);
    }
  }

  function isUpdateNeeded(current, latest) {
    const c = current.split('.').map(Number);
    const l = latest.split('.').map(Number);

    for (let i = 0; i < 3; i++) {
      if ((l[i] || 0) > (c[i] || 0)) return true;
      if ((l[i] || 0) < (c[i] || 0)) return false;
    }
    return false;
  }

  return (
    // Your app UI
  );
}

Step 4 — What Happens When New APK Is Released?

Whenever you upload a new APK:

Upload new APK to Google Drive
Get direct APK link:

https://drive.google.com/uc?export=download&id=APK_ID
**
Update JSON:
**

{
  "latestVersion": "1.0.6",
  "downloadUrl": "NEW_APK_LINK",
  "changelog": "New features added"
}

Once JSON is updated → All users get update popup next time they open the app.

How to Update JSON on Google Drive (Correct Method)

There are two correct ways, and you should pick only ONE:

*METHOD 1: Replace the JSON File (BEST & EASIEST)
*
If you replace the file using Google Drive’s “Manage versions”, then:

The public link stays the same

Your app will always get the newest JSON file

You don’t need to recreate the link ever again

Steps

Go to Google Drive
Right-click your JSON file
Manage versions
Click Upload New Version

Upload the updated JSON file

Done (The link remains same → app fetches updated JSON automatically)

*METHOD 2: Upload New JSON & Update the FILE_ID
*

If you upload a brand-new JSON file instead of replacing:

Google Drive creates a new File ID (ID changes)
Your app will continue reading the OLD JSON
You must update FILE_ID in the app

BTW I never used 2nd method.

Complete Guide: Setting up React Native CLI for Android on macOS (2026 Edition)

Subham Kumar — Thu, 30 Oct 2025 03:38:06 +0000

If you’re on macOS and want to develop React Native apps using the CLI (not Expo), this guide walks you through everything — from installing Java to running your first Android emulator and building an APK.

`🧩 Prerequisites

You’ll need:

macOS (Intel or Apple Silicon)

Node.js & npm installed

Terminal (zsh or bash)`

⚙️ Step 1 — Install Watchman

Watchman is a file watcher used by React Native to track code changes.

brew install watchman

Verify installation:

watchman --version

Step 2 — Install OpenJDK 17 (via Zulu)

brew install --cask zulu@17

React Native requires Java for Android builds.
The Zulu distribution is stable and widely recommended.

Verify:

 java -version

You should see:
openjdk version "17.0.17" 2025-10-21 LTS OpenJDK Runtime Environment Zulu17.62+17-CA

Step 3 — Install React Native CLI

npm install -g react-native-cli

react-native --version

Step 4 — Install Android Studio (Recommended)

Although you can install SDKs manually, using Android Studio is the easiest and most reliable way.

Option 1 (Recommended UI method)
Download from
👉 https://developer.android.com/studio

Choose the macOS (Apple Silicon or Intel) version.
Open .dmg → drag Android Studio to Applications.
Launch it → follow the Standard installation wizard.
It will install:
- Android SDK
- Platform Tools (adb)
- Emulator
- Build Tools

Accept all SDK licenses when prompted.

Option 2: Install Android Studio via Homebrew Cask (semi-automated)

You can install the Android Studio app itself using Homebrew, but you’ll still need to open it once to complete SDK & emulator setup.

Steps:

brew install --cask android-studio

Then open it once:

open -a "Android Studio"

Inside the Android Studio UI:

Choose Standard Installation

Accept all SDK licenses

Wait for SDK, Platform Tools, and Emulator to install

After that, you can manage SDKs & virtual devices (AVDs) from command line later

Step 5 — Confirm SDK Location

Open Android Studio →
Preferences → Appearance & Behavior → System Settings → Android SDK

You’ll see something like:
/Users/<your-username>/Library/Android/sdk
That’s your $ANDROID_HOME.

🌿 Step 6 — Add Environment Variables

Open Terminal and run:

echo 'export ANDROID_HOME=$HOME/Library/Android/sdk' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/emulator' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/platform-tools' >> ~/.zshrc
echo 'export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin' >> ~/.zshrc
source ~/.zshrc

Verify:

echo $ANDROID_HOME
adb --version
sdkmanager --list | head

Step 7 — Create an Android Emulator

Open Android Studio → Tools → Device Manager → Create Device
Then:

Select a Pixel device (e.g. Pixel 7)

Choose a system image (Android 13 or 14 recommended)

Download → Next → Finish

Click ▶️ (Play) to launch the emulator

Once it boots up, verify via terminal:
adb devices
✅ You should see:
emulator-5554 device
Step 8 — Run Your React Native App
Inside your project folder:

cd your-project
npx react-native run-android

This will:

Build the app using Gradle

Install it on your running emulator

Launch it automatically 🎉

To generate an APK file:
cd android ./gradlew assembleDebug

You’ll find your APK here:
android/app/build/outputs/apk/debug/app-debug.apk

You can install it on any Android phone:
adb install app-debug.apk

A Curated Guide to Frontend System Design: Essential Concepts and Topics

Subham Kumar — Sun, 07 Jul 2024 10:50:56 +0000

In today's tech landscape, mastering system design is crucial for cracking coding interviews and advancing your career. This guide covers key areas and concepts essential for frontend system design.

But thinking of what to study in system design is very confusing there are lots of thing that comes inside it.

so i google it and created a list.

Mastering Frontend System Design: A Comprehensive Guide

In today's tech landscape, mastering system design is crucial for cracking coding interviews and advancing your career. This guide covers key areas and concepts essential for frontend system design.

Key Areas in System Design

Networking
- How the Web Works: Understand the fundamentals of how data travels across the web.
- Communication Protocols: Learn about HTTP, HTTPS, and other protocols that enable web communication.
- REST APIs: Explore REST principles for building scalable web services.
- GraphQL: Discover how GraphQL allows for more efficient and flexible data queries.
- gRPC: Investigate gRPC for high-performance remote procedure calls.
Communication
- Short Polling: Poll the server at regular intervals for updates.
- Long Polling: Maintain a connection until the server has new information.
- Web Sockets: Enable real-time, bidirectional communication between client and server.
- Server-Side Events: Push updates from the server to the client over a single connection.
- Web Hooks: Set up HTTP callbacks to notify external systems of events.
Security
- XSS (Cross-Site Scripting): Protect against malicious scripts injected into web pages.
- iFrame Protection: Prevent clickjacking and other iFrame-based attacks.
- Security Headers: Use HTTP headers to enhance security measures.
- Client-Side Security: Safeguard data and interactions on the client side.
- Secure Communication (HTTPS): Encrypt data in transit to protect against interception.
- Dependency Security: Manage and secure third-party dependencies.
- Compliance and Regulations: Adhere to legal and industry standards.
- Input Validation and Sanitization: Ensure input data is clean and safe.
- SSRF (Server-Side Request Forgery): Mitigate attacks where the server makes unintended requests.
- Feature Policy: Control which web features can be used in your application.
- Server-Side JavaScript Injection: Prevent unauthorized code execution on the server.
- SRI (Subresource Integrity): Verify the integrity of resources loaded externally.
- CORS (Cross-Origin Resource Sharing): Manage cross-origin requests securely.
- CSRF (Cross-Site Request Forgery): Protect against unauthorized actions on behalf of a user.
Testing
- Unit and Integration Testing: Test individual units and their integration.
- E2E and Automation Testing: Perform end-to-end tests to simulate real user interactions.
- A/B Testing: Compare two versions of a webpage to determine which performs better.
- Performance Testing: Measure the responsiveness and stability of your application.
- Test-Driven Development: Write tests before coding to ensure functionality.
- Security Testing: Assess the security of your application against vulnerabilities.
Performance
- Performance Overview: Understand the key aspects of web performance.
- Performance Importance: Learn why performance matters for user experience.
- Performance Monitoring: Continuously track performance metrics.
- Performance Tools: Use tools to diagnose and fix performance issues.
- Rendering Patterns: Optimize how content is rendered on the screen.
Database & Caching
- Local Storage: Store data locally within the user's browser.
- Session Storage: Keep data available for the duration of the page session.
- Cookie Storage: Use cookies to store small amounts of data persistently.
- IndexedDB: Utilize a low-level API for large-scale storage in the browser.
- Normalization: Structure your database to reduce redundancy.
- HTTP Caching: Cache HTTP responses to improve load times.
- Service Worker Caching: Use service workers for offline capabilities.
- API Caching: Cache API responses to reduce load on servers.
- State Management: Manage the state of your application efficiently.
Logging and Monitoring
- Telemetry: Collect and analyze data about application usage and performance.
- Alerting: Set up alerts for critical issues and performance degradation.
- Fixing Issues: Identify and resolve issues based on logs and monitoring data.
Accessibility
- Keyboard Accessibility: Ensure all functionality is accessible via keyboard.
- Screen Reader: Support screen readers for visually impaired users.
- Focus Management: Manage focus order for a seamless user experience.
- Color Contrast: Maintain sufficient contrast for readability.
- Accessibility Tools: Use tools to identify and fix accessibility issues.
- Fixing Accessibility Issues: Implement fixes to improve accessibility compliance.

Detailed Design Concepts

Low-Level Design (LLD)

Component Design: Design reusable and modular UI components.
Config-Driven UI: Create UIs driven by configuration data.
Shimmer UI: Implement loading animations to enhance user experience.
Routing & Protected Routes: Manage navigation and protect routes in your app.
State Management + Libraries: Handle application state using libraries like Redux.
Multi-Language Support: Support multiple languages in your application.
Infinite Scroll: Load content dynamically as the user scrolls.
Accordion: Implement collapsible sections for content organization.
Nested Comments: Design a system for threaded comments.
Image Slider: Create interactive image sliders for media content.
Pagination: Divide content into pages for better navigation.
Real-Time Updates: Push updates to the UI in real time.
Live Chat: Implement a live chat feature.
Search: Build an efficient search functionality.

High-Level Design (HLD)

Photo Sharing App (Instagram): Design a scalable photo-sharing platform.
Ecommerce App (Amazon, Flipkart): Architect an online shopping system.
News Media Feed (X): Create a news feed system.
Video Streaming (Netflix): Design a video streaming service.
Music Streaming (Spotify): Architect a music streaming platform.
Live Commentary (CricBuzz): Build a system for live sports commentary.
Email Client (Gmail): Design an email client with advanced features.
Google Docs: Create a collaborative document editing tool.
Google Sheets: Architect a collaborative spreadsheet application.
Diagram Tools (Excalidraw): Design an interactive diagramming tool.
Cab Services (Uber, Ola, Rapido): Build a ride-hailing service.
Analytics Dashboard (Google Analytics): Create an analytics dashboard.
Edtech Platform (Bloom Tuition): Design an online education platform.

Conclusion

System design is a vast field, but breaking it down into these categories can make it more manageable. Dive into each area, understand the core concepts, and practice designing systems. Happy learning!

In upcoming articles, I will delve deeper into each topic and provide detailed explanations.

If there are any topics I haven't listed, please let me know in the comments, and I will update the article accordingly.