DEV Community: Gleidson Leite da Silva

Mastering Dynamic Menu Implementation in React: Advanced State Management

Gleidson Leite da Silva — Sat, 04 Jan 2025 17:35:27 +0000

Discover how to implement a professional-grade dynamic menu in React that your users will love

The Art of Creating Perfect Dynamic Menus

Imagine a critical hospital system where doctors constantly switch between different sections during an emergency. Every second counts, and the last thing they need is to waste time navigating through a confusing menu or having to reopen multiple sections every time they refresh the page. This is where our revolutionary solution comes into play.

In this article, you'll discover how to create a dynamic menu in React that not only maintains its state perfectly between sessions but does so without relying on LocalStorage - an approach that elegantly combines security and performance.

The Real Challenge

In modern enterprise applications, especially in critical environments like hospital systems, banking, or real-time systems, user experience cannot be compromised. Some specific challenges include:

Maintaining consistent navigation states between refreshes
Ensuring performance even with complex menu structures
Implementing a solution that scales with application growth
Maintaining security without relying on local storage

The Solution: Intelligent Data Structure

Our approach utilizes a tree data structure combined with efficient search algorithms. Let's dive into the technical details that make this possible.

Menu Tree Architecture

The foundation of our implementation is a carefully designed tree data structure. Each node represents a menu item that can contain submenus, creating a natural and intuitive hierarchy.

export enum MenuType {
  PRIMARY = 'PRIMARY',
  SECONDARY = 'SECONDARY',
  TERTIARY = 'TERTIARY'
}

export interface TreeNode {
  key: string;
  label: string;
  icon?: ReactNode;
  path?: string;
  children?: TreeNode[];
  type: MenuType;
}

export const menuTree: TreeNode[] = [
  {
    key: "/",
    label: "Dashboard",
    icon: <PieChartOutlined />,
    path: "/",
    type: MenuType.PRIMARY,
  },
  {
    key: "/patients",
    label: "Patient Management",
    icon: <TeamOutlined />,
    type: MenuType.PRIMARY,
    children: [
      {
        key: "/patients/list",
        label: "Patient List",
        path: "/patients/list",
        type: MenuType.SECONDARY,
      },
      {
        key: "/patients/admissions",
        label: "Admissions",
        path: "/patients/admissions",
        type: MenuType.SECONDARY,
      }
    ]
  },
  // Additional menu items...
];

Efficient Indexing System

One of the keys to our solution's exceptional performance is the indexing system:

export const createMenuIndex = (tree: TreeNode[]): Map<string, TreeNode> => {
  const index = new Map<string, TreeNode>();
  const traverse = (nodes: TreeNode[]) => {
    nodes.forEach(node => {
      if (node.path) {
        index.set(node.path, node);
      }
      if (node.children) {
        traverse(node.children);
      }
    });
  };
  traverse(tree);
  return index;
};

Intelligent Navigation Management

The true differentiator of our implementation lies in how we manage navigation and menu state:

export function findParentKeys({ 
  tree, 
  targetKey, 
  parentKeys = [] 
}: {
  tree: TreeNode[];
  targetKey: string;
  parentKeys?: string[];
}): string[] {
  for (const node of tree) {
    if (node.key === targetKey) {
      return parentKeys;
    }
    if (node.children) {
      const found = findParentKeys({
        tree: node.children,
        targetKey,
        parentKeys: [...parentKeys, node.key]
      });
      if (found.length) return found;
    }
  }
  return [];
}

Optimized React Component

The final component elegantly integrates all these functionalities:

import React, { useState, useEffect, useMemo } from 'react';
import { Layout, Menu } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import type { MenuProps } from 'antd';
import { PieChartOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';

const { Sider } = Layout;
type MenuClickEventHandler = MenuProps['onClick'];

const MenuComponent: React.FC = () => {
  const [currentMenu, setCurrentMenu] = useState<MenuType>(MenuType.PRIMARY);
  const [currentSelectedMenuKey, setCurrentSelectedMenuKey] = useState('');
  const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
  const [openKeys, setOpenKeys] = useState<string[]>([]);

  const navigate = useNavigate();
  const location = useLocation();
  const menuIndex = useMemo(() => createMenuIndex(menuTree), []);

  useEffect(() => {
    const foundNode = menuIndex.get(location.pathname);
    if (foundNode) {
      setCurrentMenu(foundNode.type);
      setCurrentSelectedMenuKey(foundNode.key);
      const parentKeys = findParentKeys({ 
        targetKey: foundNode.key, 
        tree: menuTree 
      });
      setOpenKeys(previous => Array.from(new Set([...previous, ...parentKeys])));
    }
  }, [location.pathname, menuIndex]);

  const handleOnMenuItemClick: MenuClickEventHandler = ({ key }) => {
    const foundNode = menuIndex.get(key);
    if (foundNode?.path) {
      navigate(foundNode.path);
    }
  };

  const toggleCollapsed = () => {
    setIsMenuCollapsed(!isMenuCollapsed);
  };

  const menuItems = useMemo(() => {
    const convertTreeToAntdItems = (nodes: TreeNode[]): MenuProps['items'] =>
      nodes.map(node => ({
        key: node.path || node.key,
        icon: node.icon,
        label: node.label,
        children: node.children ? convertTreeToAntdItems(node.children) : undefined,
      }));

    return convertTreeToAntdItems(menuTree);
  }, []);

  return (
    <Sider 
      width={isMenuCollapsed ? 100 : 280} 
      style={{ 
        boxShadow: '2px 4px 6px -1px rgba(0, 0, 0, 0.1)',
        minHeight: '100vh'
      }}
    >
      <Menu
        onClick={handleOnMenuItemClick}
        items={menuItems}
        mode="inline"
        selectedKeys={[currentSelectedMenuKey]}
        inlineCollapsed={isMenuCollapsed}
        openKeys={openKeys}
        onOpenChange={setOpenKeys}
        style={{ height: '100%', borderRight: 0 }}
      />
      <div 
        onClick={toggleCollapsed} 
        style={{ 
          padding: '16px',
          textAlign: 'center',
          cursor: 'pointer',
          borderTop: '1px solid #f0f0f0'
        }}
      >
        {isMenuCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </div>
    </Sider>
  );
};

export default MenuComponent;

Results and Benefits

Our implementation brings tangible benefits:

Exceptional Performance: Instant navigation even in complex menus
Enhanced Security: No dependency on local storage
Superior User Experience: Persistent states without compromises
Maintainability: Clean and well-structured code
Scalability: Ready to grow with your application

Implementation Steps

To implement this solution in your project:

Install the required dependencies:

npm install antd @ant-design/icons react-router-dom

Copy the menu component and supporting functions
Set up your routing structure
Configure your menu tree structure
Integrate the component into your layout
Customize the styling to match your brand

Beyond the Basics

To take this implementation further, consider:

Adding keyboard navigation support
Implementing menu search functionality
Adding animation for state transitions
Creating a context for global menu state management
Adding accessibility features (ARIA labels, keyboard shortcuts)

Conclusion

Implementing dynamic menus in React doesn't have to be challenging. With the approach presented, you have a robust, performant, and secure solution that will elevate your application's quality to a new level.

Try this implementation in your next project and discover why leading enterprises are adopting this approach for their critical systems.

Observables in Node.js: Transforming Asynchronous Chaos into Elegant Code

Gleidson Leite da Silva — Sat, 07 Dec 2024 12:02:17 +0000

Have you ever found yourself wrestling with a tangled mess of asynchronous code in Node.js? Those nested HTTP requests, complex data transformations, and error handling that seem to multiply with each new requirement? If so, you're not alone. This is a common challenge that every Node.js developer faces at some point.

The Real Problem

Imagine this scenario: you need to consume data from three different APIs, combine these results, apply some transformations, and ensure everything works performantly. With traditional callbacks or Promises, you'd likely end up with something like this:

async function fetchDataTraditional() {
  try {
    const [response1, response2, response3] = await Promise.all([
      api.get('/endpoint1'),
      api.get('/endpoint2'),
      api.get('/endpoint3')
    ]);

    const combinedData = [...response1.data, ...response2.data, ...response3.data];
    const filtered = combinedData.filter(item => item.isActive);
    const transformed = filtered.map(item => ({
      ...item,
      processed: true
    }));

    return transformed;
  } catch (error) {
    console.error('Something went wrong:', error);
    throw error;
  }
}

Looks familiar? This code works, but it has several limitations:

We need to wait for all requests to complete before starting processing
Error handling is generalized
Adding new transformations or data sources makes the code more complex
There's no granular control over the data flow

Introducing Observables: The Elegant Solution

Observables offer a more sophisticated and powerful approach to handling asynchronous flows. Here's how the same code would look using RxJS:

import { forkJoin, from } from 'rxjs';
import { map, filter, catchError } from 'rxjs/operators';

const fetchData$ = forkJoin({
  users: from(api.get('/endpoint1')),
  posts: from(api.get('/endpoint2')),
  comments: from(api.get('/endpoint3'))
}).pipe(
  map(({ users, posts, comments }) => [...users, ...posts, ...comments]),
  filter(items => items.length > 0),
  map(items => items.map(item => ({ ...item, processed: true }))),
  catchError(error => {
    console.error('Specific error:', error);
    return [];
  })
);

fetchData$.subscribe({
  next: result => console.log('Processed data:', result),
  error: err => console.error('Flow error:', err),
  complete: () => console.log('Processing finished!')
});

Why Observables Are Superior?

Declarative and Clean Flow
Each operation is clearly defined
Code is easier to read and maintain
Transformations are naturally chained
Granular Control

const data$ = fetchData$.pipe(
  retry(3), // Retries 3 times on error
  timeout(5000), // Cancels after 5 seconds
  shareReplay(1) // Caches the last value
);

Powerful Transformations

const processedData$ = data$.pipe(
  debounceTime(300), // Prevents overload
  distinctUntilChanged(), // Avoids duplicates
  switchMap(data => processDataAsync(data))
);

Practical Use Cases

1. WebSocket with Automatic Retry

const socket$ = webSocket('ws://api.example.com').pipe(
  retry({
    count: 3,
    delay: 1000
  }),
  share()
);

2. Smart Cache with Expiration

const cachedData$ = new BehaviorSubject(null);

function getData() {
  return cachedData$.pipe(
    switchMap(cached => {
      if (cached?.timestamp > Date.now() - 5000) {
        return of(cached.data);
      }
      return fetchFreshData();
    })
  );
}

Why Adopt Observables?

Cleaner Code
- More predictable data flow
- Less boilerplate code
- Easier to test
Superior Performance
- On-demand processing
- Operation cancellation
- Backpressure control
Simplified Maintenance
- Easy to add new transformations
- Granular error handling
- More modular code

Getting Started with Observables

Install RxJS:

npm install rxjs

Import necessary operators:

import { from, Observable } from 'rxjs';
import { map, filter, catchError } from 'rxjs/operators';

Start with simple cases and gradually evolve:

// Converting a Promise to Observable
const data$ = from(fetch('/api/data')).pipe(
  map(response => response.json())
);

// Subscribing to receive data
data$.subscribe(
  data => console.log('Data:', data)
);

Conclusion

Observables aren't just an alternative to Promises or callbacks - they represent a fundamental shift in how we handle asynchronous data in Node.js. They allow us to write cleaner, more maintainable, and more performant code.

By adopting Observables, you're not just solving current problems but preparing your application to scale elegantly. The initial learning curve is offset by the clarity and power they bring to your code.

Leave your questions in the comments, and let's explore more about how Observables can transform your Node.js code! 🚀

Supercharge Your Node.js Monitoring with OpenTelemetry, Prometheus, and Grafana

Gleidson Leite da Silva — Sat, 26 Oct 2024 15:55:04 +0000

As developers, we often aim to optimize our applications for performance and resilience—but how do we truly know if our systems are working at their best? The answer lies in effective monitoring. In this tutorial, we’ll walk through setting up a powerful monitoring stack for a Node.js application using OpenTelemetry for tracing, Prometheus for metric collection, and Grafana for beautiful, real-time visualizations. By the end, you’ll have a system that gives you deep insights into your application’s health, focusing on monitoring specific endpoints and visualizing key metrics—all within a dynamic Grafana dashboard.

Why Monitoring Matters

Imagine an e-commerce platform where even a few milliseconds of delay can impact customer satisfaction and revenue. Or consider a backend service processing thousands of requests per second—one small error, and performance degradation can ripple through the entire system. Monitoring is your gateway to understanding how your application performs in real-world conditions. With proper monitoring, you can proactively optimize, troubleshoot issues faster, and ensure a seamless experience for users.

So, how do we implement a monitoring setup that’s both scalable and provides deep visibility? Let’s dive in.

Introducing the Stack

Our monitoring setup comprises three key technologies:

OpenTelemetry: A unified standard for collecting, processing, and exporting telemetry data from applications. With OpenTelemetry, we’ll collect trace and metric data to understand our application’s internal processes and latency bottlenecks.
Prometheus: An open-source metrics collection and alerting toolkit that’s particularly powerful for time-series data. It will act as our data source, continuously scraping metrics from our application.
Grafana: A visualization tool that turns raw data into insightful dashboards. Grafana will provide us with a dynamic interface to visualize our Prometheus metrics and build customized dashboards.

This stack is a tried-and-true setup, widely adopted in production environments to monitor microservices, applications, and infrastructure.

Step 1: Setting Up OpenTelemetry in Node.js

To begin, let’s integrate OpenTelemetry in our Node.js application. This setup allows our application to export key metrics to Prometheus.

Create a new file, tracing.js, to configure OpenTelemetry for your app.

`tracing.js`

// tracing.js
const { NodeSDK } = require('@opentelemetry/sdk-node');
const { getNodeAutoInstrumentations } = require('@opentelemetry/auto-instrumentations-node');
const { PrometheusExporter } = require('@opentelemetry/exporter-prometheus');

// Set up the Prometheus exporter to expose metrics at /metrics on port 9091
const prometheusExporter = new PrometheusExporter(
  { port: 9091, endpoint: '/metrics' },
  () => console.log('Prometheus scrape endpoint: http://localhost:9091/metrics')
);

// Initialize the OpenTelemetry SDK with auto-instrumentations for common modules
const sdk = new NodeSDK({
  metricReader: prometheusExporter,
  instrumentations: [getNodeAutoInstrumentations()],
});

sdk.start();
console.log('OpenTelemetry initialized with Prometheus Exporter');

Here’s what’s happening:

Prometheus Exporter: We set up OpenTelemetry to expose metrics via a Prometheus exporter, making metrics available at http://localhost:9091/metrics.
Auto-Instrumentations: We include getNodeAutoInstrumentations to automatically collect telemetry data from common modules (e.g., HTTP server, database calls). This removes the need for additional configuration for those modules.

With OpenTelemetry in place, our application will automatically generate and expose metrics without extra coding on each endpoint.

Step 2: Building the Mock Application

Let’s create a basic Express application with a single route (/query). We’ll simulate a database call within this route and add manual instrumentation with OpenTelemetry, allowing us to trace and measure each request’s performance.

`index.js`

require('./tracing'); // Initialize OpenTelemetry
const express = require('express');
const { trace } = require('@opentelemetry/api');

const app = express();
const PORT = 4000;

// Middleware to parse JSON requests
app.use(express.json());

// Mock function to simulate data fetching
function getMockData() {
  return {
    userId: 1,
    name: 'John Doe',
    email: 'johndoe@example.com',
    orders: [
      { orderId: 101, item: 'Laptop', price: 1200 },
      { orderId: 102, item: 'Smartphone', price: 800 },
    ],
  };
}

// Main endpoint to simulate data retrieval with instrumentation
app.get('/query', async (req, res) => {
  const tracer = trace.getTracer('default');
  const span = tracer.startSpan('GET /query'); // Track request duration

  try {
    await new Promise(resolve => setTimeout(resolve, 200)); // Simulate database delay
    const mockData = getMockData();
    res.json({ success: true, data: mockData });
  } catch (error) {
    console.error('Error fetching data:', error);
    res.status(500).json({ success: false, message: 'Error fetching data' });
  } finally {
    span.end(); // End span for tracking
  }
});

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});

In this code:

The /query endpoint simulates a database query with a 200ms delay.
We use OpenTelemetry spans to trace each request’s duration, enabling us to capture latency data specifically for this endpoint.

Step 3: Configuring Prometheus and Grafana

Now, let’s set up Prometheus and Grafana with Docker Compose to collect and visualize our metrics.

`docker-compose.yml`

version: '3.8'

services:
  prometheus:
    image: prom/prometheus:latest
    container_name: prometheus
    ports:
      - "9090:9090"
    volumes:
      - ./prometheus.yml:/etc/prometheus/prometheus.yml
    command:
      - '--config.file=/etc/prometheus/prometheus.yml'
    restart: unless-stopped

  grafana:
    image: grafana/grafana:latest
    container_name: grafana
    ports:
      - "3000:3000"
    volumes:
      - grafana-storage:/var/lib/grafana
    environment:
      - GF_SECURITY_ADMIN_PASSWORD=admin
    restart: unless-stopped

volumes:
  grafana-storage:

This configuration will:

Launch Prometheus on http://localhost:9090 and Grafana on http://localhost:3000.
Persist Grafana dashboards and settings, even after stopping the containers.

Prometheus Configuration

Prometheus needs a configuration file to know where to scrape metrics. Here’s the prometheus.yml:

global:
  scrape_interval: 1s

scrape_configs:
  - job_name: 'example'
    static_configs:
      - targets: ['host.docker.internal:9091']

This file:

Sets scrape_interval to 1s for near-real-time data collection.
Configures target as host.docker.internal:9091, pointing Prometheus to the OpenTelemetry metrics endpoint.

Step 4: Installing Dependencies

To run this setup, make sure you install the following Node.js dependencies:

"dependencies": {
    "@opentelemetry/api": "^1.9.0",
    "@opentelemetry/auto-instrumentations-node": "^0.52.0",
    "@opentelemetry/exporter-prometheus": "^0.54.0",
    "@opentelemetry/sdk-node": "^0.54.0",
    "express": "^4.21.1"
}

To install these dependencies, run:

npm install @opentelemetry/api@^1.9.0 @opentelemetry/auto-instrumentations-node@^0.52.0 @opentelemetry/exporter-prometheus@^0.54.0 @opentelemetry/sdk-node@^0.54.0 express@^4.21.1

With these dependencies in place, your environment is ready to collect and export metrics.

Step 5: Running the Application

With everything set up, launch the services with Docker Compose:

docker-compose up -d

Access the Services

Prometheus: Open http://localhost:9090 to view metrics.
Grafana: Open http://localhost:3000 to configure and view dashboards. Login with admin/admin.

Step 6: Visualizing Data in Grafana

With Grafana connected to Prometheus, you can now create dashboards to monitor various aspects of your application’s performance. Visualize metrics such as:

Average request duration
95th percentile latency
Success and error rates
Total request count

Below is a sample screenshot of a Grafana dashboard that showcases request metrics for the /query route.

Wrapping Up

Congratulations! You’ve now set up a robust monitoring stack with OpenTelemetry, Prometheus, and Grafana. By collecting detailed telemetry from your application and visualizing it in real-time, you’re equipped to:

Identify latency bottlenecks: Monitor endpoints like /query for slow responses and optimize them.
Track error rates: Quickly identify when requests fail and respond proactively.
Gauge overall health: Use total request counts, latency percentiles, and success rates to understand your application’s performance under various loads.

With this stack in place, you can detect issues before they affect users, optimize resource usage, and maintain a high-performance application. Monitoring isn’t just about fixing problems—it’s about making your application resilient and proactive in delivering a great user experience.

Happy monitoring! 🚀

Implementing Semaphore with Redis: Ensuring Controlled Access to Resources in Node.js

Gleidson Leite da Silva — Sat, 19 Oct 2024 16:11:42 +0000

Concurrency is a fundamental challenge when designing distributed systems, especially when dealing with shared resources like databases, account balances, or any critical operation that requires synchronization. In this article, we will explore how to implement a semaphore using Redis to control access to a shared resource. The focus will be on ensuring that specific operations, such as bank transfers, are processed one at a time per user, preventing multiple transfers from happening simultaneously for the same user.

What is a Semaphore?

A semaphore is a synchronization primitive used to control access to a shared resource. Think of it as a lock with multiple permits, where only a defined number of processes or threads can access the resource simultaneously. In our case, we will use a semaphore to ensure that a user can only perform one money transfer at a time. This prevents issues such as race conditions or double transfers that could lead to inconsistencies in account balances.

Why Use Redis for Semaphore?

Redis is an in-memory key-value store known for its performance and distributed capabilities. By leveraging Redis, we can build a distributed semaphore that works across multiple instances of our application. This makes Redis a perfect choice for managing access to resources like user transactions in a scalable and efficient way.

Use Case: A Money Transfer System

Let's assume you are working on a money transfer system, where a user can transfer funds to another user. To ensure no user initiates more than one transfer at the same time (e.g., multiple clicks leading to duplicate transactions), we need to introduce a semaphore.

Here’s how we will approach this:

Singleton Pattern: We will ensure that the AccountsRepositoryInMemory class is a singleton, meaning there's only one instance of it, regardless of how many times it is accessed. This guarantees a single source of truth for account information.
Transfer Semaphore: A semaphore will control access to each user’s transfer, ensuring that no two transfers for the same user happen at the same time.
Redis Integration: We will use Redis to store the semaphore, taking advantage of Redis’s high availability and distributed nature.

Step 1: The Semaphore Class

The Semaphore class is responsible for interacting with Redis and acquiring or releasing a lock (semaphore) for a given key, which represents a user in this case.

const Redis = require('ioredis');

class Semaphore {

    constructor() {
        /**
         * @type {Redis.Redis}
         */
        this.redis = new Redis();
    }

    /**
     * Acquires a semaphore for the given key (userId).
     * 
     * @param {string} key - The key for the semaphore (e.g., userId).
     * @returns {Promise<boolean>} - Returns true if the semaphore was successfully acquired.
     */
    async acquireSemaphore(key) {
        const ttl = 5000; // Lock TTL (Time To Live) of 5 seconds.
        const acquired = await this.redis.set(key, 'locked', 'PX', ttl, 'NX');
        return acquired === 'OK'; // Returns true if the lock was acquired.
    }

    /**
     * Releases the semaphore for the given key (userId).
     * 
     * @param {string} key - The key for the semaphore.
     * @returns {Promise<void>}
     */
    async releaseSemaphore(key) {
        await this.redis.del(key); // Release the lock.
    }
}

module.exports = { Semaphore };

Step 2: Implementing Transfer Semaphore

The TransferSemaphore class extends the basic Semaphore class to work specifically with user IDs. It maps the userId to a Redis key for acquiring and releasing semaphores.

const { Semaphore } = require("../../../shared/infra/cache/semaphore");

class TransferSemaphore extends Semaphore {
    constructor() {
        super();
    }

    /**
     * Acquires a semaphore for a specific user during a transfer.
     * 
     * @param {string} userId - The user initiating the transfer.
     * @returns {Promise<boolean>} - Returns true if the semaphore was successfully acquired.
     */
    async acquireSemaphore(userId) {
        const key = `transfer_lock_${userId}`;
        return super.acquireSemaphore(key);
    }

    /**
     * Releases the semaphore for a specific user after a transfer.
     * 
     * @param {string} userId - The user who completed the transfer.
     * @returns {Promise<void>}
     */
    async releaseSemaphore(userId) {
        const key = `transfer_lock_${userId}`;
        return super.releaseSemaphore(key);
    }
}

module.exports = { TransferSemaphore };

Step 3: TransferMoneyUseCase – Business Logic with Semaphore

The TransferMoneyUseCase class uses the TransferSemaphore to ensure that a user cannot initiate multiple transfers simultaneously. It handles acquiring and releasing the semaphore around the transfer process.

const { AppError } = require("../../../shared/error/AppError");
const SingletonFactory = require("../../../shared/infra/factories/SingletonFactory");
const { TransferSemaphore } = require("../../infra/cache/TransferSemaphore");
const { AccountsRepositoryInMemory } = require("../../infra/repositories/in-memory/AccountsRepositoryInMemory");

/**
 * @typedef {object} TransferMoneyUseCaseExecuteParams
 * @property {string} senderId
 * @property {string} receiverId
 * @property {number} amount
 */

class TransferMoneyUseCase {
    constructor() {
        this.accountsRepository = SingletonFactory.getInstance(AccountsRepositoryInMemory);
        this.transferSemaphore = new TransferSemaphore();
    }

    /**
     * Executes the money transfer between two users.
     * 
     * @param {TransferMoneyUseCaseExecuteParams} parameters
     * @returns {Promise<void>}
     * 
     */
    async execute({ senderId, receiverId, amount }) {
        const foundSender = await this.accountsRepository.findAccountById(senderId);
        if (!foundSender) {
            throw new AppError("Sender account not found");
        }

        const acquiredSemaphore = await this.transferSemaphore.acquireSemaphore(senderId);

        if (!acquiredSemaphore) {
            throw new AppError("Transfer in progress. Please try again later");
        }

        await this.transferSemaphore.releaseSemaphore(senderId);

        const foundReceiver = await this.accountsRepository.findAccountById(receiverId);
        if (!foundReceiver) {
            throw new AppError("Receiver account not found");
        }

        if (foundSender.balance < amount) {
            throw new AppError("Insufficient funds");
        }

        foundSender.balance -= amount;
        foundReceiver.balance += amount;

        await this.accountsRepository.update(foundSender);
        await this.accountsRepository.update(foundReceiver);
    }
}

module.exports = TransferMoneyUseCase;

How the Semaphore Works in this Context

Acquiring the Semaphore: When a user initiates a transfer, the system checks if there’s an active semaphore (lock) for the user using the acquireSemaphore method. If the lock is available (i.e., no ongoing transfer for that user), the transfer proceeds.
Releasing the Semaphore: After the transfer is complete (either successful or unsuccessful), the semaphore is released, allowing the user to perform a new transfer.
TTL (Time To Live): We set a TTL of 5 seconds for the semaphore. This ensures that, even if something goes wrong (e.g., a failure in releasing the semaphore), it will be automatically released by Redis after 5 seconds, preventing the user from being locked out indefinitely.

Benefits of Using Semaphore with Redis

Concurrency Control: The semaphore ensures that only one transfer can occur per user at a time, preventing race conditions or duplicated transactions.
Distributed and Scalable: Redis, being a distributed system, allows us to handle concurrent requests across multiple instances of our application. This is crucial in cloud-based or microservice architectures.
Efficiency: Redis operates in-memory, making it extremely fast for managing locks, which is essential for real-time financial transactions.

Conclusion

Implementing semaphores using Redis is a powerful technique to manage concurrency in distributed systems. In our example, we demonstrated how this can be applied to a bank transfer use case, ensuring that users cannot perform more than one transfer at a time. This approach prevents potential race conditions, ensuring data integrity and providing a better user experience.

By utilizing Redis for semaphores, we also take advantage of its distributed nature, ensuring that our application can scale efficiently and handle concurrent requests in a cloud or multi-instance environment.

Automating Swagger Documentation with Joi in Node.js: Simplify Your API Documentation Workflow

Gleidson Leite da Silva — Sat, 05 Oct 2024 22:54:27 +0000

Maintaining accurate and up-to-date API documentation is a common challenge for developers, especially when working in teams. Manually updating Swagger files for each API route can lead to frequent merge conflicts and inconsistencies between the actual API behavior and the documentation. These issues not only slow down development but can also lead to confusion and errors when using the API.

The solution? Automate the generation of Swagger documentation using Joi validation schemas in Node.js with Express. By doing this, you ensure that your documentation stays in sync with your codebase, while eliminating the need for manual updates.

In this article, we will walk through:

Setting up Joi validation and Swagger documentation automation.
Solving the problem of manual Swagger updates and merge conflicts.
Ensuring robust API contract validation for all routes.

Let’s break it down step by step.

The Problem: Manual Swagger Maintenance

When developing an API, it's common to manually update Swagger documentation for each route. In large teams, this leads to conflicts when multiple developers edit the same file, often resulting in lost changes, inconsistent documentation, and wasted time resolving merge conflicts.

By automating Swagger documentation generation using Joi, we can solve this problem. Joi allows us to validate incoming requests to ensure they match our expectations, and at the same time, we can use those same Joi schemas to generate Swagger documentation automatically.

This approach ensures that documentation is always accurate, in sync with the codebase, and reflects the actual structure of the API.

Step 1: Setting Up Joi Validation Middleware

The first step is creating middleware that validates incoming requests using Joi. This middleware ensures that the request's parameters, headers, body, and query strings are valid according to the schema you define. Additionally, the same Joi schema will be used to automatically generate Swagger documentation.

Here’s the middleware:

const Joi = require("joi");

const schemasEnum = Object.freeze({
    BODY: 'body',
    PARAMS: 'params',
    QUERY: 'query',
    HEADERS: 'headers'
});

const validationMiddleware = (schema) => {
    return (request, response, nextFunction) => {
        const validationOptions = {
            abortEarly: false,
            allowUnknown: true,
            stripUnknown: true
        };

        const schemas = Object.values(schemasEnum);
        const validationResults = {};

        for (const key of schemas) {
            if (schema[key]) {
                const { error, value } = schema[key].validate(request[key], validationOptions);

                if (error) {
                    return response.status(400).json({
                        error: `Validation error in ${key}: ${error.details.map((x) => x.message).join(', ')}`
                    });
                } else {
                    validationResults[key] = value;
                }
            }
        }

        Object.assign(request, validationResults);
        nextFunction();
    };
};

module.exports = { validationMiddleware };

This middleware validates incoming requests based on the schema defined for each route. If the validation fails, it returns an error; otherwise, it allows the request to proceed.

Step 2: Registering Routes with Joi and Automatically Generating Swagger

Next, we create a function that registers routes and automatically generates Swagger documentation using the joi-to-swagger library. This function applies the validation middleware and generates the Swagger documentation at the same time.

Here’s how the registerRoute function works:

const { validationMiddleware } = require("../middlewares/validationMiddelware");
const convert = require("joi-to-swagger");

const routes = [];

const registerRoute = (router, {
    method,
    path,
    schema = {},
    handler,
    middlewares = [],
    summary,
    description,
    tags = []
}) => {
    if (schema && Object.keys(schema).length > 0) {
        middlewares.unshift(validationMiddleware(schema));
    }

    router[method](path, ...middlewares, handler);

    const parameters = [];
    const requestBody = {};

    if (schema.params) {
        const { swagger: paramsSwagger } = convert(schema.params);
        parameters.push(...Object.keys(paramsSwagger.properties).map(key => ({
            name: key,
            in: 'path',
            required: schema.params._flags.presence === 'required',
            schema: paramsSwagger.properties[key],
            description: "paramsSwagger.properties[key].description"
        })));
    }

    if (schema.query) {
        const { swagger: querySwagger } = convert(schema.query);
        parameters.push(...Object.keys(querySwagger.properties).map(key => ({
            name: key,
            in: 'query',
            required: schema.query._flags.presence === 'required',
            schema: querySwagger.properties[key],
            description: "querySwagger.properties[key].description"
        })));
    }

    if (schema.body) {
        const { swagger: bodySwagger } = convert(schema.body);
        requestBody.content = {
            'application/json': {
                schema: bodySwagger
            }
        };
    }

    routes.push({
        path,
        method,
        summary,
        description,
        tags,
        parameters,
        requestBody
    });
};

module.exports = { registerRoute, routes };

This function registers the route, applies the Joi validation middleware, and generates Swagger documentation for the route automatically. The joi-to-swagger library is responsible for converting the Joi schema into Swagger format.

Step 3: Defining Joi Schemas for Routes

Now, let’s define the Joi validation schema for a route. In this example, we define a schema for depositing a balance. It validates the userId parameter and the amount in the request body.

Here’s the Joi schema:

const Joi = require("joi");
const { appErrorSchema } = require("../../../shared/infra/http/schemas/AppErrorSchema");

const depositBalanceParamsSchema = Joi.object({
    userId: Joi.number().integer().required().description("User id"),
});

const depositBalanceBodySchema = Joi.object({
    amount: Joi.number().positive().greater(0).required().description("Amount to deposit"),
});

const depositBalanceResponsesSchema = {
    204: Joi.any().empty(),
    400: appErrorSchema,
    404: appErrorSchema,
};

module.exports = { depositBalanceParamsSchema, depositBalanceBodySchema, depositBalanceResponsesSchema };

In this schema:

The userId must be a required integer.
The amount must be a positive number greater than 0.
The responses include validation for status codes 204, 400, and 404 using an error schema.

Step 4: Registering the Deposit Balance Route

Now that we have the schema, let’s create a route that validates the incoming request and automatically generates Swagger documentation:

const { Router } = require("express");
const { DepositBalanceController } = require("../../../useCases/depositBalance/DepositBalanceController");
const { registerRoute } = require("../../../../shared/infra/http/routes/registerRoute");
const { depositBalanceParamsSchema, depositBalanceBodySchema, depositBalanceResponsesSchema } = require("../../../useCases/depositBalance/DepositBalanceSchema");

const balancesRouter = Router();
const depositBalanceController = new DepositBalanceController();

registerRoute(balancesRouter, {
    description: "\"Deposit balance\","
    handler: depositBalanceController.handle,
    method: "post",
    path: "/balances/deposit/:userId",
    summary: "Deposit balance",
    schema: {
        params: depositBalanceParamsSchema,
        body: depositBalanceBodySchema,
        responses: depositBalanceResponsesSchema
    },
    tags: ["Balances"]
});

module.exports = { balancesRouter };

This route handles deposit requests and validates them using the Joi schema defined earlier. The Swagger documentation is automatically generated based on the Joi schema.

Step 5: Generating the Swagger Document

To serve the Swagger documentation, we aggregate the registered routes and generate the Swagger document based on the route definitions.

const { routes } = require("../routes/registerRoute");

const swaggerDocument = {
    openapi: '3.0.0',
    info: {
        title: "'API Documentation',"
        version: '1.0.0'
    },
    paths: {}
};

routes.forEach(route => {
    const path = route.path.replace(/:([a-zA-Z0-9_]+)/g, '{$1}');
    if (!swaggerDocument.paths[path]) {
        swaggerDocument.paths[path] = {};
    }
    swaggerDocument.paths[path][route.method] = {
        summary: route.summary,
        description: "route.description,"
        tags: route.tags,
        parameters: route.parameters,
        requestBody: route.requestBody
    };
});

module.exports = { swaggerDocument };

This code dynamically builds the Swagger document using the registered routes.

Step 6: Setting Up the Express Server

To complete the implementation, we set up the Express server and include the Swagger documentation endpoint.

Here’s the server.js file:

// server.js
const app = require('./app');

init();

async function init() {
  try {
    app.listen(3001, () => {
      console.log('Express App Listening on Port 3001');
    });
  } catch (error) {
    console.error(`An error occurred: ${JSON.stringify(error)}`);
    process.exit(1);
  }
}

And the app.js file:

// app.js
require("express-async-errors");
const express = require('express');
const bodyParser = require('body-parser');
const { appRouter } =

 require("./modules/shared/infra/http/routes/app.routes");
const swaggerUi = require("swagger-ui-express");
const { swaggerDocument } = require("./swagger/swaggerConfig");
const app = express();

app.use(bodyParser.json());

// Use your app's routes
app.use(appRouter);

// Serve the Swagger documentation
app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(swaggerDocument));

module.exports = app;

Once the server is running, you can access the Swagger documentation at:

http://localhost:3001/api-docs

How to Install and Run

To run the project and set up the automated Swagger documentation, follow these steps:

Install Dependencies: Make sure you install all the required libraries, including express, joi, swagger-ui-express, and joi-to-swagger.

   npm install express joi joi-to-swagger swagger-ui-express body-parser express-async-errors

These libraries are essential for setting up the Express server, validating incoming requests with Joi, and generating Swagger documentation automatically.

Run the Server: Once the dependencies are installed, you can run the server using:

   node server.js

This will start your Express server and listen on port 3001 (or any other port you specify).

Access Swagger Documentation: Open your browser and navigate to the following URL to view the automatically generated Swagger documentation:

   http://localhost:3001/api-docs

This endpoint serves the interactive Swagger UI, allowing you to test and explore your API routes directly in the browser.

Conclusion

Automating Swagger documentation with Joi streamlines the documentation process, eliminates merge conflicts, and ensures that your API documentation is always in sync with your actual code. By using Joi validation schemas to automatically generate Swagger documentation, you save time and improve the accuracy of your API contracts.

With the steps outlined in this article, you can easily integrate automatic Swagger generation into your Node.js projects, making your development workflow smoother and more efficient.

In summary:

Joi simplifies request validation and ensures that incoming data conforms to the expected format.
Swagger documentation is automatically generated from Joi schemas, eliminating manual updates.
Developers can focus on writing code without worrying about synchronizing documentation and API contracts.

This approach provides a robust solution for both API validation and documentation, allowing teams to work more efficiently and with fewer errors.

Building a Smart Home Dashboard: Harnessing the Power of Redux

Gleidson Leite da Silva — Sat, 07 Sep 2024 14:58:32 +0000

Hey there, fellow developers! 👋 Are you ready to embark on an exciting journey into the world of smart home technology and state management? Buckle up, because we're about to dive into creating a sleek and efficient Smart Home Dashboard using React and Redux. Trust me, by the end of this tutorial, you'll be itching to turn your own home into a futuristic paradise!

The Challenge: Taming the Complex State Beast

Picture this: you're tasked with building a dashboard that controls everything in a smart home - lights, temperature, security systems, and more. Sounds cool, right? But wait, there's a catch. All these systems are interconnected, constantly updating, and need to be in sync across multiple components. Feeling a bit overwhelmed? Don't worry, that's where Redux comes to the rescue!

Why Redux? The Superhero of State Management

You might be thinking, "Can't I just use React's Context API for this?" Well, you could, but let me tell you why Redux is the better choice for our smart home adventure:

Single Source of Truth: Redux gives us one big, happy family of state, living in harmony in a single store. No more state scattered across multiple contexts!
Predictable State Updates: With Redux, state changes become as predictable as your morning coffee routine. Action → Reducer → New State. Simple, right?
Powerful Debugging: Time-travel debugging? Yes, please! Redux DevTools let you move back and forth through state changes like a time lord.
Middleware Support: Need to handle complex async operations or logging? Redux middleware has got your back.
Performance: For complex apps like our smart home dashboard, Redux can offer better performance than Context API, especially when it comes to frequent updates.

Let's Get Our Hands Dirty: Building the Dashboard

Enough talk, let's code! We'll build a simplified version of our Smart Home Dashboard focusing on lighting and climate control.

Step 1: Setting Up Our Redux Store

First, let's define our state structure and create our Redux store:

// src/types.ts
export interface RootState {
  lighting: {
    [roomId: string]: {
      brightness: number;
      isOn: boolean;
    }
  };
  climate: {
    currentTemperature: number;
    targetTemperature: number;
    mode: 'cool' | 'heat' | 'auto' | 'off';
  };
}

// src/store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import { rootReducer } from './reducers';

export const store = configureStore({
  reducer: rootReducer,
});

Step 2: Creating Actions and Reducers

Now, let's define our actions and reducers. We'll use Redux Toolkit to make our lives easier:

// src/store/actions.ts
import { createAction } from '@reduxjs/toolkit';

export const toggleLight = createAction<string>('lighting/toggleLight');
export const setBrightness = createAction<{ roomId: string, brightness: number }>('lighting/setBrightness');
export const setTargetTemperature = createAction<number>('climate/setTargetTemperature');
export const setClimateMode = createAction<'cool' | 'heat' | 'auto' | 'off'>('climate/setMode');

// src/store/reducers.ts
import { createReducer } from '@reduxjs/toolkit';
import { toggleLight, setBrightness, setTargetTemperature, setClimateMode } from './actions';
import { RootState } from '../types';

const initialState: RootState = {
  lighting: {
    livingRoom: { brightness: 50, isOn: false },
    bedroom: { brightness: 30, isOn: false },
    kitchen: { brightness: 70, isOn: false },
  },
  climate: {
    currentTemperature: 22,
    targetTemperature: 22,
    mode: 'off',
  },
};

export const rootReducer = createReducer(initialState, (builder) => {
  builder
    .addCase(toggleLight, (state, action) => {
      const room = state.lighting[action.payload];
      if (room) {
        room.isOn = !room.isOn;
      }
    })
    .addCase(setBrightness, (state, action) => {
      const room = state.lighting[action.payload.roomId];
      if (room) {
        room.brightness = action.payload.brightness;
      }
    })
    .addCase(setTargetTemperature, (state, action) => {
      state.climate.targetTemperature = action.payload;
    })
    .addCase(setClimateMode, (state, action) => {
      state.climate.mode = action.payload;
    });
});

Step 3: Building Our Smart Components

Now for the fun part - let's create our smart components that interact with the Redux store:

// src/components/LightingControl.tsx
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { RootState } from '../types';
import { toggleLight, setBrightness } from '../store/actions';

export const LightingControl: React.FC = () => {
  const lighting = useSelector((state: RootState) => state.lighting);
  const dispatch = useDispatch();

  return (
    <div>
      <h2>Lighting Control</h2>
      {Object.entries(lighting).map(([roomId, { isOn, brightness }]) => (
        <div key={roomId}>
          <h3>{roomId}</h3>
          <button onClick={() => dispatch(toggleLight(roomId))}>
            {isOn ? 'Turn Off' : 'Turn On'}
          </button>
          <input
            type="range"
            min="0"
            max="100"
            value={brightness}
            onChange={(e) => dispatch(setBrightness({ roomId, brightness: Number(e.target.value) }))}
          />
        </div>
      ))}
    </div>
  );
};

Step 4: Real-Time Monitoring with Redux

Here's where Redux really shines. Let's create a component that monitors and displays real-time changes:

// src/components/RealTimeMonitor.tsx
import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { RootState } from '../types';

interface Change {
  timestamp: Date;
  description: string;
}

export const RealTimeMonitor: React.FC = () => {
  const [changes, setChanges] = useState<Change[]>([]);
  const lighting = useSelector((state: RootState) => state.lighting);
  const climate = useSelector((state: RootState) => state.climate);

  useEffect(() => {
    const newChange: Change = {
      timestamp: new Date(),
      description: `Lighting updated: ${Object.entries(lighting)
        .map(([room, { isOn, brightness }]) => `${room} (${isOn ? 'On' : 'Off'}, ${brightness}%)`)
        .join(', ')}`
    };
    setChanges(prev => [newChange, ...prev].slice(0, 10));
  }, [lighting]);

  useEffect(() => {
    const newChange: Change = {
      timestamp: new Date(),
      description: `Climate updated: ${climate.currentTemperature}°C, Target: ${climate.targetTemperature}°C, Mode: ${climate.mode}`
    };
    setChanges(prev => [newChange, ...prev].slice(0, 10));
  }, [climate]);

  return (
    <div>
      <h2>Real-Time Monitor</h2>
      <ul>
        {changes.map((change, index) => (
          <li key={index}>
            {change.timestamp.toLocaleTimeString()}: {change.description}
          </li>
        ))}
      </ul>
    </div>
  );
};

The Redux Advantage: Why It Beats Context API for Complex Apps

Scalability: As our smart home grows (maybe we'll add a robot butler next?), Redux scales beautifully. With Context API, we might end up with a tangled web of contexts.
Performance: Redux uses shallow comparisons to optimize rendering. With Context API, we might trigger unnecessary re-renders in complex scenarios.
Middleware: Need to log every light switch for security? Or maybe update the server every time the temperature changes? Redux middleware makes these tasks a breeze.
Dev Tools: Redux DevTools are like a time machine for your app state. Context API? Not so much.
Testability: With Redux, testing becomes as easy as checking if A + B = C. Actions and reducers are pure functions, making them super testable.

Wrapping Up: Your Smart Home Awaits!

And there you have it, folks! We've built a smart home dashboard that's efficient, scalable, and real-time. With Redux managing our state, we're ready to add as many smart devices as our hearts desire.

Remember, while Context API is great for simpler apps or component-level state, Redux shines when you're dealing with complex, interconnected state that needs to be accessed and updated from multiple parts of your app.

Now go forth and make your home the smartest on the block! And hey, if you figure out how to add that robot butler, give me a shout! 😉

Happy coding, smart home enthusiasts!

Exploring Microfrontends with Vite and React: A Step-by-Step Guide

Gleidson Leite da Silva — Sat, 24 Aug 2024 17:41:45 +0000

Introduction

Imagine you're a developer tasked with building a complex application that needs to be scalable, modular, and easy to maintain. Have you ever faced the challenge of working on a monolithic project where even a small change can break the entire system? If so, you're not alone. Microfrontend architecture emerged as a powerful solution to these problems, allowing different parts of an application to be developed and deployed independently.

In this guide, you will learn how to set up a microfrontend project using Vite, React, and the OriginJS federation plugin. We’ll start by setting up a microfrontend (project-management), followed by integrating it into the main shell (project-shell). This step-by-step approach will ensure you understand both the creation of a microfrontend and its dynamic loading into a host application.

1. Setting Up the Microfrontend (`project-management`)

The microfrontend represents an independent part of the application. In our example, project-management will be a simple React application that gets loaded dynamically into a host application.

Step 1: Create the Microfrontend Project

First, create the microfrontend using Vite with React and TypeScript templates.

Create the Project:

   npm create vite@latest project-management -- --template react-ts
   cd project-management
   npm install

This command sets up a new Vite project with TypeScript and React, laying the foundation for our microfrontend.

Install the Federation Plugin:

Next, install the federation plugin to configure the microfrontend as a remote module that can be consumed by the main shell.

   npm install @originjs/vite-plugin-federation

Configure vite.config.ts for the Microfrontend:

Open the vite.config.ts file and set up the federation plugin to expose the microfrontend:

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import federation from '@originjs/vite-plugin-federation';

   export default defineConfig({
     plugins: [
       react(),
       federation({
         name: 'project-management', // Name of the microfrontend
         filename: 'remoteEntry.js', // Filename for the exposed module
         exposes: {
           './App': './src/App.tsx', // Expose the App component
         },
         shared: ['react'], // Shared dependencies
       }),
     ],
     server: {
       port: 3001, // Development server port
     },
     preview: {
       port: 3001, // Preview server port
     },
     build: {
       target: 'esnext', // Build target for modern browsers
     },
   });

This configuration exposes the App component from src/App.tsx, allowing it to be imported dynamically by the host application.

Create the Main Component App.tsx:

In the src directory, create the main App.tsx component for the microfrontend:

   function App() {
     try {
       return (
         <div>
           <h1>Project Management</h1>
         </div>
       );
     } catch (error) {
       console.error(error);
       const errorMessage = 'An error occurred while rendering the component';
       return <div>{errorMessage}</div>;
     }
   }

   export default App;

This simple component renders a heading and includes an error handling block to catch and report any rendering issues.

Build and Preview the Microfrontend:

Before integrating with the main shell, build and run a preview of the microfrontend to ensure everything is set up correctly.

   npm run build
   npm run preview

This compiles the microfrontend and starts a preview server, simulating the production environment.

2. Setting Up the Host Application (`project-shell`)

With the microfrontend ready, the next step is to configure the main shell, which will load and manage the microfrontends.

Step 1: Create the Main Shell with Vite and React

Create the Project:

Now, create the main shell using Vite with React and TypeScript templates.

   npm create vite@latest project-shell -- --template react-ts
   cd project-shell
   npm install

This command sets up a new Vite project with TypeScript and React, preparing it to host the microfrontends.

Install Necessary Dependencies:

To manage routing and configure the microfrontends, install react-router-dom and the federation plugin.

   npm install react-router-dom
   npm install @originjs/vite-plugin-federation

Configure vite.config.ts for the Main Shell:

In the vite.config.ts file, add the configuration for the federation plugin. This allows the main shell to load the project-management microfrontend dynamically.

   import { defineConfig } from 'vite';
   import react from '@vitejs/plugin-react';
   import federation from '@originjs/vite-plugin-federation';

   export default defineConfig({
     plugins: [
       react(),
       federation({
         name: 'project-shell', // Name of the host application
         remotes: {
           'project-management': 'http://localhost:3001/remoteEntry.js', // URL of the exposed microfrontend
         },
         shared: ['react', 'react-dom'], // Shared dependencies
       }),
     ],
     server: {
       port: 3000, // Development server port
       strictPort: true,
     },
     preview: {
       port: 3000, // Preview server port
       strictPort: true,
     },
     build: {
       target: 'esnext', // Build target for modern browsers
     },
   });

Set Up Routing in the Main Shell:

Create a src/routes/Router.tsx file to manage routing in the main shell.

   import { Route, Routes } from "react-router-dom";
   import { Home } from "../pages/Home/Home";
   import { lazy, Suspense } from "react";

   // Dynamically import the microfrontend
   const ProjectManagement = lazy(() => import("project-management/App"));

   export function Router() {
     return (
       <Routes>
         <Route path="/" element={<Home />} />
         <Route
           path="/projects"
           element={
             <Suspense fallback={<div>Loading...</div>}>
               <ProjectManagement />
             </Suspense>
           }
         />
       </Routes>
     );
   }

Why Use React.lazy?

We use React.lazy to dynamically import the ProjectManagement component. This allows the application to load the microfrontend only when needed, which improves performance by reducing the initial bundle size. The Suspense component acts as a fallback UI while the dynamic import is being loaded, ensuring a smooth user experience.

Configure the Main Component App.tsx:

In the src/App.tsx file, import the BrowserRouter and the Router component created earlier.

   import { BrowserRouter } from "react-router-dom";
   import { Router } from "./routes/Router";

   function App() {
     return (
       <BrowserRouter>
         <Router />
       </BrowserRouter>
     );
   }

   export default App;

This component sets up the global routing of the application, using BrowserRouter to wrap the routes defined in Router.

Create the Home Page (Home.tsx):

Create a simple home page that serves as the entry point for navigating to the microfrontend.

   // src/pages/Home/Home.tsx
   import { NavLink } from "react-router-dom";

   export function Home() {
     return (
       <div>
         <nav>
           <ul>
             <li>
               <NavLink to="/projects">Projects</NavLink>
             </li>
             <li>
               <NavLink to="/teams">Teams</NavLink>
             </li>
           </ul>
         </nav>
       </div>
     );
   }

This page includes navigation links to the project microfrontend (Projects) and an example route for Teams.

Add Type Declarations for the Microfrontend:

To ensure TypeScript correctly recognizes the microfrontend module, add a type declaration file in src/types/remote.d.ts:

   declare module 'project-management/App' {
     import { ComponentType } from 'react';
     const App: ComponentType;
     export default App;
   }

Why Add This Type Declaration?

This file informs TypeScript about the shape and type of the project-management/App module. Without this, TypeScript would not know what types to expect from the dynamically imported module, potentially causing type errors or issues with autocompletion in your IDE.

3. Building and Running the Project

After setting up the main shell and the microfrontend, the next step is to build and run the projects to ensure everything works correctly.

Build and Run the Microfrontend:

In the

project-management directory, run the following commands:

   npm run build
   npm run preview

This will compile the microfrontend and start a preview server to simulate the production environment.

Build and Run the Main Shell:

In the project-shell directory, run the commands:

   npm run build
   npm run preview

The main shell will now be able to load the project-management microfrontend when you navigate to http://localhost:3000/projects.

Conclusion

You now have a complete microfrontend setup using Vite, React, and Module Federation. By starting with the microfrontend setup, you gain a clear understanding of how to expose components as remote modules. Then, integrating them into the main shell shows how to dynamically load and use these modules, enhancing the application's modularity and scalability.

The clear routing structure in the main shell and the robust configuration of the microfrontend ensure that the application is easy to maintain and extend. The use of React.lazy for dynamic imports optimizes performance, and adding type declarations ensures TypeScript compatibility, making development smoother and more robust.

Continue exploring the possibilities of microfrontends and see how this architecture can transform the way you develop your applications. If you need more help or want to explore more about microfrontends, feel free to ask. Good luck on your development journey!

Mastering MongoDB and Elasticsearch Integration: A Practical Guide for Node.js Developers

Gleidson Leite da Silva — Sat, 17 Aug 2024 15:15:51 +0000

Introduction

In the modern web development landscape, the ability to search and access data quickly can be the key differentiator between a standard application and one that truly stands out. Imagine an online store where users can find products in milliseconds, receiving precise suggestions as they type. This enhanced user experience is made possible by technologies like MongoDB and Elasticsearch.

In this article, we’ll explore the importance of these technologies and how to integrate them effectively. For developers already familiar with Node.js, understanding how Elasticsearch can accelerate data searches and provide a more responsive experience is a significant advantage.

Why MongoDB and Elasticsearch?

MongoDB is a popular choice among developers who need a flexible and scalable NoSQL database. However, when it comes to complex, high-performance searches, Elasticsearch becomes the ideal partner. With its ability to index and search large volumes of data in real-time, Elasticsearch offers a powerful solution to improve the end-user experience.

By integrating MongoDB with Elasticsearch, you essentially combine the best of both worlds: MongoDB’s flexibility and scalability with Elasticsearch’s speed and search efficiency.

Common Integration Challenges

Before we dive into the technical implementation, it’s important to highlight the challenges you may face when integrating MongoDB and Elasticsearch. Two of the biggest hurdles are:

Data Mapping: Since MongoDB and Elasticsearch have different data structures, ensuring that MongoDB data is correctly mapped to Elasticsearch is crucial.
Data Synchronization: Keeping data synchronized between MongoDB and Elasticsearch can be tricky, especially when dealing with large volumes of real-time data.

Setting Up the Environment with Docker

To ensure that your application runs seamlessly, we need to set up the environment using Docker. This setup includes custom Dockerfile configurations for each service to address specific requirements, such as installing plugins or configuring the environment.

Docker Compose Configuration

Here is the docker-compose.yml file that defines the required services: MongoDB, Elasticsearch, Logstash, Kibana, and the Node.js application.

version: '3.8'

services:
  mongodb:
    build: ./mongodb
    container_name: mongodb
    ports:
      - "27017:27017"
    environment:
      MONGO_INITDB_DATABASE: ${MONGO_DATABASE}
    volumes:
      - mongodb_data:/data/db

  elasticsearch:
    build: ./elasticsearch
    container_name: elasticsearch
    environment:
      - discovery.type=single-node
      - ES_JAVA_OPTS=-Xms512m -Xmx512m
    ports:
      - "9200:9200"
    volumes:
      - esdata:/usr/share/elasticsearch/data

  logstash:
    build: ./logstash
    container_name: logstash
    ports:
      - "5000:5000"
    environment:
      LOGSTASH_JAVA_OPTS: "-Xmx256m -Xms256m"
    volumes:
      - ./logstash/logstash.conf:/usr/share/logstash/pipeline/logstash.conf

  kibana:
    build: ./kibana
    container_name: kibana
    ports:
      - "5601:5601"
    depends_on:
      - elasticsearch

  app:
    build: ./app
    container_name: node_app
    ports:
      - "3333:3333"
    depends_on:
      - mongodb
      - elasticsearch
      - logstash
    environment:
      - MONGO_URI=${MONGO_URI}
      - ELASTIC_URI=${ELASTIC_URI}
    volumes:
      - .:/usr/src/app

volumes:
  mongodb_data:
  esdata:

Dockerfile Configurations

Each service requires a specific Dockerfile to ensure proper configuration.

MongoDB (mongodb/Dockerfile):

   FROM mongo:4.4
   COPY init-mongo.js /docker-entrypoint-initdb.d/

The init-mongo.js script initializes the MongoDB database with some sample data.

Elasticsearch (elasticsearch/Dockerfile):

   FROM docker.elastic.co/elasticsearch/elasticsearch:7.14.0
   COPY elasticsearch.yml /usr/share/elasticsearch/config/

The elasticsearch.yml file contains specific Elasticsearch configurations.

Logstash (logstash/Dockerfile):

   FROM docker.elastic.co/logstash/logstash:7.14.0
   RUN logstash-plugin install logstash-input-mongodb
   COPY logstash.conf /usr/share/logstash/pipeline/

This Dockerfile installs the MongoDB input plugin for Logstash and copies the Logstash configuration file.

Kibana (kibana/Dockerfile):

   FROM docker.elastic.co/kibana/kibana:7.14.0
   COPY kibana.yml /usr/share/kibana/config/

The kibana.yml file configures Kibana settings.

Node.js Application (app/Dockerfile):

   FROM node:20
   WORKDIR /usr/src/app
   COPY package*.json ./
   RUN npm install
   COPY . .
   EXPOSE 3333
   CMD ["node", "index.js"]

This Dockerfile sets up the Node.js application, installs dependencies, and runs the app.

Supporting Configuration Files

Elasticsearch Configuration (elasticsearch/elasticsearch.yml):

   cluster.name: "docker-cluster"
   network.host: 0.0.0.0
   http.port: 9200

Logstash Configuration (logstash/logstash.conf):

   input {
     mongodb {
       uri => "mongodb://mongodb:27017/productdb"
       placeholder_db_dir => "/usr/share/logstash/pipeline/"
       placeholder_db_name => "logstash_sqlite.db"
       collection => "products"
       batch_size => 5000
     }
   }

   output {
     elasticsearch {
       hosts => ["http://elasticsearch:9200"]
       index => "products"
     }
   }

This configuration file connects Logstash to MongoDB, extracts data, and outputs it to Elasticsearch.

Kibana Configuration (kibana/kibana.yml):

   server.name: kibana
   server.host: "0"
   elasticsearch.hosts: ["http://elasticsearch:9200"]

MongoDB Initialization Script (mongodb/init-mongo.js):

   db = db.getSiblingDB("productdb");

   db.products.insertMany([
     { name: "Smartphone X", price: 999.99 },
     { name: "Laptop Pro", price: 1499.99 },
     { name: "Wireless Earbuds", price: 129.99 }
   ]);

This script initializes the MongoDB database with a sample collection of products.

.env File

The .env file stores environment variables to simplify configuration and maintenance.

MONGO_DATABASE=productdb
MONGO_URI=mongodb://mongodb:27017/productdb
ELASTIC_URI=http://elasticsearch:9200

Technical Implementation: How to Integrate MongoDB and Elasticsearch

Now that we understand the importance and challenges, let’s get our hands dirty. Below, you’ll find a detailed example of how to perform this integration.

Step 1: Initial Setup

First, we need to set up our environment with the necessary dependencies. We’ll use Node.js to mediate communication between MongoDB and Elasticsearch.

npm install mongodb @elastic/elasticsearch express cors

Step 2: Connecting to MongoDB and Elasticsearch

Next, we’ll configure our application to connect to MongoDB and Elasticsearch:

const express = require('express');
const { Client } = require("@elastic/elasticsearch");
const { MongoClient } = require("mongodb");
const cors = require('cors');

const app = express();
const port = 3333;

const esClient = new Client({ node: process.env.ELASTIC_URI });
const mongoClient = new MongoClient(process.env.MONGO_URI);

app.use(express.json());
app.use(cors());

Step 3: Data Mapping and Synchronization

Now, for the most critical part: ensuring that MongoDB data is correctly mapped and synchronized with Elasticsearch. Here’s the code that handles this task:

async function syncData() {
  try {
    await mongoClient.connect();
    const db = mongoClient.db();
    const collection = db.collection('products');

    const products = await collection.find({}).toArray();

    // Rename _id to id and remove the original _id
    const body = products.flatMap(product => {
      const { _id, ...rest } = product;
      return [
        {
          index: {
            _index: 'products',
            _id: _id.toString(), // Use the original MongoDB _id as the document ID in Elasticsearch
          }
        },
        {
          id: _id.toString(), // Add _id as id in the document body
          ...rest // Include the rest of the document fields
        }
      ];
    });

    const bulkResponse = await esClient.bulk({ refresh: true, body });

    if (bulkResponse.errors) {
      const erroredDocuments =

 [];
      bulkResponse.items.forEach((action, i) => {
        const operation = Object.keys(action)[0];
        if (action[operation].error) {
          erroredDocuments.push({
            status: action[operation].status,
            error: action[operation].error,
            operation: body[i * 2],
            document: body[i * 2 + 1]
          });
        }
      });
      console.error('Failed to index the following documents:', erroredDocuments);
    } else {
      console.log(`Successfully indexed ${products.length} documents`);
    }

  } catch (error) {
    console.error('Error syncing data:', error);
  }
}

Step 4: Fast Data Retrieval with Elasticsearch

With the data synchronized, we can now leverage Elasticsearch’s speed to perform efficient searches:

app.get('/search', async (req, res) => {
  const { query } = req.query;

  if (!query || query.trim() === '') {
    return res.status(400).json({ error: 'The query parameter is required and cannot be empty.' });
  }

  try {
    const result = await esClient.search({
      index: 'products',
      body: {
        query: {
          multi_match: {
            query,
            fields: ['name^3', 'description']
          }
        }
      }
    });

    res.json(result.hits.hits);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Future Enhancements

While this solution works well, there’s always room for improvement:

Continuous Monitoring: Implement monitoring to ensure data in Elasticsearch and MongoDB remain synchronized.
Automated Mapping: Consider creating scripts to automate the mapping process, especially if MongoDB data changes frequently.
Scalability: As data volume increases, explore advanced partitioning and scalability techniques in both MongoDB and Elasticsearch.

Conclusion

Integrating MongoDB with Elasticsearch may seem challenging, but with the right approach, you can create fast, responsive applications that offer a superior user experience. Furthermore, mastering this technique can be a significant differentiator in your portfolio as a Node.js developer.

Prisma: The Game-Changer in Database Management

Gleidson Leite da Silva — Sat, 03 Aug 2024 12:39:49 +0000

Have you ever found yourself drowning in a sea of database queries, struggling to keep your code clean and maintainable? If so, you're not alone. As a full stack software engineer with over 5 years of experience, I've seen my fair share of database nightmares. But fear not! There's a hero in this story, and its name is Prisma.

The Problem: The Database Dilemma

Picture this: You're working on a complex Node.js application. Your team is growing, the codebase is expanding, and suddenly, you realize that your database queries are scattered throughout your project like confetti after a New Year's party. Sound familiar?

This scenario often leads to:

Inconsistent query styles
Difficulty in maintaining and updating database schemas
Increased risk of SQL injection attacks
Countless hours spent debugging cryptic database errors

But what if I told you there's a way to solve all these problems and more? Enter Prisma.

The Solution: Prisma to the Rescue!

Prisma is not just another ORM (Object-Relational Mapping) tool. It's a next-generation database toolkit that's changing the game for Node.js developers. Let me show you why.

1. Type-Safety: Your New Best Friend

One of Prisma's standout features is its ability to generate type-safe database clients. This means that your IDE can provide autocompletion for your database queries, catching potential errors before they even make it to runtime.

Let's see an example:

import { PrismaClient } from '@prisma/client'

const prisma = new PrismaClient()

async function getUserPosts(userId: number) {
  const user = await prisma.user.findUnique({
    where: { id: userId },
    include: { posts: true }
  })

  return user?.posts
}

In this snippet, Prisma knows the structure of your User and Post models. If you try to access a non-existent field, your IDE will warn you immediately. No more silly typos causing runtime errors!

2. Migrations Made Easy

Remember the days of manually writing SQL migration scripts? Those days are over. Prisma Migrate allows you to define your database schema using a declarative syntax and automatically generates the necessary migration scripts.

Here's a taste of how simple it is:

model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int     @id @default(autoincrement())
  title     String
  content   String?
  published Boolean @default(false)
  author    User    @relation(fields: [authorId], references: [id])
  authorId  Int
}

With this schema, a simple prisma migrate dev command will create or update your database structure. It's like magic, but better – it's Prisma!

3. Query Complexity, Simplified

Complex queries that would typically require multiple roundtrips to the database or complex JOIN operations can be simplified with Prisma's powerful query API.

Check out this beauty:

const result = await prisma.user.findMany({
  where: {
    OR: [
      { name: { contains: 'Alice' } },
      { email: { endsWith: '@example.com' } }
    ]
  },
  include: {
    posts: {
      where: { published: true },
      orderBy: { createdAt: 'desc' },
      take: 5
    }
  }
})

This query fetches users whose name contains 'Alice' or whose email ends with '@example.com', along with their 5 most recent published posts. Try writing that in raw SQL – I'll wait!

The Impact: From Headache to Harmony

By adopting Prisma in your Node.js projects, you're not just choosing a database tool. You're choosing a smoother development experience, increased productivity, and happier developers.

Imagine a world where:

Your database schema is version-controlled alongside your code
Type safety catches errors before they reach production
Complex queries are readable and maintainable
Your team spends less time fighting with the database and more time building amazing features

This world is not a fantasy. It's the reality that Prisma brings to your projects.

Conclusion: The Future is Prisma

As we've seen, Prisma is more than just a database toolkit – it's a paradigm shift in how we interact with our data layer. By providing type safety, easy migrations, and a powerful query API, Prisma addresses many of the pain points that have plagued developers for years.

Are you ready to take your Node.js applications to the next level? Are you prepared to say goodbye to database headaches and hello to a more productive, enjoyable development experience?

The future of database management is here, and its name is Prisma. Don't just take my word for it – give it a try in your next project. Your future self will thank you.

Remember, in the world of software development, change is the only constant. Embrace the change, embrace Prisma, and watch your database woes melt away. Happy coding!

Transforming Complexity into Simplicity with useReducer: A Real-Time Chat Application

Gleidson Leite da Silva — Sat, 27 Jul 2024 14:40:57 +0000

Managing state in React applications can quickly become overwhelming, especially when dealing with complex scenarios such as real-time chat applications. While useState works well for simple state management, it can become cumbersome when handling multiple interrelated state variables. Enter useReducer, a powerful hook that can transform how you manage state in your React applications. This guide will delve into the advantages of useReducer and provide a detailed tutorial on implementing it in a real-time chat application.

Why Choose `useReducer`?

useReducer is particularly beneficial for managing complex state logic that involves multiple sub-variables. While useState is excellent for straightforward state management, useReducer provides a more organized and predictable approach, making it ideal for applications that require intricate state handling.

Key Benefits of `useReducer`

Organization: Centralizes state logic in a single reducer function, enhancing code readability and maintainability.
Predictability: Makes state transitions explicit, ensuring predictable application behavior.
Ease of Testing: Facilitates unit testing of state logic, improving code reliability.
Scalability: Enhances the scalability of applications by managing complex states in an organized manner.

Implementing `useReducer` in a Real-Time Chat Application

Let's explore a practical example: building a real-time chat application. This example will guide you through managing messages, online users, and connection status using useReducer.

Step 1: Setting Up the Environment

To follow this tutorial, set up a React environment. If you don't have one, you can create a new project using Create React App:

npx create-react-app chat-app
cd chat-app
npm start

Step 2: Installing Dependencies

While React includes useReducer by default, we need a WebSocket library for real-time communication. We'll use ws.

npm install ws

Step 3: Defining the Initial State and Reducer

First, define the initial state and reducer function. This centralizes state logic, making the code easier to understand and maintain.

import React, { useReducer, useEffect } from 'react';

// Define the initial state of the chat application
const initialState = {
  messages: [], // To store chat messages
  usersOnline: [], // To track online users
  connectionStatus: 'disconnected' // To monitor the WebSocket connection status
};

// Reducer function to handle state transitions based on dispatched actions
function chatReducer(state, action) {
  switch (action.type) {
    case 'ADD_MESSAGE':
      // Adds a new message to the messages array
      return {
        ...state,
        messages: [...state.messages, action.payload]
      };
    case 'USER_ONLINE':
      // Adds a new user to the usersOnline array
      return {
        ...state,
        usersOnline: [...state.usersOnline, action.payload]
      };
    case 'USER_OFFLINE':
      // Removes a user from the usersOnline array
      return {
        ...state,
        usersOnline: state.usersOnline.filter(user => user !== action.payload)
      };
    case 'SET_CONNECTION_STATUS':
      // Updates the connection status
      return {
        ...state,
        connectionStatus: action.payload
      };
    default:
      return state; // Returns the current state for any unknown action
  }
}

Step 4: Using `useReducer` in the Component

Next, use useReducer in your chat component. This allows you to dispatch actions that modify the state predictably and efficiently.

function ChatApp() {
  // Initialize the useReducer hook with chatReducer and initialState
  const [state, dispatch] = useReducer(chatReducer, initialState);

  // useEffect hook to set up WebSocket connection and handle events
  useEffect(() => {
    // Create a new WebSocket connection
    const socket = new WebSocket('ws://chat-server.com');

    // Event handler for when the WebSocket connection is opened
    socket.onopen = () => {
      // Dispatch an action to update the connection status to 'connected'
      dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'connected' });
    };

    // Event handler for receiving messages from the WebSocket server
    socket.onmessage = (event) => {
      const message = JSON.parse(event.data);
      // Dispatch an action to add the new message to the state
      dispatch({ type: 'ADD_MESSAGE', payload: message });
    };

    // Event handler for when the WebSocket connection is closed
    socket.onclose = () => {
      // Dispatch an action to update the connection status to 'disconnected'
      dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'disconnected' });
    };

    // Clean up the WebSocket connection when the component unmounts
    return () => {
      socket.close();
    };
  }, []); // Empty dependency array to ensure this effect runs only once

  return (
    <div>
      <h1>Real-Time Chat</h1>
      <div>
        <h2>Connection Status: {state.connectionStatus}</h2>
        <ul>
          {state.messages.map((msg, index) => (
            <li key={index}>{msg}</li>
          ))}
        </ul>
      </div>
    </div>
  );
}

Step 5: Managing Online Users

Now, let's add logic to manage online users, making our chat application more robust.

useEffect(() => {
  // Create a new WebSocket connection
  const socket = new WebSocket('ws://chat-server.com');

  socket.onopen = () => {
    // Dispatch an action to update the connection status to 'connected'
    dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'connected' });
  };

  socket.onmessage = (event) => {
    const data = JSON.parse(event.data);
    // Handle different types of messages from the server
    if (data.type === 'message') {
      // Dispatch an action to add the new message to the state
      dispatch({ type: 'ADD_MESSAGE', payload: data.payload });
    } else if (data.type === 'user_online') {
      // Dispatch an action to add a user to the online users list
      dispatch({ type: 'USER_ONLINE', payload: data.payload });
    } else if (data.type === 'user_offline') {
      // Dispatch an action to remove a user from the online users list
      dispatch({ type: 'USER_OFFLINE', payload: data.payload });
    }
  };

  socket.onclose = () => {
    // Dispatch an action to update the connection status to 'disconnected'
    dispatch({ type: 'SET_CONNECTION_STATUS', payload: 'disconnected' });
  };

  // Clean up the WebSocket connection when the component unmounts
  return () => {
    socket.close();
  };
}, []); // Empty dependency array to ensure this effect runs only once

Step 6: Running and Testing the Application

Run the application with the command npm start and observe how useReducer manages the state effectively. Connect to the WebSocket server and watch as messages and online users are updated in real-time.

Conclusion: The Power of `useReducer`

The beauty of useReducer lies in its ability to transform complexity into simplicity. By centralizing state logic in a reducer function, we create an application that is more predictable, easier to maintain, and scalable.

useReducer is an essential tool for any React developer's toolkit. In complex applications like a real-time chat, it offers a clear and organized way to handle multiple states and their transitions, making the code easier to understand, maintain, and scale.

By adopting useReducer in your applications, you not only improve code clarity but also prepare your application to grow and adapt to future needs. So, the next time you face a complex state management challenge, remember useReducer and see how it can transform complexity into simplicity.

For more details on the ws library, you can check the official documentation on GitHub.

Symphony in Bytes: Mastering Audio Streaming with Node.js

Gleidson Leite da Silva — Fri, 19 Jul 2024 18:11:58 +0000

Imagine a world where, to listen to your favorite music, you have to wait patiently for the entire file to download. Frustrating, right? In today's fast-paced digital universe, the demand for instant gratification reigns supreme, especially when it comes to consuming multimedia content. Audio files, with their rich sound and considerable sizes, present a unique challenge: how to provide a smooth and instant playback experience without sacrificing quality or the user's patience?

The answer lies in the power of streams, an elegant technique that transforms the way we handle data, allowing for real-time processing and delivery of information without needing to wait for the entire download.

In this two-part article, we will embark on a musical journey guided by Node.js, the ideal programming language to orchestrate a symphony in bytes.

Part 1: The Magic of the Backend - Node.js as the Maestro of Streaming

We will explore the backend code, unraveling how Node.js, with its asynchronous and efficient nature, allows us to build a web server capable of managing audio file uploads and, more importantly, handling streaming requests from the frontend, releasing the musical flow to the users' eager ears.

Part 2: The Dance of the Frontend - React in Harmony with the Backend

We will conclude our journey by examining the frontend code, where React comes into play, creating an intuitive and responsive user interface that allows users to control playback, view buffer progress, and above all, enjoy an immersive and uninterrupted sound experience.

Get ready to tune your knowledge and dive into the world of audio streaming with Node.js, transforming bytes into melodies and creating a musical experience worthy of an encore!

Part 1: The Magic of the Backend - Node.js as the Maestro of Streaming

Our backend, the brain behind our streaming platform, will be built with Node.js. Its ability to handle asynchronous operations makes it perfect for managing the constant flow of data that makes up an audio file. Imagine a conductor who, instead of directing an entire orchestra at once, coordinates each instrument individually, creating a harmonious symphony. Node.js, in our case, is this conductor, orchestrating the sending of pieces of data (bytes) to the frontend without blocking the execution of the program.

Building the Server: The Score for Our Maestro

The following code is the score that our maestro, Node.js, will use to conduct our streaming symphony:

const express = require('express');
const cors = require('cors');
const fs = require('fs');
const path = require('path');

const app = express();
const port = 3333;

app.use(cors());

// Endpoint for music streaming
app.get('/music/:filename', (req, res) => {
  const filename = req.params.filename;
  const filePath = path.resolve('music', filename);

  fs.stat(filePath, (err, stats) => {
    if (err) {
      console.error(err);
      return res.status(404).send('File not found');
    }

    const { range } = req.headers;
    if (!range) {
      const head = {
        'Content-Length': stats.size,
        'Content-Type': 'audio/mpeg',
      };
      res.writeHead(200, head);

      const stream = fs.createReadStream(filePath);
      stream.pipe(res);
      stream.on('error', (err) => res.status(500).send(err));
      return;
    }

    const positions = range.replace(/bytes=/, '').split('-');
    const start = parseInt(positions[0], 10);
    const total = stats.size;
    const end = positions[1] ? parseInt(positions[1], 10) : total - 1;
    const chunksize = end - start + 1;

    res.writeHead(206, {
      'Content-Range': `bytes ${start}-${end}/${total}`,
      'Accept-Ranges': 'bytes',
      'Content-Length': chunksize,
      'Content-Type': 'audio/mpeg',
    });

    const stream = fs.createReadStream(filePath, { start, end });
    stream.pipe(res);
    stream.on('error', (err) => res.status(500).send(err));
  });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

Unveiling the Score: A Step-by-Step Tutorial

Importing the Instruments: First, we import the modules that will help us build our server. express is the base of our web application, cors allows different domains (frontend and backend) to communicate, fs lets us interact with the file system to read our audio files, and path helps us build the correct file path.

Creating the Stage: We instantiate express, creating our server, and define the port on which it will listen for requests (3333).

Opening the Gates: CORS: We use app.use(cors()) to enable Cross-Origin Resource Sharing (CORS). This allows our frontend, which may be on a different domain, to access our server.

The Musical Endpoint: app.get('/music/:filename', ...) - This piece of code is the heart of our streaming system. It defines an endpoint that responds to GET requests on the /music/:filename route, where :filename represents the name of the audio file.

Finding the File: We get the file name from the request URL (req.params.filename) and, using the path module, build the full path to the file on the server.

Checking the File: fs.stat gives us information about the file, such as its size, which we will use for streaming.

Understanding the 'Range': The HTTP Range header is key to streaming. It tells the server which bytes of the file the client needs. If there is no Range, we send the entire file.

Streaming in Pieces: If there is a Range, we extract the start and end bytes. We send a 206 (Partial Content) status code with specific headers, such as Content-Range, to indicate to the client the part of the file being sent.

Creating the Stream: Using fs.createReadStream, we create a read stream for the requested part of the file. The pipe method channels the data from the stream directly to the HTTP response (res), sending it to the client as it is read from the disk.

Handling Errors: We add an 'error' event listener to capture and handle any errors that occur during the file reading.

Starting the Server: app.listen(...) finally starts our server on port 3333.

With the backend ready, the next step is to build the frontend, which will allow users to interact with our streaming platform intuitively. Get ready for Part 2, where React will take the stage to complete our digital symphony.

Part 2: The Dance of the Frontend - React in Harmony with the Backend

With the backend ready to orchestrate audio streaming, we need an elegant and responsive frontend for users to dance to the music. This is where React, the JavaScript library for building user interfaces, takes the stage.

Creating the MusicPlayer Component: The Choreographer of the Audio Experience

The MusicPlayer component in React is responsible for connecting the user interface to our powerful Node.js backend. It ensures a smooth playback experience, manages the buffer, and displays the download progress dynamically and intuitively.

import { useRef, useState, useEffect } from 'react';

interface MusicPlayerProps {
  filename: string;
}

export function MusicPlayer({ filename }: MusicPlayerProps): JSX.Element {
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const [isPlaying, setIsPlaying] = useState(false);
  const [progress, setProgress] = useState(0);

  const playMusic = () => {
    const audioElement = audioRef.current!;
    audioElement.src = `http://localhost:3333/music/${filename}`;
    audioElement.play();
    setIsPlaying(true);
  };

  useEffect(() => {
    const audioElement = audioRef.current;

    const updateProgress = () => {
      if (audioElement && audioElement.buffered.length > 0) {
        const bufferedEnd = audioElement.buffered.end(audioElement.buffered.length - 1);
        const duration = audioElement.duration;
        if (duration > 0) {
          setProgress((bufferedEnd / duration) * 100);
        }
      }
    };

    if (audioElement) {
      audioElement.addEventListener('progress', updateProgress);
    }
    return () => {
      if (audioElement) {
        audioElement.removeEventListener('progress', updateProgress);
      }
    };
  }, []);

  return (
    <div>
      <button onClick={playMusic} disabled={isPlaying}>
        {isPlaying ? 'Playing...' : 'Play'}
      </button>
      <audio ref={audioRef} controls />
      <div style={{ width: '100%', height: '20px', backgroundColor: '#ccc', marginTop: '10px' }}>
        <div
          style={{
            width: `${progress}%`,
            height: '100%',
            backgroundColor: '#4caf50',
          }}
        ></div>
      </div>
    </div>
  );
}

export default MusicPlayer;

Deciphering the Choreography: The Frontend Steps

Importing the Moves: We import useRef, useState, and useEffect from React to manage references, states, and side effects in our component.

Setting the Music: MusicPlayerProps: We define an interface MusicPlayerProps to type the properties of our component, which in this case is just the filename.

Controlling the Playback: audioRef and isPlaying: audioRef is a reference to the HTML <audio> element, which we will use to control playback. isPlaying is a boolean state that indicates whether the music is playing.

Starting the Dance: playMusic: The playMusic function sets the src attribute of the audio element to the URL of our streaming endpoint in the backend, passing the filename as a parameter. Then it calls the audio element's play method to start playback and updates the isPlaying state to true.

Showing the Progress: useEffect and updateProgress: The useEffect hook is used to add a progress event listener to the audio element. The updateProgress function calculates the buffer progress and updates the progress state, which is used to visually display the progress bar.

The Interface: Component Return: The component returns a div element that contains:

A "Play" button that calls the playMusic function when clicked. The button is disabled while the music is playing.
The HTML <audio> element, with the audioRef reference, rendering the audio player with its default controls.
A div representing the progress bar. The style of the inner div is dynamically updated to reflect the buffer progress.

The Final Performance: A Smooth and Engaging Experience

By combining the backend expertise of Node.js with the frontend elegance of React, our audio streaming platform is ready to captivate users. Instant playback, efficient buffer management, and an intuitive interface ensure a smooth, immersive, and uninterrupted sound experience.

Conclusion: A Complete Digital Symphony

By combining the efficient orchestration of Node.js on the backend with the elegant choreography of React on the frontend, we have unveiled the power of audio streaming, transforming raw bytes into an immersive sound experience.

Through streams, we have overcome the challenge of large audio files, providing instant playback and smooth buffering without compromising quality or user patience. Node.js, with its asynchronous and event-driven nature, stands out as the maestro of our backend, managing uploads, handling streaming requests, and orchestrating the precise delivery of data. On the frontend, React takes the stage, creating a responsive and intuitive user interface that puts control in the hands of the user.

This harmonious marriage of technologies allows us to build robust, scalable audio streaming platforms that are, above all, focused on the user experience. Music, freed from the constraints of traditional downloading, flows freely through digital wires, ready to captivate the ears of the world.

May this article serve as an inspiration for you to explore the vast universe of streaming with Node.js, opening doors to new possibilities and building innovative, media-rich web applications. After all, the digital symphony is just beginning, and you can be the next maestro!

Leveraging Zod for Form Validation in React: Unleashing the Power of superRefine

Gleidson Leite da Silva — Fri, 12 Jul 2024 15:12:29 +0000

Introduction: The Quest for Perfect Form Validation

Meet Lisa, a seasoned developer at EventPro, a company that creates software for managing events. One day, her manager approaches her with a new challenge: to build a sophisticated user registration form for their latest event management application. This form isn’t just a simple set of fields; it has complex validation rules that vary based on the user's input.
For instance, if the user is a VIP, additional fields like VIP code and extra information must be validated. However, handling such conditional logic within the form’s validation can quickly become a tangled mess, making the code hard to read and maintain. Lisa realizes that she needs a better way to handle these complex validation rules.

The Challenge: Validating Complex Forms

Lisa has encountered similar challenges before. Traditionally, she would use a combination of state management and conditional rendering to enforce validation rules. This often required creating multiple versions of the form schema, using hooks like useMemo to dynamically generate the schema based on user input. It was cumbersome, error-prone, and made the codebase difficult to maintain.

This time, Lisa decides to use Zod, a TypeScript-first schema declaration and validation library, which promises to simplify her task. She discovers that Zod’s powerful superRefine method can handle complex validation logic efficiently.

Seeting Up the Project

Lisa sets up a new React project and installs Zod:

npx create-react-app eventpro-registration
cd eventpro-registration
npm install zod

Creating the Form Schema with Zod

Lisa defines a Zod schema to validate the form data. The schema uses superRefine to handle complex validation logic that depends on multiple fields.

import { z } from 'zod';

const isValidPhoneNumber = (number: string) => {
  return /^\d{10}$/.test(number);
};

export const registrationSchema = z
  .object({
    name: z.string().min(1, { message: 'Name is required' }),
    email: z.string().email({ message: 'Invalid email address' }),
    phoneNumber: z.string().refine(isValidPhoneNumber, {
      message: 'Invalid phone number',
    }),
    isVIP: z.boolean(),
    vipCode: z.string().optional(),
    additionalInfo: z.string().optional(),
  })
  .superRefine((data, ctx) => {
    if (data.isVIP) {
      if (!data.vipCode) {
        ctx.addIssue({
          path: ['vipCode'],
          code: z.ZodIssueCode.custom,
          message: 'VIP Code is required for VIPs',
        });
      }

      if (data.vipCode && data.vipCode.length !== 8) {
        ctx.addIssue({
          path: ['vipCode'],
          code: z.ZodIssueCode.custom,
          message: 'VIP Code must be exactly 8 characters long',
        });
      }

      if (!data.additionalInfo) {
        ctx.addIssue({
          path: ['additionalInfo'],
          code: z.ZodIssueCode.custom,
          message: 'Additional information is required for VIPs',
        });
      }
    }
  });

Integrating the Schema with React

With the schema ready, Lisa integrates it with her React form using a custom hook for validation.

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { registrationSchema } from './validationSchema';

const RegistrationForm: React.FC = () => {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(registrationSchema),
  });

  const onSubmit = (data: any) => {
    console.log('Form Submitted', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Name:</label>
        <input {...register('name')} />
        {errors.name && <p>{errors.name.message}</p>}
      </div>
      <div>
        <label>Email:</label>
        <input {...register('email')} />
        {errors.email && <p>{errors.email.message}</p>}
      </div>
      <div>
        <label>Phone Number:</label>
        <input {...register('phoneNumber')} />
        {errors.phoneNumber && <p>{errors.phoneNumber.message}</p>}
      </div>
      <div>
        <label>
          <input type="checkbox" {...register('isVIP')} />
          VIP
        </label>
      </div>
      {errors.isVIP && <p>{errors.isVIP.message}</p>}
      <div>
        <label>VIP Code:</label>
        <input {...register('vipCode')} />
        {errors.vipCode && <p>{errors.vipCode.message}</p>}
      </div>
      <div>
        <label>Additional Information:</label>
        <textarea {...register('additionalInfo')} />
        {errors.additionalInfo && <p>{errors.additionalInfo.message}</p>}
      </div>
      <button type="submit">Register</button>
    </form>
  );
};

export default RegistrationForm;

The Power of superRefine

with superRefine, Lisa can ensure that

The VIP code is required and exactly 8 characters long for VIP users.
Additional information is mandatory for VIP users.
The validation logic remains clean and centralized within the schema, making it easier to maintain and understand.

The Key Benefit: Eliminating Conditional Schema Logic

Previously, developers might have had to use complex conditional logic or dynamically generate new schemas with hooks like useMemo to handle scenarios where certain fields become required based on user input. This approach could be cumbersome and error-prone.

With Zod’s superRefine, Lisa avoids the need to generate new schemas dynamically. Instead, she can include all the necessary conditional validation logic directly within the schema. This approach simplifies the code and reduces the likelihood of bugs.

Benefits of Using Zod with superRefine

Centralized Validation Logic: Keeping validation logic within the schema makes the code cleaner and easier to maintain.
Complex Validation Made Simple: superRefine allows for complex validation rules that depend on multiple fields.
Improved Developer Experience: By using TypeScript, Zod provides better type safety and editor support, reducing bugs and improving productivity.

Conclusion: Elevating Form Validation

By leveraging Zod and its superRefine method, Lisa was able to create a robust and flexible form validation system for EventPro's registration form. This approach not only made the code more maintainable but also improved the overall development experience. As a developer, adopting tools like Zod can significantly enhance your ability to handle complex validation scenarios with ease.

Happy coding, and may your forms always validate flawlessly!

DEV Community: Gleidson Leite da Silva

Mastering Dynamic Menu Implementation in React: Advanced State Management

The Art of Creating Perfect Dynamic Menus

The Real Challenge

The Solution: Intelligent Data Structure

Menu Tree Architecture

Efficient Indexing System

Intelligent Navigation Management

Optimized React Component

Results and Benefits

Implementation Steps

Beyond the Basics

Conclusion

Observables in Node.js: Transforming Asynchronous Chaos into Elegant Code

The Real Problem

Introducing Observables: The Elegant Solution

Why Observables Are Superior?

Practical Use Cases

1. WebSocket with Automatic Retry

2. Smart Cache with Expiration

Why Adopt Observables?

Getting Started with Observables

Conclusion

Supercharge Your Node.js Monitoring with OpenTelemetry, Prometheus, and Grafana

Why Monitoring Matters

Introducing the Stack

Step 1: Setting Up OpenTelemetry in Node.js

tracing.js

Step 2: Building the Mock Application

index.js

Step 3: Configuring Prometheus and Grafana

docker-compose.yml

Prometheus Configuration

Step 4: Installing Dependencies

Step 5: Running the Application

Access the Services

Step 6: Visualizing Data in Grafana

Wrapping Up

Implementing Semaphore with Redis: Ensuring Controlled Access to Resources in Node.js

What is a Semaphore?

Why Use Redis for Semaphore?

Use Case: A Money Transfer System

Step 1: The Semaphore Class

Step 2: Implementing Transfer Semaphore

Step 3: TransferMoneyUseCase – Business Logic with Semaphore

How the Semaphore Works in this Context

Benefits of Using Semaphore with Redis

Conclusion

Automating Swagger Documentation with Joi in Node.js: Simplify Your API Documentation Workflow

The Problem: Manual Swagger Maintenance

Step 1: Setting Up Joi Validation Middleware

Step 2: Registering Routes with Joi and Automatically Generating Swagger

Step 3: Defining Joi Schemas for Routes

Step 4: Registering the Deposit Balance Route

Step 5: Generating the Swagger Document

Step 6: Setting Up the Express Server

How to Install and Run

Conclusion

Building a Smart Home Dashboard: Harnessing the Power of Redux

The Challenge: Taming the Complex State Beast

Why Redux? The Superhero of State Management

Let's Get Our Hands Dirty: Building the Dashboard

Step 1: Setting Up Our Redux Store

Step 2: Creating Actions and Reducers

Step 3: Building Our Smart Components

Step 4: Real-Time Monitoring with Redux

The Redux Advantage: Why It Beats Context API for Complex Apps

Wrapping Up: Your Smart Home Awaits!

Exploring Microfrontends with Vite and React: A Step-by-Step Guide

1. Setting Up the Microfrontend (project-management)

Step 1: Create the Microfrontend Project

2. Setting Up the Host Application (project-shell)

Step 1: Create the Main Shell with Vite and React

3. Building and Running the Project

Conclusion

Mastering MongoDB and Elasticsearch Integration: A Practical Guide for Node.js Developers

Introduction

Why MongoDB and Elasticsearch?

Common Integration Challenges

Setting Up the Environment with Docker

`tracing.js`

`index.js`

`docker-compose.yml`

1. Setting Up the Microfrontend (`project-management`)

2. Setting Up the Host Application (`project-shell`)

Why Choose `useReducer`?

Key Benefits of `useReducer`

Implementing `useReducer` in a Real-Time Chat Application

Step 4: Using `useReducer` in the Component

Conclusion: The Power of `useReducer`