Forem: Kashaf Abdullah

Software with a Brain: Inside Agent-Based Intelligent Systems

Kashaf Abdullah — Fri, 01 May 2026 19:14:35 +0000

What is an Agent Based Intelligent System?

"Agent Based Intelligent Systems are computer systems where autonomous software programs (agents) work together to solve complex problems by sensing their environment, making decisions, and taking actions."

Real Life Analogy 🌟

Think of it like a restaurant kitchen:

Each chef (agent) works independently
They sense orders (environment)
Communicate with each other
Coordinate to prepare meals
Adapt when problems arise

Part 2: Core Concepts with Examples

1. What is an Agent?

Definition: An agent is a computer program that can perceive its environment through sensors and act upon that environment through actuators.

Key Properties of Agents:

Autonomy: Operates without human intervention
Reactivity: Responds to environment changes
Proactiveness: Takes initiative to achieve goals
Social ability: Communicates with other agents

2. Environment Types Explained

A. Fully Observable vs Partially Observable

Fully Observable (Agent sees everything):

Chess Game: All pieces visible
TicTacToe: Complete board visible
Calculator: All inputs visible

Partially Observable (Agent has limited info):

Poker Game: Can't see opponent's cards
Self-Driving Car: Can't see around corners
Stock Market: Don't know others' strategies

Blog Tip: Most real-world problems are partially observable, making them perfect for agent-based solutions.

B. Deterministic vs Stochastic

Deterministic (Predictable outcomes):

Calculator: 2+2 always = 4
Vending Machine: Insert money → get snack
Traffic Light: Red → Stop, Green → Go

Stochastic (Random/Uncertain outcomes):

Weather Prediction: 70% chance of rain
Dice Roll: Random number 1-6
Stock Market: Can't predict exactly

C. Static vs Dynamic

Static (Environment doesn't change):

Crossword Puzzle: Same until solved
Sudoku: Numbers stay fixed
Written Exam: Questions don't change

Dynamic (Environment constantly changes):

Traffic System: Cars keep moving
Live Sports: Game situations change
Social Media Feed: New posts appear

D. Discrete vs Continuous

Discrete (Limited states):

Chess: 64 squares, finite positions
ON/OFF Switch: Only 2 states
ATM Menu: Limited options

Continuous (Infinite states):

Drone Flight: Infinite positions
Car Speed: 0 to 200+ km/h
Room Temperature: Any value possible

3. The PEAS Model (Agent Design Framework)

PEAS = Performance, Environment, Actuators, Sensors

Example 1: Amazon Delivery Drone

Performance: Deliver package in under 30 min
Environment: Airspace, weather, obstacles
Actuators: Propellers, camera, gripper
Sensors: GPS, camera, wind sensor

Example 2: ChatGPT

Performance: Provide accurate, helpful responses
Environment: User conversation context
Actuators: Text generation, API calls
Sensors: User input text, history

Example 3: Tesla Self-Driving Car

Performance: Safe navigation, no accidents
Environment: Roads, traffic, pedestrians
Actuators: Steering, brakes, accelerator
Sensors: Cameras, radar, LiDAR

Part 3: Types of Agents (Detailed with Examples)

1. Simple Reflex Agents

"Act based on current situation only"

IF [condition] THEN [action]

Examples:

Roomba Vacuum: "If dirt detected → clean"
Smoke Detector: "If smoke → alarm"
Basic Traffic Light: "If timer expired → change"

Code Example:

class SimpleReflexAgent:
    def act(self, sensor_input):
        if sensor_input == "dirt":
            return "clean"
        elif sensor_input == "wall":
            return "turn"
        else:
            return "move_forward"

Limitation: No memory, no learning

2. Model Based Agents

"Keep track of the world state"

Examples:

GPS Navigation: Remembers your route history
Smart Home System: Knows when you usually return
Game AI: Remembers your past moves

Real Scenario:

Your smart thermostat:

Remembers you come home at 6 PM
Knows outside temperature
Adjusts accordingly
Learns your preferences

3. Goal Based Agents

"Achieve specific objectives"

Examples:

Delivery Robot: Goal = deliver package
Chess AI: Goal = checkmate opponent
Trading Bot: Goal = maximize profit

How It Works:

Goal: Reach Destination in 30 mins

Options:

Highway → 25 mins ✓ Achieves goal
Local road → 40 mins ✗ Fails goal
Shortcut → 20 mins ✓ Achieves goal

Agent picks best option for goal achievement

4. Utility Based Agents

"Maximize happiness/satisfaction"

Examples:

Google Maps: Shows fastest AND fuel efficient route
Amazon: Suggests products you'll likely buy
Netflix: Recommends shows you'll enjoy most

Utility Calculation:

Route Options:
├── Route A: 20 mins, ₹50 fuel (Utility = 80/100)
├── Route B: 15 mins, ₹100 fuel (Utility = 75/100)
└── Route C: 25 mins, ₹30 fuel (Utility = 90/100) ✓ BEST

Agent picks highest utility = Route C

5. Learning Agents

"Improve from experience"

Examples:

ChatGPT: Gets better with more conversations
Spotify: Learns your music taste
AlphaGo: Learns from millions of games

Learning Process:

Try action → Get result
Remember outcome
Adjust strategy
Try again
Improve over time

Part 4: Multi-Agent Systems (MAS)

What is MAS?

"Multiple agents working together or competing to solve complex problems"

Real-World MAS Examples:

1. Uber/Ola System

├── Rider Agent → Wants cheap ride
├── Driver Agent → Wants high fare
├── System Agent → Matches both
└── Payment Agent → Handles transaction

2. Amazon Warehouse

├── Picking Robots → Get products
├── Packing Robots → Package items
├── Labeling Robots → Print labels
└── Shipping Robots → Load trucks

3. Smart City Traffic

├── Traffic Light Agent 1 → Main Street
├── Traffic Light Agent 2 → Side Street
├── Emergency Agent → Ambulance priority
└── Monitoring Agent → Oversee everything

Agent Communication

How Agents Talk:

Message Types:

INFORM → "Temperature is 30°C"
REQUEST → "Please move left"
QUERY → "What's your position?"
AGREE → "Okay, moving left"
REFUSE → "Can't move, blocked"

Communication Protocol Example (FIPA-ACL):

<message>
  <sender>traffic_light_1</sender>
  <receiver>traffic_light_2</receiver>
  <performative>inform</performative>
  <content>heavy_traffic_detected</content>
</message>

Coordination Mechanisms

1. Cooperation (Working Together)

Swarm Robots Cleaning:

├── Robot 1: Cleans left side
├── Robot 2: Cleans right side
├── Robot 3: Empties dust bins
└── All share map information

2. Competition (Rivalry)

E-commerce Bidding:

├── Buyer Agent 1: Bid ₹1000
├── Buyer Agent 2: Bid ₹1500
├── Seller Agent: Wants highest price
└── Auctioneer Agent: Manages bids

3. Negotiation (Reaching Agreement)

Salary Negotiation Bot:

├── Employee Agent: Wants ₹80,000
├── Company Agent: Offers ₹60,000
├── HR Agent: Suggests ₹70,000
└── Both agree on ₹70,000

The Future: Where Are We Headed?

Next 5 Years

├── 🤖 Personal AI Agents
│   Your own digital twin managing your life
│
├── 🏘️ Smart Cities
│   Thousands of agents coordinating traffic,
│   energy, waste, and emergencies
│
├── 🧬 Healthcare Swarms
│   Nano-agents monitoring your body,
│   detecting diseases early
│
├── 💼 Autonomous Companies
│   Businesses run entirely by agent
│   negotiations and transactions

Next 10 Years

├── 🌐 Global Agent Internet
│   Agents from different systems,
│   countries, and companies talking globally
│
├── 🧠 Human-Agent Teams
│   Humans and AI agents working as equals
│
├── 🪐 Space Exploration
│   Agent swarms exploring Mars and beyond

Conclusion

Agent-Based Intelligent Systems are how we'll build the intelligent, automated, and adaptive world of tomorrow by creating software that thinks, works, and collaborates like living organisms.

Whether it's your Roomba vacuum, Google Maps, or self-driving cars – agents are already everywhere. And they're only getting smarter.

Written by Kashaf Abdullah

Software Engineer | MERN Stack | Web Development

How WhatsApp Shows "Typing..." Instantly: The Magic Behind Real-time Indicators

Kashaf Abdullah — Mon, 27 Apr 2026 18:31:25 +0000

Introduction

Have you ever wondered how WhatsApp shows "typing..." the moment someone starts typing? Is it sending a request for every single key press? The answer might surprise you! In this deep dive, we'll explore the fascinating world of real-time communication and learn how to build our own WhatsApp-like typing indicator using the MERN stack.

How WhatsApp Actually Works

The Illusion of Instantaneity

WhatsApp's typing indicator feels instant, but it's actually a clever optimization. When you start typing:

First key press: WhatsApp waits a tiny moment (about 300ms)
Sends "typing started" signal (not on every key press!)
Continuous typing: No additional signals needed
Pause detected: Waits 1–2 seconds, then sends "typing stopped"
Message sent: Immediately sends "stopping typing" signal

Why Not Send Every Keystroke?

Sending a request for every key press would be incredibly inefficient:

Network overload: Too many requests
Battery drain: Constant network activity
Server load: Unnecessary processing
Costly: More data usage

The Secret Sauce: Debouncing

What is Debouncing?

Debouncing is a programming technique that limits the rate at which a function is executed. Think of it like a thoughtful friend who waits for you to finish speaking before responding, rather than interrupting after every word.

Simple Analogy

Imagine an elevator:

People keep pressing the button
Elevator doesn't move with every press
Waits for a pause (debounce period)
Then moves efficiently

JavaScript Debounce Function

function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    // Cancel the previous timeout
    clearTimeout(timeoutId);

    // Set a new timeout
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

Building Our Own WhatsApp Clone

Let's create a complete MERN stack application that demonstrates typing indicators with proper debouncing.

Architecture Overview

┌─────────────────────────────────────────────────────────────┐
│                   REAL-TIME CHAT ARCHITECTURE                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌──────────────┐     ┌─────────────────┐     ┌──────────┐ │
│  │  CLIENT 1    │     │                 │     │ CLIENT 2 │ │
│  │  (User A)    │     │  WEBSOCKET      │     │ (User B) │ │
│  │              │     │    SERVER       │     │          │ │
│  │ ┌──────────┐ │     │ ┌─────────────┐ │     │          │ │
│  │ │ React    │ │     │ │ Node.js/    │ │     │          │ │
│  │ │ App      │ │◄───►│ │ Express     │ │◄───►│ React    │ │
│  │ │          │ │     │ │ Socket.io   │ │     │ App      │ │
│  │ └──────────┘ │     │ └─────────────┘ │     │          │ │
│  │     ▲        │     │        ▲        │     │          │ │
│  │     │        │     │        │        │     │          │ │
│  │ Typing Event │     │  Broadcast to   │     │ Typing   │ │
│  │              │     │   Other Clients │     │ Indicator│ │
│  └──────────────┘     └─────────────────┘     └──────────┘ │
│          │                          │                      │
│          └──────────────────────────┘                      │
│                 WebSocket Connection                        │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Flow:

User A types → React detects input
Send "typing" event via WebSocket
Server receives and validates
Broadcast to all other clients in chat
User B sees "User A is typing..."
User A stops typing → Send "stopped" event
Server broadcasts removal of indicator

1. Backend Implementation

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');
const cors = require('cors');

const app = express();
app.use(cors());

const server = http.createServer(app);
const io = socketIo(server, {
  cors: { origin: "http://localhost:3000" }
});

// Store active typing users
const typingStatus = new Map();

io.on('connection', (socket) => {
  console.log('🔗 New connection:', socket.id);

  // Join a specific chat room
  socket.on('join_chat', ({ chatId, userId }) => {
    socket.join(chatId);
    console.log(`👤 ${userId} joined ${chatId}`);
  });

  // Handle typing indicators with debouncing logic
  socket.on('typing_event', ({ chatId, userId, isTyping }) => {
    const key = `${chatId}_${userId}`;

    if (isTyping) {
      // User started typing
      typingStatus.set(key, true);
      socket.to(chatId).emit('typing_indicator', {
        userId,
        isTyping: true,
        timestamp: Date.now()
      });
    } else {
      // User stopped typing
      if (typingStatus.has(key)) {
        typingStatus.delete(key);
        socket.to(chatId).emit('typing_indicator', {
          userId,
          isTyping: false,
          timestamp: Date.now()
        });
      }
    }
  });

  // Handle messages
  socket.on('send_message', ({ chatId, userId, message }) => {
    // Clear typing status
    const key = `${chatId}_${userId}`;
    if (typingStatus.has(key)) {
      typingStatus.delete(key);
      socket.to(chatId).emit('typing_indicator', {
        userId,
        isTyping: false
      });
    }

    // Broadcast message
    io.to(chatId).emit('new_message', {
      userId,
      message,
      timestamp: new Date(),
      chatId
    });
  });

  // Cleanup on disconnect
  socket.on('disconnect', () => {
    console.log('🔌 Disconnected:', socket.id);
  });
});

const PORT = 5000;
server.listen(PORT, () => {
  console.log(`🚀 Server running on port ${PORT}`);
});

2. Frontend Implementation

import React, { useState, useEffect, useRef, useCallback } from 'react';
import io from 'socket.io-client';
import './App.css';

const socket = io('http://localhost:5000');

function App() {
  const [message, setMessage] = useState('');
  const [messages, setMessages] = useState([]);
  const [typingUsers, setTypingUsers] = useState(new Set());
  const [userId] = useState(`user_${Date.now()}`);
  const [chatId] = useState('chat_123');

  // Refs for debouncing
  const typingTimeoutRef = useRef(null);
  const isTypingRef = useRef(false);

  useEffect(() => {
    // Join chat room
    socket.emit('join_chat', { chatId, userId });

    // Listen for messages
    socket.on('new_message', (data) => {
      setMessages(prev => [...prev, data]);
    });

    // Listen for typing indicators
    socket.on('typing_indicator', (data) => {
      if (data.userId !== userId) {
        if (data.isTyping) {
          setTypingUsers(prev => new Set(prev).add(data.userId));
        } else {
          setTypingUsers(prev => {
            const newSet = new Set(prev);
            newSet.delete(data.userId);
            return newSet;
          });
        }
      }
    });

    return () => {
      socket.off('new_message');
      socket.off('typing_indicator');
    };
  }, [chatId, userId]);

  // Custom debounce hook
  const useDebounce = (callback, delay) => {
    const timeoutRef = useRef(null);

    return useCallback((...args) => {
      if (timeoutRef.current) {
        clearTimeout(timeoutRef.current);
      }

      timeoutRef.current = setTimeout(() => {
        callback(...args);
      }, delay);
    }, [callback, delay]);
  };

  // Debounced typing handler
  const debouncedTypingStopped = useDebounce(() => {
    if (isTypingRef.current) {
      socket.emit('typing_event', { chatId, userId, isTyping: false });
      isTypingRef.current = false;
    }
  }, 1500); // 1.5 second delay

  const handleTyping = (e) => {
    const value = e.target.value;
    setMessage(value);

    // User is typing
    if (value.length > 0) {
      if (!isTypingRef.current) {
        // First character - send typing started immediately
        socket.emit('typing_event', { chatId, userId, isTyping: true });
        isTypingRef.current = true;
      }

      // Reset the debounce timer
      debouncedTypingStopped();
    } else {
      // Input is empty
      if (isTypingRef.current) {
        socket.emit('typing_event', { chatId, userId, isTyping: false });
        isTypingRef.current = false;
      }
    }
  };

  const sendMessage = () => {
    if (message.trim()) {
      socket.emit('send_message', { chatId, userId, message });
      setMessage('');

      // Clear typing status
      if (isTypingRef.current) {
        socket.emit('typing_event', { chatId, userId, isTyping: false });
        isTypingRef.current = false;
      }
    }
  };

  return (
    <div className="app-container">
      <header className="app-header">
        <h1>WhatsApp Typing Indicator Demo</h1>
        <p className="subtitle">Understanding real-time communication with debouncing</p>
      </header>

      <div className="content-wrapper">
        <div className="explanation-section">
          <h2>How It Works</h2>
          <div className="workflow">
            <div className="step">
              <div className="step-number">1</div>
              <div className="step-content">
                <h3>First Keystroke</h3>
                <p>Immediate "typing started" signal sent</p>
              </div>
            </div>

            <div className="step">
              <div className="step-number">2</div>
              <div className="step-content">
                <h3>Continuous Typing</h3>
                <p>No additional signals - debouncing in action</p>
              </div>
            </div>

            <div className="step">
              <div className="step-number">3</div>
              <div className="step-content">
                <h3>Pause Detection</h3>
                <p>Waits 1.5 seconds after last keystroke</p>
              </div>
            </div>

            <div className="step">
              <div className="step-number">4</div>
              <div className="step-content">
                <h3>Typing Stopped</h3>
                <p>Sends "typing stopped" signal</p>
              </div>
            </div>
          </div>
        </div>

        <div className="chat-section">
          <div className="chat-container">
            <div className="chat-header">
              <h2>Group Chat</h2>
              <p className="user-id">You: {userId}</p>

              {typingUsers.size > 0 && (
                <div className="active-typing">
                  <span className="typing-text">
                    {Array.from(typingUsers).map(id => 
                      id.replace('user_', 'User ')
                    ).join(', ')}
                    {typingUsers.size === 1 ? ' is typing...' : ' are typing...'}
                  </span>
                  <div className="typing-animation">
                    <div className="dot"></div>
                    <div className="dot"></div>
                    <div className="dot"></div>
                  </div>
                </div>
              )}
            </div>

            <div className="messages-area">
              {messages.map((msg, index) => (
                <div 
                  key={index} 
                  className={`message-bubble ${
                    msg.userId === userId ? 'sent' : 'received'
                  }`}
                >
                  <div className="message-sender">
                    {msg.userId === userId ? 'You' : msg.userId.replace('user_', 'User ')}
                  </div>
                  <div className="message-content">{msg.message}</div>
                  <div className="message-time">
                    {new Date(msg.timestamp).toLocaleTimeString([], {
                      hour: '2-digit',
                      minute: '2-digit'
                    })}
                  </div>
                </div>
              ))}
            </div>

            <div className="input-section">
              <input
                type="text"
                value={message}
                onChange={handleTyping}
                onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
                placeholder="Type a message..."
                className="message-input"
              />
              <button onClick={sendMessage} className="send-button">
                Send
              </button>
            </div>
          </div>

          <div className="debug-panel">
            <h3>Debug Information</h3>
            <div className="debug-info">
              <p><strong>Your Status:</strong> 
                <span className={isTypingRef.current ? 'typing' : 'not-typing'}>
                  {isTypingRef.current ? ' Typing...' : ' Not typing'}
                </span>
              </p>
              <p><strong>Active Typers:</strong> {typingUsers.size}</p>
              <p><strong>Messages Sent:</strong> {messages.length}</p>
              <p><strong>Chat Room:</strong> {chatId}</p>
            </div>
          </div>
        </div>
      </div>

      <footer className="app-footer">
        <p>Built with React, Node.js, and Socket.io | Demonstrating real-time typing indicators with debouncing</p>
      </footer>
    </div>
  );
}

export default App;

3. CSS Styling

/* App.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.app-header {
  text-align: center;
  color: white;
  margin-bottom: 40px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.app-header h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #fff, #a8edea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  font-size: 1.1rem;
  opacity: 0.9;
}

.content-wrapper {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 30px;
  margin-bottom: 40px;
}

.explanation-section {
  background: white;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.explanation-section h2 {
  color: #333;
  margin-bottom: 25px;
  font-size: 1.8rem;
}

.workflow {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 15px;
  transition: transform 0.3s ease;
}

.step:hover {
  transform: translateX(10px);
  background: #e9ecef;
}

.step-number {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  flex-shrink: 0;
}

.step-content h3 {
  color: #333;
  margin-bottom: 5px;
  font-size: 1.1rem;
}

.step-content p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
}

.chat-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.chat-container {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  height: 500px;
}

.chat-header {
  background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  color: white;
  padding: 25px;
  position: relative;
}

.chat-header h2 {
  margin-bottom: 10px;
  font-size: 1.6rem;
}

.user-id {
  opacity: 0.9;
  font-size: 0.9rem;
}

.active-typing {
  position: absolute;
  bottom: 15px;
  left: 25px;
  right: 25px;
  background: rgba(255, 255, 255, 0.15);
  padding: 10px 15px;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.typing-text {
  font-size: 0.9rem;
}

.typing-animation {
  display: flex;
  gap: 4px;
}

.dot {
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typing {
  0%, 60%, 100% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-5px);
  }
}

.messages-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f0f2f5;
}

.message-bubble {
  max-width: 70%;
  margin-bottom: 15px;
  padding: 12px 16px;
  border-radius: 18px;
  position: relative;
  animation: messageAppear 0.3s ease-out;
}

@keyframes messageAppear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.message-bubble.sent {
  background: #dcf8c6;
  margin-left: auto;
  border-bottom-right-radius: 5px;
}

.message-bubble.received {
  background: white;
  margin-right: auto;
  border-bottom-left-radius: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.message-sender {
  font-size: 0.75rem;
  font-weight: 600;
  color: #075e54;
  margin-bottom: 4px;
}

.message-content {
  font-size: 0.95rem;
  line-height: 1.4;
  margin-bottom: 6px;
}

.message-time {
  font-size: 0.7rem;
  text-align: right;
  color: rgba(0, 0, 0, 0.5);
}

.input-section {
  padding: 20px;
  background: #f0f0f0;
  display: flex;
  gap: 10px;
  border-top: 1px solid #ddd;
}

.message-input {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid #ddd;
  border-radius: 25px;
  font-size: 1rem;
  outline: none;
  transition: all 0.3s;
}

.message-input:focus {
  border-color: #128c7e;
  box-shadow: 0 0 0 3px rgba(18, 140, 126, 0.1);
}

.send-button {
  background: linear-gradient(135deg, #075e54 0%, #128c7e 100%);
  color: white;
  border: none;
  border-radius: 25px;
  padding: 0 30px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.send-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(7, 94, 84, 0.3);
}

.send-button:active {
  transform: translateY(0);
}

.debug-panel {
  background: white;
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.debug-panel h3 {
  color: #333;
  margin-bottom: 20px;
  font-size: 1.3rem;
}

.debug-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.debug-info p {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 10px;
  font-size: 0.9rem;
}

.typing {
  color: #128c7e;
  font-weight: 600;
}

.not-typing {
  color: #666;
}

.app-footer {
  text-align: center;
  color: white;
  padding: 20px;
  opacity: 0.8;
  font-size: 0.9rem;
  margin-top: 40px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }

  .app-header h1 {
    font-size: 2rem;
  }

  .chat-container {
    height: 400px;
  }

  .debug-info {
    grid-template-columns: 1fr;
  }
}

Key Technical Concepts Explained

1. WebSockets vs HTTP Requests

HTTP: Request-response, not suitable for real-time
WebSockets: Persistent connection, bidirectional
Socket.io: Library that handles WebSockets with fallbacks

2. Debouncing Implementation

// The core debouncing logic
let typingTimer;

function onTyping() {
  clearTimeout(typingTimer); // Reset timer

  if (!isTyping) {
    sendTypingStarted(); // First keystroke
  }

  typingTimer = setTimeout(() => {
    sendTypingStopped(); // After pause
  }, 1500);
}

3. State Management

Frontend: Tracks local typing state
Backend: Broadcasts to other users
Real-time sync: Immediate updates across clients

4. Optimization Techniques

Batching: Group multiple operations
Throttling: Limit rate of function calls
Memoization: Cache expensive operations

Performance Considerations

Network Efficiency: Debouncing reduces data transfer by 90%+
Battery Life: Fewer network calls save battery
Server Load: Reduced processing overhead
User Experience: Instant feedback without lag

Common Pitfalls and Solutions

1. Flickering Indicators

Problem: Indicator appears/disappears rapidly
Solution: Increase debounce delay slightly

2. Missed "Stopped Typing"

Problem: Sometimes indicator doesn't disappear
Solution: Send "stopped" on message send and input clear

3. Multiple Users Typing

Problem: Indicators overlap or conflict
Solution: Track each user separately, show combined status

Advanced Features (Like WhatsApp)

Read Receipts: Similar pattern with debouncing
Online Status: Heartbeat mechanism
Message Encryption: End-to-end encryption
Media Upload: Progress indicators

Testing the Application

Setup Instructions:

Backend:

mkdir whatsapp-typing-backend
cd whatsapp-typing-backend
npm init -y
npm install express socket.io cors
node server.js

Frontend:

npx create-react-app whatsapp-typing-frontend
cd whatsapp-typing-frontend
npm install socket.io-client
npm start

Testing Scenarios:

Single user typing: Indicator appears instantly
Pause and resume: Indicator reappears
Multiple users: All indicators work independently
Network issues: Graceful degradation

Conclusion

WhatsApp's typing indicator is a masterpiece of real-time engineering that combines:

Debouncing for efficiency
WebSockets for instant communication
Smart state management for accurate indicators
Optimization for performance and battery life

Whether you're building the next WhatsApp clone or adding real-time features to your application, understanding these principles will help you create responsive, efficient, and user-friendly experiences.

Written by Kashaf Abdullah

Software Engineer | MERN Stack | Web Development

What is an LLM? (And Should You Be Scared of It?)

Kashaf Abdullah — Sun, 26 Apr 2026 10:46:03 +0000

Have you ever talked to ChatGPT? Or asked Google Gemini a question? Or noticed how WhatsApp suggests the next word you want to type?

That's LLM in action.

But what exactly is an LLM? Is it magic? Is it a robot? Is it going to take your job?

Let me explain in the simplest way possible.

First: What Does LLM Stand For?

LLM = Large Language Model

Large → Very big (millions or billions of parameters)
Language → Words, sentences, code, any form of communication
Model → A program that has learned from data

In plain English:

An LLM is an AI program that understands language and can write like a human.

Why Is It Called "Large"?

Because to train an LLM, you feed it a huge chunk of the internet:

Wikipedia
Books
Reddit threads
GitHub code
News articles
Social media posts

So, an LLM has read way more than you or I ever will 😅

What Can an LLM Actually Do? (Real Examples)

Explain your homework (without cheating — just helping you understand)
Write a professional email
Fix a bug in your code
Write a poem, story, or song lyrics
Simplify a complex topic (like I'm doing right now)
Translate between languages

Is an LLM Perfect?

No. LLMs can be wrong. Sometimes very confidently wrong.

Good things (Pros):

Super fast
Gives you many options
Works 24/7 without getting tired

Bad things (Cons):

Sometimes gives wrong answers with full confidence (called hallucination)
Has no real feelings or understanding
Limited creativity — it remixes what it has seen, not truly invents

Will an LLM Take Your Job?

Simple answer: No.

But a person using an LLM might replace a person refusing to use one.

Think about calculators: Did calculators replace mathematicians? No. They made them faster.

LLMs are the same. They are your assistant, not your boss.

10 Real-Life Examples of LLMs in Action

Here are real-life, easy-to-understand examples of LLMs (like ChatGPT, Claude, etc.) in action. Each example shows exactly what you can ask, what the LLM does, and why it's helpful.

Example 1: Writing an Email

You type (Prompt):

"Write a polite email to my professor asking for a 2-day extension on my assignment because I was sick."

LLM responds:

Subject: Request for 2-Day Extension

Dear Professor Smith,

I hope you're doing well. I wanted to respectfully request a 2-day extension on the assignment due tomorrow. I was unwell with a fever over the weekend and couldn't complete the work on time.

I understand if this causes any inconvenience, and I truly appreciate your understanding.

Thank you for your consideration.

Best regards,
[Your Name]

Why this is useful: You don't stare at a blank page. Just edit your name and send.

Example 2: Explaining a Complex Topic Simply

You type:

"Explain quantum physics to me like I'm a 10-year-old."

LLM responds:

Imagine you have a magic coin. Normally, a coin lands on Heads or Tails. But in quantum physics, that coin can be both Heads and Tails at the same time — until you look at it. The moment you look, it chooses one. That's how tiny particles behave. Strange, right?

Why this is useful: You understand hard topics without reading lengthy textbooks.

Example 3: Fixing Code (For Developers)

You type:

"Here's my Python code to add numbers, but it's giving an error. Fix it: def add(a b): return a + b"

LLM responds:

The error is missing a comma between a and b. Here's the fix:

def add(a, b):
return a + b

Why this is useful: You save hours of debugging. Great for students and professionals.

Example 4: Creating a Meal Plan

You type:

"Give me a 3-day simple vegetarian meal plan for weight loss."

LLM responds:

Day 1

Breakfast: Oatmeal with berries
Lunch: Chickpea salad
Dinner: Grilled vegetables with quinoa

Day 2

Breakfast: Greek yogurt with honey
Lunch: Lentil soup
Dinner: Stir-fried tofu with broccoli

Day 3

Breakfast: Smoothie (banana + spinach + almond milk)
Lunch: Brown rice with beans
Dinner: Stuffed bell peppers

Why this is useful: No more "what should I eat?" confusion. Instant plan.

Example 5: Writing Social Media Captions

You type:

"Write 3 funny Instagram captions for a photo of my dog sleeping."

LLM responds:

"Professional mattress tester. 10/10 would recommend."
"My spirit animal requires 20 hours of sleep. Back off."
"Plot twist: I'm the one paying rent. He's just napping."

Why this is useful: You get creative ideas instantly. No more caption writer's block.

Example 6: Summarizing a Long Article

You type:

(paste a long 2000-word article here, then say) "Summarize this in 3 bullet points."

LLM responds:

Climate change is causing sea levels to rise faster than expected
Coastal cities need new infrastructure within 10 years
Renewable energy adoption is growing but still too slow

Why this is useful: You save hours of reading. Perfect for students and busy professionals.

Example 7: Translating Languages

You type:

"Translate 'How much does this cost?' into Spanish, French, and Japanese."

LLM responds:

Spanish: ¿Cuánto cuesta esto?
French: Combien ça coûte ?
Japanese: これはいくらですか？ (Kore wa ikura desu ka?)

Why this is useful: Travel, business, or homework — instant translation.

Example 8: Generating Ideas (Brainstorming)

You type:

"Give me 5 startup ideas for college students with no money."

LLM responds:

Tutoring service — Teach younger students any subject you're good at
Resume reviews — Help classmates polish their resumes for $5
Social media management — Run Instagram for local small businesses
Notes selling — Sell your well-organized class notes to juniors
Task rabbit — Do small tasks (laundry, grocery pickup) for busy students

Why this is useful: You get a jumpstart on creativity. No more blank-brain syndrome.

Example 9: Roleplay / Practice Interview

You type:

"Act as a hiring manager for a software engineer job. Ask me 5 common interview questions."

LLM responds:

Tell me about yourself.
Why do you want to work here?
Explain a time you faced a challenge at work.
What's your favorite programming language and why?
Where do you see yourself in 5 years?

(Now you answer, and the LLM will give you feedback!)

Why this is useful: Practice interviews without needing another person.

Example 10: Writing Python Code to Solve a Problem

You type:

"Write Python code to check if a word is a palindrome (reads the same backward and forward)."

LLM responds:

def is_palindrome(word):
word = word.lower().replace(" ", "")
return word == word[::-1]

Example

print(is_palindrome("racecar")) # True
print(is_palindrome("hello")) # False

Why this is useful: You get working code instantly. Learn by reading what the LLM wrote.

A Small Warning (Important)

LLMs are powerful but not perfect.

Good for: Ideas, drafts, explanations, simple code, translations

Bad for: Medical advice, legal documents, emotional support, live facts (unless connected to the internet)

A Real-Life Example

Imagine you need to write a job application email.

Without LLM: You stare at a blank screen for 30 minutes.

With LLM: You type "Write a short job application for a data analyst role" → 10 seconds later, you have a draft.

Your job now: Add your personal details, adjust the tone, and approve the final version.

That's the real power of LLMs — speed plus a starting point.

Summary

LLM = AI that understands and writes language
It's a tool, not a replacement for humans
Use it the right way → you become super efficient
Use it blindly → you might get wrong answers

Final thought:

So next time ChatGPT writes something for you, remember:

It wrote it because of you, not instead of you.

Written by Kashaf Abdullah

Software Engineer | MERN Stack | Web Development

Is AI Changing the Future of Developers? (Spoiler: It’s Not the End It’s the Upgrade)

Kashaf Abdullah — Sat, 25 Apr 2026 20:05:58 +0000

Log onto Twitter (X) today, and i saw two competing headlines. One says, "Copilot wrote 80% of my code this week — developers are obsolete." The other says, "AI code is a security nightmare — we need humans more than ever."

So, which is it?

Having spent the last 18 months working with ChatGPT, GitHub Copilot, Claude, and Cursor, I've watched the tectonic plates of software engineering shift. The knee-jerk reaction is fear. The educated reaction is excitement.

Here is the unvarnished truth: AI isn't changing that we build software; it is radically changing how we think about the job.

The Toolkit of the Modern Developer

If you aren't using these tools yet, you are falling behind. Here is the current landscape:

GitHub Copilot

The veteran. Autocompletes lines, functions, and even boilerplate tests. It's like having a pair programmer who never sleeps but occasionally hallucinates.

ChatGPT (GPT-4o)

The rubber duck that talks back. Great for refactoring, explaining legacy code, or generating regex patterns you've Googled a hundred times.

Claude (Anthropic)

The ethical architect. Claude is exceptional at reading large documentation sets and generating structured, maintainable code with a massive context window.

Cursor / Continue

The AI-native IDEs. These aren't plugins; they are editors built for AI, allowing you to "chat" with your entire codebase.

How the Role is Actually Changing

Let's move past the hype. AI is not replacing the "if statement" or the "loop." It is replacing the grind.

1. From Typist to Architect (The "10x" Shift)

Before AI: A junior developer's value was often raw output: typing speed and syntax memorization.

Now: Syntax is a commodity. AI tools generate boilerplate (React components, REST endpoints, CRUD functions) in seconds.

The new skill: System design and prompt engineering. You no longer ask "How do I write a sort function?" You ask "Claude, write me a scalable rate limiter for a Node.js API using Redis." Your value lies in telling the AI which rate limiter to build, not typing the loop yourself.

2. The Death of "Stack Overflow Copy/Paste"

Before: We used to spend 20 minutes searching for the right answer.

Now: We spend 20 seconds asking ChatGPT, and 2 minutes validating the answer.

The new skill: Critical thinking and security vetting. AI loves to write code that looks right but contains subtle race conditions or deprecated libraries. Your job is no longer finding the code; it is judging the code.

3. The Rise of the "Full-Stack Generalist"

Before: Want to write a Swift app but you're a Python backend dev? That was a 6-month learning curve.

Now: You can ask GitHub Copilot to translate your logic. You can ask Claude to explain iOS lifecycle methods.

The new skill: Context bridging. Developers are becoming polyglots on demand. The barrier to entry for new languages is evaporating. The future developer isn't an expert in one framework; they are an expert in solving problems across many frameworks.

The Scary Part: What is AI Bad At? (For Now)

If you think AI is just a calculator for code, you haven't hit a production bug at 2 AM.

AI cannot reason about business logic. It doesn't know why your client needs the "Pay Now" button to be red instead of blue. It doesn't understand company politics, legacy trauma in the codebase, or user empathy.

AI is a pattern matcher, not a thinker. It will happily generate a beautiful, efficient solution to the wrong problem because you phrased your prompt poorly.

The Verdict: Will You Be Replaced?

No. But a developer using AI will replace a developer who refuses to.

We are seeing the "Copilot Effect": Productivity is spiking, but the number of bugs is also spiking (ironically, due to over-reliance).

The future developer looks like this:

The Orchestrator: Writes the high-level tests and prompts the AI to fill in the details.
The Debugger: Spends less time writing code, more time reading and fixing AI-generated code.
The Security Guard: Catches the subtle vulnerabilities that an LLM misses.

A Practical Prediction for 2027

Entry-level: Harder to get hired. "I know Python" isn't enough. You need "I prompt AI to build Python apps and I know how to fix its mistakes."

Senior-level: More valuable than ever. Juniors generate code; Seniors know why the architecture needs to change, and how to clean up the mess AI makes at scale.

How to Future-Proof Yourself Today

Stop memorizing syntax. Start learning:

1. Prompt Engineering

Be specific. "Write code" fails. "Write a React hook that fetches user data, handles loading/error states, and caches for 5 minutes using SWR" wins.

2. Code Review (For AI)

You need to be better at reading code than writing it. Can you spot a logic error in a 100-line LLM output?

3. System Architecture

AI writes functions. You must connect the services.

Final Thought

The best developers nowadays aren't the ones who can type the fastest. They are the ones who can describe the destination the best, and then steer the AI away from the cliff.

Embrace the LLM. It's the best junior developer you will ever mentor.

Written by Kashaf Abdullah

Software Engineer | MERN Stack | Web Development

PostgreSQL vs Supabase vs Firebase vs MongoDB: Which One Should You Pick in 2026?

Kashaf Abdullah — Sat, 25 Apr 2026 19:39:19 +0000

PostgreSQL vs Supabase vs Firebase vs MongoDB: Use Cases for 2026 Web Development

Kashaf Abdullah · 3 min read · Jan 13, 2026

Use Cases for 2026 Web Development

PostgreSQL, Supabase, and Firebase serve distinct roles in modern web apps, with PostgreSQL offering robust relational capabilities, Supabase providing a Firebase-like BaaS on PostgreSQL, and Firebase enabling quick NoSQL real-time setups.

These choices align well with MERN stack projects, complementing MongoDB for flexible schemas while adding SQL power for complex queries. Include MongoDB for comparison, as it's popular for scalable, document-based apps like your OLX clones.

Core Features

PostgreSQL excels in ACID compliance, complex SQL queries with joins, and rich data types like JSONB for hybrid use. Supabase builds on PostgreSQL with real-time subscriptions, built-in auth, and edge functions, offering open-source flexibility without vendor lock-in.

Firebase uses NoSQL Firestore for seamless real-time sync and offline support, integrated with Google services like auth and ML.

PostgreSQL: The Relational Powerhouse

PostgreSQL excels where data integrity and complex relationships matter. Its JSONB data type allows hybrid relational-document approaches, while features like advanced indexing, geospatial support, and full-text search make it versatile for applications ranging from e-commerce to content management systems.

Ideal for: Financial applications, inventory systems, analytics platforms, and any project requiring complex joins and transactions.

Supabase: PostgreSQL with Superpowers

Supabase adds crucial developer experience layers to PostgreSQL. You get real-time subscriptions, built-in authentication, file storage, and edge functions all open-source and without vendor lock-in. It's particularly compelling for teams wanting PostgreSQL's power without managing infrastructure.

Ideal for: Collaborative tools, SaaS applications, and projects needing both SQL capabilities and rapid development features.

Firebase: Real-Time First

Firebase's Firestore database offers seamless real-time synchronization and offline support out of the box. Integrated with Google's authentication, machine learning, and hosting services, it enables incredibly fast prototyping for mobile-first applications.

Ideal for: Chat applications, live dashboards, mobile apps, and prototypes needing instant data synchronization.

MongoDB: Flexible Document Store

MongoDB's document-oriented approach allows evolving schemas without migrations. Its horizontal scaling capabilities and developer-friendly API make it popular for content-heavy applications and MERN stack projects.

Ideal for: Social platforms, content management systems, and applications where data structures evolve rapidly.

When to Choose Each: Practical Decision Guide

Choose PostgreSQL When:

Your data has clear relationships (users → orders → products)
You need complex analytical queries with joins and aggregations
ACID compliance is non-negotiable (financial transactions, inventory)
You're building enterprise applications with established data models

Example project: A stock trading platform with complex portfolio analytics

Choose Supabase When:

You want PostgreSQL's power but need faster development cycles
Your application needs real-time features alongside relational data
You're building a full-stack application and want integrated auth/storage
You value open-source and potential self-hosting options

Example project: A collaborative project management tool with live updates

Choose Firebase When:

Real-time synchronization is your primary requirement
You're building a mobile application with offline capabilities
You need rapid prototyping and don't want to manage infrastructure
Your data structure is hierarchical rather than relational

Example project: A live sports score tracker or multiplayer game

Choose MongoDB When:

Your data schema evolves frequently
You're building content-heavy applications (blogs, social media)
Horizontal scaling is a primary concern
You're comfortable with the MERN/MEAN stack ecosystem

Example project: An OLX-style marketplace with diverse product listings

Hybrid Approaches for Modern Applications

Many successful applications combine technologies:

Use PostgreSQL/Supabase for transactional data (user accounts, orders)
Implement MongoDB for content storage (product listings, user posts)
Add Redis (available in Supabase) for caching and session management
Use Firebase for specific real-time features (live chat, notifications)

This layered approach lets you leverage each technology's strengths while maintaining system efficiency.

Conclusion

There's no one-size-fits-all database solution. PostgreSQL excels for structured, relational data. Supabase combines PostgreSQL's power with developer convenience. Firebase dominates real-time, mobile-first scenarios. MongoDB offers flexibility for evolving schemas.

By aligning database choice with application needs, you'll build more maintainable, scalable, and efficient systems. The best choice often depends on your specific use case and sometimes, the best solution involves multiple technologies working together.

Written by Kashaf Abdullah

Software Engineer | MERN Stack | Web Development