Forem: Oussama Bouyahia

All What You Need To Enhance Optimization in Laravel Apps

Oussama Bouyahia — Tue, 27 May 2025 15:55:24 +0000

Introduction:

When applications grow in size or handle large volumes of data, optimization techniques become essential, not only to prevent bugs but also to enhance the overall user experience.
Laravel is a powerful and opinionated framework that can deliver high-performance applications when paired with professional optimization strategies.
In this post, we’ll explore practical tips and techniques to optimize your Laravel applications and make them more efficient and scalable.

1. Database query optimization:

- 1.1. Eager Loading:

Eager loading come to fix the N+1 query problem, so what is this problem ?
The code below shows how we iterate in each book to get the author.

// app/Models/Book.php:
class Book extends Model
{
    public function author()
    {
        return $this->belongsTo(Author::class);
    }
}

// Then, in some Controller:
$books = Book::all();

foreach ($books as $book) {
    echo $book->author;
}

so we have one query for books and N queries for each author

Instead of , now we apply the eager load using ::with

// Instead of:
$books = Book::all();

// You should do:
$books = Book::with('author')->get();

The difference is clear

- 1.2. Select only needed columns select():

It is all about Avoiding the transfer of unecessary data, below a good example which use select() combined with Eager Loading.

<?php
use App\Models\Post;
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    $posts = Post::with('user:id,name')
              ->select('id','user_id','title')
              ->get();
    return view('posts', ['posts' => $posts]);
});

- 1.3. Handle large datasets safely and memory-efficiently chunkById():

It’s explicitly designed for large datasets and production-scale apps, chunkById() prevents Laravel from loading everything into memory at once.

$posts = Post::all(); //too slow in large data sets

Instead use this

$posts = collect();
Post::chunkById(1000, function ($collection) use (&$posts) { 
    $posts->push(...$collection);
}, 'id');

- 1.4. Use query builder for raw data instead of Eloquent models toBase():

when You are fetching large volumes of row and you can reduce memory usage by skipping model hydration, or in case your API returns plain objects or arrays.

$users = User::where('active', 1)->get();
// Each $user is a full Eloquent model

$users = User::where('active', 1)->toBase()->get();
// Each $user is a stdClass with only selected fields

⚠️Don't use it when :
you need Eloquent relationships
you're using accessors/mutators
you rely on model events or casts

2. Laravel Caching:

Optimization isn't only about efficient queries and database structure , let's explore Laravel Caching.
Caching is a powerful performance booster that avoids repeated DB hits or expensive logic.

-Expensive queries : query caching
In this example posts will be in cache for 60 s and no need for frequent queries

Cache::remember('posts', 60, fn() => Post::all());

-Response caching:

Used for Static or slow-changing pages, you can spatie/laravel-responsecache as example

-Config/view caching:
Used on deployment for faster boot , you can use php artisan config:cache, view:cache

3. Rate Limiting:

Important for API protection and stability — avoids abuse and load spikes, especially important in public APIs or high-traffic apps
*Laravel uses RateLimiter middleware
*Can define custom rules per user, IP, role:

RateLimiter::for('api', fn (Request $request) =>
  Limit::perMinute(60)->by($request->ip())
);

4. Database Indexing:

Beyond Laravel itself — indexing is a core SQL optimization.

Laravel migrations support indexes:

$table->index('user_id');
$table->unique(['email']);
$table->fullText('title');

5. Eloquent Performance Tips:

-Avoid loading unused relationship, i.e Use withOnly() in Laravel 11.
-Use pluck() instead of get() when only values are needed
Prefer raw queries DB::select for heavy logic where Eloquent overhead is too much.

6. Job Queues & Background Processing:

Move heavy work (emails, exports, 3rd-party APIs..) to background queues.
Use Laravel queues: dispatch(new ExportJob());
Process with workers: Redis + Supervisor (or Laravel Octane for high concurrency).

Conclusion:

Laravel optimization depends not only on efficient queries and database structure but also on caching, indexing, rate limiting, and code-level best practices like chunking and eager loading. Using Laravel’s built-in tools smartly — along with SQL tuning and caching layers — can significantly improve performance and scalability.

React 19 and Its Optimization Improvements via the New Compiler

Oussama Bouyahia — Fri, 02 May 2025 17:26:54 +0000

What is the optimization in react:

Typically optimization in react refers to improve the user experience by reducing the load time and minimizing the unnecessary re-rendering in the DOM.
Developers have handled optimization manually by applying techniques
like lazy loading , React.memo and using optimization hooks such as useMemo and useCallBack.
Before diving into the new feature of React compiler presented in react 19 version, let us understand the techniques developers have been using to improve performance and optimization.

1. Performance Hooks:

- UseMemo :

In JavaScript, objects and arrays are passed by reference. This means that during a re-render, even if their content doesn't change, a new reference is created.
In the context of react , re-rendering will create new reference for the object/array, so we need to cache the result of a calculation between re-renders.
UseMemo come to address this issue and returns a memoized value.
let us understand by the example below when a user object will be memoized and will refer to a new reference only when one of its dependencies changes.


import React, { useState, useMemo } from "react";

const UserProfile = () => {
  const [username, setUsername] = useState("");
  const [age, setAge] = useState(20);

  // user object is stable unless username or age changes
  const user = useMemo(() => {
    return {
      name: username,
      age: age,
    };
  }, [username, age]);

  return (
    <div>
      <input
        placeholder="Enter name"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <p>{user.name} is {user.age} years old</p>
    </div>
  );
};

-useCallBack:

The useCallback is similar to useMemo Hooks. The main difference is that useCallback returns a memoized function instead of memoized value.
let's understand the example below from w3school.com
without useCallbackat each time countchange Appcomponent re-rendering so a new reference of addTodofunction will be created and then Todoscomponent will be re-rendered (as addTodo one of its props).

import { useState, useCallback } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";

const App = () => {
  const [count, setCount] = useState(0);
  const [todos, setTodos] = useState([]);

  const increment = () => {
    setCount((c) => c + 1);
  };
  const addTodo = useCallback(() => {
    setTodos((t) => [...t, "New Todo"]);
  }, [todos]);

  return (
    <>
      <Todos todos={todos} addTodo={addTodo} />
      <hr />
      <div>
        Count: {count}
        <button onClick={increment}>+</button>
      </div>
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
//Todo component
import { memo } from "react";

const Todos = ({ todos, addTodo }) => {
  console.log("child render");
  return (
    <>
      <h2>My Todos</h2>
      {todos.map((todo, index) => {
        return <p key={index}>{todo}</p>;
      })}
      <button onClick={addTodo}>Add Todo</button>
    </>
  );
};

export default memo(Todos);

2. React memo:

By default a child component will be re-rendered if its parent component re-renders , using memo will cause React to skip rendering a component if its props have not changed.
The example used in useCallBack example already used React.memo
to avoid re-rendering when count state changed (countstate will only cause re-rendering in the Appcomponent , not in the child component Todos.

3. Lazy loading:

It is used for code splitting , in React, it is a technique that allows you to load components, modules, or assets asynchronously, improving the loading time of your application. It can be achieved by using the built-in React.lazy() method and Suspense component.
the example below show the way to implement it ,Loadingcomponent here is the UI to display when the loading is processing , it could be simply

<p>....Loading<p>

import { lazy, Suspense } from 'react';

const MarkdownPreview = lazy(() => import('./MarkdownPreview'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <h2>Preview</h2>
      <MarkdownPreview /> 
    </Suspense>
  );
}

4. React 19: the react compiler RC:

So now as we are familiar with the manual way of fixing optimization and implementing the necessary techniques that address it.
The react compiler presented in the 19th version comes essentially to enhance the performance and optimization without the intervention of developers.
And as it states its documentation that it’s easy to forget applying memoization or applying them incorrectly can lead to inefficient updates as React has to check parts of your UI that don’t have any meaningful changes.
The compiler uses its knowledge of JavaScript and React’s rules to automatically memoize values or groups of values within your components and hooks.

Conclusion:

Should we handle optimization manually ? short answer, No, React compiler will do it for us.
Is still worth to understand techniques of optimization in react?
*Yes * it worths as majoriy of projects and apps used by companies still need the manual way, in addition, according to react documentation RC isn't stable yet even it was tested by Meta in production.

How to Ensure Your Full Stack JavaScript Apps Meet Security Standards

Oussama Bouyahia — Thu, 03 Oct 2024 11:16:01 +0000

Introduction:

Building a full-stack application is a rewarding challenge, but it's crucial to prioritize security from the very start. Have you considered the essential security principles needed to protect your product? How can we ensure that the application meets security standards effectively, and how easy is it to implement these principles?

In this article, I will explore fundamental security principles for both frontend and backend development. We’ll also discuss practical steps to implement them and ensure that your app adheres to industry security standards.

Securing the frontend:

Input Validation and Sanitization:

-Ensure that all input from users is properly validated and sanitized to avoid injection attacks such as Cross-Site Scripting (XSS).

-Use libraries like DOMPurify for sanitizing user inputs that will be inserted into the DOM.

Authentication and Authorization:

-Implement secure authentication methods such as OAuth or the famous JWT method (JSON Web Tokens) to ensure that users are who they claim to be.
-Use role-based access control (RBAC) to restrict parts of the UI based on user permissions, for example part of the UI reserved to admin and other part for ordinary users.

// the code below show an example of how user 
//should be authenticated and depending 
//on his role the dashboard UI display
const createRoutes = (logged: boolean, role:string) =>
  createBrowserRouter([
{
          path: "/dashboard",
          loader: combinedDashboardLoader,

          element: (
            <ProtectedRoute authenticated={logged}>
              {role==="admin"}?<AdminDashboard />:<UserDashboard/>
            </ProtectedRoute>
          ),
          errorElement: <ErrorPage />,
        }])

Secure Storage of sensitive Data:

-Avoid storing sensitive information like access tokens in localStorage or sessionStorage as they are vulnerable to XSS. Instead, use secure cookies with the HttpOnly and Secure flags enabled.

// in your server code you can write this code
//  inside your login controller function
// so you don't need to send your token to the frontend
res.cookie("accessToken", accessToken, {
      httpOnly: true,
      secure: process.env.NODE_ENV === "production",
      maxAge: expirationTime * 1000,
      sameSite: "lax",
    });

CORS (Cross-Origin Resource Sharing):

-Implement proper CORS policies to only allow specific origins to interact with your backend API. Ensure that you restrict methods and headers that are allowed.

Content Security Policy (CSP):

-Set up a robust CSP to prevent the execution of untrusted scripts on your frontend. This reduces the risk of XSS attacks by controlling where resources can be loaded from.
-_Implementation _:
the easiest way is to simply use meta tags in your head of the html page as shown below in the code , for more details you can refer to this link https://www.stackhawk.com/blog/react-content-security-policy-guide-what-it-is-and-how-to-enable-it/

  <head>
    ...
    <meta http-equiv="Content-Security-Policy" 
          content="...policy definition here..." />
  </head>

-Alternatively you can implement a middleware in your EpressJS as below:

app.use((req, res, next) => {
  res.setHeader("Content-Security-Policy", "default-src 'self'; script-src 'self' https://trusted.cdn.com; object-src 'none';");
  next();
});

HTTPS:

Enforce HTTPS to encrypt communication between the client and the server, ensuring that data is not exposed during transit.

2 . Securing the backend:

Input Validation and Sanitization (Server-side):

-Always validate and sanitize user inputs on the server side to prevent SQL injection or other code injection attacks. Even if input validation is done on the frontend, it should always be performed on the backend as well.
below an example using express validator middleware, then simply apply this middleware before your registration controller function.

import { body, validationResult } from "express-validator";
const validateUserInput = [
    body("email").isEmail().withMessage("Please enter a valid email address"),
    body("name")
        .isLength({ min: 3 })
        .withMessage("Name must be at least 3 characters long"),
    body("password")
        .isLength({ min: 6 })
        .withMessage("Password must be longer than 5 characters"),

    // Middleware to check for validation errors
    (req, res, next) => {
        const errors = validationResult(req);
        if (!errors.isEmpty()) {
            return res.status(400).json({ errors: errors.array()[0].msg });
        }
        next();
    },
];
export default validateUserInput;
//in your router file apply it 
//register is the post request function to add new user
router.route("/register").post(validateUserInput, register);

Authentication and Authorization:

-Use robust authentication mechanisms, such as OAuth, and secure tokens like JWT for session management.

-Implement role-based access control (RBAC) and avoid hardcoding permissions directly in your application.

Password security:

-Store passwords securely using strong hashing algorithms like bcrypt or Argon2. Never store plain text passwords.

-If needed implement multi-factor authentication (MFA) for an additional layer of security.

the code below shows how the process of securing password and using JWT (authentication).

// hashing password inside your registration function  
const register = async (req: Request, res: Response) => {
  const { email, password, name } = req.body;
const hashedPassword = await bcrypt.hash(password, 10);
createUser(email,name,hashedpassword) //a function to add new user into your DB
}

// Compare the password to the hashed one during the login request
const login = async (req: Request, res: Response) => {
  const { email, password } = req.body;
const existingUser = await query(findUserByEmail, [email]);
    if (!existingUser[0])
      return res.status(404).json({
        message: `${email} not found! register if you don't have an account`,
      });
    const matchPassword = await bcrypt.compare(
      password,
      existingUser[0].password
    );
//generate token JWT
    const expirationTime = 180;
    const accessToken = jwt.sign(
      { id: existingUser[0].iduser },
      process.env.ACCESS_TOKEN_SECRET!,
      {
        expiresIn: expirationTime + "s",
      }
    );}

Rate Limiting and Throttling: To prevent brute-force attacks, implement rate limiting and IP-based throttling on sensitive endpoints such as login routes.

Rate Limiting:
It restricts the number of requests a user (identified by IP, API key, etc.) can make to the server in a given time window (e.g., 100 requests per minute). After the limit is reached, further requests are blocked or delayed.

const express = require('express');
const rateLimit = require('express-rate-limit');
const app = express();

// Define rate limiting rule: 100 requests per 15 minutes
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000, // 15 minutes
  max: 100, // Limit each IP to 100 requests 
  message: 'Too many requests from this IP, please try again later.', // Custom message 
  standardHeaders: true,  `RateLimit-*` headers
  legacyHeaders: false, 
});

// Apply the rate limiting middleware to all requests

app.use(limiter);

//but we can also apply it to a specific route 
app.post('/login', limiter, (req, res) => {
  res.send('Login route');
});


app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Throttling:
Similar to rate limiting, but instead of blocking requests entirely, it slows down the processing of requests after a certain threshold is reached. This can avoid service overloads.

Example:
If a user makes more than 10 API requests per second, you slow down the response to every subsequent request to ensure the system isn’t overwhelmed.

Data encryption:

Use encryption for sensitive data both at rest and in transit. Ensure that databases and other storage mechanisms encrypt sensitive information.

the code below shows an implementation of data encryption of a credit card number before storing it in the database.

const crypto = require('crypto');

// Encryption settings
const encryptionKey = crypto.randomBytes(32); // AES-256 key
const iv = crypto.randomBytes(16); // Initialization vector

// Encrypt function
function encrypt(text) {
  const cipher = crypto.createCipheriv('aes-256-cbc', encryptionKey, iv);
  let encrypted = cipher.update(text, 'utf8', 'hex');
  encrypted += cipher.final('hex');
  return `${iv.toString('hex')}:${encrypted}`; // Store both IV and encrypted text
}

// Post request
app.post('/user', (req, res) => {
  const { creditCard, email } = req.body;

  // Encrypt the name
  const encryptedCard = encrypt(creditCard);

  // Save encrypted  to the database

  const user = new User({
    creditCard: encryptedCard ,
    email: email
  });// example of sequelize queries

  user.save().then(() => {
    res.send('User saved successfully');
  }).catch(err => {
    res.status(500).send('Error saving user');
  });
});

When you need to display the real data (in this case the card number) , you can use decrypt function inside your GET request.

// Decrypt function
function decrypt(encryptedData) {
  const [ivHex, encryptedText] = encryptedData.split(':');
  const ivBuffer = Buffer.from(ivHex, 'hex');
  const decipher = crypto.createDecipheriv('aes-256-cbc', encryptionKey, ivBuffer);
  let decrypted = decipher.update(encryptedText, 'hex', 'utf8');
  decrypted += decipher.final('utf8');
  return decrypted;
}

//GET request
app.get('/user/:id', (req, res) => {
  const userId = req.params.id;
 User.findById(userId).then(user => {
    if (!user) return res.status(404).send('User not found');

    // Decrypt the user's card 
    const decryptedCard = decrypt(user.creditCard);

 res.json({
      creditCard: decryptedCard ,
      email: user.email
    });
  }).catch(err => {
    res.status(500).send('Error retrieving user');
  });
});

Security Headers:

-Apply HTTP security headers like Strict-Transport-Security, X-Frame-Options, X-XSS-Protection, and X-Content-Type-Options to protect against various common vulnerabilities.

The simplest way to implement it is by using the helmet middleware in express after installing it npm install helmet.

const express = require('express');
const helmet = require('helmet');
const app = express();

app.use(helmet());

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

The alternative implementation is to manually setting Headers without Helmet as shown as below.

app.use((req, res, next) => {
  res.setHeader('Content-Security-Policy', "default-src 'self'; script-src 'self' https://trusted.cdn.com");
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
  res.setHeader('X-XSS-Protection', '1; mode=block');
  res.setHeader('Referrer-Policy', 'no-referrer');
  res.setHeader('Permissions-Policy', 'geolocation=(self), microphone=()');
  next();
});

CSRF Protection:

-Implement Cross-Site Request Forgery (CSRF) protection mechanisms such as CSRF tokens to prevent unauthorized actions in your app.

How CSRF Attacks Work:

-The user logs into your app, and the server sets a session cookie or an authentication token.
-The user then visits a malicious site while still logged in to your app in the background.
-The malicious site sends a request to your app using the logged-in user's credentials (session cookie) to perform unintended actions like transferring money or changing account details.

To prevent CSRF attacks, you need to ensure that requests made from your frontend are authenticated and originate from a trusted source. The most common way to protect against CSRF is by using CSRF tokens.

Implementation is easy by using cookie parser and express.urlencoded middlewares
first install them npm install csurf cookie-parser

const express = require('express');
const cookieParser = require('cookie-parser');
const csrf = require('csurf');
const app = express();

// Use cookie-parser for CSRF token storage (if using cookie-based tokens)
app.use(cookieParser());

// Initialize the CSRF middleware
const csrfProtection = csrf({ cookie: true });

// Use body-parser to parse form data
app.use(express.urlencoded({ extended: false }));

// routes here after applying the middlewares

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Logging and monitoring:

-Ensure proper logging of security-related events such as failed login attempts and potential XSS attacks. Also, set up monitoring and alerts for abnormal behavior.

Conclusion:

This article aimed to highlight and summarize the key security principles that should be considered when developing full-stack JavaScript applications. We also explored practical ways to implement these principles efficiently. Additionally, these insights can be valuable when preparing for job interviews, especially when discussing various security measures and best practices in app development.

State management in React: Building Dynamic Alert

Oussama Bouyahia — Tue, 17 Sep 2024 12:31:51 +0000

Introduction:

Alert messages are a common and essential tool that every frontend developer should master, as they play a key role in enhancing the user experience across different parts of an application. While there are various approaches to implementing alert systems, I’ve noticed that many methods often overlook important considerations such as optimization, separation of concerns, and adherence to the DRY (Don’t Repeat Yourself) principle. In this article, I’ll demonstrate a clear and efficient way to implement an alert component using context to ensure reusability and maintainability.
Some developers attempt to create an alert for each component, while others try to invoke an alert component only when needed. Both approaches have their merits, but they can sometimes lead to repetitive or inefficient code.
In this article, I will demonstrate how to create an Alert Context and a dynamic Alert component that allows us to manage its messages and color and control their display throughout the application using typescript and a simple tailwind design.

Create Alert Component

The below component will have two props the message and the color , it is up to you to add a title as well.

The main idea is to set a red color background for failed requests for example and a green for a successful ones.
The style is a simple tailwind style and you can adjust it and add more colors and sections as needed.

import React from "react";

interface AlertProps {
  message: string;
  color: "red" | "green";
}

const Alert: React.FC<AlertProps> = ({ message, color }) => {
  const colorClasses: { [key in AlertProps["color"]]: string } = {
    red: "bg-red-100 border-red-400 text-red-700",
    green: "bg-green-100 border-green-400 text-green-700",
  };

  const selectedColorClass = colorClasses[color];

  return (
    <div
      className={`border-l-4 p-4 ${selectedColorClass} rounded-md shadow-md`}
    >
      <p className="text-md text-center">{message}</p>
    </div>
  );
};

export default Alert;

2.Create Alert Context

This below context will mainly manage the displaying , the message and the color of the Alert.
The purpose of the implementation of useEffect is to handle the time needed before hiding the Alert message.

import {
  useState,
  ReactNode,
  createContext,
  Dispatch,
  SetStateAction,
  useEffect,
} from "react";

 interface AlertFormType {
  message: string;
  color: "green" | "red";
  show: boolean;
}

interface ContextProps {
  children: ReactNode;
}

const defaultValue: AlertValueType = {
  activeAlert: {
    show: false,
    message: "",
    color: "green",
  },
  setActiveAlert: () => {},
};

interface AlertValueType {
  activeAlert: AlertFormType;
  setActiveAlert: Dispatch<SetStateAction<AlertFormType>>;
}
//the defaultValue is just to avoid undefined value when calling useContext
const AlertContext = createContext<AlertValueType>(defaultValue);

const AlertProvider = ({ children }: ContextProps) => {
  const [activeAlert, setActiveAlert] = useState<AlertFormType>({
    show: false,
    message: "",
    color: "green",
  });
  useEffect(() => {
//if the alert message displays wait (02) secondes then hide it
    if (activeAlert.show) {
      const timer = setTimeout(
        () => setActiveAlert((prev) => ({ ...prev, show: false })),
        2000
      );
      return () => clearTimeout(timer);
    }
  }, [activeAlert.show]);

  const alertValue: AlertValueType = { activeAlert, setActiveAlert };

  return (
    <AlertContext.Provider value={alertValue}>{children}</AlertContext.Provider>
  );
};

export { AlertContext, AlertProvider };

3.Calling the Alert component in the Layout

Here the Alert component will be displayed based on the condition invoked from useContext.
If you are not familiar with the layout and the modern react-router-dom, you can just simply understand that the Alert Component should be under your Header component and it will be displayed if one of other component set the show to true.

import { useContext } from "react";
import Header from "./Header";
import { Outlet } from "react-router-dom";
import { AlertContext } from "../Contexts/AlertContext";
import Alert from "./utils Components/Alert";
export default function Layout() {
//destructing the activeAlert from the context
  const { activeAlert } = useContext(AlertContext);
  return (
    <>
      <Header />
//Alert displays based on the show property of the activateAlert object
      {activeAlert.show && (
        <div className="container mx-auto p-4">
          <Alert message={activeAlert.message} color={activeAlert.color} />
        </div>
      )}
      <div className="container mx-auto p-4">
        <Outlet /> //represent the other components
      </div>
    </>
  );
}

4.Example of handling the Alert after a sign in request to the backend

Inside your Login component you can set the activeAlert state depending on the request response.

const Login = () => {
const [userLogin, setUserLogin] = React.useState({ email: "", password: "" });
 const { setActiveAlert } = React.useContext(AlertContext);
//the form event function
const loginSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    axios
      .post("/api/user/login", userLogin)//request to your login route
      .then((res) => {
        //your logic here
         //a successful response alert message will be setted and the background will be green
        setActiveAlert((prev) => ({
          ...prev,
          show: true,
          message: res.data.message,
          color: "green",
        }));

      })
      .catch((err) => {
        if (err.response) {
          setActiveAlert((prev) => ({
            ...prev,
            show: true,
            message: err.response.data.message,
            color: "red",
          }));
          setUserLogin({ email: "", password: "" });
        }
      });
  };
return //your html component here
}

5.Wrapping the App by the context Alert:

Don't forget to wrap your App inside the context, so all children component will have an access to it.

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { AlertProvider } from "./Contexts/AlertContext.tsx";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
      <AlertProvider>
        <App />
      </AlertProvider>
  </StrictMode>

Conclusion:

This implementation offers a clean and maintainable approach that adheres to key principles like separation of concerns and the DRY principle. By using TypeScript, we also ensure type safety, reducing the likelihood of unexpected errors in larger, more complex applications. This method not only optimizes code structure but also provides a scalable solution for managing alerts across an application.

How can I implement real time changes between my frontend and the database.

Oussama Bouyahia — Sat, 10 Feb 2024 20:13:20 +0000

Introduction

Developers often encounter challenges when building apps that require real time communication.
In this blog post, we'll explore the concept of a real-time communication and its critical role in delivering a seamless user experience.
lets take examples of some real scenarios when the user needs the most up to date data from the server or more specifically from the database.
lets take the example of e-commerce web site when the user is adding items to his cart-item, meanwhile a thousands of other users performing the same process, however some items with a limit quantities , what could happen in this case ?
of course the user(s) will fail to get a positive response from the server and they can not realize that only if they reload their browser constantly which is lead to a bad user experience.
Or consider a renting car platform, a user try to rent a car, and others choose the same one at the same time.
Until this point, it is clear how these scenarios are represent a critical challenge .
So how can we address this issue without instructing the client to keep loading his page?
From this needs sorted out the idea of real time communication between the server and the frontend or the real time database (which is another process could be discussed in other tutorials).

Socket.IO

We will not delve deeply into defining Socket.IO in this tutorial. What you should grasp for the moment is that Socket.IO is a JavaScript library that facilitates real-time, bidirectional communication between web clients and servers. Developers often associate Socket.IO with chat apps. However, in this tutorial, we will not focus on that scenario. Instead, our emphasis will be on a simple use case—implementing it in a mini blog app between Express.js and React and see how after a post request from any user all others will see changes immediately in their browsers.

Tutorial

The primary focus of this tutorial is to comprehensively understand the process of sending notifications to the client upon updating the database. Technically, we will emit an event containing the updated data and listen for it on the frontend. This ensures that with each HTTP request, the browser automatically updates the view, providing a seamless experience for the user.
the tuto example scenario: A mini blog-app application.

Prerequisites
Before diving into the tutorial, ensure you have the following prerequisites:
-A basic understanding of react, express.js and mongoDB.
-Node.js installed on your system.
-A code editor of your choice, preferred Visual Studio Code.

Integrate Socket.IO with express

1. make sure that you are in the right directory then init your express project by running the below command in your terminal:
npm init -y

2.install express, Socket.IO, CORS middleware, mongoDB and dotenv for environment variables
npm install express cors socket.io dotenv mongoose

3.create an index.js file in your directory and copy the code below, don't be confused, you can refer to the documentation of socket.Io to find how to integrate it in your index.js https://socket.io/docs/v4/tutorial/step-3.

 const express = require("express");
const { createServer } = require("node:http");
const { Server } = require("socket.io");
const cors = require("cors");
require("dotenv").config();
const app = express();
const PORT = process.env.PORT || 3500;
const dbConnect = require("./db/DbConnect");
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    //in this case the react app run on port 5173
    origin: "http://localhost:5173",
    methods: ["GET", "POST"],
  },
});

app.use(express.json());
app.use(cors());
io.on("connection", (socket) => {
  console.log(socket.id);
});
httpServer.listen(PORT, () => {
  console.log(`server is running on port ${PORT}`);
  dbConnect();
});

-I initialize a new instance of socket.io by passing the server (the HTTP server) object. Then I listen on the connection event for incoming sockets and log it to the console.
-the call of the function dbConnect is to ensure connection with the database , if you are not familiar on how to create a connection with mongoDB database , create a file DbConnect and copy the code below.


const mongoose = require("mongoose");
require("dotenv").config();
function connectDB() {
  mongoose
    .connect(process.env.DBURI) // replace this with your .env URI 
    .then(() => console.log("db connected"))
    .catch((err) => console.log(err.message));
}

module.exports = connectDB;

4.Emit an event after every HHTP post request.

4.1 update the index.js file as below

const express = require("express");
const { createServer } = require("node:http");
const { Server } = require("socket.io");
const Post = require("../db/postModel");
const User = require("../db/userModel");
const cors = require("cors");
require("dotenv").config();
const app = express();
const PORT = process.env.PORT || 3500;
const dbConnect = require("./db/DbConnect");
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    //in this case the react app run on port 5173
    origin: "http://localhost:5173",
    methods: ["GET", "POST"],
  },
});

app.use(express.json());
app.use(cors());
io.on("connection", (socket) => {
  console.log(socket.id);
});

app.post("post/:userId",async (req, res) => {
  const { userId } = req.params;
  const { title, content } = req.body;
  try {
    const newPost = new Post({ userId, title, content });
    await newPost.save();
    if (newPost) {
      const list = await Post.find();
      io.emit("post_created", list);
      res.status(201).json({ message: "new post created successfully!" });
    } else res.status(400).json({ message: "something went wrong" });
  } catch (error) {
    res
      .status(error.status || 500)
      .json({ Error: error.message || `internal server problem` });
  }
})

httpServer.listen(PORT, () => {
  console.log(`server is running on port ${PORT}`);
  dbConnect();
});

In this new index.js file , I added an HTTP post request to endpoint post/:userId, let us understand and breakdown the code of the controller function:
-the purpose of this request is to create a new post for a specific user which his id included as params, then we get the list of all posts and include it as data to be emitted with the event called here post_created.
I think here the process of socket.IO events become clear ,it is all about giving a name to an event and emit it with a specific data.
also if you are not familiar with mongoose and mongoDB, there were two queries in the function:
-Create new post with the query: new Post({// your_model_fields_here})
-Get posts list with the query: await Post.find()
=> After these two steps the updated list of posts is ready and could be send as data with the emitted event
-the two models imported in the file are a simple mongoose model , you can create your customize models (refering to moongoose documentation) or copy the two codes below and paste them inside two files:

db/postModel
db/userModel

const mongoose = require("mongoose");
const schema = new mongoose.Schema({
  userId: {
    type: mongoose.Schema.Types.ObjectId,
    ref: "User",
    required: true,
    validate: {
      validator: async function (userId) {
        const user = await mongoose.model("User").findById(userId);
        return user !== null;
      },
      message: "User with the specified ID does not exist.",
    },
  },
  title: {
    type: String,
    required: true,
  },
  content: {
    type: String,
    required: true,
  },
});

const Post = mongoose.model("Post", schema);
module.exports = Post;

const mongoose = require("mongoose");
const schema = new mongoose.Schema({
  email: { type: String, required: true, unique: true },
  password: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
});
const User = mongoose.model("User", schema);

module.exports = User;

5.Structure of the backend folder and separate concerns

If you've already noticed, including the HTTP POST request in the index.js file makes it too long and doesn't adhere to the separation of concerns principle.
Many of you may be familiar with the best practice of separating routes and controller functions into different folders. However, the challenge arises when dealing with the Socket.IO instance io, which resides in the index.js file. The controller function is invoked in the routes folder rather than the server file. Even considering passing io as a parameter won't work, as it isn't directly accessible in the routes files.

For this reason, I will create an instance io in a separate file and set/get it from anywhere in the app.

5.1-create socket.js file

let ioInstance;

function setIo(io) {
  if (!ioInstance) {
    ioInstance = io;
  }
}

function getIo() {
  return ioInstance;
}

module.exports = {
  setIo,
  getIo,
  ioInstance,
};

5.2-update index.js file

const express = require("express");
const { createServer } = require("node:http");
const { Server } = require("socket.io");
const cors = require("cors");
require("dotenv").config();
const app = express();
const PORT = process.env.PORT || 3500;
const dbConnect = require("./db/DbConnect");
const httpServer = createServer(app);
const io = new Server(httpServer, {
  cors: {
    origin: "http://localhost:5173",
    methods: ["GET", "POST"],
  },
});
const socket = require("./socket");
socket.setIo(io);
app.use(express.json());
app.use(cors());
io.on("connection", (socket) => {
  console.log(socket.id);
});
app.use("/user", require("./routes/useRoute"));
app.use("/post", require("./routes/postRoute"));

httpServer.listen(PORT, () => {
  console.log(`server is running on port ${PORT}`);
  dbConnect();
});

In the code above I deleted the HTTP post request, imported the socket instance and set it to io
5.3-create post controller file inside a the controllers folder

controllers/postController

const Post = require("../db/postModel");
const User = require("../db/userModel");
require("dotenv").config();
const socket = require("../socket");
const io = socket.getIo();
const createPost = async (req, res) => {
  const { userId } = req.params;
  const { title, content } = req.body;
  try {
    const newPost = new Post({ userId, title, content });
    await newPost.save();
    if (newPost) {
      const list = await Post.find();
      io.emit("post_created", list);
      res.status(201).json({ message: "new post created successfully!" });
    } else res.status(400).json({ message: "something went wrong" });
  } catch (error) {
    res
      .status(error.status || 500)
      .json({ Error: error.message || `internal server problem` });
  }
};
//other controller functions here
module.exports = {
  createPost,

};

In this step I got the io instance from the socket.js file
const io = socket.getIo(), so i could use it in my controller function.

5.4-create post route file inside the routes folder

const express = require("express");
const router = express.Router();
const postController = require("../controllers/postController");

router.post(
  "/:userId",

  postController.createPost
);

//other routes here

module.exports = router;

Integrate Socket.IO with react

The last step of the tuto is to listen to the event in the component so the browser will update the view automatically.
For our case with react, we need a component that display posts .
In our component we will need a state : array of posts
and a useEffect hook responsible for updating the state.
_1. Integrating socket.IO with react
npm i socket.io-client
*2. * create a component Listposts and copy the code below

import { useEffect, useState } from "react";
import io from "socket.io-client";
const socket = io("http://localhost:your_server_port");
const Listposts = () => {
  const [posts, setPosts] = useState<PostType[]>([])
return(
//map your posts list here
)
export default Listposts;

3. Add a useEffecthook to fetch data from the server and also to listen to the emitted event coming from the server.
update your component to include this logic

import { useEffect, useState } from "react";
import axios from 'axios'
import io from "socket.io-client";
const socket = io("http://localhost:your_server_port");
const Listposts = () => {
  const [posts, setPosts] = useState<PostType[]>([])
useEffect(() => {
      axios
        .get("http://localhost:your_server_port/post")
        .then((res) => setPosts(res.data.list))
        .catch((err) => alert(err.message));

    socket.on("post_created", (data: PostType[]) => {
      setPosts(data);
    });
  }, [ posts]);

return(
//map your posts list here
)
export default Listposts;

Many of you are familiar with fetching the data from the server and setting the state accordingly , the new thing when implementing a real time communication is to set the state also when listenning to the event.

Note : Don't forget to test your useEffectfor any unexpected infinite loop caused by the dependency array and fix it by implementing the useCallback() and useMemo().
for those who use classical component the same logique could be implemented inside the componentDidMountmethod.

Conclusion

For this tutorial, the purpose was to explain the importance of implementing real-time communication in apps that require it for a better user experience.
In this case, we used the MongoDB database, but the same logic could be applied to relational databases like MySQL.

Finally, I would like to emphasize the distinction between real-time communication and real-time databases.

How Array.reduce() could replace other array methods

Oussama Bouyahia — Wed, 31 Jan 2024 15:00:56 +0000

JavaScript developers use array methods on a daily basis, and it has become imperative to incorporate these methods into the code instead of relying on traditional loops and conditions.
These methods provide a clean, concise and neat code.
Among them, we find map, filter , find,every etc

In this post, I will show you how reduce can save you from having to use other methods, in another way we could say reduce method is the mother of others methods.

In the following post I will take an array of objects as an example as it is useful case and close to real arrays you are facing in react , node js etc.
In the following I will go through three array methods examples map, filter and every.

reduce instead of *map * as you know Array.map() return another array with the same length with a determined operation for each element

let users= [{id:1,name:'John'},{id:2,name:'oussama'},{id:3,name:'Dave'},{id:4,name:'Smith'}]

users.reduce((accumulator,user)=>{
accumulator.push(user.name)
return accumulator
},[])
//output exactly the same when using users.map(e=>e.name): //['John', 'oussama', 'Dave', 'Smith']
//the array of users reduced to an array of names by //initiating the accumulator to an empty array then return it //as a result after pushing in each step.

reduce instead of filter Array.filter() used to return an array of elements after filtering the original array based on a determined condition

// the same as the first example , the accumulator initiated as an empty array then push only element which align with the condition
users.reduce((accumulator,user)=>{
  if(user.name.length>4) accumulator.push(user.name)
  return accumulator
},[])
//output exactly the same when using users.filter(e=>e.name.length>4): 
['oussama',  'Smith']
//the array of users reduced to an array of names that includes only names with more than 4 characters

reduce instead of every Array.every() return a boolean, true when all the array element satisfy the specified condition and falseif at least one element fails to meet the condition. So to use reduce method in this case we should initiate the accumulator by a true value and assign false to it if one element of the array fails to meet the condition

//in this example we will test if all users have a name of //type string
users.reduce((accumulator,e)=>{
if(typeof(e.name)!=='string') accumulator = false
return accumulator
},true)
// output will be `true` the same as below method //users.every(e=>typeof(e.name)==='string')

Conclusion
The way I followed to introduce to you the reduce array method was to emphasize that it is a powerful method and can replace other methods in case you don't know or forget one of them, however I can not say that it is the most cleanest code.
Knowing all of them is very helpful , knowing reduce is the key behind all of them.