DEV Community: Md Shahjalal

Firebase Push Notifications with React Native CLI & NestJS

Md Shahjalal — Mon, 30 Mar 2026 06:30:43 +0000

A complete, production-grade guide covering topic-based and specific notification delivery — from Firebase project setup to fully working Android & iOS integration.

Stack: React Native CLI · NestJS · Firebase FCM v1 · @react-native-firebase · @notifee/react-native · firebase-admin SDK

Read time: ~25 minutes

Updated: 2025

Architecture Overview
Firebase Project Setup
React Native CLI Installation
Android Configuration
iOS Configuration
Token Management
NestJS Backend Service
Topic-Based Notifications
Specific User Notifications
Handling Incoming Messages
Rich Notifications with Notifee
Testing & Debugging

1. Architecture Overview

Before writing a single line of code, it's critical to understand the full notification flow. Firebase Cloud Messaging (FCM) acts as the backbone — a reliable, scalable delivery infrastructure managed by Google.

┌─────────────────┐      registers token      ┌──────────────────┐
│  React Native   │ ─────────────────────────► │   Firebase FCM   │
│   Mobile App    │                             │  Token Registry  │
└─────────────────┘                             └──────────────────┘
                                                         │
                                                         │ stores token
                                                         ▼
┌─────────────────┐      sends message         ┌──────────────────┐
│   Notification  │ ◄────────────────────────── │  NestJS Backend  │
│  Delivered 🔔   │                             │ firebase-admin   │
└─────────────────┘                             └──────────────────┘

Notification Types

Type	Mechanism	Best For
Specific	Single FCM device token	Personal alerts, DMs, account events
Topic-based	Topic subscription	News, sports scores, broadcasts
Multicast	Array of tokens (max 500)	Group notifications, cohorts
Condition	Topic boolean logic	Segmented campaigns

2. Firebase Project Setup

Head to the Firebase Console and create a new project. We'll configure it for both Android and iOS.

Steps

Step 1 — Create Firebase Project

Go to console.firebase.google.com → Add project → Enable Google Analytics (optional) → Create project.

Step 2 — Register Android App

Click the Android icon → Enter your package name (e.g. com.myapp) → Download google-services.json → Place it in android/app/.

Step 3 — Register iOS App

Click the iOS icon → Enter your Bundle ID (e.g. com.myapp) → Download GoogleService-Info.plist → Add it to your Xcode project root.

Step 4 — Generate Service Account Key

Go to Project Settings → Service Accounts → Generate new private key. This JSON file is used by your NestJS backend.

⚠️ Security: Add your service account JSON to .gitignore immediately. Use environment variables or a secrets manager (AWS Secrets Manager, HashiCorp Vault) in production. Never commit it to version control.

3. React Native CLI Installation

We use @react-native-firebase — the de-facto community library that wraps the native Firebase SDKs. This gives you real push notification support backed by native code, not a JavaScript-only polyfill.

# Install core Firebase app module (required)
npm install @react-native-firebase/app

# Install FCM messaging module
npm install @react-native-firebase/messaging

# Install Notifee for rich local notification display
npm install @notifee/react-native

# iOS only — install pods
cd ios && pod install && cd ..

Note: @react-native-firebase/messaging handles FCM token registration, topic subscription, and background message receipt. @notifee/react-native handles the actual display of notifications with custom channels, sounds, and actions — especially critical on Android 13+.

4. Android Configuration

Project-level `build.gradle`

// android/build.gradle
buildscript {
  dependencies {
    // Add Google Services plugin
    classpath('com.google.gms:google-services:4.4.2')
  }
}

App-level `build.gradle`

// android/app/build.gradle
apply plugin: 'com.android.application'
apply plugin: 'com.google.gms.google-services' // ← add this

android {
  defaultConfig {
    minSdkVersion 21        // required by Firebase
    targetSdkVersion 34
    compileSdkVersion 34
  }
}

dependencies {
  // Firebase BoM — manages all Firebase library versions
  implementation platform('com.google.firebase:firebase-bom:33.0.0')
  implementation 'com.google.firebase:firebase-messaging'
  implementation 'com.google.firebase:firebase-analytics'
}

`AndroidManifest.xml` — Permissions & Metadata

<!-- android/app/src/main/AndroidManifest.xml -->
<manifest>
  <!-- Required for Android 13+ (API 33+) -->
  <uses-permission
    android:name="android.permission.POST_NOTIFICATIONS" />

  <application>
    <!-- FCM default notification channel -->
    <meta-data
      android:name="com.google.firebase.messaging.default_notification_channel_id"
      android:value="default_channel" />

    <!-- Custom notification icon (small icon — must be white monochrome) -->
    <meta-data
      android:name="com.google.firebase.messaging.default_notification_icon"
      android:resource="@drawable/ic_notification" />
  </application>
</manifest>

5. iOS Configuration

Enable Push Notifications Capability

In Xcode: Select your target → Signing & Capabilities → Click + Capability → Add:

Push Notifications
Background Modes → check Remote notifications

`AppDelegate.mm`

// ios/MyApp/AppDelegate.mm
#import <Firebase.h>
#import "AppDelegate.h"
#import <React/RCTBundleURLProvider.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

  // Configure Firebase — must be called before any other Firebase usage
  [FIRApp configure];

  self.moduleName = @"MyApp";
  self.initialProps = @{};

  return [super application:application
                     didFinishLaunchingWithOptions:launchOptions];
}
@end

APNs Authentication Key

In Firebase Console → Project Settings → Cloud Messaging → Apple app configuration → upload your APNs Authentication Key (.p8 file) from Apple Developer Portal.

⚡ iOS Simulator: Push notifications do NOT work on the iOS Simulator for real APNs tokens. You must test on a physical device.

6. Token Management

Every device gets a unique FCM registration token. This token is what your server uses to target a specific device. Tokens can rotate — so you must handle refresh events and sync them to your backend reliably.

// src/hooks/useFCMToken.ts
import { useEffect, useCallback } from 'react';
import messaging from '@react-native-firebase/messaging';
import { Platform, Alert } from 'react-native';
import { api } from '../services/api';

export function useFCMToken() {
  /**
   * Request notification permission (required on iOS + Android 13+)
   */
  const requestPermission = useCallback(async () => {
    const authStatus = await messaging().requestPermission();
    const enabled =
      authStatus === messaging.AuthorizationStatus.AUTHORIZED ||
      authStatus === messaging.AuthorizationStatus.PROVISIONAL;

    if (!enabled) {
      Alert.alert(
        'Notifications Disabled',
        'Enable notifications in Settings to receive alerts.',
      );
    }
    return enabled;
  }, []);

  /**
   * Get the current FCM token and register with backend
   */
  const registerToken = useCallback(async () => {
    try {
      // iOS: must check APNs token first
      if (Platform.OS === 'ios') {
        const apnsToken = await messaging().getAPNSToken();
        if (!apnsToken) return; // APNs not ready yet
      }

      const fcmToken = await messaging().getToken();
      if (fcmToken) {
        console.log('FCM Token:', fcmToken);
        // Send token to your NestJS backend
        await api.post('/devices/token', {
          token: fcmToken,
          platform: Platform.OS,
        });
      }
    } catch (error) {
      console.error('Token registration failed:', error);
    }
  }, []);

  useEffect(() => {
    const init = async () => {
      const permitted = await requestPermission();
      if (permitted) await registerToken();
    };

    init();

    // Listen for token refresh — tokens can change!
    const unsubscribe = messaging().onTokenRefresh(async (newToken) => {
      console.log('Token refreshed:', newToken);
      await api.post('/devices/token', {
        token: newToken,
        platform: Platform.OS,
      });
    });

    return unsubscribe; // cleanup on unmount
  }, [requestPermission, registerToken]);
}

✅ Best Practice: Store the token in your database alongside the user ID, device platform, app version, and a timestamp. When sending, handle messaging/registration-token-not-registered errors to auto-delete stale tokens.

7. NestJS Backend Service

Installation

# In your NestJS project
npm install firebase-admin

# Generate NestJS module, service, and controller
nest generate module notifications
nest generate service notifications
nest generate controller notifications

Firebase Admin Module

// src/firebase/firebase.module.ts
import { Module, Global } from '@nestjs/common';
import * as admin from 'firebase-admin';
import { ConfigService } from '@nestjs/config';

@Global()
@Module({
  providers: [
    {
      provide: 'FIREBASE_ADMIN',
      useFactory: (configService: ConfigService) => {
        if (admin.apps.length > 0) {
          return admin.app();
        }

        return admin.initializeApp({
          credential: admin.credential.cert({
            projectId:   configService.get('FIREBASE_PROJECT_ID'),
            clientEmail: configService.get('FIREBASE_CLIENT_EMAIL'),
            privateKey:  configService
              .get<string>('FIREBASE_PRIVATE_KEY')
              .replace(/\\n/g, '\n'),
          }),
        });
      },
      inject: [ConfigService],
    },
  ],
  exports: ['FIREBASE_ADMIN'],
})
export class FirebaseModule {}

Environment Variables

# .env
FIREBASE_PROJECT_ID=your-project-id
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxx@your-project.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN RSA PRIVATE KEY-----\nMIIE...\n-----END RSA PRIVATE KEY-----\n"

8. Topic-Based Notifications

Topics allow you to send one message that reaches all users subscribed to that topic — perfect for news categories, sports teams, or feature announcements. No need to manage individual tokens for broadcast scenarios.

Subscribe to Topics — React Native

// src/services/notifications.ts
import messaging from '@react-native-firebase/messaging';

/**
 * Subscribe the current device to a topic.
 * Topic names can only contain letters, numbers, and hyphens.
 */
export async function subscribeToTopic(topic: string): Promise<void> {
  await messaging().subscribeToTopic(topic);
  console.log(`Subscribed to topic: ${topic}`);
}

export async function unsubscribeFromTopic(topic: string): Promise<void> {
  await messaging().unsubscribeFromTopic(topic);
  console.log(`Unsubscribed from topic: ${topic}`);
}

// Usage examples:
// await subscribeToTopic('sports-cricket');
// await subscribeToTopic('news-breaking');
// await subscribeToTopic('app-updates');

NestJS — Send to Topic

// src/notifications/notifications.service.ts
import { Injectable, Inject, Logger } from '@nestjs/common';
import * as admin from 'firebase-admin';

export interface NotificationPayload {
  title: string;
  body: string;
  data?: Record<string, string>;
  imageUrl?: string;
}

@Injectable()
export class NotificationsService {
  private readonly logger = new Logger(NotificationsService.name);
  private readonly messaging: admin.messaging.Messaging;

  constructor(
    @Inject('FIREBASE_ADMIN') private readonly firebaseApp: admin.app.App,
  ) {
    this.messaging = firebaseApp.messaging();
  }

  /**
   * Send a notification to ALL subscribers of a topic
   * @param topic  e.g. 'sports-cricket', 'news-breaking'
   */
  async sendToTopic(
    topic: string,
    payload: NotificationPayload,
  ): Promise<string> {
    const message: admin.messaging.Message = {
      topic,
      notification: {
        title:    payload.title,
        body:     payload.body,
        imageUrl: payload.imageUrl,
      },
      data: payload.data ?? {},
      android: {
        notification: {
          channelId: 'default_channel',
          priority:  'high',
          sound:     'default',
        },
      },
      apns: {
        payload: {
          aps: {
            sound:            'default',
            badge:            1,
            contentAvailable: true,
          },
        },
        fcmOptions: {
          imageUrl: payload.imageUrl,
        },
      },
    };

    try {
      const response = await this.messaging.send(message);
      this.logger.log(`Topic message sent to '${topic}': ${response}`);
      return response;
    } catch (error) {
      this.logger.error(`Failed to send topic message:`, error);
      throw error;
    }
  }

  /**
   * Subscribe device tokens to a topic from server side
   * Useful for migrating existing token lists to topics
   */
  async subscribeTokensToTopic(
    tokens: string[],
    topic: string,
  ): Promise<admin.messaging.TopicManagementResponse> {
    return this.messaging.subscribeToTopic(tokens, topic);
  }
}

Condition-Based Topics

FCM supports boolean conditions on topics — extremely powerful for segmentation:

async sendWithCondition(payload: NotificationPayload): Promise<string> {
  const message: admin.messaging.Message = {
    // Send to users subscribed to 'sports' OR 'cricket'
    // but NOT 'muted-users'
    condition: "'sports' in topics || 'cricket' in topics && !('muted-users' in topics)",
    notification: {
      title: payload.title,
      body:  payload.body,
    },
    data: payload.data,
  };

  return this.messaging.send(message);
}

9. Specific User Notifications

For personal notifications (account alerts, DMs, OTPs, order updates), you target a specific FCM registration token stored in your database.

Single Device Notification

/**
 * Send to a specific device by FCM token
 */
async sendToDevice(
  fcmToken: string,
  payload: NotificationPayload,
): Promise<string> {
  const message: admin.messaging.Message = {
    token: fcmToken,
    notification: {
      title: payload.title,
      body:  payload.body,
    },
    data: {
      // All data values must be strings!
      ...payload.data,
      timestamp: new Date().toISOString(),
    },
    android: {
      priority: 'high',
      notification: {
        channelId:          'default_channel',
        priority:           'max',
        vibrateTimingsMillis: [0, 250, 250, 250],
        sound:              'default',
      },
    },
    apns: {
      headers: { 'apns-priority': '10' },
      payload: {
        aps: {
          alert: { title: payload.title, body: payload.body },
          sound: 'default',
          badge: 1,
        },
      },
    },
  };

  try {
    return await this.messaging.send(message);
  } catch (error: any) {
    // Remove stale token from database
    if (error.code === 'messaging/registration-token-not-registered') {
      await this.removeStaleToken(fcmToken);
    }
    throw error;
  }
}

/**
 * Send to multiple devices (multicast — max 500 tokens per call)
 */
async sendMulticast(
  tokens: string[],
  payload: NotificationPayload,
): Promise<admin.messaging.BatchResponse> {
  const multicastMsg: admin.messaging.MulticastMessage = {
    tokens: tokens.slice(0, 500), // FCM limit
    notification: { title: payload.title, body: payload.body },
    data: payload.data,
  };

  const response = await this.messaging.sendEachForMulticast(multicastMsg);

  // Collect and remove failed tokens
  const staleTokens: string[] = [];
  response.responses.forEach((res, idx) => {
    if (
      !res.success &&
      res.error?.code === 'messaging/registration-token-not-registered'
    ) {
      staleTokens.push(tokens[idx]);
    }
  });

  if (staleTokens.length) {
    await this.removeStaleTokensBatch(staleTokens);
  }

  this.logger.log(
    `Multicast: ${response.successCount} success, ${response.failureCount} failed`,
  );
  return response;
}

NestJS Controller

// src/notifications/notifications.controller.ts
import { Controller, Post, Body, UseGuards, HttpCode } from '@nestjs/common';
import { NotificationsService } from './notifications.service';
import { JwtAuthGuard } from '../auth/jwt-auth.guard';
import { IsString, IsOptional, IsObject } from 'class-validator';

export class SendTopicDto {
  @IsString() topic: string;
  @IsString() title: string;
  @IsString() body: string;
  @IsOptional() @IsObject() data?: Record<string, string>;
}

export class SendDeviceDto {
  @IsString() token: string;
  @IsString() title: string;
  @IsString() body: string;
  @IsOptional() @IsObject() data?: Record<string, string>;
}

@Controller('notifications')
@UseGuards(JwtAuthGuard)
export class NotificationsController {
  constructor(private readonly notificationsService: NotificationsService) {}

  @Post('topic')
  @HttpCode(200)
  async sendToTopic(@Body() dto: SendTopicDto) {
    return this.notificationsService.sendToTopic(dto.topic, dto);
  }

  @Post('device')
  @HttpCode(200)
  async sendToDevice(@Body() dto: SendDeviceDto) {
    return this.notificationsService.sendToDevice(dto.token, dto);
  }
}

10. Handling Incoming Messages

React Native Firebase differentiates between three states:

State	Description	Handler
Foreground	App is open and active	`messaging().onMessage()`
Background	App is open but backgrounded	`messaging().onNotificationOpenedApp()`
Quit	App is completely closed	`messaging().getInitialNotification()`

Notification Handler Hook

// src/hooks/useNotificationHandlers.ts
import { useEffect } from 'react';
import messaging from '@react-native-firebase/messaging';
import notifee, { AndroidImportance } from '@notifee/react-native';
import { useNavigation } from '@react-navigation/native';

export function useNotificationHandlers() {
  const navigation = useNavigation();

  useEffect(() => {
    // 1. FOREGROUND: App is open — show a local notification via Notifee
    const unsubFg = messaging().onMessage(async (remoteMessage) => {
      console.log('Foreground message:', remoteMessage);
      await displayNotification(remoteMessage);
    });

    // 2. BACKGROUND TAP: User tapped a notification while app was backgrounded
    const unsubBg = messaging().onNotificationOpenedApp((remoteMessage) => {
      console.log('Background tap:', remoteMessage);
      handleNavigation(remoteMessage.data, navigation);
    });

    // 3. QUIT STATE: App was closed when notification was tapped
    messaging().getInitialNotification().then((remoteMessage) => {
      if (remoteMessage) {
        console.log('Quit state tap:', remoteMessage);
        handleNavigation(remoteMessage.data, navigation);
      }
    });

    return () => {
      unsubFg();
      unsubBg();
    };
  }, [navigation]);
}

async function displayNotification(remoteMessage: any) {
  const channelId = await notifee.createChannel({
    id:         'default_channel',
    name:       'Default Notifications',
    sound:      'default',
    importance: AndroidImportance.HIGH,
  });

  await notifee.displayNotification({
    title: remoteMessage.notification?.title,
    body:  remoteMessage.notification?.body,
    data:  remoteMessage.data,
    android: {
      channelId,
      smallIcon:   'ic_notification',
      pressAction: { id: 'default' },
    },
  });
}

function handleNavigation(data: any, navigation: any) {
  switch (data?.screen) {
    case 'order':
      navigation.navigate('OrderDetails', { orderId: data.orderId });
      break;
    case 'chat':
      navigation.navigate('ChatRoom', { roomId: data.roomId });
      break;
    default:
      navigation.navigate('Home');
  }
}

Background & Quit State Handler

⚠️ This must be registered in index.js (the root entry file), outside of any React component. It runs in a background thread even when the app is killed.

// index.js (project root)
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import messaging from '@react-native-firebase/messaging';
import notifee, { EventType } from '@notifee/react-native';

/**
 * Background FCM message handler.
 * MUST be registered OUTSIDE of any component.
 */
messaging().setBackgroundMessageHandler(async (remoteMessage) => {
  console.log('Background message received:', remoteMessage);

  // For data-only messages, manually display with Notifee
  if (!remoteMessage.notification) {
    const channelId = await notifee.createChannel({
      id:   'default_channel',
      name: 'Default Notifications',
    });

    await notifee.displayNotification({
      title: remoteMessage.data?.title,
      body:  remoteMessage.data?.body,
      data:  remoteMessage.data,
      android: { channelId },
    });
  }
});

// Notifee background event handler
notifee.onBackgroundEvent(async ({ type, detail }) => {
  if (type === EventType.PRESS) {
    console.log('User pressed background notification', detail);
  }
});

AppRegistry.registerComponent(appName, () => App);

11. Rich Notifications with Notifee

@notifee/react-native provides the most powerful notification display API for React Native. Use it for action buttons, images, progress bars, and precise Android channel control.

Notification Channels & Action Buttons

// src/services/notifeeService.ts
import notifee, {
  AndroidImportance,
  AndroidCategory,
  AndroidVisibility,
  EventType,
} from '@notifee/react-native';

// Create notification channels (Android only)
export async function createNotificationChannels() {
  await notifee.createChannelGroup({ id: 'alerts', name: 'Alerts' });

  // High priority — for urgent alerts
  await notifee.createChannel({
    id:         'order_updates',
    name:       'Order Updates',
    groupId:    'alerts',
    importance: AndroidImportance.HIGH,
    vibration:  true,
    sound:      'default',
  });

  await notifee.createChannel({
    id:         'promotions',
    name:       'Promotions',
    groupId:    'alerts',
    importance: AndroidImportance.DEFAULT,
    vibration:  false,
  });
}

// Notification with action buttons
export async function showOrderNotification(orderId: string) {
  await notifee.displayNotification({
    id:    `order_${orderId}`,
    title: 'Order Confirmed 🎉',
    body:  `Your order #${orderId} has been confirmed and is being prepared.`,
    data:  { screen: 'order', orderId },
    android: {
      channelId:   'order_updates',
      smallIcon:   'ic_notification',
      largeIcon:   'https://yourapp.com/order-icon.png',
      category:    AndroidCategory.STATUS,
      visibility:  AndroidVisibility.PUBLIC,
      pressAction: { id: 'default' },
      actions: [
        {
          title:       'View Order',
          pressAction: { id: 'view_order', launchActivity: 'default' },
        },
        {
          title:       'Track Package',
          pressAction: { id: 'track', launchActivity: 'default' },
        },
      ],
    },
    ios: {
      categoryId: 'order',
      sound:      'default',
      foregroundPresentationOptions: {
        banner: true,
        sound:  true,
        badge:  true,
      },
    },
  });
}

12. Testing & Debugging

Firebase Console (Quickest Method)

Firebase Console → Cloud Messaging → Send your first message → Select your app → Enter your device's FCM token (logged from getToken()). Great for confirming end-to-end delivery without writing any server code.

cURL Test via FCM v1 REST API

# Get an access token from your service account
ACCESS_TOKEN=$(gcloud auth print-access-token)

# Send a test notification to a topic
curl -X POST \
  https://fcm.googleapis.com/v1/projects/YOUR-PROJECT-ID/messages:send \
  -H "Authorization: Bearer $ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "message": {
      "topic": "sports-cricket",
      "notification": {
        "title": "Test Notification",
        "body": "This is a topic test message"
      },
      "data": {
        "screen": "home",
        "type": "test"
      }
    }
  }'

Common Issues & Fixes

Problem	Platform	Solution
Token is `null`	iOS	Physical device required. Verify APNs key is uploaded in Firebase console.
No foreground notifications	Both	FCM doesn't auto-show foreground notifications. Use Notifee's `displayNotification` inside the `onMessage` handler.
`UNREGISTERED` error	Both	Token has expired. Delete it from the DB and prompt the user to re-open the app.
No background notifications	Android	Ensure `setBackgroundMessageHandler` is in `index.js`, not inside any React component.
`google-services.json` not found	Android	File must be in `android/app/`, not the project root.
Badge count not updating	iOS	Set `badge` in `apns.payload.aps` or call Notifee's `setBadgeCount()`.
Permission denied (Android 13+)	Android	Ensure `POST_NOTIFICATIONS` permission is in `AndroidManifest.xml` and call `requestPermission()` at runtime.
Topic subscription fails	Both	Topic names can only contain letters, numbers, and hyphens — no spaces or special characters.

Useful Debug Snippets

// Print FCM token on app launch — copy it for Firebase Console testing
useEffect(() => {
  messaging().getToken().then(token => {
    console.log('========== FCM TOKEN ==========');
    console.log(token);
    console.log('================================');
  });
}, []);

// Check current permission status
const checkPermission = async () => {
  const status = await messaging().hasPermission();
  console.log('Permission status:', status);
  // -1 = NOT_DETERMINED, 0 = DENIED, 1 = AUTHORIZED, 2 = PROVISIONAL
};

Use messaging().getToken() wrapped in a console log during development. Print the token, copy it, and use the Firebase Console to send a targeted test notification in seconds — no server needed for initial validation.

Understanding Dependency Injection with TypeScript, NestJS, and Angular

Md Shahjalal — Sun, 09 Nov 2025 08:06:51 +0000

Introduction

In modern web development, writing maintainable, testable, and scalable code is paramount. One design pattern that has become fundamental to achieving these goals is dependency injection (DI). Whether you're building a backend API with NestJS or a dynamic frontend with Angular, understanding dependency injection will significantly improve your code quality and development workflow.

Dependency injection is more than just a buzzword—it's a powerful technique that removes hard-coded dependencies and promotes loose coupling between components. This leads to code that is easier to test, modify, and extend. In this guide, we'll explore how dependency injection works across the TypeScript ecosystem, with practical examples in TypeScript, NestJS, and Angular.

What is Dependency Injection?

Definition

Dependency Injection is a design pattern that allows for the removal of hard-coded dependencies, making code more flexible and easier to manage. Instead of a class creating its own dependencies, those dependencies are "injected" from the outside, typically through a constructor, setter method, or interface.

At its core, dependency injection follows the Inversion of Control (IoC) principle, where the control of creating and managing dependencies is inverted from the class itself to an external entity (often called a DI container or injector).

Types of Dependency Injection

There are three primary methods for implementing dependency injection:

Constructor Injection: Dependencies are provided through a class constructor. This is the most common and preferred method as it makes dependencies explicit and ensures they're available when the object is created.
Setter Injection: Dependencies are provided through setter methods or properties after object instantiation. This approach offers flexibility but can lead to objects being in an incomplete state.
Interface Injection: The dependency provides an injector method that will inject the dependency into any client passed to it. This is less common in modern frameworks.

Why Use Dependency Injection?

Improved Testability: You can easily mock dependencies in unit tests
Loose Coupling: Classes depend on abstractions rather than concrete implementations
Better Maintainability: Changes to dependencies don't require modifying dependent classes
Enhanced Reusability: Components can be reused with different dependency implementations
Clearer Code Structure: Dependencies are explicit and visible

Dependency Injection in TypeScript

TypeScript provides several features that make dependency injection more elegant and type-safe, including decorators, interfaces, and strong typing support.

TypeScript Features for DI

Decorators are special declarations that can be attached to classes, methods, or properties. While decorators are still in the proposal stage for JavaScript, TypeScript has supported them for years, making them ideal for metadata-driven dependency injection.

Interfaces define contracts that classes must follow, allowing you to depend on abstractions rather than concrete implementations.

Simple TypeScript Example

Let's create a basic example without any framework:

// Define an interface for our dependency
interface ILogger {
  log(message: string): void;
}

// Concrete implementation
class ConsoleLogger implements ILogger {
  log(message: string): void {
    console.log(`[LOG]: ${message}`);
  }
}

// Another implementation
class FileLogger implements ILogger {
  log(message: string): void {
    // In a real scenario, this would write to a file
    console.log(`[FILE]: ${message}`);
  }
}

// Service class that depends on ILogger
class UserService {
  // Constructor injection
  constructor(private logger: ILogger) {}

  createUser(username: string): void {
    // Business logic
    this.logger.log(`Creating user: ${username}`);
    // More logic...
  }
}

// Usage - we manually inject the dependency
const consoleLogger = new ConsoleLogger();
const userService = new UserService(consoleLogger);
userService.createUser("john_doe");

// Easy to switch implementations
const fileLogger = new FileLogger();
const userServiceWithFileLogger = new UserService(fileLogger);
userServiceWithFileLogger.createUser("jane_doe");

In this example, UserService doesn't know or care about the specific logger implementation—it only depends on the ILogger interface. This makes it easy to swap implementations and test the service with mock loggers.

Manual DI Container

For more complex applications, you might create a simple DI container:

class DIContainer {
  private services = new Map<string, any>();

  register<T>(name: string, instance: T): void {
    this.services.set(name, instance);
  }

  resolve<T>(name: string): T {
    const service = this.services.get(name);
    if (!service) {
      throw new Error(`Service ${name} not found`);
    }
    return service;
  }
}

// Usage
const container = new DIContainer();
container.register('logger', new ConsoleLogger());
container.register('userService', new UserService(container.resolve('logger')));

const userService = container.resolve<UserService>('userService');

While this works, modern frameworks like NestJS and Angular provide sophisticated DI containers out of the box.

Implementing Dependency Injection in NestJS

Overview of NestJS

NestJS is a progressive Node.js framework for building efficient, scalable server-side applications. It uses TypeScript by default and is heavily inspired by Angular's architecture, including its powerful dependency injection system.

NestJS comes with a built-in IoC (Inversion of Control) container that manages the instantiation and lifecycle of providers (services), making dependency management seamless.

Setting Up a NestJS Project

First, install the NestJS CLI and create a new project:

npm i -g @nestjs/cli
nest new my-nestjs-app
cd my-nestjs-app

Creating Services with Dependency Injection

Let's create a practical example with a UserService and a DatabaseService:

database.service.ts

import { Injectable } from '@nestjs/common';

@Injectable()
export class DatabaseService {
  private users: any[] = [];

  async saveUser(user: any): Promise<void> {
    this.users.push(user);
    console.log('User saved to database:', user);
  }

  async findUserById(id: string): Promise<any> {
    return this.users.find(user => user.id === id);
  }

  async getAllUsers(): Promise<any[]> {
    return this.users;
  }
}

user.service.ts

import { Injectable } from '@nestjs/common';
import { DatabaseService } from './database.service';

@Injectable()
export class UserService {
  // Dependency is injected through the constructor
  constructor(private readonly databaseService: DatabaseService) {}

  async createUser(name: string, email: string): Promise<any> {
    const user = {
      id: Date.now().toString(),
      name,
      email,
      createdAt: new Date(),
    };

    await this.databaseService.saveUser(user);
    return user;
  }

  async getUser(id: string): Promise<any> {
    return this.databaseService.findUserById(id);
  }

  async listUsers(): Promise<any[]> {
    return this.databaseService.getAllUsers();
  }
}

user.controller.ts

import { Controller, Get, Post, Body, Param } from '@nestjs/common';
import { UserService } from './user.service';

@Controller('users')
export class UserController {
  // UserService is automatically injected
  constructor(private readonly userService: UserService) {}

  @Post()
  async create(@Body() createUserDto: { name: string; email: string }) {
    return this.userService.createUser(
      createUserDto.name,
      createUserDto.email,
    );
  }

  @Get(':id')
  async findOne(@Param('id') id: string) {
    return this.userService.getUser(id);
  }

  @Get()
  async findAll() {
    return this.userService.listUsers();
  }
}

user.module.ts

import { Module } from '@nestjs/common';
import { UserController } from './user.controller';
import { UserService } from './user.service';
import { DatabaseService } from './database.service';

@Module({
  controllers: [UserController],
  providers: [UserService, DatabaseService],
  exports: [UserService], // Export if other modules need UserService
})
export class UserModule {}

How NestJS DI Works

@Injectable() Decorator: Marks a class as a provider that can be managed by the NestJS IoC container.
Module Registration: Providers are registered in the module's providers array.
Automatic Resolution: When NestJS instantiates a class, it automatically resolves and injects all constructor dependencies.
Singleton Scope: By default, providers are singletons—one instance is shared across the entire application.

Custom Providers

NestJS supports various provider patterns:

import { Module } from '@nestjs/common';

// Value provider
const configProvider = {
  provide: 'CONFIG',
  useValue: {
    apiKey: 'secret-key',
    apiUrl: 'https://api.example.com',
  },
};

// Factory provider
const loggerProvider = {
  provide: 'LOGGER',
  useFactory: () => {
    return new CustomLogger();
  },
};

// Class provider with custom token
const databaseProvider = {
  provide: 'DATABASE_CONNECTION',
  useClass: DatabaseService,
};

@Module({
  providers: [configProvider, loggerProvider, databaseProvider],
})
export class AppModule {}

You can inject these custom providers using the @Inject() decorator:

import { Injectable, Inject } from '@nestjs/common';

@Injectable()
export class ApiService {
  constructor(
    @Inject('CONFIG') private config: any,
    @Inject('LOGGER') private logger: any,
  ) {}

  makeRequest(): void {
    this.logger.log(`Making request to ${this.config.apiUrl}`);
  }
}

Using Dependency Injection in Angular

Introduction to Angular's DI System

Angular has one of the most sophisticated dependency injection systems in the frontend ecosystem. The framework is built around DI from the ground up, making it a first-class citizen in Angular application development.

Angular's DI system is hierarchical, meaning it creates a tree of injectors that mirror the component tree. This allows for fine-grained control over provider scope and sharing.

Providing Services

There are multiple ways to provide services in Angular:

1. Root Level (Singleton across the app)

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // Available app-wide as a singleton
})
export class AuthService {
  private currentUser: any = null;

  login(username: string, password: string): boolean {
    // Authentication logic
    this.currentUser = { username };
    return true;
  }

  logout(): void {
    this.currentUser = null;
  }

  getCurrentUser(): any {
    return this.currentUser;
  }

  isAuthenticated(): boolean {
    return this.currentUser !== null;
  }
}

2. Module Level

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DataService } from './data.service';

@NgModule({
  declarations: [],
  imports: [CommonModule],
  providers: [DataService] // Available to this module and its children
})
export class FeatureModule { }

3. Component Level

import { Component } from '@angular/core';
import { LocalStorageService } from './local-storage.service';

@Component({
  selector: 'app-settings',
  template: `<h1>Settings</h1>`,
  providers: [LocalStorageService] // New instance for each component instance
})
export class SettingsComponent {
  constructor(private storage: LocalStorageService) {}
}

Practical Angular Example

Let's build a complete example with a data service and HTTP integration:

user.model.ts

export interface User {
  id: number;
  name: string;
  email: string;
}

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { User } from './user.model';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://api.example.com/users';

  // HttpClient is injected automatically
  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  getUserById(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }

  createUser(user: Omit<User, 'id'>): Observable<User> {
    return this.http.post<User>(this.apiUrl, user);
  }

  updateUser(id: number, user: Partial<User>): Observable<User> {
    return this.http.patch<User>(`${this.apiUrl}/${id}`, user);
  }

  deleteUser(id: number): Observable<void> {
    return this.http.delete<void>(`${this.apiUrl}/${id}`);
  }
}

notification.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {
  show(message: string, type: 'success' | 'error' | 'info' = 'info'): void {
    // In a real app, this might use a toast library
    console.log(`[${type.toUpperCase()}]: ${message}`);
  }

  success(message: string): void {
    this.show(message, 'success');
  }

  error(message: string): void {
    this.show(message, 'error');
  }
}

user-list.component.ts

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';
import { NotificationService } from './notification.service';
import { User } from './user.model';

@Component({
  selector: 'app-user-list',
  template: `
    <div class="user-list">
      <h2>Users</h2>
      <button (click)="loadUsers()">Refresh</button>

      <div *ngIf="loading">Loading...</div>

      <ul *ngIf="!loading">
        <li *ngFor="let user of users">
          {{ user.name }} ({{ user.email }})
          <button (click)="deleteUser(user.id)">Delete</button>
        </li>
      </ul>
    </div>
  `
})
export class UserListComponent implements OnInit {
  users: User[] = [];
  loading = false;

  // Multiple services injected via constructor
  constructor(
    private userService: UserService,
    private notificationService: NotificationService
  ) {}

  ngOnInit(): void {
    this.loadUsers();
  }

  loadUsers(): void {
    this.loading = true;
    this.userService.getUsers().subscribe({
      next: (users) => {
        this.users = users;
        this.loading = false;
        this.notificationService.success('Users loaded successfully');
      },
      error: (error) => {
        this.loading = false;
        this.notificationService.error('Failed to load users');
        console.error(error);
      }
    });
  }

  deleteUser(id: number): void {
    this.userService.deleteUser(id).subscribe({
      next: () => {
        this.users = this.users.filter(user => user.id !== id);
        this.notificationService.success('User deleted');
      },
      error: (error) => {
        this.notificationService.error('Failed to delete user');
        console.error(error);
      }
    });
  }
}

Best Practices for Angular DI

Use providedIn: 'root' for singleton services: This is tree-shakeable and ensures only one instance exists.
Keep services focused: Each service should have a single, well-defined responsibility (Single Responsibility Principle).
Use interfaces for abstraction: Define interfaces for your services to make them easier to mock in tests.

export interface IUserService {
  getUsers(): Observable<User[]>;
  getUserById(id: number): Observable<User>;
}

@Injectable({
  providedIn: 'root'
})
export class UserService implements IUserService {
  // Implementation
}

Leverage dependency injection for testing: Angular's DI makes unit testing straightforward.

import { TestBed } from '@angular/core/testing';
import { UserService } from './user.service';

describe('UserListComponent', () => {
  let component: UserListComponent;
  let mockUserService: jasmine.SpyObj<UserService>;

  beforeEach(() => {
    // Create mock service
    mockUserService = jasmine.createSpyObj('UserService', ['getUsers', 'deleteUser']);

    TestBed.configureTestingModule({
      declarations: [UserListComponent],
      providers: [
        { provide: UserService, useValue: mockUserService }
      ]
    });

    component = TestBed.createComponent(UserListComponent).componentInstance;
  });

  it('should load users on init', () => {
    mockUserService.getUsers.and.returnValue(of([/* mock data */]));
    component.ngOnInit();
    expect(mockUserService.getUsers).toHaveBeenCalled();
  });
});

Use injection tokens for non-class dependencies: When you need to inject primitive values or configuration objects.

import { InjectionToken } from '@angular/core';

export const API_URL = new InjectionToken<string>('api.url');

// In module
@NgModule({
  providers: [
    { provide: API_URL, useValue: 'https://api.example.com' }
  ]
})
export class AppModule {}

// In service
@Injectable()
export class ApiService {
  constructor(@Inject(API_URL) private apiUrl: string) {}
}

Understand provider scope: Be mindful of where you provide services to control their lifecycle and sharing behavior.

Conclusion

Dependency injection is a cornerstone of modern application development, and its implementation across TypeScript, NestJS, and Angular demonstrates its versatility and power. By embracing DI, you unlock numerous benefits that transform how you write and maintain code.

Key Takeaways

Cleaner, More Maintainable Code: Dependency injection eliminates tight coupling between components, making your codebase easier to understand, modify, and extend. When dependencies are explicitly declared and injected, the relationships between classes become transparent.

Enhanced Testability: With DI, testing becomes significantly simpler. You can easily substitute real dependencies with mocks or stubs, enabling isolated unit tests that run quickly and reliably.

Improved Scalability: As your application grows, dependency injection helps manage complexity. You can refactor implementations without touching dependent code, add new features without breaking existing functionality, and organize your code into modular, reusable components.

Framework-Native Support: Both NestJS and Angular provide robust, built-in DI containers that handle the heavy lifting. You don't need to reinvent the wheel—leverage these battle-tested systems to focus on building features rather than infrastructure.

Moving Forward

Whether you're building a RESTful API with NestJS or a dynamic single-page application with Angular, implementing dependency injection should be a fundamental practice. Start small—refactor a few tightly coupled classes to use constructor injection. As you gain confidence, explore more advanced patterns like factory providers, injection tokens, and hierarchical injectors.

The investment in learning and applying dependency injection pays dividends throughout your project's lifetime. Your future self (and your teammates) will thank you for writing code that's easier to test, maintain, and scale.

Call to Action

Share Your Experience: Have you implemented dependency injection in your projects? What challenges did you face, and how did you overcome them? Drop a comment below—we'd love to hear about your journey and learn from your experiences.

Questions Welcome: If you're new to dependency injection or stuck on a particular implementation, ask your questions in the comments. The developer community thrives on shared knowledge and collaboration.

Spread the Knowledge: If you found this guide helpful, share it with fellow developers who might benefit from understanding dependency injection better. Whether they're just starting with TypeScript or are seasoned Angular/NestJS developers, there's always something new to learn about building better software.

Keep Learning: Dependency injection is just one piece of the software design puzzle. Explore related patterns like the Repository pattern, Factory pattern, and SOLID principles to further enhance your development skills.

Mastering React with the Container-Presenter Pattern: A Deep Dive

Md Shahjalal — Sun, 19 Oct 2025 06:26:19 +0000

Mastering React with the Container-Presenter Pattern: A Deep Dive

In the evolving landscape of React development, writing maintainable, scalable, and testable code isn't optional—it's essential. The Container-Presenter Pattern (also called Smart-Dumb Components, though the former terminology is preferred for its neutral connotation) stands as one of the most fundamental architectural patterns for achieving clean component design.

This comprehensive guide will walk you through everything you need to know: understanding the pattern's philosophy, recognizing when your code needs refactoring, implementing it step-by-step with detailed examples, and making informed decisions about when to use (and not use) this pattern.

🔍 Understanding the Fundamental Problem

The Monolithic Component Anti-Pattern

Let's start with a real-world scenario. You're tasked with building a user profile page for a social media application. The requirements seem straightforward:

Fetch and display user information (name, email, bio, avatar)
Show a list of the user's posts
Allow inline editing of profile details
Handle loading states during data fetches
Display error messages and provide retry functionality
Track whether the user is in "edit mode"

At first, you might be tempted to build this all in one component. Here's what that typically looks like:

// UserProfile.jsx (THE PROBLEMATIC MONOLITH)
import { useState, useEffect } from 'react';
import axios from 'axios';
import './UserProfile.css';

const UserProfile = ({ userId }) => {
  // State management (6 different pieces of state!)
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [isEditing, setIsEditing] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '', bio: '' });

  // Data fetching logic
  const fetchUserData = async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await axios.get(`/api/users/${userId}`);
      setUser(response.data);
      setFormData({
        name: response.data.name,
        email: response.data.email,
        bio: response.data.bio
      });
    } catch (err) {
      setError(err.message || 'Failed to fetch user data');
    } finally {
      setLoading(false);
    }
  };

  const fetchUserPosts = async () => {
    try {
      const response = await axios.get(`/api/posts?userId=${userId}`);
      setPosts(response.data);
    } catch (err) {
      console.error('Failed to fetch posts:', err);
    }
  };

  // Business logic
  const handleUpdateUser = async () => {
    try {
      setLoading(true);
      const response = await axios.put(`/api/users/${userId}`, formData);
      setUser(response.data);
      setIsEditing(false);
    } catch (err) {
      setError('Failed to update profile');
    } finally {
      setLoading(false);
    }
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  const handleRetry = () => {
    setError(null);
    fetchUserData();
    fetchUserPosts();
  };

  const handleStartEdit = () => {
    setIsEditing(true);
    setFormData({
      name: user.name,
      email: user.email,
      bio: user.bio
    });
  };

  const handleCancelEdit = () => {
    setIsEditing(false);
    setFormData({
      name: user.name,
      email: user.email,
      bio: user.bio
    });
  };

  // Effects
  useEffect(() => {
    fetchUserData();
    fetchUserPosts();
  }, [userId]);

  // Rendering logic (80+ lines of JSX!)
  if (loading) {
    return (
      <div className="loading-container">
        <div className="spinner"></div>
        <p>Loading user profile...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="error-container">
        <h2>Oops! Something went wrong</h2>
        <p>{error}</p>
        <button onClick={handleRetry}>Try Again</button>
      </div>
    );
  }

  return (
    <div className="user-profile">
      <div className="profile-header">
        <img src={user.avatar} alt={user.name} className="avatar" />

        {isEditing ? (
          <div className="edit-form">
            <input
              type="text"
              name="name"
              value={formData.name}
              onChange={handleInputChange}
              placeholder="Name"
            />
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleInputChange}
              placeholder="Email"
            />
            <textarea
              name="bio"
              value={formData.bio}
              onChange={handleInputChange}
              placeholder="Bio"
              rows="4"
            />
            <div className="button-group">
              <button onClick={handleUpdateUser} className="save-btn">
                Save Changes
              </button>
              <button onClick={handleCancelEdit} className="cancel-btn">
                Cancel
              </button>
            </div>
          </div>
        ) : (
          <div className="profile-info">
            <h1>{user.name}</h1>
            <p className="email">{user.email}</p>
            <p className="bio">{user.bio}</p>
            <button onClick={handleStartEdit} className="edit-btn">
              Edit Profile
            </button>
          </div>
        )}
      </div>

      <div className="posts-section">
        <h2>Recent Posts</h2>
        {posts.length === 0 ? (
          <p className="no-posts">No posts yet</p>
        ) : (
          <ul className="posts-list">
            {posts.map(post => (
              <li key={post.id} className="post-item">
                <h3>{post.title}</h3>
                <p>{post.content}</p>
                <span className="post-date">
                  {new Date(post.createdAt).toLocaleDateString()}
                </span>
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};

export default UserProfile;

Why This Approach Fails at Scale

This 150+ line monolithic component demonstrates several critical code smells:

1. Violation of Single Responsibility Principle

The component is responsible for:

API communication (data fetching and mutations)
State management (6 different state variables)
Business logic (form validation, edit mode toggling)
UI rendering (loading states, error states, profile display, posts list)
Event handling (user interactions)

A single change request (like adding a profile picture upload) requires touching a file that already manages too many concerns—increasing bug risk exponentially.

2. Testing Nightmare

To test this component, you need to:

Mock the entire axios library
Simulate complex user interactions (clicking edit, typing, saving)
Manage asynchronous state updates
Test loading and error states
Verify UI rendering for multiple conditional branches

A single test file ends up being 200+ lines with intricate setup logic.

3. Zero Reusability

Want to use that loading spinner on another page? You'll copy-paste the JSX. Need the error message component elsewhere? Copy-paste again. This leads to code duplication and inconsistent UIs.

4. Poor Readability and Maintainability

New developers joining the project need to understand the entire component to make even small changes. The mental model required is too complex—mixing data flow with presentation logic.

5. Difficult to Optimize

React's rendering optimization tools (like React.memo, useMemo, useCallback) become harder to apply effectively when logic and UI are entangled.

🎯 The Container-Presenter Solution

The Container-Presenter pattern addresses these issues through separation of concerns—splitting components into two distinct categories based on their responsibilities.

📦 Container Components (The "Brain")

Primary Responsibilities:

Manage application state (useState, useReducer)
Handle side effects (useEffect, data fetching)
Implement business logic (validation, calculations, transformations)
Connect to external data sources (APIs, Context, Redux)
Process user actions and update state accordingly

Key Characteristics:

Contains minimal to no JSX—typically just renders a single Presenter component
Passes data and callback functions as props
Often named with Container suffix or placed in a containers/ directory
Can use hooks freely for state management and side effects
May connect to global state management systems

What Containers DON'T Do:

Define styling or CSS classes
Contain complex JSX structures
Handle layout or visual presentation
Worry about accessibility attributes (like ARIA labels)

🖼️ Presenter Components (The "Face")

Primary Responsibilities:

Receive data via props (never fetch it themselves)
Render UI elements based on received data
Handle UI-only state (dropdown open/closed, tabs selection, accordion expansion)
Define component styling and layout
Implement accessibility features

Key Characteristics:

Pure functional components (can be memoized easily)
No knowledge of data source (API, Context, Redux, etc.)
Highly reusable across different contexts
Easy to test with simple prop passing
Can be showcased in Storybook or similar tools

What Presenters DON'T Do:

Make API calls or network requests
Manage application-level state
Implement complex business logic
Directly interact with browser APIs (localStorage, etc.)

🧩 The Mental Model

Think of it like a restaurant:

Container = Kitchen: Where the food is prepared, ingredients are managed, orders are processed. You don't see it, but it's doing all the complex work.
Presenter = Dining Room: Where the food is beautifully presented, the ambiance is set, and customers interact. It looks great but doesn't cook anything.

🔨 Step-by-Step Refactoring: From Monolith to Clean Architecture

Let's transform our monolithic UserProfile component into a clean, maintainable architecture using the Container-Presenter pattern.

Phase 1: Create the Container Component

The container will handle all data management and business logic.

// containers/UserProfileContainer.jsx
import { useState, useEffect } from 'react';
import axios from 'axios';
import UserProfilePresenter from '../components/UserProfilePresenter';

const UserProfileContainer = ({ userId }) => {
  // ========================================
  // STATE MANAGEMENT
  // ========================================
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // ========================================
  // DATA FETCHING LOGIC
  // ========================================
  const fetchUserData = async () => {
    try {
      setLoading(true);
      setError(null);

      const response = await axios.get(`/api/users/${userId}`);
      setUser(response.data);
    } catch (err) {
      setError(err.response?.data?.message || 'Failed to fetch user data');
      console.error('Error fetching user:', err);
    } finally {
      setLoading(false);
    }
  };

  const fetchUserPosts = async () => {
    try {
      const response = await axios.get(`/api/posts?userId=${userId}`);
      setPosts(response.data);
    } catch (err) {
      console.error('Error fetching posts:', err);
      // We don't block the UI if posts fail - user profile still shows
    }
  };

  // ========================================
  // BUSINESS LOGIC & EVENT HANDLERS
  // ========================================
  const handleUpdateUser = async (formData) => {
    try {
      setLoading(true);

      const response = await axios.put(`/api/users/${userId}`, formData);
      setUser(response.data);

      return { success: true };
    } catch (err) {
      console.error('Error updating user:', err);
      return { 
        success: false, 
        error: err.response?.data?.message || 'Failed to update profile' 
      };
    } finally {
      setLoading(false);
    }
  };

  const handleRetry = () => {
    setError(null);
    fetchUserData();
    fetchUserPosts();
  };

  const handleDeletePost = async (postId) => {
    try {
      await axios.delete(`/api/posts/${postId}`);
      setPosts(prevPosts => prevPosts.filter(post => post.id !== postId));
      return { success: true };
    } catch (err) {
      console.error('Error deleting post:', err);
      return { 
        success: false, 
        error: 'Failed to delete post' 
      };
    }
  };

  // ========================================
  // SIDE EFFECTS
  // ========================================
  useEffect(() => {
    if (userId) {
      fetchUserData();
      fetchUserPosts();
    }
  }, [userId]);

  // ========================================
  // RENDER (Minimal JSX - Just passes data down)
  // ========================================
  return (
    <UserProfilePresenter
      user={user}
      posts={posts}
      loading={loading}
      error={error}
      onRetry={handleRetry}
      onUpdateUser={handleUpdateUser}
      onDeletePost={handleDeletePost}
    />
  );
};

export default UserProfileContainer;

Key Observations:

60 lines focused purely on data and logic
No CSS classes, no complex JSX trees
Clear separation of concerns with comments
Returns a single presenter component
All callback functions are exposed as props

Phase 2: Create the Main Presenter Component

Now let's build the presenter that handles all UI rendering.

// components/UserProfilePresenter.jsx
import { useState } from 'react';
import LoadingSpinner from './common/LoadingSpinner';
import ErrorMessage from './common/ErrorMessage';
import ProfileHeader from './profile/ProfileHeader';
import PostList from './post/PostList';
import './UserProfilePresenter.css';

const UserProfilePresenter = ({
  user,
  posts,
  loading,
  error,
  onRetry,
  onUpdateUser,
  onDeletePost
}) => {
  // ========================================
  // UI-ONLY STATE (Edit mode & form data)
  // ========================================
  const [isEditing, setIsEditing] = useState(false);
  const [formData, setFormData] = useState({ name: '', email: '', bio: '' });
  const [formError, setFormError] = useState('');

  // ========================================
  // UI EVENT HANDLERS
  // ========================================
  const handleStartEdit = () => {
    if (user) {
      setIsEditing(true);
      setFormData({
        name: user.name,
        email: user.email,
        bio: user.bio || ''
      });
      setFormError('');
    }
  };

  const handleCancelEdit = () => {
    setIsEditing(false);
    setFormData({ name: '', email: '', bio: '' });
    setFormError('');
  };

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
    // Clear error when user starts typing
    if (formError) setFormError('');
  };

  const handleSaveProfile = async () => {
    // Basic client-side validation
    if (!formData.name.trim()) {
      setFormError('Name is required');
      return;
    }
    if (!formData.email.trim() || !formData.email.includes('@')) {
      setFormError('Valid email is required');
      return;
    }

    const result = await onUpdateUser(formData);

    if (result.success) {
      setIsEditing(false);
      setFormError('');
    } else {
      setFormError(result.error);
    }
  };

  // ========================================
  // CONDITIONAL RENDERING (Loading & Error States)
  // ========================================
  if (loading && !user) {
    return <LoadingSpinner message="Loading user profile..." />;
  }

  if (error) {
    return (
      <ErrorMessage 
        title="Unable to Load Profile" 
        message={error} 
        onRetry={onRetry}
      />
    );
  }

  if (!user) {
    return (
      <div className="user-profile-empty">
        <p>User not found</p>
      </div>
    );
  }

  // ========================================
  // MAIN UI RENDER
  // ========================================
  return (
    <div className="user-profile">
      <ProfileHeader
        user={user}
        isEditing={isEditing}
        formData={formData}
        formError={formError}
        loading={loading}
        onStartEdit={handleStartEdit}
        onCancelEdit={handleCancelEdit}
        onInputChange={handleInputChange}
        onSaveProfile={handleSaveProfile}
      />

      <PostList 
        posts={posts} 
        onDeletePost={onDeletePost}
        isLoading={loading}
      />
    </div>
  );
};

export default UserProfilePresenter;

Key Observations:

Manages UI-only state (edit mode, form data)
Coordinates between sub-components
Handles form validation (client-side)
No API calls—delegates to container via callbacks
Clean conditional rendering patterns

Phase 3: Build Reusable Sub-Components

Now let's create the smaller, focused components that make up our UI.

Loading Spinner Component

// components/common/LoadingSpinner.jsx
import './LoadingSpinner.css';

const LoadingSpinner = ({ message = 'Loading...', size = 'medium' }) => {
  return (
    <div className="loading-container">
      <div className={`spinner spinner-${size}`} role="status" aria-live="polite">
        <span className="sr-only">Loading</span>
      </div>
      {message && <p className="loading-message">{message}</p>}
    </div>
  );
};

export default LoadingSpinner;

Error Message Component

// components/common/ErrorMessage.jsx
import './ErrorMessage.css';

const ErrorMessage = ({ 
  title = 'Something went wrong', 
  message, 
  onRetry 
}) => {
  return (
    <div className="error-container" role="alert">
      <div className="error-icon">⚠️</div>
      <h2 className="error-title">{title}</h2>
      <p className="error-message">{message}</p>
      {onRetry && (
        <button 
          onClick={onRetry} 
          className="retry-button"
          aria-label="Retry loading"
        >
          Try Again
        </button>
      )}
    </div>
  );
};

export default ErrorMessage;

Profile Header Component

// components/profile/ProfileHeader.jsx
import './ProfileHeader.css';

const ProfileHeader = ({
  user,
  isEditing,
  formData,
  formError,
  loading,
  onStartEdit,
  onCancelEdit,
  onInputChange,
  onSaveProfile
}) => {
  return (
    <div className="profile-header">
      <div className="avatar-section">
        <img 
          src={user.avatar || '/default-avatar.png'} 
          alt={`${user.name}'s avatar`}
          className="avatar"
        />
        <span className="user-status" title={user.isOnline ? 'Online' : 'Offline'}>
          {user.isOnline ? '🟢' : '⚫'}
        </span>
      </div>

      {isEditing ? (
        <div className="edit-form" role="form" aria-label="Edit profile form">
          {formError && (
            <div className="form-error" role="alert">
              {formError}
            </div>
          )}

          <div className="form-group">
            <label htmlFor="name">Name</label>
            <input
              id="name"
              type="text"
              name="name"
              value={formData.name}
              onChange={onInputChange}
              placeholder="Enter your name"
              disabled={loading}
              required
              aria-required="true"
            />
          </div>

          <div className="form-group">
            <label htmlFor="email">Email</label>
            <input
              id="email"
              type="email"
              name="email"
              value={formData.email}
              onChange={onInputChange}
              placeholder="Enter your email"
              disabled={loading}
              required
              aria-required="true"
            />
          </div>

          <div className="form-group">
            <label htmlFor="bio">Bio</label>
            <textarea
              id="bio"
              name="bio"
              value={formData.bio}
              onChange={onInputChange}
              placeholder="Tell us about yourself"
              rows="4"
              disabled={loading}
              maxLength="500"
            />
            <span className="character-count">
              {formData.bio.length}/500
            </span>
          </div>

          <div className="button-group">
            <button 
              onClick={onSaveProfile} 
              className="save-btn"
              disabled={loading}
              aria-label="Save profile changes"
            >
              {loading ? 'Saving...' : 'Save Changes'}
            </button>
            <button 
              onClick={onCancelEdit} 
              className="cancel-btn"
              disabled={loading}
              aria-label="Cancel editing"
            >
              Cancel
            </button>
          </div>
        </div>
      ) : (
        <div className="profile-info">
          <h1 className="user-name">{user.name}</h1>
          <p className="user-email">{user.email}</p>
          {user.bio && <p className="user-bio">{user.bio}</p>}

          <div className="profile-stats">
            <div className="stat">
              <span className="stat-value">{user.followerCount || 0}</span>
              <span className="stat-label">Followers</span>
            </div>
            <div className="stat">
              <span className="stat-value">{user.followingCount || 0}</span>
              <span className="stat-label">Following</span>
            </div>
            <div className="stat">
              <span className="stat-value">{user.postCount || 0}</span>
              <span className="stat-label">Posts</span>
            </div>
          </div>

          <button 
            onClick={onStartEdit} 
            className="edit-btn"
            aria-label="Edit profile"
          >
            ✏️ Edit Profile
          </button>
        </div>
      )}
    </div>
  );
};

export default ProfileHeader;

Post List Component

// components/post/PostList.jsx
import { useState } from 'react';
import './PostList.css';

const PostList = ({ posts, onDeletePost, isLoading }) => {
  const [deletingPostId, setDeletingPostId] = useState(null);

  const handleDelete = async (postId) => {
    if (!window.confirm('Are you sure you want to delete this post?')) {
      return;
    }

    setDeletingPostId(postId);
    const result = await onDeletePost(postId);

    if (!result.success) {
      alert(result.error);
    }

    setDeletingPostId(null);
  };

  const formatDate = (dateString) => {
    const date = new Date(dateString);
    const now = new Date();
    const diffInDays = Math.floor((now - date) / (1000 * 60 * 60 * 24));

    if (diffInDays === 0) return 'Today';
    if (diffInDays === 1) return 'Yesterday';
    if (diffInDays < 7) return `${diffInDays} days ago`;

    return date.toLocaleDateString('en-US', { 
      month: 'short', 
      day: 'numeric', 
      year: date.getFullYear() !== now.getFullYear() ? 'numeric' : undefined 
    });
  };

  return (
    <div className="posts-section">
      <h2 className="posts-heading">Recent Posts</h2>

      {posts.length === 0 ? (
        <div className="no-posts">
          <p>No posts yet</p>
          <span className="no-posts-icon">📝</span>
        </div>
      ) : (
        <ul className="posts-list" role="list">
          {posts.map((post) => (
            <li 
              key={post.id} 
              className={`post-item ${deletingPostId === post.id ? 'deleting' : ''}`}
              role="article"
            >
              <div className="post-header">
                <h3 className="post-title">{post.title}</h3>
                <button
                  onClick={() => handleDelete(post.id)}
                  className="delete-post-btn"
                  disabled={deletingPostId === post.id || isLoading}
                  aria-label={`Delete post: ${post.title}`}
                  title="Delete post"
                >
                  {deletingPostId === post.id ? '⏳' : '🗑️'}
                </button>
              </div>

              <p className="post-content">{post.content}</p>

              <div className="post-footer">
                <span className="post-date">
                  {formatDate(post.createdAt)}
                </span>
                {post.likeCount > 0 && (
                  <span className="post-likes">
                    ❤️ {post.likeCount}
                  </span>
                )}
                {post.commentCount > 0 && (
                  <span className="post-comments">
                    💬 {post.commentCount}
                  </span>
                )}
              </div>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default PostList;

📁 Organized Directory Structure

Here's how the refactored code should be organized:

src/
├── containers/
│   └── UserProfileContainer.jsx       # Data & logic layer
│
├── components/
│   ├── common/                        # Reusable UI components
│   │   ├── LoadingSpinner.jsx
│   │   ├── LoadingSpinner.css
│   │   ├── ErrorMessage.jsx
│   │   └── ErrorMessage.css
│   │
│   ├── profile/                       # Profile-specific components
│   │   ├── ProfileHeader.jsx
│   │   └── ProfileHeader.css
│   │
│   ├── post/                          # Post-related components
│   │   ├── PostList.jsx
│   │   └── PostList.css
│   │
│   ├── UserProfilePresenter.jsx       # Main presenter
│   └── UserProfilePresenter.css
│
├── hooks/                             # Custom hooks (if needed)
│   └── useUserProfile.js
│
├── services/                          # API service layer
│   └── userService.js
│
└── App.jsx

Alternative: Feature-Based Structure

For larger applications, consider grouping by feature:

src/
├── features/
│   └── user-profile/
│       ├── containers/
│       │   └── UserProfileContainer.jsx
│       ├── components/
│       │   ├── UserProfilePresenter.jsx
│       │   ├── ProfileHeader.jsx
│       │   └── PostList.jsx
│       ├── hooks/
│       │   └── useUserProfile.js
│       └── services/
│           └── userProfileService.js
│
└── components/
    └── common/                        # Shared across features
        ├── LoadingSpinner.jsx
        └── ErrorMessage.jsx

✅ Benefits of This Refactoring

1. Dramatically Improved Testability

Testing the Container:

// __tests__/UserProfileContainer.test.jsx
import { render, waitFor } from '@testing-library/react';
import axios from 'axios';
import UserProfileContainer from '../UserProfileContainer';

jest.mock('axios');

test('fetches and passes user data to presenter', async () => {
  const mockUser = { id: 1, name: 'John Doe', email: 'john@example.com' };
  axios.get.mockResolvedValue({ data: mockUser });

  const { getByText } = render(<UserProfileContainer userId={1} />);

  await waitFor(() => {
    expect(axios.get).toHaveBeenCalledWith('/api/users/1');
  });
});

Testing the Presenter:

// __tests__/UserProfilePresenter.test.jsx
import { render, fireEvent } from '@testing-library/react';
import UserProfilePresenter from '../UserProfilePresenter';

test('renders user information correctly', () => {
  const mockUser = { name: 'Jane Doe', email: 'jane@example.com', bio: 'Developer' };
  const { getByText } = render(
    <UserProfilePresenter 
      user={mockUser} 
      posts={[]} 
      loading={false} 
      error={null}
      onRetry={jest.fn()}
      onUpdateUser={jest.fn()}
    />
  );

  expect(getByText('Jane Doe')).toBeInTheDocument();
  expect(getByText('jane@example.com')).toBeInTheDocument();
});

test('enters edit mode when edit button is clicked', () => {
  const mockUser = { name: 'Jane Doe', email: 'jane@example.com' };
  const { getByLabelText } = render(
    <UserProfilePresenter 
      user={mockUser} 
      posts={[]} 
      loading={false} 
      error={null}
      onRetry={jest.fn()}
      onUpdateUser={jest.fn()}
    />
  );

  fireEvent.click(getByLabelText('Edit profile'));
  expect(getByLabelText('Edit profile form')).toBeInTheDocument();
});

2. Effortless Reusability

The LoadingSpinner and ErrorMessage components can now be used anywhere:

// In ProductList.jsx
<LoadingSpinner message="Loading products..." size="large" />

// In Dashboard.jsx
<ErrorMessage title="Connection Lost" message="Check your internet" />

3. Simplified Maintenance

Need to change how loading works? Update LoadingSpinner.jsx.

Need to add a new user field? Modify ProfileHeader.jsx.

Each change is isolated and predictable.

4. Better Performance Optimization

// Easy to memoize presenters
import { memo } from 'react';

const ProfileHeader = memo(({ user, isEditing, ...props }) => {
  // Component renders only when props actually change
  return (/* JSX */);
});

// Optimize callbacks in containers
import { useCallback } from 'react';

const handleUpdateUser = useCallback(async (formData) => {
  // This function reference stays stable across renders
  const response = await axios.put(`/api/users/${userId}`, formData);
  setUser(response.data);
}, [userId]);

5. Enhanced Developer Experience

Faster onboarding: New developers can understand ProfileHeader.jsx in minutes
Parallel development: One developer works on the container, another on the presenter
Clear git history: Changes to logic and UI are in separate files
Better code reviews: Reviewers can focus on either data flow or UI presentation

6. Storybook Integration

Presenters work perfectly with design systems:

// ProfileHeader.stories.jsx
export default {
  title: 'Profile/ProfileHeader',
  component: ProfileHeader,
};

export const Default = {
  args: {
    user: { name: 'John Doe', email: 'john@example.com', bio: 'Developer' },
    isEditing: false,
    onStartEdit: () => console.log('Edit clicked'),
  },
};

export const EditMode = {
  args: {
    user: { name: 'John Doe', email: 'john@example.com' },
    isEditing: true,
    formData: { name: 'John Doe', email: 'john@example.com', bio: '' },
    onSaveProfile: () => console.log('Save clicked'),
  },
};

🎓 Advanced Patterns & Variations

Pattern 1: Custom Hooks for Shared Logic

You can extract container logic into reusable hooks:

// hooks/useUserProfile.js
import { useState, useEffect, useCallback } from 'react';
import axios from 'axios';

export const useUserProfile = (userId) => {
  const [user, setUser] = useState(null);
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchUserData = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const response = await axios.get(`/api/users/${userId}`);
      setUser(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }, [userId]);

  const updateUser = useCallback(async (formData) => {
    try {
      const response = await axios.put(`/api/users/${userId}`, formData);
      setUser(response.data);
      return { success: true };
    } catch (err) {
      return { success: false, error: err.message };
    }
  }, [userId]);

  useEffect(() => {
    if (userId) {
      fetchUserData();
    }
  }, [userId, fetchUserData]);

  return {
    user,
    posts,
    loading,
    error,
    updateUser,
    refetch: fetchUserData,
  };
};

// Then in your container:
const UserProfileContainer = ({ userId }) => {
  const { user, posts, loading, error, updateUser, refetch } = useUserProfile(userId);

  return (
    <UserProfilePresenter
      user={user}
      posts={posts}
      loading={loading}
      error={error}
      onUpdateUser={updateUser}
      onRetry={refetch}
    />
  );
};

Pattern 2: Service Layer for API Calls

Create a dedicated service for all user-related API operations:

// services/userService.js
import axios from 'axios';

const API_BASE = '/api';

export const userService = {
  getUser: async (userId) => {
    const response = await axios.get(`${API_BASE}/users/${userId}`);
    return response.data;
  },

  updateUser: async (userId, data) => {
    const response = await axios.put(`${API_BASE}/users/${userId}`, data);
    return response.data;
  },

  getUserPosts: async (userId) => {
    const response = await axios.get(`${API_BASE}/posts?userId=${userId}`);
    return response.data;
  },

  deletePost: async (postId) => {
    await axios.delete(`${API_BASE}/posts/${postId}`);
  },
};

// Usage in container:
import { userService } from '../services/userService';

const fetchUserData = async () => {
  try {
    setLoading(true);
    const userData = await userService.getUser(userId);
    setUser(userData);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};

Pattern 3: Compound Components for Complex UIs

For very complex presenters, break them into compound components:

// components/profile/ProfileCard.jsx
const ProfileCard = ({ children }) => {
  return <div className="profile-card">{children}</div>;
};

ProfileCard.Avatar = ({ src, alt, status }) => (
  <div className="profile-avatar">
    <img src={src} alt={alt} />
    <span className={`status ${status}`}></span>
  </div>
);

ProfileCard.Info = ({ children }) => (
  <div className="profile-info">{children}</div>
);

ProfileCard.Stats = ({ followers, following, posts }) => (
  <div className="profile-stats">
    <div className="stat">
      <span>{followers}</span>
      <label>Followers</label>
    </div>
    <div className="stat">
      <span>{following}</span>
      <label>Following</label>
    </div>
    <div className="stat">
      <span>{posts}</span>
      <label>Posts</label>
    </div>
  </div>
);

// Usage:
<ProfileCard>
  <ProfileCard.Avatar src={user.avatar} alt={user.name} status="online" />
  <ProfileCard.Info>
    <h1>{user.name}</h1>
    <p>{user.email}</p>
  </ProfileCard.Info>
  <ProfileCard.Stats 
    followers={user.followerCount} 
    following={user.followingCount} 
    posts={user.postCount} 
  />
</ProfileCard>

⚖️ When to Use (and When NOT to Use)

✅ Ideal Use Cases

1. Data-Heavy Components

Dashboards displaying analytics from multiple API endpoints
User profiles with complex data relationships
Product catalogs with filtering, sorting, and pagination
Admin panels with CRUD operations

2. Components with Complex State Management

Multi-step forms (wizards, checkouts)
Settings pages with multiple sections
Interactive data tables with sorting, filtering, searching
Real-time data displays (chat, notifications, live scores)

3. Components Requiring High Reusability

Design system components used across multiple features
Components shared between web and mobile (React Native)
White-label applications with multiple themes
Components showcased in Storybook or style guides

4. Team Collaboration Scenarios

Backend developers can work on containers while frontend developers handle presenters
Designers can iterate on presenters without touching business logic
Multiple teams working on the same feature simultaneously

⚠️ When NOT to Use

1. Simple, Static Components

// ❌ OVERKILL: Don't split this
const Button = ({ children, onClick }) => (
  <button onClick={onClick}>{children}</button>
);

// ❌ UNNECESSARY: No business logic here
const Badge = ({ text, color }) => (
  <span className={`badge badge-${color}`}>{text}</span>
);

2. Deeply Nested Component Hierarchies
If you find yourself passing props through 4+ component levels, consider alternatives:

// ❌ PROP DRILLING NIGHTMARE
<Container>           // Has the data
  <Presenter>         // Passes it down
    <Section>         // Passes it down
      <SubSection>    // Passes it down
        <Item>        // Finally uses it

Better alternatives:

Context API for truly global state (theme, auth, language)
State management libraries (Redux, Zustand, Jotai) for complex shared state
Composition to avoid deep nesting

3. Performance-Critical Rendering
For lists with thousands of items or real-time animations:

// ❌ Additional component layer may impact performance
{items.map(item => (
  <ItemContainer key={item.id} data={item}>
    <ItemPresenter />
  </ItemContainer>
))}

// ✅ Better: Keep it flat for virtual lists
{items.map(item => (
  <Item key={item.id} {...item} />
))}

4. One-Off Prototypes
When you're rapidly prototyping or building a proof-of-concept, premature abstraction slows you down. Build first, refactor later when patterns emerge.

🎯 Practical Exercise: Build Your Own

To truly master this pattern, let's build a Product List feature from scratch.

Requirements Specification

Build a product catalog page with the following features:

Data Requirements

Fetch products from https://fakestoreapi.com/products
Each product has: id, title, price, description, category, image, rating

Functionality

Display all products in a grid layout
Filter by category (electronics, jewelry, men's clothing, women's clothing)
Sort by price (low to high, high to low)
Search by product name
Add/remove products to/from cart
Show loading state while fetching
Handle and display errors with retry option
Display cart summary (total items, total price)

Step 1: Plan Your Architecture

Before coding, map out your components:

ProductPageContainer (Container)
├── Manages: products state, cart state, loading, error
├── Handles: fetching, filtering, sorting, cart operations
└── Renders: ProductPagePresenter

ProductPagePresenter (Presenter)
├── SearchBar
├── FilterControls
├── SortControls
├── ProductGrid
│   └── ProductCard (for each product)
└── CartSummary

Step 2: Implement the Container

// containers/ProductPageContainer.jsx
import { useState, useEffect } from 'react';
import axios from 'axios';
import ProductPagePresenter from '../components/ProductPagePresenter';

const ProductPageContainer = () => {
  const [products, setProducts] = useState([]);
  const [filteredProducts, setFilteredProducts] = useState([]);
  const [cart, setCart] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [categories, setCategories] = useState([]);

  // Fetch products
  const fetchProducts = async () => {
    try {
      setLoading(true);
      setError(null);

      const [productsRes, categoriesRes] = await Promise.all([
        axios.get('https://fakestoreapi.com/products'),
        axios.get('https://fakestoreapi.com/products/categories')
      ]);

      setProducts(productsRes.data);
      setFilteredProducts(productsRes.data);
      setCategories(categoriesRes.data);
    } catch (err) {
      setError('Failed to load products. Please try again.');
      console.error(err);
    } finally {
      setLoading(false);
    }
  };

  // Filter by category
  const handleFilterByCategory = (category) => {
    if (category === 'all') {
      setFilteredProducts(products);
    } else {
      setFilteredProducts(products.filter(p => p.category === category));
    }
  };

  // Sort products
  const handleSort = (sortType) => {
    const sorted = [...filteredProducts];

    if (sortType === 'price-low') {
      sorted.sort((a, b) => a.price - b.price);
    } else if (sortType === 'price-high') {
      sorted.sort((a, b) => b.price - a.price);
    } else if (sortType === 'rating') {
      sorted.sort((a, b) => b.rating.rate - a.rating.rate);
    }

    setFilteredProducts(sorted);
  };

  // Search products
  const handleSearch = (query) => {
    if (!query.trim()) {
      setFilteredProducts(products);
      return;
    }

    const filtered = products.filter(product =>
      product.title.toLowerCase().includes(query.toLowerCase()) ||
      product.description.toLowerCase().includes(query.toLowerCase())
    );

    setFilteredProducts(filtered);
  };

  // Cart operations
  const handleAddToCart = (product) => {
    setCart(prevCart => {
      const existingItem = prevCart.find(item => item.id === product.id);

      if (existingItem) {
        return prevCart.map(item =>
          item.id === product.id
            ? { ...item, quantity: item.quantity + 1 }
            : item
        );
      }

      return [...prevCart, { ...product, quantity: 1 }];
    });
  };

  const handleRemoveFromCart = (productId) => {
    setCart(prevCart => prevCart.filter(item => item.id !== productId));
  };

  const handleUpdateQuantity = (productId, quantity) => {
    if (quantity <= 0) {
      handleRemoveFromCart(productId);
      return;
    }

    setCart(prevCart =>
      prevCart.map(item =>
        item.id === productId ? { ...item, quantity } : item
      )
    );
  };

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

  return (
    <ProductPagePresenter
      products={filteredProducts}
      cart={cart}
      categories={categories}
      loading={loading}
      error={error}
      onRetry={fetchProducts}
      onFilterByCategory={handleFilterByCategory}
      onSort={handleSort}
      onSearch={handleSearch}
      onAddToCart={handleAddToCart}
      onRemoveFromCart={handleRemoveFromCart}
      onUpdateQuantity={handleUpdateQuantity}
    />
  );
};

export default ProductPageContainer;

Step 3: Implement the Presenter

// components/ProductPagePresenter.jsx
import { useState } from 'react';
import LoadingSpinner from './common/LoadingSpinner';
import ErrorMessage from './common/ErrorMessage';
import SearchBar from './products/SearchBar';
import FilterControls from './products/FilterControls';
import SortControls from './products/SortControls';
import ProductGrid from './products/ProductGrid';
import CartSummary from './products/CartSummary';
import './ProductPagePresenter.css';

const ProductPagePresenter = ({
  products,
  cart,
  categories,
  loading,
  error,
  onRetry,
  onFilterByCategory,
  onSort,
  onSearch,
  onAddToCart,
  onRemoveFromCart,
  onUpdateQuantity
}) => {
  const [showCart, setShowCart] = useState(false);

  if (loading) {
    return <LoadingSpinner message="Loading products..." />;
  }

  if (error) {
    return <ErrorMessage message={error} onRetry={onRetry} />;
  }

  const cartItemCount = cart.reduce((sum, item) => sum + item.quantity, 0);
  const cartTotal = cart.reduce((sum, item) => sum + (item.price * item.quantity), 0);

  return (
    <div className="product-page">
      <header className="page-header">
        <h1>Product Catalog</h1>
        <button 
          className="cart-toggle"
          onClick={() => setShowCart(!showCart)}
          aria-label="Toggle cart"
        >
          🛒 Cart ({cartItemCount})
        </button>
      </header>

      <div className="controls-section">
        <SearchBar onSearch={onSearch} />
        <div className="filters-sorts">
          <FilterControls 
            categories={categories} 
            onFilterByCategory={onFilterByCategory} 
          />
          <SortControls onSort={onSort} />
        </div>
      </div>

      <div className="content-section">
        <ProductGrid 
          products={products} 
          onAddToCart={onAddToCart}
          cart={cart}
        />

        {showCart && (
          <CartSummary
            cart={cart}
            total={cartTotal}
            onRemoveFromCart={onRemoveFromCart}
            onUpdateQuantity={onUpdateQuantity}
            onClose={() => setShowCart(false)}
          />
        )}
      </div>

      {products.length === 0 && (
        <div className="no-products">
          <p>No products found matching your criteria</p>
        </div>
      )}
    </div>
  );
};

export default ProductPagePresenter;

Step 4: Create Supporting Components

// components/products/SearchBar.jsx
import { useState } from 'react';
import './SearchBar.css';

const SearchBar = ({ onSearch }) => {
  const [query, setQuery] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(query);
  };

  return (
    <form className="search-bar" onSubmit={handleSubmit}>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search products..."
        className="search-input"
      />
      <button type="submit" className="search-button">
        🔍 Search
      </button>
    </form>
  );
};

export default SearchBar;

// components/products/ProductGrid.jsx
import ProductCard from './ProductCard';
import './ProductGrid.css';

const ProductGrid = ({ products, onAddToCart, cart }) => {
  return (
    <div className="product-grid">
      {products.map(product => {
        const cartItem = cart.find(item => item.id === product.id);
        const inCart = !!cartItem;
        const quantity = cartItem?.quantity || 0;

        return (
          <ProductCard
            key={product.id}
            product={product}
            onAddToCart={onAddToCart}
            inCart={inCart}
            quantity={quantity}
          />
        );
      })}
    </div>
  );
};

export default ProductGrid;

// components/products/ProductCard.jsx
import './ProductCard.css';

const ProductCard = ({ product, onAddToCart, inCart, quantity }) => {
  return (
    <div className="product-card">
      <div className="product-image">
        <img src={product.image} alt={product.title} />
        {inCart && <span className="in-cart-badge">{quantity} in cart</span>}
      </div>

      <div className="product-details">
        <h3 className="product-title">{product.title}</h3>
        <p className="product-category">{product.category}</p>

        <div className="product-rating">
          ⭐ {product.rating.rate} ({product.rating.count} reviews)
        </div>

        <div className="product-footer">
          <span className="product-price">${product.price.toFixed(2)}</span>
          <button 
            className="add-to-cart-btn"
            onClick={() => onAddToCart(product)}
          >
            {inCart ? '+ Add More' : '🛒 Add to Cart'}
          </button>
        </div>
      </div>
    </div>
  );
};

export default ProductCard;

🚀 Taking It Further: Next Steps

Level Up Your Skills

Add TypeScript: Type your props for better IDE support and error catching
Implement React Query: Replace manual data fetching with a powerful caching solution
Add Unit Tests: Write comprehensive tests for both containers and presenters
Build a Storybook: Showcase all your presenter components
Performance Optimization: Add memoization, lazy loading, and code splitting

Advanced Challenges

Add pagination or infinite scroll
Implement wishlist functionality
Add product comparison feature
Build an admin dashboard to manage products
Integrate real payment processing
Add user authentication and order history

💭 Final Thoughts

The Container-Presenter pattern is more than a coding technique—it's a mindset about separating concerns and building maintainable software. When you think in layers (data vs. presentation), you naturally write cleaner, more testable code.

Key Takeaways

✅ Containers handle data and logic - No UI concerns

✅ Presenters handle UI and interactions - No data fetching

✅ Sub-components are small and focused - Single responsibility

✅ Reusability emerges naturally - Components become portable

✅ Testing becomes straightforward - Mock data, not APIs

✅ Team collaboration improves - Clear boundaries of responsibility

The Pattern Evolution

As you grow as a React developer, you'll discover that Container-Presenter forms the foundation for more advanced patterns:

Render Props and Higher-Order Components extend container logic
Compound Components enhance presenter flexibility
Context API solves prop drilling in containers
Custom Hooks extract reusable container logic

Start with Container-Presenter. Master it. Then evolve your architecture as your applications demand.

🔗 Resources & Further Reading

Ready to build better React applications? Start refactoring today! 🚀

Your code—and your team—will thank you.

Share your implementations! Join the conversation:

Tweet your refactored components with #ReactContainerPresenter
Share your code on GitHub
Get feedback in the Tapascript Discord

Happy coding! ⚛️

Mastering Rsync: Your Essential Guide to Linux File Synchronization

Md Shahjalal — Sat, 18 Oct 2025 08:16:39 +0000

Mastering Rsync: Your Essential Guide to Linux File Synchronization

If you're managing Linux servers or simply want a powerful way to back up your files, Rsync is an indispensable tool you need to master. While it might seem similar to SCP at first glance, Rsync offers a wealth of additional features that make it the go-to choice for file transfers and backups.

What Makes Rsync Special?

Rsync is a file synchronization utility that transfers files between Linux systems using SSH by default. What sets it apart is its extensive collection of options that let you fine-tune exactly how your files are transferred, giving you granular control over every aspect of the process.

Before You Begin: Installation Check

First things first—make sure Rsync is installed on your system. Open your terminal and run:

rsync --version

If you don't see any output, you'll need to install it using your distribution's package manager:

Ubuntu/Debian: apt install rsync
Fedora/CentOS: dnf install rsync

Understanding the Basics

Here's the fundamental syntax for Rsync:

rsync dir1 dir2

This command syncs the contents of dir1 to dir2. These directories can be local, or they can be remote locations accessed via SSH or mounted network shares.

Important caveat: Despite its name, Rsync isn't bidirectional. It copies from source to destination in one direction only—it won't automatically make both locations identical by copying changes in both directions.

Hands-On Example: Backing Up Your Files

Let's walk through a practical example of backing up a notes directory to a remote server.

Step 1: Pre-Flight Checks

Before running any Rsync command, verify:

You can SSH into the target server
You have write permissions to the destination directory

Step 2: Always Test First with Dry Run

Never run Rsync without testing it first. Use the --dry-run option to see what would happen:

rsync -rv --dry-run notes/ user@192.168.1.100:backup/

The options here are:

-r: Recursive (required for directories)
-v: Verbose (shows what's being copied)
--dry-run: Test mode—doesn't actually copy anything

Review the output carefully. Once you're confident it's doing what you expect, remove --dry-run and run it for real.

Step 3: The Actual Sync

rsync -rv notes/ user@192.168.1.100:backup/

Your files are now copied to the remote server!

Reversing the Process: Restoring from Backup

Need to pull files back from your backup? Simply reverse the source and destination:

rsync -rv user@192.168.1.100:backup/notes/ notes/

Notice the trailing slashes—they tell Rsync to copy the contents of the directory rather than the directory itself.

The Delete Option: True Synchronization

Here's a gotcha: if you rename a file locally and sync again, Rsync will copy the renamed file but won't remove the old one from the destination. You'll end up with duplicates.

The solution? Add the --delete option:

rsync -rv --delete notes/ user@192.168.1.100:backup/

This removes anything at the destination that doesn't exist at the source, giving you a true mirror.

Archive Mode: The Secret Sauce

The most important Rsync option is -a (archive mode):

rsync -av --delete notes/ user@192.168.1.100:backup/

Archive mode preserves:

File permissions
Timestamps
Symbolic links
Ownership (when run as root)

This ensures your backup is an exact replica of the source, including all metadata. This is the option most people use most of the time.

Bonus Options

Compression for Slow Connections

If you're dealing with a slow network connection, add the -z option to compress files during transfer:

rsync -avz --delete notes/ user@192.168.1.100:backup/

Skip this if you have a fast connection—it'll just add unnecessary overhead.

Moving Instead of Copying

Want to move files rather than copy them? Use --remove-source-files:

rsync -av --remove-source-files notes/ user@192.168.1.100:backup/

This deletes files from the source after successfully transferring them to the destination.

Quick Reference

Here's a cheat sheet of the most useful options:

-r: Recursive
-v: Verbose
-a: Archive mode (preserves metadata)
-z: Compress during transfer
--delete: Remove files at destination that don't exist at source
--dry-run: Test run without actually copying
--remove-source-files: Delete source files after transfer

Best Practices

Always use --dry-run first when working with important data
Use archive mode (-a) for most backup scenarios
Be careful with --delete—it permanently removes files
Test your SSH access before attempting large transfers
Verify write permissions on the destination before syncing

Wrapping Up

Rsync is a powerful tool that becomes even more valuable once you understand its key options. The archive mode (-a) combined with --delete covers most backup scenarios, giving you reliable, metadata-preserving synchronization between systems.

Start with simple examples, always test with --dry-run, and gradually explore more advanced options as your needs grow. With Rsync in your toolkit, you'll have a robust solution for file transfers and backups across your Linux infrastructure.

Happy syncing!

Mastering the Builder Pattern in TypeScript: A Complete Guide

Md Shahjalal — Sun, 21 Sep 2025 07:16:13 +0000

Mastering the Builder Pattern in TypeScript: A Complete Guide

Published on September 21, 2025 | 15 min read

If you've ever found yourself wrestling with constructors that have too many parameters, or struggled to create objects with multiple optional configurations, the Builder Pattern is your solution. In this comprehensive guide, we'll explore how to implement and leverage the Builder Pattern in TypeScript to write cleaner, more maintainable code.

What is the Builder Pattern?
The Problem: Constructor Hell
Understanding the Builder Pattern
Basic Implementation in TypeScript
Advanced Builder Techniques
Real-World Examples
Best Practices and Guidelines
Common Pitfalls to Avoid
Builder vs Other Patterns
Conclusion

What is the Builder Pattern?

The Builder Pattern is a creational design pattern that provides a flexible solution for constructing complex objects. Instead of using a single constructor with many parameters, the Builder Pattern uses a separate builder class that constructs the target object step by step through a fluent interface.

Think of it like assembling a custom computer: instead of trying to specify every component at once, you start with a base configuration and add components one by one until you have your perfect machine.

The Problem: Constructor Hell

Before diving into the solution, let's examine the problem the Builder Pattern solves. Consider this common scenario:

// The nightmare constructor
class User {
  constructor(
    public id: number,
    public name: string,
    public email: string,
    public age?: number,
    public address?: string,
    public phone?: string,
    public isActive?: boolean,
    public role?: string,
    public department?: string,
    public salary?: number,
    public startDate?: Date,
    public manager?: string
  ) {
    this.isActive = isActive ?? true;
  }
}

// Creating users becomes a nightmare
const user1 = new User(1, 'John', 'john@example.com', 30, '123 Main St', '+1-555-0123', true, 'Developer', 'Engineering', 75000, new Date(), 'Jane Smith');

// What if you only want to set some fields?
const user2 = new User(2, 'Jane', 'jane@example.com', undefined, undefined, undefined, false);

This approach has several problems:

Poor readability: It's hard to understand what each parameter represents
Error-prone: Easy to mix up parameter positions
Inflexible: You must specify parameters in a fixed order
Maintenance nightmare: Adding new parameters breaks existing code

Understanding the Builder Pattern

The Builder Pattern solves these issues by:

Separating construction from representation: The builder handles how the object is constructed
Providing a fluent interface: Method chaining makes the code readable
Offering flexibility: You can set only the properties you need
Ensuring validation: The builder can validate the object before creation

Key Components

Product: The complex object being constructed
Builder: Abstract interface defining construction steps
Concrete Builder: Implements the Builder interface
Director (optional): Orchestrates the building process

Basic Implementation in TypeScript

Let's start with a simple implementation:

interface User {
  readonly id: number;
  readonly name: string;
  readonly email: string;
  readonly age?: number;
  readonly address?: string;
  readonly phone?: string;
  readonly isActive: boolean;
}

class UserBuilder {
  private user: Partial<User> = { isActive: true };

  constructor(id: number, name: string, email: string) {
    this.user.id = id;
    this.user.name = name;
    this.user.email = email;
  }

  setAge(age: number): UserBuilder {
    this.user.age = age;
    return this;
  }

  setAddress(address: string): UserBuilder {
    this.user.address = address;
    return this;
  }

  setPhone(phone: string): UserBuilder {
    this.user.phone = phone;
    return this;
  }

  setActive(isActive: boolean): UserBuilder {
    this.user.isActive = isActive;
    return this;
  }

  build(): User {
    if (!this.user.id || !this.user.name || !this.user.email) {
      throw new Error('Missing required user fields');
    }

    return { ...this.user } as User;
  }
}

Now creating users becomes elegant and readable:

const user1 = new UserBuilder(1, 'John Doe', 'john@example.com')
  .setAge(30)
  .setAddress('123 Main St')
  .setPhone('+1-555-0123')
  .build();

const user2 = new UserBuilder(2, 'Jane Smith', 'jane@example.com')
  .setAge(25)
  .setActive(false)
  .build();

Advanced Builder Techniques

1. Generic Builder Base Class

Create a reusable base class for all your builders:

abstract class Builder<T> {
  protected product: Partial<T> = {};

  abstract build(): T;

  protected validateRequired(fields: (keyof T)[]): void {
    for (const field of fields) {
      if (this.product[field] === undefined || this.product[field] === null) {
        throw new Error(`Missing required field: ${String(field)}`);
      }
    }
  }

  protected setField<K extends keyof T>(field: K, value: T[K]): this {
    this.product[field] = value;
    return this;
  }
}

2. Type-Safe Required Fields

Ensure required fields are set before building:

type RequiredFields<T, K extends keyof T> = T & Required<Pick<T, K>>;

class TypeSafeUserBuilder {
  private user: Partial<User> = { isActive: true };
  private requiredFields = new Set<keyof User>();

  constructor(id: number, name: string, email: string) {
    this.user.id = id;
    this.user.name = name;
    this.user.email = email;
    this.requiredFields.add('id');
    this.requiredFields.add('name');
    this.requiredFields.add('email');
  }

  build(): RequiredFields<User, 'id' | 'name' | 'email' | 'isActive'> {
    for (const field of this.requiredFields) {
      if (this.user[field] === undefined) {
        throw new Error(`Required field ${String(field)} is missing`);
      }
    }

    return this.user as RequiredFields<User, 'id' | 'name' | 'email' | 'isActive'>;
  }
}

3. Conditional Builder Methods

Create builders that adapt based on previous choices:

interface DatabaseConfig {
  type: 'mysql' | 'postgresql' | 'mongodb';
  host: string;
  port: number;
  database: string;
  // MySQL/PostgreSQL specific
  username?: string;
  password?: string;
  ssl?: boolean;
  // MongoDB specific
  connectionString?: string;
  authSource?: string;
}

class DatabaseConfigBuilder {
  private config: Partial<DatabaseConfig> = {};

  setType(type: DatabaseConfig['type']): this {
    this.config.type = type;
    return this;
  }

  setHost(host: string): this {
    this.config.host = host;
    return this;
  }

  setPort(port: number): this {
    this.config.port = port;
    return this;
  }

  setDatabase(database: string): this {
    this.config.database = database;
    return this;
  }

  // Only available for SQL databases
  setSqlCredentials(username: string, password: string): this {
    if (this.config.type === 'mongodb') {
      throw new Error('SQL credentials not applicable for MongoDB');
    }
    this.config.username = username;
    this.config.password = password;
    return this;
  }

  enableSsl(): this {
    if (this.config.type === 'mongodb') {
      throw new Error('SSL configuration handled via connection string for MongoDB');
    }
    this.config.ssl = true;
    return this;
  }

  // Only for MongoDB
  setConnectionString(connectionString: string): this {
    if (this.config.type !== 'mongodb') {
      throw new Error('Connection string only applicable for MongoDB');
    }
    this.config.connectionString = connectionString;
    return this;
  }

  build(): DatabaseConfig {
    if (!this.config.type || !this.config.host || !this.config.database) {
      throw new Error('Missing required database configuration');
    }

    if (this.config.type !== 'mongodb' && (!this.config.username || !this.config.password)) {
      throw new Error('Username and password required for SQL databases');
    }

    return { ...this.config } as DatabaseConfig;
  }
}

Real-World Examples

1. HTTP Client Builder

interface HttpClientConfig {
  baseURL: string;
  timeout: number;
  headers: Record<string, string>;
  retries: number;
  retryDelay: number;
  interceptors: {
    request?: Function[];
    response?: Function[];
  };
}

class HttpClientBuilder {
  private config: Partial<HttpClientConfig> = {
    timeout: 5000,
    headers: {},
    retries: 3,
    retryDelay: 1000,
    interceptors: { request: [], response: [] }
  };

  setBaseURL(url: string): this {
    this.config.baseURL = url;
    return this;
  }

  setTimeout(timeout: number): this {
    this.config.timeout = timeout;
    return this;
  }

  addHeader(key: string, value: string): this {
    this.config.headers![key] = value;
    return this;
  }

  setRetries(count: number, delay = 1000): this {
    this.config.retries = count;
    this.config.retryDelay = delay;
    return this;
  }

  addRequestInterceptor(interceptor: Function): this {
    this.config.interceptors!.request!.push(interceptor);
    return this;
  }

  addResponseInterceptor(interceptor: Function): this {
    this.config.interceptors!.response!.push(interceptor);
    return this;
  }

  build(): HttpClientConfig {
    if (!this.config.baseURL) {
      throw new Error('Base URL is required');
    }

    return { ...this.config } as HttpClientConfig;
  }
}

// Usage
const httpClient = new HttpClientBuilder()
  .setBaseURL('https://api.example.com')
  .setTimeout(10000)
  .addHeader('Authorization', 'Bearer token123')
  .addHeader('Content-Type', 'application/json')
  .setRetries(5, 2000)
  .addRequestInterceptor((config) => {
    console.log('Request:', config);
    return config;
  })
  .build();

2. Test Data Builder

interface TestUser {
  id: number;
  name: string;
  email: string;
  age: number;
  role: 'admin' | 'user' | 'moderator';
  permissions: string[];
  isActive: boolean;
  createdAt: Date;
}

class TestUserBuilder {
  private user: Partial<TestUser> = {
    id: Math.floor(Math.random() * 1000),
    name: 'Test User',
    email: 'test@example.com',
    age: 25,
    role: 'user',
    permissions: [],
    isActive: true,
    createdAt: new Date()
  };

  withId(id: number): this {
    this.user.id = id;
    return this;
  }

  withName(name: string): this {
    this.user.name = name;
    this.user.email = `${name.toLowerCase().replace(' ', '.')}@example.com`;
    return this;
  }

  withAge(age: number): this {
    this.user.age = age;
    return this;
  }

  asAdmin(): this {
    this.user.role = 'admin';
    this.user.permissions = ['read', 'write', 'delete', 'admin'];
    return this;
  }

  asModerator(): this {
    this.user.role = 'moderator';
    this.user.permissions = ['read', 'write', 'moderate'];
    return this;
  }

  inactive(): this {
    this.user.isActive = false;
    return this;
  }

  withPermissions(...permissions: string[]): this {
    this.user.permissions = [...(this.user.permissions || []), ...permissions];
    return this;
  }

  createdDaysAgo(days: number): this {
    const date = new Date();
    date.setDate(date.getDate() - days);
    this.user.createdAt = date;
    return this;
  }

  build(): TestUser {
    return { ...this.user } as TestUser;
  }
}

// Usage in tests
const adminUser = new TestUserBuilder()
  .withName('John Admin')
  .asAdmin()
  .createdDaysAgo(30)
  .build();

const inactiveUser = new TestUserBuilder()
  .withName('Jane Inactive')
  .inactive()
  .withAge(45)
  .build();

Best Practices and Guidelines

1. Method Naming Conventions

Use consistent, descriptive method names:

set* for simple assignments: setName(), setAge()
add* for collections: addPermission(), addHeader()
with* for fluent descriptions: withTimeout(), withRetries()
enable*/disable* for boolean toggles: enableSsl(), disableLogging()

2. Validation Strategy

Implement validation at the right time:

Constructor validation: For truly required fields
Method validation: For invalid combinations
Build-time validation: For complete object integrity

class ValidationBuilder {
  private config: any = {};

  setPort(port: number): this {
    if (port < 1 || port > 65535) {
      throw new Error('Port must be between 1 and 65535');
    }
    this.config.port = port;
    return this;
  }

  build() {
    // Final validation
    if (this.config.ssl && this.config.port === 80) {
      throw new Error('SSL cannot be used with port 80');
    }
    return this.config;
  }
}

3. Immutability

Make built objects immutable:

class ImmutableBuilder {
  build(): Readonly<Product> {
    return Object.freeze({ ...this.product });
  }
}

4. Builder Reset

Allow builders to be reused:

class ReusableBuilder {
  private config: any = {};

  reset(): this {
    this.config = {};
    return this;
  }

  clone(): ReusableBuilder {
    const newBuilder = new ReusableBuilder();
    newBuilder.config = { ...this.config };
    return newBuilder;
  }
}

Common Pitfalls to Avoid

1. Forgetting to Return `this`

// Wrong
setName(name: string): void {
  this.user.name = name;
}

// Correct
setName(name: string): this {
  this.user.name = name;
  return this;
}

2. Mutable Internal State

// Dangerous - exposes internal state
getConfig() {
  return this.config;
}

// Better - return copy
getConfig() {
  return { ...this.config };
}

3. Not Handling Edge Cases

// Consider null/undefined inputs
setOptionalField(value?: string): this {
  if (value !== undefined && value !== null) {
    this.config.field = value;
  }
  return this;
}

4. Over-engineering

Don't use the Builder Pattern for simple objects:

// Overkill for simple objects
class SimplePersonBuilder {
  private person = {};

  setName(name: string): this {
    this.person.name = name;
    return this;
  }

  build() {
    return this.person;
  }
}

// Just use an object literal
const person = { name: 'John' };

Builder vs Other Patterns

Builder vs Factory

Factory: Creates objects in one step, usually based on a parameter
Builder: Creates objects step by step with fine-grained control

// Factory
class UserFactory {
  static createAdmin(name: string): User {
    return new User(name, 'admin');
  }
}

// Builder - more flexible
const user = new UserBuilder()
  .setName('John')
  .setRole('admin')
  .setPermissions('read', 'write')
  .build();

Builder vs Constructor with Options

Options object: Simple but can become unwieldy
Builder: More verbose but offers better validation and fluent interface

// Options approach
interface UserOptions {
  name: string;
  email: string;
  age?: number;
  // ... many more optional fields
}

class User {
  constructor(options: UserOptions) {
    // Validation and assignment
  }
}

// Builder approach - more explicit and validatable
const user = new UserBuilder('John', 'john@example.com')
  .setAge(30)
  .build();

Performance Considerations

The Builder Pattern has minimal performance overhead, but consider these factors:

Memory usage: Builders hold intermediate state
Object creation: Each method call might create intermediate objects
Validation cost: Multiple validation passes can add up

For high-performance scenarios, consider:

Reusing builder instances
Lazy validation
Object pooling for frequently created objects

Testing with Builders

Builders are excellent for testing because they create readable test data:

describe('UserService', () => {
  it('should handle admin users correctly', () => {
    const admin = new TestUserBuilder()
      .asAdmin()
      .withName('Test Admin')
      .build();

    const result = userService.processUser(admin);

    expect(result.hasAdminAccess).toBe(true);
  });

  it('should reject inactive users', () => {
    const inactiveUser = new TestUserBuilder()
      .inactive()
      .build();

    expect(() => userService.processUser(inactiveUser))
      .toThrow('User is not active');
  });
});

Conclusion

The Builder Pattern is a powerful tool in TypeScript development that solves the common problem of complex object construction. It provides:

Better readability through fluent interfaces
Improved maintainability by avoiding constructor hell
Enhanced flexibility in object creation
Strong type safety with TypeScript's type system
Excellent testability with readable test data creation

While it adds some complexity, the Builder Pattern pays dividends in codebases with complex object creation needs. Use it wisely for objects with multiple optional parameters, complex validation rules, or when you need fine-grained control over the construction process.

Remember: the goal isn't to use the Builder Pattern everywhere, but to use it where it adds genuine value. When you find yourself struggling with unwieldy constructors or complex object initialization, the Builder Pattern is your friend.

Start simple, add complexity as needed, and always prioritize readability and maintainability. Your future self (and your teammates) will thank you for writing clear, expressive code that's easy to understand and modify.

Why Do Some Packages Require `import * as …` Instead of `import …`?

Md Shahjalal — Mon, 15 Sep 2025 18:21:46 +0000

When you start working with JavaScript or TypeScript, you’ll notice two different styles of importing libraries:

// Style 1
import * as moment from "moment";

// Style 2
import moment from "moment";

At first glance, these two look similar. But depending on the project, one may work while the other gives you an error.

So why do some packages “require” import * as? And when can you use the cleaner import … style?
The answer lies in module systems and TypeScript compiler settings.

Module Systems: CommonJS vs ES Modules

There are two main ways JavaScript code is packaged:

1. CommonJS (CJS)

The original Node.js system. Uses require and module.exports.

// moment/index.js
module.exports = moment;

// Using require
const moment = require("moment");

2. ES Modules (ESM)

The modern JavaScript standard. Uses import and export.

// modern-style module
export default PDFDocument;

// Using import
import PDFDocument from "pdfkit";

👉 Most older libraries like Moment.js, PDFKit, and Lodash were written in CommonJS, not ESM.

What `import * as …` Does

When you write:

import * as moment from "moment";

This means:

“Import the entire module object and assign it to the variable moment.”

If the module only exports one thing (like Moment.js does), you’ll still get the whole object under that name.

✅ This always works with CommonJS libraries.
❌ It feels a little verbose.

What `import …` Does

When you write:

import moment from "moment";

This means:

“Import the default export from the module.”

But here’s the catch: CommonJS libraries don’t technically have a default export.

That’s why in TypeScript you need to enable some flags in your tsconfig.json:

{
  "compilerOptions": {
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true
  }
}

These options tell TypeScript:
👉 “Pretend that CommonJS modules export a default object so we can use import x from "y";.”

Examples in Action

Let’s see how this plays out with a few popular libraries.

Example 1: Moment.js

// Works everywhere
import * as moment from "moment";

console.log(moment().format("YYYY-MM-DD"));

// Cleaner, but requires esModuleInterop
import moment from "moment";

console.log(moment().format("YYYY-MM-DD"));

Example 2: PDFKit

// Namespace import
import * as PDFDocument from "pdfkit";

const doc = new PDFDocument();
doc.text("Hello, PDFKit!");
doc.end();

// Default import (needs esModuleInterop)
import PDFDocument from "pdfkit";

const doc = new PDFDocument();
doc.text("Hello, PDFKit with default import!");
doc.end();

Example 3: Lodash

// Namespace import
import * as _ from "lodash";

console.log(_.capitalize("hello world"));

// Default import (needs esModuleInterop)
import _ from "lodash";

console.log(_.capitalize("hello world"));

Why Some Projects Use `* as …`

They have strict TypeScript settings (esModuleInterop: false).
They want to stay compatible with pure CommonJS modules.
Older codebases often stick with this style.

Why Some Projects Use Default Imports

They enabled esModuleInterop: true.
They prefer the cleaner syntax:

import moment from "moment";
import PDFDocument from "pdfkit";
import _ from "lodash";

It matches modern ESM conventions.

Which One Should You Use?

✅ For new projects: enable esModuleInterop in tsconfig.json and use import x from "package".
✅ For legacy or strict projects: use import * as x from "package".
✅ For modern libraries (like Luxon, Axios, etc.): always use import x from "package" — they’re written as ES Modules.

The difference isn’t about Moment.js, PDFKit, or Lodash themselves.
It’s about how TypeScript bridges the gap between CommonJS and ES Modules.

import * as X → Import the entire module object (safe for all CommonJS packages).
import X → Import the default export (only works if you enable esModuleInterop).

👉 So, if a package seems to “require” * as, it’s not the package’s fault — it’s just your project’s module configuration.

Mastering Debugging why APIs Slow & How to Solve

Md Shahjalal — Sun, 14 Sep 2025 18:27:17 +0000

It was just another normal day at work. I pushed a new feature, merged my PR, and everything looked fine. Until…
the support team messaged:

“Hey, users are complaining the dashboard is taking forever to load. Can you check?”

😅 Uh oh. My once-fast API was now sluggish.

That’s when I started my debugging journey.

🔎 Step 1: The First Clue — Measuring the Problem

The first rule of debugging: don’t guess — measure.

I added a simple middleware in my NestJS app to log response times:

// logger.middleware.ts
import { Injectable, NestMiddleware } from '@nestjs/common';
import { Request, Response, NextFunction } from 'express';

@Injectable()
export class LoggerMiddleware implements NestMiddleware {
  use(req: Request, res: Response, next: NextFunction) {
    const start = Date.now();
    res.on('finish', () => {
      const duration = Date.now() - start;
      console.log(`${req.method} ${req.originalUrl} - ${duration}ms`);
    });
    next();
  }
}

👉 Boom. The metrics showed some endpoints were taking 800ms+ just to respond. Too slow.

💻 Step 2: Client-Side Payloads

The first bottleneck wasn’t even the backend—it was sending too much data.
Our API was returning entire tables in one response.

Fix → Pagination + Compression

// main.ts
import * as compression from 'compression';
app.use(compression()); // reduce payload size

// users.service.ts
async getUsers(page = 1, limit = 20) {
  return this.userRepo.find({
    skip: (page - 1) * limit,
    take: limit,
  });
}

👉 Just like that, the response shrank from 2MB → 200KB. Faster load times already.

🗄 Step 3: The Real Culprit — Database

Next, I checked Postgres queries. Running EXPLAIN ANALYZE revealed the users lookup by email was scanning the whole table.

Fix → Add an Index

CREATE INDEX idx_users_email ON users(email);

And update the NestJS query:

async getUserByEmail(email: string) {
  return this.userRepo.findOne({ where: { email } });
}

👉 Query time dropped from 500ms → 20ms. Huge win.

⚡ Step 4: Redis to the Rescue

Some queries were still slow because the same data was being fetched repeatedly.
Solution? Cache it in Redis.

// users.service.ts
async getUserCached(id: number) {
  const key = `user:${id}`;
  let user = await this.cache.get(key);

  if (user) return { source: 'cache', user };

  user = await this.userRepo.findOne({ where: { id } });
  if (user) await this.cache.set(key, user, 60); // cache for 1 min

  return { source: 'db', user };
}

👉 Second request was now 5ms instead of hitting the DB again.

🔗 Step 5: Slow External APIs

One endpoint was calling a third-party API. Sometimes it just hung for 10+ seconds 😱.

Fix → Add Timeout + Retry

// external.service.ts
import axios from 'axios';

async fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data', {
      timeout: 3000, // 3s timeout
    });
    return response.data;
  } catch (err) {
    console.error('API failed:', err.message);
    return null; // graceful fallback
  }
}

👉 No more stuck requests.

🏗 Step 6: Heavy Workloads

We also had tasks like sending emails and generating reports. They were blocking the API.

Fix → Offload to Background Jobs (BullMQ)

// producer.service.ts
import { Queue } from 'bullmq';
const queue = new Queue('emailQueue');

await queue.add('sendEmail', { to: 'user@test.com' });

// worker.ts
import { Worker } from 'bullmq';
new Worker('emailQueue', async job => {
  console.log('Sending email:', job.data);
});

👉 API responds instantly while jobs run in the background.

⚙️ Step 7: Scaling Up

Finally, with everything optimized, we scaled the service horizontally:

pm2 start dist/main.js -i max

👉 Multiple processes → better use of all CPU cores.

✅ The Happy Ending

After all these fixes:

Endpoints went from 800ms → under 100ms.
Database CPU load dropped by 70%.
Users stopped complaining 🎉.

✨ Lessons Learned

Debugging a slow API isn’t about magic. It’s about following a process:

Measure → find the bottleneck.
Isolate → confirm where the slowdown is.
Fix → apply the right optimization.

And most importantly: fix the biggest bottleneck first, then repeat.

👉 Next time your API slows down, don’t panic. Just follow the Measure → Isolate → Fix cycle, and maybe you’ll even enjoy the detective work 😉.

What Are Pointers in Go? A Simple Guide for Beginners

Md Shahjalal — Fri, 29 Aug 2025 08:34:23 +0000

🧠 What Are Pointers in Go? A Simple Guide for Beginners

Confused about pointers in Go? You're not alone. In this post, we’ll break down what pointers are, why they matter, and how to use them — all with simple analogies and real code examples.

🔤 What Is a Pointer?

At its core, a pointer is just a memory address.

Think of your computer’s memory like a giant apartment building, where each apartment (memory location) has a unique number (address). When you create a variable in Go, it gets stored in one of these "apartments."

A pointer doesn’t store the value itself — it stores which apartment (address) the value lives in.

✅ A pointer is a variable that holds the memory address of another variable.

🏠 Real-World Analogy

Imagine you have a friend named Alice who lives at:

123 Memory Lane

You don’t carry her house around with you — you just write down her address.

Now, if someone asks you where Alice is, you can say:

“She lives at 123 Memory Lane.”

In programming:

The house = a variable (e.g., num := 10)
The address = a pointer (e.g., &num)
Going to the house and changing something inside = dereferencing the pointer

This is exactly how pointers work!

⚙️ The Two Key Symbols: `&` and `*`

There are only two symbols you need to understand:

Symbol	Name	Meaning
`&`	Ampersand	"Address of" → gives you the memory address
`*`	Asterisk	"Value at" → accesses the data at that address

Let’s see them in action.

package main

import "fmt"

func main() {
    num := 42
    fmt.Println("Value:", num)       // 42
    fmt.Println("Address:", &num)    // e.g., 0xc00001a0b8
}

Output:

Value: 42
Address: 0xc00001a0b8

Here, &num gives us the address where 42 is stored.

Now let’s store that address in a pointer:

var ptr *int = &num
fmt.Println("Pointer:", ptr)        // 0xc00001a0b8
fmt.Println("Value at ptr:", *ptr)  // 42

ptr holds the address.
*ptr means: “go to that address and get the value.”

We call *ptr dereferencing the pointer.

❓ Why Do We Need Pointers?

Go passes arguments to functions by value, which means it makes a copy of the data.

This leads to a big problem...

🟡 Problem: Can’t Modify Variables in Functions

func changeValue(x int) {
    x = 100
}

func main() {
    num := 1
    changeValue(num)
    fmt.Println(num) // Still prints 1 → Not changed!
}

Why? Because changeValue only modifies its copy of num, not the original.

✅ Solution: Use a Pointer

Instead of passing the value, pass the address of the variable.

func changeValueWithPointer(x *int) {
    *x = 100 // Modify the original value
}

func main() {
    num := 1
    changeValueWithPointer(&num) // Pass the address
    fmt.Println(num) // Now prints 100 ✅
}

Now it works! The function uses the pointer to modify the original variable.

🛠️ How to Declare and Use Pointers

1. Declare a Pointer

var ptr *int

This creates a pointer to an integer (but it’s nil for now).

2. Assign an Address

num := 25
ptr = &num

3. Dereference to Read or Write

fmt.Println(*ptr) // Read: prints 25
*ptr = 50         // Write: changes num to 50

💡 When Should You Use Pointers?

Use Case	Why
Modify variables in functions	Pass a pointer to change the original
Avoid copying large structs	Passing a pointer (8 bytes) is faster than copying KBs of data
Share data between functions	Multiple parts of your program can access the same data
Working with slices, maps, channels	These types are reference-like, but understanding pointers helps you debug and design better

⚠️ Common Pitfall: Nil Pointer Dereference

Never dereference a nil pointer — it will crash your program!

var p *int
fmt.Println(*p) // 💥 PANIC: invalid memory address

Always make sure your pointer points to valid memory before using *p.

🧪 Example: Swapping Two Numbers

Here’s a classic use case: swap two numbers using pointers.

func swap(a, b *int) {
    *a, *b = *b, *a // Dereference and swap
}

func main() {
    x, y := 5, 10
    fmt.Println("Before:", x, y) // 5 10
    swap(&x, &y)
    fmt.Println("After:", x, y)  // 10 5
}

Without pointers, this would be impossible in Go!

🧠 Summary: Key Takeaways

A pointer holds the memory address of a variable.
Use & to get the address: &num
Use * to access the value: *ptr
Pointers let functions modify original variables
They help avoid expensive copies and enable shared state
Be careful: don’t dereference nil pointers

📚 Final Thought

Pointers may seem scary at first, but once you think of them as addresses to data, they become much simpler.

They are one of Go’s most powerful features — and once you master them, you’ll write more efficient, flexible, and expressive code.

🔗 Remember: A pointer doesn’t hold the treasure. It holds the map to the treasure.

🙋‍♂️ Got Questions?

🧑‍🏫 Tutorial: How to Build a Searchable Dropdown Component in React

Md Shahjalal — Sun, 24 Aug 2025 18:21:58 +0000

In this comprehensive tutorial, you'll learn how to build a fully accessible, debounced, searchable dropdown component in React using hooks, TypeScript, and best practices.

This component is perfect for autocompleting users, products, or any data fetched from an API.

We'll walk through each part of the code step-by-step, explain what it does, and why it’s structured that way.

✅ Final Features

🔍 Search-as-you-type with debounce
⏱️ Debounced input to avoid excessive API calls
🌐 Async data fetching
📱 Accessible (ARIA attributes, keyboard navigation)
⌨️ Keyboard navigation (arrow keys, Enter, Escape)
❌ Click outside to close
🎨 Customizable rendering
🛑 Error handling and loading states
💬 No results / empty state
📏 Controlled minimum query length

🛠️ Prerequisites

Before starting, ensure you have:

Basic knowledge of React and TypeScript
A React project set uu
Some familiarity with React hooks (useState, useEffect, useCallback, useMemo, useRef)

📁 Step 1: Create the Component File

Create a new file: SearchableDropdown.tsx

src/components/SearchableDropdown.tsx

🧩 Step 2: Import Dependencies

import React, {
  useState,
  useEffect,
  useRef,
  useCallback,
  useMemo,
} from 'react';

We’re using several React hooks:

useState: manage component state
useEffect: side effects (fetching, event listeners)
useRef: access DOM elements
useCallback: memoize functions
useMemo: memoize expensive computations

🔁 Step 3: Create the `useDebounce` Hook

This custom hook delays updates to the search query so we don’t call the API on every keystroke.

const useDebounce = (value: string, delay: number) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const handler = setTimeout(() => setDebouncedValue(value), delay);
    return () => clearTimeout(handler);
  }, [value, delay]);

  return debouncedValue;
};

🔍 How It Works:

Every time value changes, restart a 300ms timer.
Only after 300ms without changes will debouncedValue update.
Prevents spamming the API during fast typing.

💡 Tip: You can reuse this hook anywhere you need debouncing!

📦 Step 4: Define the Component Props

We define a generic interface for flexibility.

interface SearchableDropdownProps<T> {
  fetchOptions: (query: string) => Promise<T[]>;
  displayValue: (item: T) => string;
  renderOption?: (item: T) => React.ReactNode;
  placeholder?: string;
  minQueryLength?: number;
}

🔎 Explanation:

Prop	Purpose
`fetchOptions`	Async function to fetch data based on query
`displayValue`	Function to extract display string from item
`renderOption` (optional)	Custom JSX for each dropdown option
`placeholder` (optional)	Input placeholder text
`minQueryLength` (optional)	Minimum characters before search starts

🎯 Step 5: Forward Ref & Generic Typing

We use React.forwardRef so parent components can access the <input> element (e.g., for focusing).

const SearchableDropdown = React.forwardRef<
  HTMLInputElement,
  SearchableDropdownProps<any>
>(
  (
    {
      fetchOptions,
      displayValue,
      renderOption,
      placeholder = 'Search...',
      minQueryLength = 2,
    },
    ref
  ) => {
    // component logic here
  }
);

🔒 Note: We use any temporarily. For full type safety, we’ll improve this later.

🧠 Step 6: Manage Component State

Inside the component, define all necessary state:

const [query, setQuery] = useState('');
const [options, setOptions] = useState<any[]>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [showDropdown, setShowDropdown] = useState(false);
const [focusedIndex, setFocusedIndex] = useState(-1);

const dropdownRef = useRef<HTMLDivElement>(null);

State	Purpose
`query`	Current input value
`options`	Fetched results
`loading`	Show loading indicator
`error`	Handle fetch errors
`showDropdown`	Toggle dropdown visibility
`focusedIndex`	Track keyboard-highlighted option
`dropdownRef`	Detect clicks outside

⏳ Step 7: Debounce the Query

Use the custom hook to debounce the search:

const debouncedQuery = useDebounce(query, 300);

Now debouncedQuery only updates 300ms after user stops typing.

🌐 Step 8: Fetch Options on Debounced Query

Use useEffect to trigger API calls when debouncedQuery changes.

useEffect(() => {
  if (debouncedQuery.trim().length < minQueryLength) {
    setOptions([]);
    setShowDropdown(false);
    setFocusedIndex(-1);
    return;
  }

  const fetchData = async () => {
    setLoading(true);
    setError(null);
    try {
      const results = await fetchOptions(debouncedQuery.trim());
      setOptions(results || []);
      setShowDropdown(true);
    } catch (err: any) {
      console.error(err);
      setError(err.message || 'Failed to load options');
      setOptions([]);
    } finally {
      setLoading(false);
      setFocusedIndex(-1);
    }
  };

  fetchData();
}, [debouncedQuery, fetchOptions, minQueryLength]);

✅ Logic Flow:

If query too short → clear results and hide dropdown
Otherwise → fetch results
Handle success/error
Always reset focused index

⚠️ Dependencies include fetchOptions and minQueryLength to avoid stale closures.

🖱️ Step 9: Close Dropdown on Outside Click

Add a click-outside listener:

useEffect(() => {
  const handleClickOutside = (e: MouseEvent) => {
    if (
      dropdownRef.current &&
      !dropdownRef.current.contains(e.target as Node)
    ) {
      setShowDropdown(false);
    }
  };
  document.addEventListener('mousedown', handleClickOutside);
  return () =>
    document.removeEventListener('mousedown', handleClickOutside);
}, []);

This ensures dropdown closes when clicking elsewhere.

✅ Step 10: Handle Option Selection

Define a stable callback with useCallback:

const handleSelect = useCallback(
  (item: any) => {
    setQuery(displayValue(item));
    setShowDropdown(false);
    setOptions([]);
    setFocusedIndex(-1);
  },
  [displayValue]
);

Sets the input to selected item and hides the list.

⌨️ Step 11: Keyboard Navigation

Handle arrow keys, Enter, and Escape:

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  if (!showDropdown || options.length === 0) return;

  switch (e.key) {
    case 'ArrowDown':
      e.preventDefault();
      setFocusedIndex(prev => (prev + 1) % options.length);
      break;
    case 'ArrowUp':
      e.preventDefault();
      setFocusedIndex(prev => (prev - 1 + options.length) % options.length);
      break;
    case 'Enter':
      e.preventDefault();
      if (focusedIndex >= 0) handleSelect(options[focusedIndex]);
      break;
    case 'Escape':
      setShowDropdown(false);
      break;
  }
};

ArrowDown / ArrowUp: Cycle through options
Enter: Select highlighted option
Escape: Close dropdown

% options.length enables circular navigation.

🧾 Step 12: Render Options Efficiently

Use useMemo to prevent unnecessary re-renders:

const renderedOptions = useMemo(() => {
  if (loading)
    return <li className='p-2 text-sm text-gray-500 italic'>Loading...</li>;
  if (error) return <li className='p-2 text-sm text-red-500'>{error}</li>;
  if (!loading && options.length === 0 && query.length >= minQueryLength)
    return <li className='p-2 text-sm text-gray-500'>No results found</li>;

  return options.map((option, index) => {
    const isSelected = index === focusedIndex;
    return (
      <li
        key={option.id || index}
        role='option'
        aria-selected={isSelected}
        onClick={() => handleSelect(option)}
        onMouseEnter={() => setFocusedIndex(index)}
        className={`p-2 cursor-pointer hover:bg-gray-100 ${
          isSelected ? 'bg-blue-50' : ''
        } ${index < options.length - 1 ? 'border-b border-gray-100' : ''}`}
      >
        {renderOption ? renderOption(option) : displayValue(option)}
        {option.email && (
          <span className='text-gray-500 text-xs'> ({option.email})</span>
        )}
      </li>
    );
  });
}, [
  loading,
  error,
  options,
  focusedIndex,
  query,
  renderOption,
  displayValue,
  handleSelect,
  minQueryLength,
]);

🎨 Notes:

Uses ARIA roles for accessibility
Highlights hovered/focused item
Falls back to index if no id
Shows email if available (could be removed or generalized)

🖼️ Step 13: Render the UI

Finally, return the JSX:

return (
  <div className='w-72 relative' ref={dropdownRef}>
    <input
      ref={ref}
      type='text'
      placeholder={placeholder}
      value={query}
      onChange={e => setQuery(e.target.value)}
      onFocus={() => {
        if (query.length >= minQueryLength && options.length > 0)
          setShowDropdown(true);
      }}
      onKeyDown={handleKeyDown}
      aria-autocomplete='list'
      aria-expanded={showDropdown}
      aria-controls='dropdown-listbox'
      className='w-full p-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-400'
    />

    {showDropdown && (
      <ul
        id='dropdown-listbox'
        role='listbox'
        aria-label='Search results'
        className='absolute top-11 left-0 right-0 bg-white border border-gray-300 rounded-md shadow-md max-h-48 overflow-y-auto z-10'
      >
        {renderedOptions}
      </ul>
    )}
  </div>
);

🔍 Accessibility Highlights:

aria-autocomplete="list": indicates suggestions
aria-expanded: shows if dropdown is open
aria-controls: links input to listbox
role="listbox" and option": proper ARIA semantics

💡 The dropdown appears below the input (top-11 ≈ input height + padding)

🏷️ Step 14: Set Display Name

Helpful for debugging in React DevTools:

SearchableDropdown.displayName = 'SearchableDropdown';

🚀 Step 15: Export the Component

export default SearchableDropdown;

🧪 Step 16: Example Usage

Here’s how to use it in a parent component:

import SearchableDropdown from './SearchableDropdown';

// Example data type
interface User {
  id: number;
  name: string;
  email: string;
}

const App = () => {
  const fetchUsers = async (query: string): Promise<User[]> => {
    const res = await fetch(`/api/users?q=${encodeURIComponent(query)}`);
    return res.json();
  };

  const inputRef = useRef<HTMLInputElement>(null);

  return (
    <div className="p-8">
      <h1>Search Users</h1>
      <SearchableDropdown
        ref={inputRef}
        fetchOptions={fetchUsers}
        displayValue={(user) => user.name}
        renderOption={(user) => (
          <div>
            <strong>{user.name}</strong>
            <span className="text-gray-600"> — {user.email}</span>
          </div>
        )}
        placeholder="Search users..."
        minQueryLength={2}
      />
    </div>
  );
};

✅ Bonus: Improve Type Safety (Optional)

Replace any with proper generics:

const SearchableDropdown = React.forwardRef<
  HTMLInputElement,
  SearchableDropdownProps<unknown>
>(({ fetchOptions, displayValue, renderOption, placeholder = 'Search...', minQueryLength = 2 }, ref) => {
  // ... same logic
});

Or better yet, keep T generic:

const SearchableDropdown = React.forwardRef(
  <T extends unknown>(
    props: SearchableDropdownProps<T>,
    ref: React.ForwardedRef<HTMLInputElement>
  ) => { ... }
) as <T>(
  props: SearchableDropdownProps<T> & React.RefAttributes<HTMLInputElement>
) => JSX.Element;

But this requires advanced typing — stick with any or unknown unless you need strict typing.

You’ve now built a production-ready searchable dropdown with:

Debouncing
Async loading
Full keyboard + mouse support
Error handling
Accessibility
Reusability

It's modular, clean, and scalable — ideal for forms, user searches, product selectors, and more.

Happy coding! 💻✨

TypeORM | Query Builder

Md Shahjalal — Thu, 18 Jan 2024 23:09:42 +0000

** Hello, Everyone! In this post I am going to discuss an important concept about typeOrm **

Suppose we have two entities like below

1. User Entity:

Assuming a simple User entity with a one-to-one relationship with the Phone entity:

import { Entity, PrimaryGeneratedColumn, Column, OneToOne, JoinColumn } from 'typeorm';
import { Phone } from './Phone';

@Entity()
export class User {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  name: string;

  @Column()
  email: string;

  @OneToOne(() => Phone, { cascade: true, eager: true }) // Assuming a one-to-one relationship
  @JoinColumn()
  phone: Phone;
}

2. Phone Entity:

import { Entity, PrimaryGeneratedColumn, Column, OneToOne } from 'typeorm';
import { User } from './User';

@Entity()
export class Phone {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  number: string;

  @OneToOne(() => User, user => user.phone)
  user: User;
}

Here's a guide using TypeORM Query Builder for user and phone entries, along with API examples:

1. Import necessary modules:

import { DataSource, EntityManager, QueryBuilder } from 'typeorm';
import { User, Phone } from './entities'; // Import your entity classes

2. Get a reference to the EntityManager:

const entityManager = dataSource.getEntityManager();

3. Insert user:

async function insertUser(user: User) {
  const queryBuilder = entityManager.createQueryBuilder();
  await queryBuilder
    .insert()
    .into(User)
    .values(user)
    .execute();
}

4. Find user:

async function findUser(userId: number) {
  const queryBuilder = entityManager.createQueryBuilder(User);
  const user = await queryBuilder
    .where('user.id = :id', { id: userId })
    .getOne();
  return user;
}

5. Insert phone and join with user:

async function insertPhone(userId: number, phone: Phone) {
  const queryBuilder = entityManager.createQueryBuilder();
  await queryBuilder
    .insert()
    .into(Phone)
    .values(phone)
    .execute();

  // Join the phone with the user (assuming a one-to-one relationship)
  await entityManager.createQueryBuilder()
    .relation(User, 'phone')
    .of(userId)
    .set(phone);
}

6. Find user with phone joined:

async function findUserWithPhone(userId: number) {
  const queryBuilder = entityManager.createQueryBuilder(User);
  const user = await queryBuilder
    .where('user.id = :id', { id: userId })
    .leftJoinAndSelect('user.phone', 'phone')
    .getOne();
  return user;
}

API examples:

Route for inserting a user:

app.post('/users', async (req, res) => {
  const user = req.body;
  await insertUser(user);
  res.status(201).json(user);
});

Route for finding a user with their phone:

app.get('/users/:userId', async (req, res) => {
  const userId = req.params.userId;
  const user = await findUserWithPhone(userId);
  res.json(user);
});

Thank you

DEV Community: Md Shahjalal

Firebase Push Notifications with React Native CLI & NestJS

Table of Contents

1. Architecture Overview

Notification Types

2. Firebase Project Setup

Steps

3. React Native CLI Installation

4. Android Configuration

Project-level build.gradle

App-level build.gradle

AndroidManifest.xml — Permissions & Metadata

5. iOS Configuration

Enable Push Notifications Capability

AppDelegate.mm

APNs Authentication Key

6. Token Management

7. NestJS Backend Service

Installation

Firebase Admin Module

Environment Variables

8. Topic-Based Notifications

Subscribe to Topics — React Native

NestJS — Send to Topic

Condition-Based Topics

9. Specific User Notifications

Single Device Notification

NestJS Controller

10. Handling Incoming Messages

Notification Handler Hook

Background & Quit State Handler

11. Rich Notifications with Notifee

Notification Channels & Action Buttons

12. Testing & Debugging

Firebase Console (Quickest Method)

cURL Test via FCM v1 REST API

Common Issues & Fixes

Useful Debug Snippets

Understanding Dependency Injection with TypeScript, NestJS, and Angular

Introduction

What is Dependency Injection?

Definition

Types of Dependency Injection

Why Use Dependency Injection?

Dependency Injection in TypeScript

TypeScript Features for DI

Simple TypeScript Example

Manual DI Container

Implementing Dependency Injection in NestJS

Overview of NestJS

Setting Up a NestJS Project

Creating Services with Dependency Injection

How NestJS DI Works

Custom Providers

Using Dependency Injection in Angular

Introduction to Angular's DI System

Providing Services

Practical Angular Example

Best Practices for Angular DI

Conclusion

Key Takeaways

Moving Forward

Call to Action

Mastering React with the Container-Presenter Pattern: A Deep Dive

Mastering React with the Container-Presenter Pattern: A Deep Dive

🔍 Understanding the Fundamental Problem

The Monolithic Component Anti-Pattern

Why This Approach Fails at Scale

1. Violation of Single Responsibility Principle

2. Testing Nightmare

3. Zero Reusability

4. Poor Readability and Maintainability

5. Difficult to Optimize

🎯 The Container-Presenter Solution

📦 Container Components (The "Brain")

🖼️ Presenter Components (The "Face")

🧩 The Mental Model

🔨 Step-by-Step Refactoring: From Monolith to Clean Architecture

Phase 1: Create the Container Component

Phase 2: Create the Main Presenter Component

Project-level `build.gradle`

App-level `build.gradle`

`AndroidManifest.xml` — Permissions & Metadata

`AppDelegate.mm`