DEV Community: Alaa Mohammad

Guide to build a modern Web App using Next.js 14 (App Router), Fully authentication (NextAuth), Theming and i18n

Alaa Mohammad — Wed, 02 Oct 2024 17:48:38 +0000

Introduction to Next.js and Its Dominance

In the last few years, Next.js has got an enormous attention in web development fields, especially with the growing of React usage worldwide. Its simplicity, power, and flexibility make it the favorite choice for most developers who would want to build scalable and performant applications. Next.js developed by Vercel, it offers a framework with routing, server-side rendering, static site generation and API routes.

🌟 Why to use Next.js?
Next.js is impressive for certain reasons:

Server-Side Rendering (SSR): Which is often considered one of the main strengths of Next.js (it has native support for SSR), which enhance the performance and SEO because pages are rendered on the server instead of by the client.
Static Site Generation (SSG): In Next.js, developers can generate static pages at build time; this increases page loading a lot and reduces the demand on the server.
Hybrid Model: By using Next.js we will have all of Server-Side Rendering (SSR), Static Site Generation (SSG), and Client-Side Rendering (CSR) within the same framework. Thus, it allows developers to be flexible with how they fetch and display data.
API Routes: Next.js lets you build API routes directly in your app, making it easy to handle any kind of backend functionality without the need to have a separate traditional backend.
In addition, Vercel which is the creator of Next.js provides an optimized deployment platform for Next.js, enabling instant deployments with features like automatic scaling, zero-config setups, and serverless functions.

🌟 Why to use App Router?
With the advantage of Next.js 13, the "App Router" became the preferred way of routing and replaced the existing "pages routing system" because of the following factors:

Layouts: One of the most advanced features of App Router. Which allows you (As the name suggests) to define multiple reusable layout level inside an application to keep a consistent structure among many routes or pages.
Loading UI: which supports the display of spinners or skeleton screens while data fetching for a particular page or component.
Colocation of Data and UI: Which help in collocating UI components with the data they depend on.
React Server Components: Taking advantage of the powerful React 19 Server Components, App Router will make sure that load time is faster due to the smaller JavaScript bundle being downloaded to the client.

All previous factors make App Router more efficient, maintainable, and scalable.

Apply Authentication using NextAuth
NextAuth.js provides a very straightforward way to apply powerful authentication in your Web App. It supports providers like Google, GitHub, and even allows self-made email/password solutions.

🌟 Why NextAuth.js?

Ease of Integration: NextAuth.js works well with Next.js, so you are allowed to build authentications with a minimum of configuration.
Secure Defaults: Secure defaults are things like HTTP-only cookies, CSRF protection, and encryption for session tokens.
OAuth Providers: Easily add flexible OAuth providers like Google, Facebook, or GitHub, custom username/password logins …
Serverless Compatibility: It's designed to work with Next.js API routes. Which is ideal for modern stateless architectures.

🌟 Styling with Tailwind CSS
Tailwind CSS is a very popular utility-first CSS framework featuring a lot of flexibility and simplicity. It allows developers to create responsive, scalable interfaces without custom CSS, which is why it's perfectly suitable for Next.js apps.

🌟 Why to use Tailwind CSS?

In Tailwind, developers can implement CSS styles right within HTML or JSX using className props that make it faster to build UI components without having to switch between files.
Highly Customizable: using Tailwind configuration file which contains options to customize all theme colors, breakpoints, and other design tokens.
Fully support of responsive design by providing easy way to represent screen dimensions using intuitive for class naming regarding views on mobile, tablet, and desktop.

🌟 Apply multiple theming modes:
Most modern applications give users an opportunity to choose between a light theme and a dark theme. That gives them a personalized experience. Next.js can handle theming quite easily using "next-themes" combined with Tailwind CSS.

🌟 Internationalization (i18n) with Next.js
Global applications may often need to support multiple languages. Next.js provides built-in internationalization support by using "i18next" with some extra customization.

🌟 Practical example

In the following project I have developed a website using Nextjs 14 with App Router, Fully authentication using NextAuth (SignUp, ForgetPassword, ResetPassword), Responsive Web Design using Tailwind CSS, i18n and multiple themes support.

💻💻 [Project on GitHub]: (https://github.com/alaa-m1/nextjs14-approuter-nextauth-shopsfinder)

React 19, handling forms using useOptimistic and useFormStatus along with React Hook Form and Zod … practical example ⚛️

Alaa Mohammad — Sun, 07 Apr 2024 07:33:25 +0000

The challenge here to use useOptimistic to get more responsive UI with form actions along with React Hook Form and Zod schema (to apply client side validation) and at the same time to prevent clicking on the submit button multiple time until the current action is finished which we will handle using useFormStatus hook.

First of all, I will give a brief explanation about the used hooks.

useOptimistic: allows to optimistically update the UI during async actions (like a network request) by showing different state.
It accepts the current state which will be returned initially and whenever no action is pending and an update function that takes the current state and the input to the action.
It will returning the optimistic state to be used while waiting for the action and a dispatching function “addOptimistic” to call when we have an optimistic update.
So, when a user submits a form, instead of waiting for the server’s response to display the new changes, the interface is immediately updated with the expected outcome with a label to indicate that the action in pending “loading, adding …”and when that action in completed then this label will be removed.

useFormStatus: gives status information of the last form submission.
This Hook returns information like the pending property to tell if the form is actively submitting, which we will use for example to disable buttons while the form is submitting.

Practical example 💻

1.
Both useOptimistic and useFormStatus are useful hooks in the upcoming React 19, for now these hooks are only available in React’s Canary and experimental channels.
To review React 19 features, we will need to install the Canary version of React and react-dom by using the following:
npm i react@18.3.0-canary-6db7f4209-20231021 react-dom@18.3.0-canary-6db7f4209-20231021

2.
Add Zod schema and zodResolver to integrate react-hook-form with Zod schema validation library:

export const TaskSchema = z.object({
  details: z
    .string()
    .min(5, "Task details must be at least 5 characters")
    .max(100, "Task details must be less than 100 characters"),
  completed: z.boolean(),
  editMode: z.boolean(),
});

const {
    register,
    control,
    trigger,
    reset,
    formState: { errors },
  } = useForm<TaskSchemaType>({
    resolver: zodResolver(TaskSchema),
    defaultValues: { completed: false, details: "", editMode: false },
});

3.
For forms we will use action to benefit from useOptimistic hook and from server actions React 19 feature:

<form
  action={handleFormAction}
  style={{ margin: "10px 5px 20px" }}
>
  <div
    style={{
      display: "flex",
      justifyContent: "space-around",
      gap: "1",
      padding: "5px",
    }}
  >
    <div>
      <label htmlFor={`task-details-${id}`}>Task details:&nbsp;</label>
      <input
        id={`task-details-${id}`}
        type="text"
        autoComplete="off"
        {...register("details")}
      />
      {errors.details && (
        <div style={{ color: "#DC3545" }}>{errors.details.message}</div>
      )}
    </div>
    <div>
      <label htmlFor={`task-status-${id}`} className="prevent-select">
        Is completed:
      </label>
      <input
        id={`task-status-${id}`}
        type="checkbox"
        {...register("completed")}
      />
    </div>
  </div>
  <SubmitBtn label="Save task details" />
</form>

4.
In formAction we will add an optimistic update after using "trigger" method from React Hook Form to trigger client side validation:

const handleFormAction = async (data: any) => {
    const res = await trigger(["details"]);
    if (!res) return;
    const updatedTask: Task = {
      id: task.id,
      details: data.get("details"),
      completed: data.get("completed"),
      editMode: false,
    };
    addOptimisticTask({ ...updatedTask, process: "edit", editMode: true });

    await editTask(updatedTask);

    reset({ details: "", completed: false });
  };

5.
We will use useOptimistic to handle different optimistic actions:

const [optimisticTasks, addOptimisticTask] = 
useOptimistic<Array<Task>>(
    tasks,
    (state: Array<Task>, updatedTask: Task) => {
      if (updatedTask.process === "add")
        return [...state, { ...updatedTask, loading: true }];
      else if (updatedTask.process === "delete") {
        return state.map((task) =>
          task.id === updatedTask.id
            ? { ...task, loading: true, process: updatedTask.process }
            : task
        );
      } else if (updatedTask.process === "setForEdit") {
        return state;
      } else if (updatedTask.process === "edit") {
        return state.map((task) =>
          task.id === updatedTask.id
            ? { ...updatedTask,loading: true }
            : task
        );
      } else return state;
    }
  );

6.
To mimic slow fetching we will use the following async method:

export const sleep=async(delayInMS: number):Promise<any>=>{
    return new Promise((resolve)=> setTimeout(resolve, delayInMS))
}

7.
Add SubmitBtm which will be rendered within form tag to get pending status by using useFormStatus hook:

import React from "react";
import { useFormStatus } from "react-dom";

const SubmitBtn = ({ label }: { label: string }) => {
  const status = useFormStatus();
  return (
    <button
      type="submit"
      disabled={status.pending}
      style={{ minWidth: "100px" }}
    >
      {label}
    </button>
  );
};

export default SubmitBtn;

🎉🎉[Project on GitHub]: React 19 Features (https://github.com/alaa-m1/react19-features)

Next.js 14 (App Router) with Server Actions - Full User Authentication System

Alaa Mohammad — Fri, 22 Mar 2024 18:17:36 +0000

In almost all web apps we need to handle data fetching and data mutating:

1- Fetching Data: Which can be handled in:
I- Server Components using fetch (By default Next.js caches the returned values of fetch on the server) or with third-party libraries ,then we can pass the result as a prop to the Client Component.

import React from "react";
import { ProductCard } from "./components";
import { NoItemsFound } from "@/shared";
import { getProductsByCategory } from "@/queries";
On the server, using fetch or with third-party libraries
using  Route Handler or with third-party libraries.
type ProductsProps = {
  category?: string;
};

export const ProductsList = async ({ category }: ProductsProps) => {
  const currentCategory = category || "all";
  const products = await getProductsByCategory(currentCategory);
  return (
    <>
      <div className="grid gap-5 justify-items-center sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mb-[10px]">
        {(products ?? []).map((product) => (
          <ProductCard key={product.id} product={product} />
        ))}
      </div>
      {(products ?? []).length === 0 ? <NoItemsFound /> : null}
    </>
  );
};

import { baseUrl } from "@/shared";
import { Products } from "@/types";
import "server-only";

export const getProductsByCategory = async (
  category: string
): Promise<Products | null> => {
  try {
    if (category === "all") {
      const res = await fetch(`${baseUrl}products`, {
        next: { tags: ["getProductsByCategory"] },
      });
      const data = (await res.json()) as Products;
      return data;
    } else {
      const res = await fetch(`${baseUrl}products/category/${category}`, {
        next: { tags: ["getProductsByCategory"] },
      });
      const data = (await res.json()) as Products;
      return data;
    }
  } catch (error) {
    console.log(`Error in fetching Products`, Error);
    return null;
  }
};

II- Client Components using Route Handler or with third-party libraries.

2- Mutating Data: Which is recommedned to be handled using Server Actions on both Server and Client Components:
Server Actions represent a significant improve in Next.js. Which are asynchronous functions and can be securely invoked, directly from React (Server or Client) Components.

In Server Components:
We can use both inline function level or module level "use server" directive.

In Client Components:
To use Server Action in a Client Component, we can simply create a new file and add the "use server" directive at the top of it (module-level "use server" directive). Then all functions within the file will be marked as Server Actions that can be reused in both Client and Server Components.

Before server actions, we need to use react-query or SWR to perform mutations effectively. But by using server actions, we can simply create a file, then using "use server" directive, writing a function to perform the our target goal (By communicating with the database), and then we can invoke them in from form, event handlers, useEffect, third-party libraries.
With this simplicity in writing Server Actions, we can achieve not only code cleanliness but also reusability. By writing Server action to handle specific functionality the using it across different components.
With Server Actions developers need to write less boilerplate code. Unlike API routes which required manual setup and invocation, Server Actions are defined within the same context as your components.
Even though you can use server actions to fetch data, Next.js discourages it because it can only send a POST request. Instead, we can fetch the data from the server component and pass it down as props.

Invoking Server Action by submitting a form:

const onSubmit: SubmitHandler<UserSchemaType> = async (formData) => {
    const response = await createNewUser(formData);

    if ([400, 500].includes(response.status)) {
      toast.error(response.message);
    } else {
      toast.success(response.message);
      reset();
    }
  };

🎉🎉 [Project on GitHub]: Nextjs 14 with App Router, Register a new user, Send Confirmation email, Reset password, Forget password ... (https://github.com/alaa-m1/nextjs14-approuter-nextauth-shopsfinder)

Create a custom function to generate a URL from given parameters (with TS support) 💻

Alaa Mohammad — Sun, 17 Mar 2024 15:00:56 +0000

We can achieve this using two options:

First option:

const urlGenerator = (
    baseUrl: string,
    pathName: string,
    searchParamsArray: Array<Record<string, string | number>>
  ) => {
    const validSearchParams = searchParamsArray.filter((param) => {
      const [_, value] = Object.entries(param)[0];
      // We can put here any condition on the value
      return value;
    });
    const sortedSearchParams = validSearchParams.sort((a, b) => {
      const [aKey] = Object.entries(a)[0];
      const [bKey] = Object.entries(b)[0];
      if (aKey > bKey) {
        return 1;
      } else if (aKey < bKey) {
        return -1;
      } else return 0;
    })
    const searchParams = sortedSearchParams
      .map((param) => {
        const [key, value] = Object.entries(param)[0];
        return `${encodeURIComponent(key)}=${encodeURIComponent(value)}`;
      })
      .join("&");
    const url = `${baseUrl}${pathName}?${searchParams}`;
    return url;
  };
  const resultUrl = urlGenerator("http://example.com", "/", [
    { width: 200 },
    { height: 250 },
    { locale: "en" },
    { toolbar_bg: "" },
    { interval: "3h" },
    { search: "react19" },
  ]);
  console.log("resultUrl=", resultUrl);

// resultUrl= http://example.com/?height=250&interval=3h&locale=en&search=react19&width=200

Second option:
By using URLSearchParams as the following

const urlGenerator = (
    baseUrl: string,
    pathName: string,
    searchParamsArray: Array<Record<string, string>>
  ) => {
    const validSearchParams = searchParamsArray.filter((param) => {
      const [_, value] = Object.entries(param)[0];
      // We can put here any condition on the value
      return value;
    });
    const sortedSearchParams = validSearchParams.sort((a, b) => {
      const [aKey] = Object.entries(a)[0];
      const [bKey] = Object.entries(b)[0];
      if (aKey > bKey) {
        return 1;
      } else if (aKey < bKey) {
        return -1;
      } else return 0;
    }).map((param)=>Object.entries(param)[0]);
    const searchParams=new URLSearchParams(Object.fromEntries(sortedSearchParams))
    const url = `${baseUrl}${pathName}?${searchParams.toString()}`;
    return url;
  };
  const resultUrl = urlGenerator("http://example.com", "/", [
    { width: "200" },
    { height: "250" },
    { locale: "en" },
    { toolbar_bg: "" },
    { interval: "3h" },
    { search: "react19" },
  ]);
  console.log("resultUrl=", resultUrl); 
// resultUrl= http://example.com/?height=250&interval=3h&locale=en&search=react19&width=200

React Redux with TypeScript - Data fetching with Redux ... practical examples ⚛️

Alaa Mohammad — Thu, 14 Mar 2024 15:10:23 +0000

In general before using Redux, you need to be sure that the value which you intend to store in Redux store is being used in multiple components such as userInfo (after login), shopping cart Items ….

First I would like to mention the main concepts of Redux:

✨Redux Store:
Which holds the states of your App (It is a single source of truth of state for your application). However, app can’t directly update Redux store state but this can be done by dispatching a specific action to handle a specific task (Add new user, Update user, delete user …)

✨Redux Action:
Is a plain JavaScript object which contains information to descript what we need to happen. However, it doesn’t describe how it happens. Which is the responsibility of Reducer (which consumes the action).
Action contains:
I. type (mandatory): which tells us what type of what we need to happen by dispatching this action (type should be a string).
II. payload (optional): which is a data field in action, which hold the data from our app to be uses inside the reducer to eventually update Redux store
We can use an action creator which is a function return a blain JS object (an action)

✨Redux Reducer:
It is used to change the state (to be more accurate reducer return a new update instance of the state with all required updates) by passing an action to.
Reducer is a pure function that takes current application state and an action and return the new updated state.
Every time an action is dispatched, all reducers will be triggered. Each reducer compares its switch cases with action type and if there is a match this the corresponding reducer will return a new instance of the state based of action payload if existing and reducer logic.

✨Redux middleware:
It uses to intercept every action before hitting the reducer so this middleware can change the action or even cancel it. Also, it can be used in logging, making asynchronous requests …

✨useSelector(): get current Redux state from Redux Store

In case we want to fetch data form an external API using Redux, we could have three options to use:
First option:
We can use Redux Thunk which is a middleware to handle the asynchronous request. Redux Thunk will return a function which receives the dispatch which will be used to dispatch a regular synchronous action and after receiving the result from the external API.
The steps will be as the following:
1- When the user visit a page ThunkAction will be dispatched inside useEffect.
2- Inside the ThunkAction the external API (asynchronous request) will be called.
3- After getting the result, a regular synchronous action will be dispatched based on the API response status.
4- This Action will be consumed by a reducer which will return a new instance of the state.
5- To get the desired state we can use the useSelector hook and choose the desired state slice.
6- We will use this state from useSelector to update React component.
The full example can be found in the following repository:
https://github.com/alaa-m1/ecommerce-webapp-react-redux/blob/master/src/store/products/productsActions.ts

Second option:
We can use a combination of Redux and ReactQuery:
In this scenario we can use Redux to manage client state and ReactQuery to manage fetching caching and updating server state
So we will use ReactQuery to fetch the data and after receiving the result we can save the received data using Redux.
Some of the benefits when applying this approach:
• Simplify asynchronous requests handling: for example by using simple useQuery(..) we can get {loading, refetch, isLoading,isFetching, isError … } without the need to write any extra code.
• Request caching.
• Larger community support
The full example can be found in the following repository:
https://github.com/alaa-m1/ecommerce-webapp-react-redux/blob/master/src/pages/Home/HomePage.tsx

Third option:
We can use RTK Query data fetching and caching API.

Redux Practical Example: 💻💻

userActions.ts

import { UserInfo } from "firebase/auth";
import { createAction } from "utils/redux/reduxUtils";
import { userActionTypes } from "./userActionTypes";

export const setCurrentUser = (user: null | UserInfo) =>
  createAction(userActionTypes.SET_CURRENT_USER, user);
export const setCurrentThemeMode = (mode: "light" | "dark") =>
  createAction(userActionTypes.SET_CURRENT_THEME_MODE, mode);

userActionTypes.ts

export const userActionTypes={
    SET_CURRENT_USER:"SET_CURRENT_USER",
    SET_CURRENT_THEME_MODE:"SET_CURRENT_THEME_MODE"
}

userReducer.ts

import { UserInfo } from "firebase/auth"
import { userActionTypes } from "./userActionTypes"

type UserState={
    currentUser: null | UserInfo;
    themeMode: "light" | "dark";
}

interface UserAction {
    type: any,
    payload: null | UserInfo | "light" | "dark"
}

const initailState: UserState = {
    currentUser: null,
    themeMode: "light"
}
export const userReducer = (state = initailState, action: UserAction) => {
    const { type, payload } = action;
    switch (type) {
        case userActionTypes.SET_CURRENT_USER:
            return {
                ...state,
                currentUser: payload as null | UserInfo
            }
        case userActionTypes.SET_CURRENT_THEME_MODE:
            return {
                ...state,
                themeMode: payload as "light" | "dark"
            }
        default:
            return state
    }
}

rootReducer.ts

import {combineReducers} from "redux";
import { userReducer } from "./user/userReducer";

export const rootReducer = combineReducers({
    user: userReducer,
    ....
})

🎉🎉[Project on GitHub]: E-commerce Web Application: React, Redux, React Query, MUI, Firebase ... (https://github.com/alaa-m1/ecommerce-webapp-react-redux)

React Server Components ... React magic feature!! 🔮

Alaa Mohammad — Sun, 10 Mar 2024 16:51:18 +0000

To understand the benefits of RSCs, I will briefly talk about Server Side rendering (SSR) and Suspense boundary.

SSR works on initial page load (When directly navigating to the page) by sending the pre-rendered HTML to the client which will be hydrated with the downloaded JavaScript to be fully interactive. However, with SSR the data must be fetched in the server before React can show any pre-rendered HTML. Also, all JavaScript should be downloaded on the client side before starting the hydration and the hydration process should be completed before the page can become interactive.

To solve these issues, React introduced Suspense, which brings both server-side HTML streaming and selective hydration. So, by wrapping any component (generally heavy components) with , we are telling React to deprioritize that component's rendering and hydration, which will cause in loading other components without getting blocked by the heavier ones. However, even after using Suspense we still need to download all JavaScript to the client even if it's streamed to the browser asynchronously. Also, all heavy components will continue to be computed on the client.

By introducing React Server Components, React can now solve all the previous issue:
🌟 Now we can move all heavy components to the server (which is powerful and physically closer to data sources) by using RSCs which will individually fetch data and then will be rendered entirely on the server. After that, the result of that rendering will be streamed into the client-side (React component tree), removing the need for client-side re-rendering.
🌟 The result of rendering RSC on the server will be React Server Component Payload which contains beside the rendered result of RSC: a placeholders to define where Client Components should be rendered, the references to their JavaScript files and any props passed from a Server Component to a Client Component. Which will reduce the size of the client-side JavaScript bundle by resolving all dependencies on the server and sending only RSC Payload.
🌟 Regarding Client Components, the hydration will happen concurrently with RSCs streaming in, because the compute load will be shared between client and server.
🌟 Even when an RSC needs to be re-rendered because of state change, No hard refresh will be needed as RSC will be refreshed on the server and seamlessly merges into the existing DOM. Which will preserve the client state even if server components are updated from the server.

💡 All code written for Server Components must be serializable, which means that we can’t use lifecycle hooks, such as useState or useEffect.

💡 RSC does not replace SSR or Suspense, but it works with them to provide the best performance possible.

💡 Typically we are using Server Components at the root level and it is preferred to fetch data in the Server Components (Server is physically closer to data sources and more powerful than client devices), then we can pass the result to other Server Component or to a Client Component if we need to use event handlers or lifecycle hooks.

💡 We cannot import a Server Component into a Client Component but instead we can pass Server Components as a prop to a Client Component (usually using React children prop).

💡 We can use RSCs with Next.js starting from version 13.4 (App Router).

🎉🎉 [Project on GitHub]: Nextjs 14 with App Router, Fully authentication using NextAuth ... (https://github.com/alaa-m1/nextjs14-approuter-nextauth-shopsfinder)

Next.js 14 Intercepting Routes with Dynamic Routes

Alaa Mohammad — Mon, 04 Mar 2024 20:11:17 +0000

I would like to introduce a practical example about Intercepting Routes with Dynamic Routes which is a new feature in Next.js (App Router) that enhances UI flexibility and user experience.

In many modern web applications we could want to achieve loading a route from another part of web application within the current layout by using modal as in the following diagram:

When clicking on a product card, we will see the result in a modal (Next.js intercepts the /products/[product-id] route), which will overlaying the current page context (/products).
When navigating to the product page by clicking (/products/[product-id]) URL or by refreshing the page, the entire product page should render instead of the moda -No route interception will occur- .

💻💻

🎉🎉Production Link => https://shops-finder-nextjs.vercel.app/

🎉🎉Project on GitHub

Handle component state using local storage: useLocalStorage with Typescript

Alaa Mohammad — Sun, 07 Jan 2024 13:35:12 +0000

This hook can be used to handle any component state with all JSON compatible values.

💻💻

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

/**
 * Handle component state using local storage
 *
 * @param key The name of the key. If the passed key is updated, the local storage item with the old key will be removed.
 * @param defaultValue The initial value to be used if no local storage item is found.
 * Values that are not JSON compatible such as undefined, Function and Symbol, cannot be used.
 * If any of these values are found during conversion, they will be omitted (when found in an object)
 * Or changed to null (when found in an array)
 * @param [overWrite = false] Use the default value to overwrite a pre-existing local storage value.
 * @return Returns two values: the current value stored in local storage and a function to set/update value in the local storage.
 */

export const useLocalStorage = <T,>(
  key: string,
  defaultValue: T,
  overWrite = false
) => {
  const [value, setValue] = useState<T>(() => {
    if (typeof window === "undefined")
      throw new Error("localStorage can be used only in client side");
    if (overWrite) return defaultValue;
    else {
      try {
        const currentValue = window.localStorage.getItem(key);
        if (currentValue) return JSON.parse(currentValue) as T;
      } catch (error) {
        console.error(
          `Error while reading localStorage item with key=${key}:`,
          error
        );
        return defaultValue;
      }
      return defaultValue;
    }
  });

  const previousKeyRef = useRef<string>("");

  useEffect(() => {
    const previousKey = previousKeyRef.current;

    if (previousKey !== key && previousKey) {
      try {
        window.localStorage.removeItem(previousKey);
      } catch (error) {
        console.error(
          `Error while removing localStorage item with key=${previousKey}:`,
          error
        );
      }
    }
    previousKeyRef.current = key;
    try {
      window.localStorage.setItem(key, JSON.stringify(value));
    } catch (error) {
      console.error(
        `Error while setting localStorage item with key=${key}:`,
        error
      );
    }
  }, [value, key, defaultValue]);

  return [value, setValue] as const;
};

React 18 removes “Can't perform a React state update on an unmounted component” warning ⚠

Alaa Mohammad — Wed, 03 Jan 2024 18:49:10 +0000

Everyone who has worked in React for a while remembers a lot of guidelines to avoiding the following warning: ⚠

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function

💡This warning arises in case of an asynchronous operation tries to update a state of an unmounted component.
To hide this warning we used to apply the following solution by checking if component is mounted or not:



  const isMountedRef = useRef(false)

  useEffect(() => {
    isMountedRef.current = true
    const getUserData = async () => {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/users/${userId}`
      );
      const data = (await response.json()) as UserInfo;
      if (isMountedRef.current) {
        if (data.name) {
          setUserInfo(data);
        } else setUserInfo(null);
      }
    };
    getUserData();
    return () => {
        isMountedRef.current = false
    };
  }, [userId]);

🌟However, since React 18, the React team has removed this warning (when calling setState on an unmounted component), because this warning is widely misunderstood and is can be misleading. So, you can write your useEffect as follows without fear of memory leak, also, since you are using Promises then the previous warning will not be triggered.



  useEffect(() => {
    const getUserData = async () => {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/users/${userId}`
      );
      const data = (await response.json()) as UserInfo;
        if (data.name) {
          setUserInfo(data);
        } else setUserInfo(null);
    };
    getUserData();
  }, [userId]);

👉On the other hand, avoiding adding isMounted checking will be relevant for upcoming React versions because there may be some features that preserve the DOM and its state even when the component is not mounted (not visible).

💻To verify this situation from yourside, you can use the following code which simulate the situation in which component was unmounted by the time the response was received.



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


type UserInfo=Record<string, any>;

export const AppContainer = () => {
  const [show, setShow] = useState(true);
  useEffect(() => {
    /// UserDashboard will unmount after 3000 milliseconds
    const intervalId = setTimeout(() => setShow(false), 3000);
    return () => {
      clearTimeout(intervalId);
    };
  }, []);
  return show ? <UserDashboard /> : <div>no items to show</div>;
};

const UserDashboard = () => {
  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
  useEffect(() => {
    const getUserData = async () => {
      const response = await fetch(
        `https://jsonplaceholder.typicode.com/users/1`
      );
      const data = (await response.json()) as UserInfo;
      if (data.name) {
        setUserInfo(data);
      } else setUserInfo(null);
    };
    /// The response will take at least 4000 milliseconds
    const intervalId = setTimeout(getUserData, 4000);
    // return ()=>{clearTimeout(intervalId)}
  }, []);

  return userInfo ? (
    <UserCard userInfo={userInfo} />
  ) : (
    <div className="not-found">No user found, Check user Id</div>
  );
};

type UserCardProps={userInfo: UserInfo}

const UserCard = ({ userInfo }: UserCardProps) => {
  return (
    <div>
      id:{userInfo?.id}
      <br />
      Name:{userInfo?.name}
      <br />
      Address:
      {`${userInfo?.address?.city} ${userInfo?.address?.zipcode}, ${userInfo?.address?.street}`}
    </div>
  );
};

export default UserDashboard;

You will have no warnings in your console.

Why and When to use Docker, Developing React App using Docker Container with Live Reload

Alaa Mohammad — Tue, 02 Jan 2024 21:29:29 +0000

Why to use Docker?
Docker is an open platform offers portability, consistency, and scalability for developing, shipping, and running applications in different environments. Docker enables you to separate your applications from your infrastructure so you can deliver software quickly.
A Docker container, unlike a virtual machine, does not require a separate operating system. Which gives Docker container advantages such as light-weight, consumes less space, more portability and needs short boot-up time.

When to use Docker?
1- If your business grows and new developers can join your team every few months. So instead of wasting valuable time setting up their local development environment. Such as the database or third-party libraries which may take a few hours to a couple of days. Which depends on the complexity of the project. Docker helps automate this setup so new developers can get right on board.

2- If the same software needs to run in a different environment: for example, a developer working on two PCs, development PCs and production servers, developers PCs, and testers PCs. Docker, you can run your application in separate containers, so your application can run in a consistent and predictable way in each environment.

3- If you need to test new technologies for your program, such as a new database, a different programming language, or new tools. So Docker Hub can be leveraged to pull the required package, tool or database to test with your application into an isolated container.

4- In case your software requires running multiple applications on the server? So, with Docker, you can keep the components of each application in separate containers even if they share the same resources.

When to avoid using Docker?
1- Working on the desktop application. Because Docker is more useful with web applications running on a server. Also, the rich GUI also requires additional solutions to work with Docker.

2- Working on a small application that does not require any additional tools or services.

3- If your development team consists of one developer. In this case, the benefits of using Docker will be less, and you can start using Docker when your software starts to grow.

4- If the majority of your team developers use a MacBook because Docker faces many performance issues when running on the Mac operating system.

Run React App on a Docker container to test a new environment:
1- Install Docker in your PC form the official website
https://docs.docker.com/desktop/install/windows-install/

2- Add Dockerfile to your project directory which will be used to build a Docker image (Dockerize the React App)



# Stage 1
# Use the desired Node.js runtime as the base image
FROM node:18-alpine AS build
ENV PNPM_HOME="/pnpm"
ENV PATH="$PNPM_HOME:$PATH"
RUN corepack enable
# Set the working directory in the container
WORKDIR /app

# Copy package.json and pnpm-lock.yaml to the working directory
COPY package.json ./
COPY pnpm-lock.yaml ./

# Install project dependencies
RUN pnpm install

# Copy the entire React app code to the container
COPY . .

# Stage 2
# Expose the port of your application to bind with the host port
EXPOSE 3000

# run your app
CMD ["pnpm", "run", "start"]

3- Add .dockerignore file:



/node_modules
/.history
/build
npm-debug.log
.git
.gitignore

4- Build a Docker image based on Dockerfile
docker image build -t :
-t option specifies the name and tag (latest by default) for the image. represents the path in which you want to run the command (. (dot at the end) represent the current directory)

After building the image, you can review the result in Docker Desktop software as the following:

5- Run Docker Container based on the generated image. By clicking on run or by using the following command
docker run --name -p 3005:3000 -d -v ${pwd}
For example: docker run --name ecommerce-website-react-reactquery-redux -p 3005:3000 -d -v ${pwd} ecommerce-website-react-reactquery-redux
Navigate to http://localhost:3005/ in your browser to view the app.

Another way to run a container based on a Docker image is by clicking the run button next to the image name in the Docker desktop software:

6-Install the following extensions in VS Code
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
https://marketplace.visualstudio.com/search?term=docker&target=VSCode

7- In the lower left cornet in VS Code you will find a button “Open a remote view”. After clicking this button, click on “Attach a running container”.

After selecting the desired container, a new VS Code window will appear, in which you can make all the changes that you want and it will reflect in the browser.

🎉🎉[Project on GitHub] E-commerce Web Application: React, Redux, React Query, MUI ... (https://github.com/alaa-m1/ecommerce-webapp-react-redux)

Front End Testing Overview: main testing types, where to use each test, and good practices for effective Automated UI Testing

Alaa Mohammad — Mon, 16 Oct 2023 18:40:42 +0000

When building any application, we find that there are many types of tests that can be applied, which leads to the necessity of knowing the basic purpose of each of them and what it offers us when used. Especially now that testing has become a crucial part of any application development life cycle.

In the following, I will provide the definition of the most widespread types of tests in the frontend development process, along with a comparison between them according to some important aspects, and finally a review of some points that are considered good practices to follow to write effective automated UI tests.

1- Unit testing
It tests small individual building blocks of the application (an individual function) to find errors in an early stage of the development phase. Which makes fixing them easier. In unit testing, you don’t test the entire flow of your application but only individual functions. So, you can ensure the correct functionality for those individual functions (units).

2- Component testing
This test uses real-life scenarios by testing not only components' functionality but also styles and appearance, which provides you with a good indication of how the software will perform once it is released.

Unit testing and component testing work best together. So, the developer can use unit testing during development. Then, after the component is completed, the tester can use component testing.

3- Integration testing
This test is used to ensure that several units will work well when they are combined and to identify bugs in the interaction between integrated units.

4- Smoke testing
It is a broad but shallow functional test performed after delivering a new build of an application. It tests the entire added feature from end to end.

5- Regression testing
This test is used to make sure that updates to your code or fixing bugs don’t cause any unintended effects or break any existing features (Regression bugs).

- Visual Regression Testing
It is just like the Regression testing, which means it generally validates that the changes you make to your code do not have an unexpected impact on your application. But it's more about the user interface than the effectiveness of our system. Therefore, it ensures that code changes do not break the appearance of the application's user interface.

- Sanity Testing
It is considered a subset of Regression Testing. Which ensures stability after bug fixing, adding new functionality or any other code change. It also verifies the software and ensures whether it’s ready for the next level of testing or not.

6- E2E (End-to-End) testing
This test simulates user interaction by testing the entire application workflow to ensure that you have the correct functionality of the main application features.

7- Cross browser testing
It is an integral part of E2E testing. Which ensures that the application provides a user experience that works across different browsers on a variety of devices, platforms, and environments.

- Accessibility testing
It is considered a subset of cross-browser testing and a part of Usability testing. It ensures that a company's website, applications, and digital content are accessible to individuals with all abilities and with disabilities (visual, auditory, cognitive, and motor). For example, they should be compatible with assistive technologies such as screen readers.

8-System Testing
It is performed on an integrated system to evaluate its compliance of that system with the corresponding requirements.

9- Acceptance testing
This test is performed in an environment similar to production to make sure that the software is functioning as expected.

Understanding the differences between all these tests is essential to knowing when to use each test. I will talk about the differences between these types in terms of the following factors:

At which stage of the development life cycle do we use each test?
Which team could use each of these tests?
System coverage when using each test.

1- Unit testing

We use it to define any potential bugs in individual functions at an early stage of the development process before the code is integrated and tested as a whole system.
It is typically performed by developers.
It covers the inner workings of a system, like manipulating data between the frontend and a database or mapping data to be used in an API call.

2- Component testing

It is performed before Integration testing and after Unit testing.
It is typically performed by developers or maybe by dedicated testers.
This test is performed on the whole code section after the development process has been completed.

3- Integration testing

It is performed before System test or E2E test and after the Unit test.
It is typically performed by (QA) team and also by developers.
This test involves integrating the different modules or units of an application and then verifying if the individual units are communicating with each other as expected.

4- Smoke testing

It performs after the developers deliver a new build of an application and before the new build is deployed to (QA) team. It performs on initial builds (in the initial phase of the application development life cycle – Unstable building -).
It is typically performed by (QA) team and sometimes also by developers.
Covers end to end basic functionalities.

5- Regression testing

When making any updates, after fixing bugs and adding some new features, or maybe after importing some new data. It is performed after the development team has completed their work (adding features, fixing bugs, etc.).
It is typically performed by (QA) team.
It tests specific features or bug fixes after the development team has completed their work.

- Sanity testing (a subset of Regression Testing):

It is performed only after the build has cleared the smoke test and been accepted by the QA team for further testing (it is performed on a stable building).
It is typically performed by (QA) team.
Covers certain modules, in which code changes have been made.

6- E2E testing

This test is used to verify the whole system’s functionality.
It is typically performed by (QA) team.
It tests all components and all integrations included in the application's workflow.

7- Cross browser testing

This test is performed during development. So, any new features will be tested to ensure they're cross-browser compatible before pushing them to production.
It is typically performed by (QA) team.
The full application or a new feature.

- Accessibility testing (a subset of Cross browser testing):

We evaluate accessibility early and throughout the development life cycle to verify accessibility problems early, when it is easier to address them.
It is typically performed by testers and users to define any potential gaps between users with different technical and web expertise.
It is performed on the company’s website, applications, and digital content.

8- System Testing

System Testing is performed after the Integration testing and before the Acceptance testing.
It is typically performed by a testing team.
It is performed on a complete integrated system.

9- Acceptance testing

It is the final stage of the software development process and is only performed when the development team is confident that any issues or bugs have been resolved. So, it performed after system testing and before making the system accessible to real end users.
It is typically performed by the customer or end-users.
The whole system or a feature in an environment similar to production.

Good practice to follow for writing effective Automated UI Testing:

1- Add data attribute as the used identifier:

Even though, we can use IDs or classes in our selector when writing automated UI tests, it is much better to use data-* attributes for your automated testing
The data attribute is according to mdn web docs:

allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

Using Data attribute is better for the following factors:

The main purpose of the class attributes is to style elements, and the main purpose of IDs is to have a unique reference on every page. These attributes can be changed very often. Also, IDs and classes can be dynamic, so this could cause a test to break when fetching new data. So, the best way is to separate the concerns of markup and testing, and this can be done by using a special attribute for testing purposes. Which leads us to the next factor.
When using data-* attributes for your tests, which have been added only on purpose to facilitate testing and not affect the element selection for styling in CSS or code logic in JavaScript, this will facilitate the maintenance and readability of the code because DEV teams will not change these attributes in any future code refactoring as these attributes are dedicated for testing purposes only.

2- Having a naming convention for your data-* attribute like the following:

data-testid = ComponentName-SubComponent[Optional]-elementName-elementPurpose[Optional]
ComponentName can be the same of PageName, for example in checkout page the main component could be CheckoutDashboard
data-testid = CheckoutDashboard-PaymentForm-btn-payment
data-testid = CustomTextField-label-error (a shared component)
data-testid = AuthDashboard-btn-signin
data-testid = FilterPanel-div (a shared component)

By using a meaningful and straight forward naming convention, developers and testers can quickly locate and interact with elements for testing or debugging purposes.

3- Keep tests small, readable, stateless and focused:

Write small subtests in every suite.
Use comments for any code that may be difficult for your teammate to understand.
Each test shouldn’t leave side effects after execution (changing anything outside their scope).
Avoid creating tests that test multiple functionalities at once. This can help you pinpoint and maintain the failed part easier and more efficiently.
Each test should be focused and test a single aspect of your application.

4- Finally, writing good tests is not just about simulating what a real user scenario looks like just to get passing tests (Green) - Covering Happy Path -, but your test should have as many subtests as it can. Which covers edge cases by using manual or automated testing that simulates the expected and unexpected scenarios of the end-user. For example, completing only half of the multistep process, character limits, field validation, exceptions in function calling, and form submission to detect issues or bugs that may have been considered outside the typical user scenario flow.

Progressive Web Apps definition, Pros, Cons, and how to convert an existing React App into a PWA

Alaa Mohammad — Mon, 02 Oct 2023 20:50:26 +0000

Hello everyone, After converting one of my projects to PWA, I would like to share with you a brief overview of the following points:

What is a progressive web application?
Pros and Cons of PWA compared with Native Mobile Apps.
Steps to convert your existing React App into PWA.
Which one to use for your business (PWAs vs Native Mobile Apps)

1. What is a progressive web application?
PWAs are simply web apps which can be accessed via web browser like any standard web application, but they have been enhanced to be like native mobile apps in terms of appearance and user experience such as opening in a full screen, having the ability to be installed into home screen just like native mobile apps (So the user can use PWAs without the need to open the web browser to visit it). Also, they can have some offline functionality. Moreover, PWAs can even access user device’s hardware such as tracking your location, or using a camera and push notifications.

According to mdn web docs, PWA definition is

A progressive web app (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.

2. Pros and Cons of PWA compared with Native Mobile Apps.
Pros:

All static assets (webpack build) are cached. So, the page loads fast after the first visits, regardless of network connectivity. Also, some features can still be available even in offline mode.
You can publish your Progressive Web App to the Google Play Store which limits the need to develop a native mobile app in many cases.
By using PWAs, your app will be always up-to-date with no need to ask the users to download or to update their apps. Also, with no need to have multiple release schedules.
Using PWA simplifies the development process compared to traditional native mobile development.
"write once, deploy everywhere" Build once and you will have access to all devices (even desktop).
Your PWAs will be indexed by Google. So, search engines can crawl your PWA and your app will be searchable. This feature will be attractive for all companies which already have their indexed websites and want to have their mobile apps without investing a lot in time and money. As a result, their apps can have an ability to be found by people searching on the web.

Cons:
Comparing with Native apps, PWAs have some limitations:

By default the updated service worker* will stay in the "waiting" state. Which means that users will see older content until they close their existing tabs (reloading is not enough).
Don’t have a good performance in terms of consuming device’s battery and processing power. Also, PWAs lack of features and have some integration problems with some mobile hardware.
Many users are using iPhones or iPads. The iOS doesn’t fully support PWAs as the status of PWA still has not matured in iOS mobile phones. Which creates the most limiting issue regarding PWAs these days. PWAs can’t be installable in all browsers when using android and can be installable only in Safari when using iOS and with limited features. Moreover, many users have reported that PWAs are showing a white screen on iOS (16.4) which will cause a real issue regarding PWA adoption at the moment.
Since PWA requires HTTPS to work (does not work with localhost) and the service worker is only enabled in the production environment, these will cause some difficulties in developing and trying any new features (There are some workarounds to handle these issues).
Installing the PWA directly without the need to go to any apps store will raise doubts about the authenticity of the application unlike applications installed via Google play or Apple store. Of course PWA is designed to be secure. For example, PWA can’t read a user's phone's contacts, but here I am talking about what users are accustomed to and which takes a long time to change.

3. Steps to convert your existing React App into PWA

I. Run your app under HTTPS.

II. Update your web app manifest.json file.
You need to add some meta-data to your app to be installable such as name, description and corresponding icons to different mobile OS.
You can use the following website to generate as the required assets to run PWA in mobile device:
https://realfavicongenerator.net/

After that update your public/manifest.json and public/index.html files with the new generated ones.

You can review all details in the manifest.json from the browser DevTools => application tab.

III. Use service-worker in your app.
*service-worker.js is the heart of PWA which lives separated from browser pages. It acts as a network proxy for the web app. So, every network request originating from that app page passes through this service-worker. This is how PWA can control resource caching for the offline mode.

To add service-worker to the existing app:

Create a new React app by using the following command embed npx create-react-app my-app --template cra-template-pwa
Copy service-worker.js and serviceWorkerRegistration.js files from the new project to your existing one and into src/index.js, then, you should add the following



import * as serviceWorkerRegistration from './serviceWorkerRegistration';
…
serviceWorkerRegistration.register();

In package.json copy add all "workbox… "dependencies from new project to existing one. Then re-install your packages using yarn or npm depending on which package manager you are using.
Add a simple notification to your app

First you need to request permission using:



Notification.requestPermission()

Then you can add your custom notification. For example, a daily notification as the following:

4. Which one to use for your business (PWAs vs Native Mobile Apps)

PWAs could be the best choice for companies who don’t require mobile-specific capabilities in their apps and already have an existing website with Google ranking. So, in this case by using PWAs, their business can reach a wider audience than native apps.
Native Mobile Apps are the best choice for businesses that require some features existing in modern mobile devices (or not supported by PWAs), or just require a higher security level.

Although PWA has some shortcomings, it is still a strong new competitor on the scene with a lot to offer and a promising future.
After all, PWA can be a suitable candidate for many businesses to have a mobile app that meets their business requirements in a short time and at a low cost, after taking into consideration PWA adoption delayed in iOS.

🎉🎉React PWA => https://phoenix-ecommerce-pwa.netlify.app/

🎉🎉Project on GitHub