Forem: Husnain Mustafa

CAP theorem

Husnain Mustafa — Sun, 06 Apr 2025 01:46:27 +0000

The CAP theorem, where C stands for Consistency, A for Availability, and P for Partition Tolerance, states that in a distributed system, it is impossible to guarantee all three properties simultaneously. A system can achieve at most two out of the three at any given time. Let's go through each of these terms to better understand the theorem.

CAP

Consistency

Consistency ensures that every request to the system receives the most up-to-date and valid data, meaning that once a data update occurs, all subsequent requests will see the updated data. It guarantees that the data provided is not stale.

Availability

Availability refers to a system being operational and responsive at all times, even if some of its nodes are not working. Nodes could refer to different components of the system or to full replicas of the system, which are often managed behind a load balancer to distribute traffic.

Partition Tolerance

Partition Tolerance means the system can continue to operate and handle requests even if network partitions occur, meaning some nodes or parts of the system are unable to communicate with each other. It guarantees that the system will remain functional despite disruptions in network connectivity between nodes.

Distributed System

A Distributed System is a network of independent computers or nodes that work together to achieve a common goal, often appearing as a single system to users. These nodes collaborate to handle tasks like data storage, processing, and request handling, but they operate in different locations and may communicate over a network.

Why CAP theorem exist?

The CAP theorem applies specifically to distributed systems. Imagine a system with nodes distributed across multiple geographical locations. In such a system, network partitions can occur, leading to Partition Tolerance. As a result, the system must choose between Consistency or Availability.

The reason for this limitation is that if the system prioritizes Consistency (i.e., ensuring data is up-to-date), it requires communication between nodes to synchronize data. This process takes time, during which the system may be unavailable, thereby affecting Availability.

On the other hand, if the system prioritizes Availability, it might allow data to become inconsistent by ignoring the latest updates. This keeps the system available without waiting for data synchronization, but it sacrifices Consistency, as different nodes may have outdated or conflicting data.

To achieve both Availability and Consistency, the system would need to avoid network partitions, meaning nodes must be able to communicate without delay. However, this would sacrifice Partition Tolerance, as the system could fail to operate properly in the event of network issues.

Deploy ComfyUI with RunPod Serverless

Husnain Mustafa — Tue, 22 Oct 2024 07:02:23 +0000

What is ComfyUI? ComfyUI, according to author, "lets you design and execute advanced stable diffusion pipelines using a graph/nodes/flowchart based interface". Basically, we can play with stable diffusion pipelines by just moving around some nodes.

So what is stable diffusion? Its a GenAI (Generative Artificial Intelligence) which can generate images from text prompts, images or both.

Before moving on, let's understand what is Runpod. Execution of an AI model need to take place in GPU (Graphic Processing Unit) as it allows millions of tiny processing unit, working at the same time. And GPUs are costly. So rather than buying GPU and running the models locally, we can rent out the GPU service from services like RunPod. RunPod provides us the cloud service for developing and executing AI models.

RunPod allows us 2 types of services, Pods and Serverless. Pods are the services that keep on, no matter whether the required service / API is being used or not. Where as in serverless provide workers, which only works when needed, and hence charged less (only for the time worker is).

Now let's dive into deploying ComfyUI with RunPod.

Runpod Worker Comfy

We are going to use runpod-worker-comfy for the deployment.
Although the git repo has detailed explanation for Comfy deployment, I had to face some issues which may stuck you if you doing this for the first time.

We do not need to clone this repo, rather we are going to use the docker images provided by runpod worker comfy.

Runpod worker comfy provides us 5 images as follow:

timpietruskyblibla/runpod-worker-comfy:3.1.0-base: doesn't contain anything, just a clean ComfyUI
timpietruskyblibla/runpod-worker-comfy:3.1.0-flux1-schnell: contains the checkpoint, text encoders and VAE for FLUX.1 schnell
timpietruskyblibla/runpod-worker-comfy:3.1.0-flux1-dev: contains the checkpoint, text encoders and VAE for FLUX.1 dev
timpietruskyblibla/runpod-worker-comfy:3.1.0-sdxl: contains the checkpoint and VAE for Stable Diffusion XL
timpietruskyblibla/runpod-worker-comfy:3.1.0-sd3: contains the checkpoint for Stable Diffusion 3 medium

Dockerfile

Based on your requirement, select one of the image.
We can use the selected image as raw, or we can add some customised layers, like adding packages or custom nodes (custom nodes can be added in the network volume, discussed later). In my case, I had to use a package rembg[gpu], need to remove the background from a given image. So here is my updated Dockerfile:

FROM timpietruskyblibla/runpod-worker-comfy:3.1.0-sd3
RUN pip install rembg[gpu]
CMD /start.sh

For adding custom nodes, you can do:

...
RUN git clone <custom_node_repo.git> /comfyui/custom_nodes
...

Now build an image by docker build <dockerhub-username>/<your-image-name>. Once done, push the image to docker hub by docker image push <dockerhub-username>/<your-image-name>. You can use Docker GUI to push your image to docker hub.

You may skip the above steps if you do not need any customisation.

Runpod

Now we need to configure our runpod.

Storage

Let's make a Network Volume, which will have our output images, custom nodes (if we haven't added those using Dockerfile) and custom models.

Go to Storage in sidebar. Click on New Network Volume, select the data center, volume name and the storage volume it holds.

You can select any data center, usually the one which supports the cheapest (and medium - highly available) GPU, as GPU would only be required to deploy the instance. Won't affect the image processing.

For storage volume, it depends upon your requirements. How much space is required by custom models and custom nodes. If you are not using any custom models/nodes, I think 10GB is fine.

Once the network volume is created, we need to deploy it temporarily to make it accessible so we can add the custom things.

Select any of the GPU, select GPU count as 1, and select instance pricing as Spot

Once network volume is deployed, go to Pods in side bar and you will a see a newly listed Pod. Click on it and connect the terminal through web.

Now you will see the terminal interface in web. We need to place everything in workspace directory because its the directory of volume and contains persistent data. Anything not in this directory will be removed as soon as we delete the deployed instance of Network Volume.
So go to /workspace by cd workspace and make respective directories i.e for custom nodes, make custom_nodes by command mkdir custom_nodes. Move into custom_nodes by cd custom_nodes and clone your desired nodes from git by git clone <repo url>.
Once you are done with adding custom nodes, exit the terminal by exit and close your web terminal tab.

Serverless Deployment of Comfy

Now head over to Serverless in sidebar and click on New Endpoint. The below screen will shown

We have to provide our configurations.

Select GPU
Enter you Endpoint Name, this could be anything
For Worker Configuration section, you should go through these docs
For container configuration, leave Template and Container Registry Credentials as empty. Enter the container image as the image you chose from the runpod-worker-comfy timpietruskyblibla/runpod-worker-comfy:3.1.0-<your model> like timpietruskyblibla/runpod-worker-comfy:3.1.0-sd3 For Container Start Command, write: sh -c "ln -sf /runpod-volume/custom_nodes/* /comfyui/custom_nodes && /start.sh". This command makes a symlink between comfyui directory and network volume workspace. You may also link other directories too. Note: You can skip the above container start command if you haven't installed any custom nodes, models or any other custom stuff. If so, leave this field empty.
For Container Disk, it should be more than 20GB.
Leave HTTP and TCP ports empty
For Environment Variables, enter these:

BUCKET_ENDPOINT_URL --- for endpoint of s3 i.e https://bucket.s3.region.amazonaws.com

BUCKET_ACCESS_KEY_ID --- for access key of s3
BUCKET_SECRET_ACCESS_KEY --- for secret key of s3

Keep the advance sections as itself.
Finally deploy your serverless instance.

Creating API Key

Now to access your deployed instance, you would require an API key. Which you can get by:

Go to Settings in sidebar
Create new API Key, enter any desired name, select its access i.e only read or read & write.
Copy the generated API Key and store it somewhere safe.

Using comfy

Let's test if our comfy works as expected. But before moving on, we need the API endpoint where we are going to request.
Go to Serverless in sidebar and click on the instance you just deployed. It will be like this:

You can access the logs in case of debugging. For now, we need API endpoint which you will see at the bottom of image. We got 5 different routes. You may read the guide here.

You can either go with run or runsync to get result by accessing status or getting result immediately, respectively. In most cases, comfy takes some time so its better to go with run and check the status after some interval.

API Request

You may read the docs of API Request Format here
Once workflow is created you can request the above mentioned API Endpoint with API Key in header by Bearer <API Key>

API Response for /run

It will return id of the job, at the root of response body. You will use this id to check the status of of job by /status/

API Response for /status

It will return the status of the job, at the root of response body, along with output if status is COMPLETED

All Done, now you can make another layer of API which will may only take desired inputs and return the output of comfy by checking the status at some intervals.

That's all. Happy learning❤️

What are CORS? and how to configure it in Node?

Husnain Mustafa — Mon, 13 May 2024 21:35:21 +0000

CORS, Cross-origin resource sharing, is a policy implemented by the browsers.

Origin

First, let's understand what is origin. Origin is made up of the base url and the port. So https://abc.com, https://abc.com:4040 and https://cba.com are different origins. Note that when we do not provide a port number with <url>:<port>, the default port for https is 443 and for http, its 80. Hence, in the above example of https://abc.com, we have a port of 443 by default.

Cross origin

Cross origin simply means that one origin is trying to connect to another origin.

Cross origin resource sharing

For developing web applications, there are several architecture.

One of the ways to develop web application is to have the Frontend and Backend at the same origin, for example a NextJs Application, which is responsible for both, Frontend and Backend. In this case, whenever Frontend makes a network request to Backend, it requests on the same origin. And hence no CORS policy is implemented by browsers.

Other way to develop web application is to have Frontend and Backend at different origins. Let's say we got Frontend, React Application, at port 5173, vite default port. And Backend, Node application, at port 3000. In this case, we got different origins. And hence whenever a network request is made from React app to Node app, browser will implement CORS policy and possibly throwing an error:

Network Flow

Let's understand what happens, when a cross-origin network call is made.

Client side (Frontend) sends a preflight request to Server (Backend).
Server responds with whether the Client side's origin is allowed to request the Server or not. If server allows such origin, the response headers have the attribute Access-Control-Allow-Origin with value of origin / origin pattern.
Browser check the response headers and verify if its origin matches the origin pattern against the attribute of Access-Control-Allow-Origin. a. If it does matches, browser re-request the server with the actual payload and executes the required network call. b. If it does not matches, browser throws an error.

Configuring backend to support CORS

Now we know that to configure CORS, we only need to modify our response headers to have the attribute of Access-Control-Allow-Origin which matches the origin pattern of the client.

One way of configuring CORS, is by simply using the package, cors and use the middleware provided by cors

const express = require("express");
const cors = require("cors");

const app = express();

app.use(cors({ origin: "http://localhost:5173" }));

app.get("/", (req, res) => {
  res.send("Hello World");
});

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

Now we got everything working, but there is another way of configuring response header, that is without using any package.

We simply need to define our custom middleware that modifies the response object. Here is how we can achieve it:

const express = require("express");

const app = express();

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "http://localhost:5173");
  next();
});

app.get("/", (req, res) => {
  res.send("Hello World");
});

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

Note: After the changes, you might not see the expected results, try using incognito or clear site cache.

That's all folks.
Happy coding ❤️

Debug Typescript using Node Runtime Environment in VS Code

Husnain Mustafa — Thu, 18 Apr 2024 00:46:11 +0000

Today, we will learn how we can debug typescript using node runtime environment in VSCode.

Typescript Compilation

So to begin debugging, we need to understand how typescript is files are run by Node. Well actually, Node is not able to run typescript files directly. So we need to transpile typescript files into javascript files and then Node runs those transpiled javascript files. To transpile typescript files, we can use tsc, typescript compiler.

To transpile/compile typescript file into javascript files, we need to define some configuration in the root folder of project in tsconfig.json file. Here is the very basic tsconfig.json:

{
  "compilerOptions": {
    "rootDir": "src",
    "outDir": "dist"
    "sourceMap": true,
  }
}

In above json, we have:
rootDir, that tells tsc where are our application files.
ourDir, that tells tsc where tsc need to make transpiled javascript files.
sourceMap, that tells tsc to linkup transpiled javascript files with typescript files. This link is necessary for debugging, so that node debugger show you the typescript file but actually debugging the linked transpiled javascript file.

Now you can run the command npx tsc and see the output directory dist in your project.

So now we know how typescript files are actually run by Node. Let's move to next step.

VS Code Configuration

Now we need to configure VS Code so whenever we want to debug, it runs a set of commands before debugging.
We need to create launch.json, a configuration file for VS Code, in the root of the project and have these configurations:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug TS Files",
      "program": "${workspaceFolder}/src/app.ts",
      "skipFiles": ["<node_internals>/**"],
      "preLaunchTask": "npm: build",
      "sourceMaps": true,
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

version simply defines the version of this file.
configuration is an array of objects where each object represent configuration of respective command.
type, type of configuration.
request can either be launch or attach. Launch is for launching the app from the start and then attaching debugger. Attach is for attaching debugger on already running app. You can read more here.
program is the base file of your project, in this project's case, its /src/app.ts.
skipFiles is to skip file while debugging.
preLaunchTask is to do something, like building or transpiling TS files, before launching the debugger.
sourceMaps is to tell VS Code that we are not using project TS files, rather we are using transpiled JS files.
outFiles provides the location of transpiled JS files, which is /dist/**/*.js in our case, as we provided in the tsconfig.json

Now when you save this file, and go to Run and Debug tab of VS Code, looks like:

We can see our newly added command at the top:

We are almost done.

Add build command in package json

If you notice, in launch.json, we have a configuration:
preLaunchTask: 'npm: build'
this runs the command npm run build before attaching a debugger. But we haven't specified this command in package.json yet.
So open your package.json and add the following:

"scripts": {
    ...other commands
    "build": "tsc"
},

Here build is simply running tsc, which will transpile our TS files in JS files and store those in /dist (as provided in tsconfig.json) and our debugger use those sourceMapped files to debug TS files.

Run Debugger

Now add breakpoints wherever you want and run debugger by simply clicking play button beside our VS Code command in Run & Debug tab:

Congrats! we have our debugger running successfully:

PS: We can skip all these configuration and use Bun runtime environment to debug as it provides TS debugging out of the box

Hope you learned something today.
Happy Coding ❤️

Why we cant use await inside forEach? and its workaround.

Husnain Mustafa — Sat, 13 Jan 2024 20:39:36 +0000

Have you ever tried using the await inside forEach?

[].forEach(async(item) => {
    await doSomethingWith(item)
})

Well I have, when I didn't know much about async/await and forEach. But didn't have the expected result. To understand this, we must first understand how async/await works.

How async/await works:

async/await is the another way of doing .then on the Promises. So whenever an async function reaches the statement where await is used and Promise is yet to be resovled, that function is then runs separately from the parent function, unless we use await on the child function. Let me give you an example:

const functionA = async () => {
  console.log("Starting Function A");
  await new Promise((resolve) => {
    setTimeout(resolve, 300);
  });
  console.log("Ending Function A");
};

const myFunction = () => {
  console.log("1");
  functionA();
  console.log("2");
};
myFunction();

The above code logs:

1
Starting Function A
2
Ending Function A

You see, first 1 is logged, and then we go inside functionA, logs Starting Function A and as soon as we hit await keyword, functionA runs separately and myFunction moves on and logs 2 and finally when our promise resolves in 300 ms, we get the log of Ending Function A.

Lets give it another try with using await on functionA:

const functionA = async () => {
  console.log("Starting Function A");
  await new Promise((resolve) => {
    setTimeout(resolve, 300);
  });
  console.log("Ending Function A");
};

const myFunction = async () => {
  console.log("1");
  await functionA();
  console.log("2");
};
myFunction();

Now we get the logs:

1
Starting Function A
Ending Function A
2

In this case, we must complete the execution of functionA to move on. But you notice that out myFunction also becomes async. So it will also runs separately from parent function or global scope.

Let's log another thing just after calling myFunction:

const functionA = async () => {
  console.log("Starting Function A");
  await new Promise((resolve) => {
    setTimeout(resolve, 300);
  });
  console.log("Ending Function A");
};

const myFunction = async () => {
  console.log("1");
  await functionA();
  console.log("2");
};
myFunction();
console.log("3");

Can you guess what will be logged?
Here is our logs:

1
Starting Function A
3
Ending Function A
2

You see, our code runs synchronously until we hit the await statement where Promise is yet to be resolved. So when we called myFunction, our code ran synchronously and logged 1 and then it went inside the functionA, here it logged Starting Function A, and then we hit the await statement where we have to wait for the Promise to resolve, so both of our functions, functionA and myFunction runs separately. And our code pointer comes to log 3. And as soon as promise resolves, it logs Ending Function A and then 2

Now it might occur to you why we cannot use async/await inside forEach.
Let's see the forEach function first:

const forEach = (callback)=>{
    ...
    ...
    callback()
    ...
    ...
}

Now when we do:

myArray.forEach(async(item) => {
    await doSomethingWith(item)
})

As soon as our code hit await statement, our doSomethingWith function runs asynchoronously and our code pointer comes back execute the next line in forEach and hence, it completes the whole forEach and our await statements are still yet to be resolved.

Let's see an example here:

const promiseFunction = async (item) => {
  await new Promise((resolve) => {
    setTimeout(resolve, 600);
  });
};

const myArray = [1, 2, 3, 4, 5, 6, 7, 8];

const myFunction = () => {
  console.log("Starting my Function");
  myArray.forEach(async (item) => {
    console.log("Starting forEach with item value", item);
    await promiseFunction(item);
    console.log("Ending forEach with item value", item);
  });
  console.log("Ending my Function");
};

myFunction();

And here is our logs:

Starting my Function
Starting forEach with item value 1
Starting forEach with item value 2
Starting forEach with item value 3
Starting forEach with item value 4
Starting forEach with item value 5
Starting forEach with item value 6
Starting forEach with item value 7
Starting forEach with item value 8
Ending my Function
Ending forEach with item value 1
Ending forEach with item value 2
Ending forEach with item value 3
Ending forEach with item value 4
Ending forEach with item value 5
Ending forEach with item value 6
Ending forEach with item value 7
Ending forEach with item value 8

You see it starts the next callback without ending the previous, that is because each callback is waiting for its await to be resolved. Hence we get to the end of the myFunction but could not complete callback functions.

The workaround:

We can use await Promise.all with map function to have await for each of the callbacks. Here is how:

const promiseFunction = async (item) => {
  console.log("Starting promiseFunction with item value", item);
  await new Promise((resolve) => {
    setTimeout(resolve, 600);
  });
  console.log("Ending promiseFunction with item value", item);
};

const myArray = [1, 2, 3, 4, 5, 6, 7, 8];

const myFunction = async () => {
  console.log("Starting my Function");
  await Promise.all(
    myArray.map((item) => {
      return promiseFunction(item);
    })
  );
  console.log("Ending my Function");
};

myFunction();

We are simply making the array of Promises by:

myArray.map((item) => {
  return promiseFunction(item);
})

promiseFunction returns a function so by map funtion, we have array of Promises. And we finally resolve all the promises by: await Promise.all.

And here is our logs:

Starting my Function
Starting promiseFunction with item value 1
Starting promiseFunction with item value 2
Starting promiseFunction with item value 3
Starting promiseFunction with item value 4
Starting promiseFunction with item value 5
Starting promiseFunction with item value 6
Starting promiseFunction with item value 7
Starting promiseFunction with item value 8
Ending promiseFunction with item value 1
Ending promiseFunction with item value 2
Ending promiseFunction with item value 3
Ending promiseFunction with item value 4
Ending promiseFunction with item value 5
Ending promiseFunction with item value 6
Ending promiseFunction with item value 7
Ending promiseFunction with item value 8
Ending my Function

Now we can see, although each promiseFunction runs asynchronously, but we ensure the our myFunction ends only when our all the Promises get resolved.

Hope you learned something today.
Happy Learning ❤️

Generics in React

Husnain Mustafa — Sun, 10 Dec 2023 18:36:53 +0000

What are generics

Have you defined a function/method in any language? If so, you probably know that we are able to define its parameters/arguments that are passed where function is called.

By this we call pass the whatever the value we want to pass to a function and we can decide it at spot.

But have you ever wondered what if we want to decide the type of some identifier at spot rather than defining it where we created our function. This is where Generics come. Generics are simply the passing of dynamic type to the function (or type/interface) which can be used inside a function.

It might seem a lot. Let's have it through the example:

Usually what we do is

const exmapleFunction = (data: string)=>{
    console.log(data)
}

exmapleFunction("Exmaple Function Called")

In the above function, we can only pass the data as type of string. But we want data type to be dynamic. Here is what we do to make it dynamic:

const exmapleFunction = <T>(data: T) => {
  console.log(data);
};

exmapleFunction<Record<string, string>>({ id: '1', value: 'This is data' });

Now we can pass the dynamic type where we am calling the function, similar to the argument passing.

Generics in React

Now let's make a component that uses Generics:

import { useState } from 'react';

type Props<T> = {
  data: T;
};

const MyComponent = <T,>(props: Props<T>) => {
  const [dataState, setDataState] = useState<T>(props.data);

  return <div></div>;
};

const App = () => {
  <MyComponent<string> data={'Example'}></MyComponent>;
};

Now we have passed the dynamic type, generic where we am using the MyComponent.

Moving Further

Now we have learned that how we can make and pass the generics to our component.
But what if we want to use generics, but still restrict some type. We want to allow the generics that must satisfy some constraints. We can do it by using the extends keyword.
Here is how:

import { useState } from 'react';

type ExtendedDataType = {
    id: number
    value: string
}

type Props<T extends ExtendedDataType> = {
  data: T;
};

const MyComponent = <T extends ExtendedDataType,>(props: Props<T>) => {
  const [dataState, setDataState] = useState<T>(props.data);

  return <div></div>;
};

const App = () => {
  <MyComponent<string> data={'Example'}></MyComponent>;
};

Now we defined a generic that must extends our ExtendedDataType, i.e the type we pass must have id as string and value as number in it. Hence the part of the code below shows the error, as string does not satisfy the constraint.

Let's pas the correct now:

import { useState } from 'react';

type ExtendedDataType = {
  id: number;
  value: string;
};

type Props<T extends ExtendedDataType> = {
  data: T;
};

const MyComponent = <T extends ExtendedDataType>(props: Props<T>) => {
  const [dataState, setDataState] = useState<T>(props.data);

  return <div></div>;
};

type AppDataType = {
  id: number;
  value: string;
  key: string;
};

const App = () => {
  <MyComponent<AppDataType> data={'Example'}></MyComponent>;
};

Tada! Now we have correct type that is passed as generic. But notice we didn't change the value of data. That is why we are having this error:

Now we have to pass the data as type of AppDataType.
Here it is:

import { useState } from 'react';

type ExtendedDataType = {
  id: number;
  value: string;
};

type Props<T extends ExtendedDataType> = {
  data: T;
};

const MyComponent = <T extends ExtendedDataType>(props: Props<T>) => {
  const [dataState, setDataState] = useState<T>(props.data);

  return <div></div>;
};

type AppDataType = {
  id: number;
  value: string;
  key: string;
};

const appData = {
    id: 3,
    value: "appData",
    key: 'app-data-3'
}

const App = () => {
  <MyComponent<AppDataType> data={appData}></MyComponent>;
};

Now we have everything as we needed.
But what if we want to have some default value for generics, so if generics is not passed, that default value is considered. We can simply do that by:

const MyComponent = <T extends ExtendedDataType = ExtendedDataType>(props: Props<T>) => {
  const [dataState, setDataState] = useState<T>(props.data);

  return <div></div>;
};

Now even if we do not pass generics, we will have the T as ExtendedDataType:

const App = () => {
  <MyComponent data={{id: 3, value: 'value-3'}}></MyComponent>;
};

Note that we have not passed the generics, so T would be ExtendedDataType and so data would be of type ExtendedDataType, and hence we cannot pass data as appData because appData has one extra feature key, which ExtendedDataType lacks.

That's it for today.
Hope it help you learned something.
Happy learning.

Apollo GraphQL Implementation in NestJs

Husnain Mustafa — Sat, 21 Oct 2023 18:19:18 +0000

Today, we will be learning how we can implement the very basics of Apollo GraphQL in NestJs.

What is GraphQL and why is GraphQL?

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data (definition from https://graphql.org/). Before graphQL most web application (still) replies on REST Api as a channel between backend and frontend.
The drawbacks of REST Api are:

Over-fetching or Under-fetching: REST Api always sends back the same data structure for a given url. It could result in over-fetching, i.e getting more data than required by frontend, or under-fetching, i.e getting less data than required by frontend.
Multiple endpoints: Usually REST Api has multiple points, one for each type of data structure.

GraphQL solves both of these problems by:

Allowing the client, frontend, to fetch the only data that is required. Frontend sends the structure of the data along with the request. And GraphQL only sends back the requested data.
GraphQL provide single endpoint, usually over /graphql route. Every query or mutation request is sent to this endpoint.

Now we have some idea what GraphQL is. Let's start implementing a GraphQL in NestJS.

Setting up the project

First, we need to have nestjs/cli installed. Here is the command that will install the nestjs/cli: npm i -g @nestjs/cli
Once, we have installed nestjs cli, we can create a nest project by nest new <project-name>.
Then it will ask you the package manager that you want to use for this project, as shown below:

You can select any of them. For this project, I will go with npm. Now it will install some packages and make the directory structure for you. Once done, you would have the following directory structure:

Our main focus of work would be /src directory. Before moving on, lets understand some basics of the files that you find inside /src directory:

main.ts is the root file and it is where the execution of project begins.

app.controller.spec.ts is the test file. *.spec.ts are used as tests. This would not be covered in this article. So we can delete it.

app.controller.ts is the Controller file. Controllers are one which receives the incoming request, sends the request to Service, and returns the response backed to client. Controllers are the file where we define the api route and method for a specific data. You can read more about Controllers here.
But we are not going to use Controllers in our GraphQL server as Graphql uses Resolver (described later) rather than Controller.

app.service.ts is the Service. Services are responsible to handle all business logic for a particular data. It is usually responsible to fetch/alter the data from the database.

app.module.ts defines the module. In nestJs, Everything comes under some module. Whole code is sliced down in different modules. It is responsible to configure the structure of the application.

Installing GraphQL We can have either have Express or Fastify as our web framework. For this tutorial, we would go with Express. Below is the command to install apollo graphQL: npm i @nestjs/graphql @nestjs/apollo @apollo/server graphql

Configuring Apollo GraphQL:

Open /src/app.module.ts and add GraphQL Module in imports like:

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { GraphQLModule } from '@nestjs/graphql';
import { ApolloDriver, ApolloDriverConfig } from '@nestjs/apollo';

@Module({
  imports: [GraphQLModule.forRoot<ApolloDriverConfig>({
    driver: ApolloDriver,
    autoSchemaFile: true,
  })],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

The configuration of GrapqhQL, which is provided as an object in forRoot:

{
    driver: ApolloDriver,
    autoSchemaFile: true,
}

You can read more about the configuration here

You might not be in the right directory. If not, move to your project directory by:
cd <project-name>

Now you can verify that graphQL server has been configured successfully by running the nest server by the following command:
nest start

and open a browser and go to this url:
localhost:3000/graphql

You would see the grapqQL playground:

Playground is a place where you can test your APIs. We will use playground later in this tutorial when we will be done making some Queries and Mutations in Nest GraphQL Server.

Implementing GraphQL

Now its time we start making GraphQL APIs. For that, we need to have some use case. So for this tutorial, we are going to have 2 entities, Brands and their related Products.

Brands

Module

First we are going to implement Brands module. So to generate a module, you can type the following command in terminal:
nest g module brands

This command will create a Brands directory inside /src with 'brands.module.ts' file.

Model

Now we want Brands model. Which will be a schema for Brands. There are 2 ways to have a schema, Schema First (through Schema Definition Language, SDL) and Code First. Lets pause the tutorial and understand these two first.

Difference between Schema First and Code First

These both approaches are used to make a schema. In Schema First, we define the schema, using SDL.
Schema first approach looks like this:

type Brands {
  id: Int!
  name: String!
  logo: String
  type: String
}

The same thing can be done through Code First by:

import { Field, Int, ObjectType } from '@nestjs/graphql';
@ObjectType()
export class Brands {
  @Field(() => Int)
  id: number;

  @Field()
  name: string;

  @Field({nullable: true})
  logo?: string;

  @Field({nullable: true})
  type?: string;
}

Here we are taking help from nestjs/graphql package which provides the required decorators and types.

Lets go through each thing one by one.

@ObjectType() decorator

@ObjectType() is used to define structure of the data. Here we are defining the structure of Brands which will have the above attribute.

@field() decorator

@field() is used to define a single attribute of the data. It has multiple over-loaders, one of which is takes a function as first parameter, like in the first field defined above:
@Field(() => Int)
Here we are defining type of the id attribute would be Integer.

But why? We haven't define the type of other fields in the @field decorator, then why this? Well in TS, type number could be both integer and float. But in GraphQL, an attribute could either be Int or Float. So we have to explicitly tell Nest, that this field is of type Int.

We do not have to tell Nest explicitly about the string type. That is because string in TS corresponds to String in GraphQL.

We can also provide an object in the @field decorator as:
@Field({nullable: true, defaultValue: "default"})
Here you can define multiple things like whether the attribute can be null and what would be default value for that attribute. You can read more about @field decorator here.

Back to Model

Now we need to make a model file in our /src/brands directory named:
brands.model.ts:

import { Field, Int, ObjectType } from '@nestjs/graphql';

@ObjectType()
export class Brands {
  @Field((type) => Int)
  id: number;

  @Field({ nullable: true })
  name?: string;
}

For now, we are going with two fields only. Later we will add another field, products, which link each brand to their products.

Service

Now we also want Brands service so we can handle all the business logic. To generate a service, here is the command:
nest g service brands.

You would see 'brands.service.ts' in /src. We will alter that file to:
brands.service.ts:

import { Injectable } from '@nestjs/common';
import { Brands } from './brands.model';

@Injectable()
export class BrandsService {
  private readonly brands: Brands[] = [
    { id: 1, name: 'Adidas' },
    { id: 2, name: 'Nike' },
  ];
  findById(id: number): Brands {
    return this.brands.find((brand) => brand.id == id);
  }
  findAll(): Brands[] {
    return this.brands;
  }
  addBrand(id: number, name: string): Brands {
    this.brands.push({ id, name });
    return { id, name };
  }
}

@Injectable() decorator

@Injectable() is used to let Nest know that the class we are defining is injectable to other providers and controllers. By this, we can access the class instance through other classes.

In Brands class, we have defined a variable brands. Usually this is to be done through database. Database is responsible for storing such data. But as we are not going to use any database in this tutorial, we are storing the data within the app.

Furthermore, we have defined some function so fetch from and add to brands array.

Resolver

Rather than using Controller, which defines the API, we use Resolver in GraphQL. So make a file in /src/brands:
brands.resolver.ts:

import {
  Args,
  Int,
  Mutation,
  Query,
  Resolver,
} from '@nestjs/graphql';
import { Brands } from './brands.model';
import { BrandsService } from './brands.service';

@Resolver(() => Brands)
export class BrandsResolver {
  constructor(
    private brandsService: BrandsService,
  ) {}

  @Query(() => [Brands])
  getAllBrands(): Brands[] {
    return this.brandsService.findAll();
  }

  @Query(() => Brands)
  getBrandById(@Args('id', { type: () => Int }) id: number): Brands {
    return this.brandsService.findById(id);
  }

  @Mutation(() => Brands)
  addBrand(
    @Args('id', { type: () => Int }) id: number,
    @Args('name') name: string,
  ): Brands {
    return this.brandsService.addBrand(id, name);
  }
}

@Resolver() decorator

@Resolver decorator is used to define a resolver, a class which defines GraphQL Queries and Mutations, which client can use for requests. In @Resolver, we need to pass a function as the first parameter which returns the Object that this Resolver would resolve, in our case, it's Brands.
@Resolver(() => Brands)

In the class BrandsResolver, we defined a constructor. Although we are not doing anything inside the block of constructor, but we are defining the BrandsService as brandsService by:

constructor(
    private brandsService: BrandsService,
  ) {}

Here we are injecting our BrandsService that we made before with @Injectable()

Next we are defining a GraphQL Query by:

@Query(() => [Brands])
  getAllBrands(): Brands[] {
    return this.brandsService.findAll();
  }

@Query() decorator

@Query is like the GET Api of REST, it takes first parameter as function which returns the type of the return type of request. In the above Query, we are returning Brands array back to the client when client calls this API.
Below it, we define a function, in which we fetch the Brands by using the BrandsService. Name of the function will be used as name of the Query.

After the queries, we are defining a mutation:

@Mutation(() => Brands)
  addBrand(
    @Args('id', { type: () => Int }) id: number,
    @Args('name') name: string,
  ): Brands {
    return this.brandsService.addBrand(id, name);
  }

@Mutation() decorator

@Mutation is like the POST API of REST. It takes the first parameter as function, same as Query.
Below it, we define a function which can have any number of arguments. These variables are similar to body data in REST API. But we need to define these arguments through @Args decorator.

@Args() decorator

@Args is similar to @field decorator that we learned earlier, except it takes first argument as name of argument and second as object which can define type and other things.

Lastly, inside the function, we call the service class function to add brand by passing the arguments we got through @Args.

We are almost done with Brands. Just a single step remaining, we need to all the Services and Resolver in the Brands module by:

import { Module } from '@nestjs/common';
import { BrandsService } from './brands.service';
import { BrandsResolver } from './brands.resolver';

@Module({
  providers: [BrandsService, BrandsResolver],
})
export class BrandsModule {}

Brands API Testing

Now we have our Brands done. Let's test Brands API in playground. Open browser and go to http://localhost:3000/graphql
We can now see the Docs and Schema on the right side of playground.

And we can test any API, like:

Products

Now lets quickly create Products Module to handle Products entity.

Module

Generate module by
nest g module products

Model

Create a file inside /src/products:
products.model.ts:

import { Field, Int, ObjectType } from '@nestjs/graphql';

@ObjectType()
export class Products {
  @Field((type) => Int)
  id: number;

  @Field({ nullable: true })
  name?: string;

  @Field((type) => Int)
  brandId: number;
}

We needed to add brandId as well to link the Brands with their Products, we are using one-many relationship here.

Service

Generate service by nest g service products.
products.service.ts:

import { Injectable } from '@nestjs/common';
import { Products } from './products.model';

@Injectable()
export class ProductsService {
  private readonly products: Products[] = [
    {
      id: 1,
      name: 'Product A',
      brandId: 1,
    },
    {
      id: 2,
      name: 'Product B',
      brandId: 1,
    },
    {
      id: 3,
      name: 'Product C',
      brandId: 2,
    },
  ];

  findById(id: number): Products {
    return this.products.find((product) => product.id == id);
  }

  findByBrandId(brandId: number): Products[] {
    return this.products.filter((product) => product.brandId == brandId);
  }

  addProduct(id: number, name: string, brandId: number): boolean {
    this.products.push({ id, name, brandId });
    return true;
  }
}

Resolver

Make a file in /src/products:
products.resolver.ts:

import { Args, Int, Mutation, Query, Resolver } from '@nestjs/graphql';
import { Products } from './products.model';
import { ProductsService } from './products.service';

@Resolver(() => Products)
export class ProductsResolver {
  constructor(private productsService: ProductsService) {}
  @Query((returns) => [Products])
  getProductsByBrandId(
    @Args('brandId', { type: () => Int }) brandId: number,
  ): Products[] {
    return this.productsService.findByBrandId(brandId);
  }
  @Query((returns) => Products)
  getProductById(@Args('id', { type: () => Int }) id: number): Products {
    return this.productsService.findById(id);
  }
  @Mutation((returns) => Boolean)
  addProduct(
    @Args('id', { type: () => Int }) id: number,
    @Args('name') name: string,
    @Args('brandId', { type: () => Int }) brandId: number,
  ): boolean {
    return this.productsService.addProduct(id, name, brandId);
  }
}

Modify the
products.module.ts:

import { Module } from '@nestjs/common';
import { ProductsService } from './products.service';
import { ProductsResolver } from './products.resolver';

@Module({
  providers: [ProductsService, ProductsResolver],
})
export class ProductsModule {}

Linking Products to Brands

Here we need to modify some of the files of Brands Module. First of all, we need to pass ProductsService in providers of Brands so that we can use ProductsService to find the Products related to a Brand by using findByBrandId function that we defined in ProductsService class above.

brands.module.ts:

import { Module } from '@nestjs/common';
import { BrandsService } from './brands.service';
import { BrandsResolver } from './brands.resolver';
import { ProductsService } from 'src/products/products.service';

@Module({
  providers: [BrandsService, BrandsResolver, ProductsService],
})
export class BrandsModule {}

We also need to add a field in Brands Model as products which will corresponds to Brands products
brands.model.ts:

import { Field, Int, ObjectType } from '@nestjs/graphql';
import { Products } from 'src/products/products.model';

@ObjectType()
export class Brands {
  @Field((type) => Int)
  id: number;

  @Field({ nullable: true })
  name?: string;

  @Field((type) => [Products], { defaultValue: [] })
  products?: Products[];
}

Lastly, we need to Resolve this newly added field in Brands Resolver,
brands.resolver.ts:

import {
  Args,
  Int,
  Mutation,
  Parent,
  Query,
  ResolveField,
  Resolver,
} from '@nestjs/graphql';
import { Brands } from './brands.model';
import { BrandsService } from './brands.service';
import { Products } from 'src/products/products.model';
import { ProductsService } from 'src/products/products.service';

@Resolver(() => Brands)
export class BrandsResolver {
  constructor(
    private brandsService: BrandsService,
    private productsService: ProductsService,
  ) {}

  @ResolveField()
  products(@Parent() brand: Brands): Products[] {
    const brandId = brand.id;
    return this.productsService.findByBrandId(brandId);
  }

  @Query((returns) => [Brands])
  getAllBrands(): Brands[] {
    return this.brandsService.findAll();
  }

  @Query((returns) => Brands)
  getBrandById(@Args('id', { type: () => Int }) id: number): Brands {
    return this.brandsService.findById(id);
  }

  @Mutation((returns) => Brands)
  addBrand(
    @Args('id', { type: () => Int }) id: number,
    @Args('name') name: string,
  ): Brands {
    return this.brandsService.addBrand(id, name);
  }
}

@ResolveField() decorator

We have added a @ResolveField decorator in the resolver file. When we have an object, Object A, as a field of other object, Object B, like Products as a field for Brands, we need to resolve that field, that is to define a way through which Object A is fetched on some link attribute. Here linking attribute is Brand ID. Brand ID is id in brands.model.ts and brandId in products.model.ts.

In the function provided after decorator, requires first argument as parent object, i.e Brands here. And we define it using @Parent decorator like:

...
...
@ResolveField()
  products(@Parent() brand: Brands)
...
...

We can access Brands Id by brand.id and pass it to the ProductsService findByBrandId function.

That's it. Save everything and re run the server by:
nest start

Go to playground and verify that we can access Products of each Brands:

That's a wrap. Hope you found this article helpful.
You can access the repo here.
Keep learning ❤️

Testing in React

Husnain Mustafa — Thu, 21 Sep 2023 19:26:25 +0000

In today's world, almost every product, regardless whether it is software or not, is released when the required tests are done over it. Tests assure that the product is up to the mark.

Let's get started with testing your React application. Recently I made a post of developing a basic todo app in React typescript, you can find that here.
For Reference, this is how it looks like:

We will be writing some tests on this todo app to understand the very basics of React testing.

Installing Libraries

Jest, a library for testing purposes, primarily for React.
npm install --save-dev jest
Jest Types, typeScript type definitions for Jest.
npm install --save-dev @types/jest
ts-jest, a TypeScript preprocessor with source map support for Jest that lets you use Jest to test projects written in TypeScript (as our project is in Typescript)
npm install --save-dev ts-jest
React Testing Library, a library which provides us to grab the specific components of the web page (in React) and pass it to testing library such as Jest.
npm install --save-dev @testing-library/react

Configuration

We need to configure jest.config.mjs You might not find it in your files at first. So you need to run the following command:
npx jest --init
This will ask some questions. You can answer it if you want to customize it according to you but below is a reference picture if you are totally new to it:

Now you would need to open jest.config.mjs and add the following:

...
...
const config = {
...
     preset: "ts-jest",
...
}

Extension

It would be really helpful if we download this extension in VSCode, Jest Runner.

This helps run the tests through the GUI rather than writing the path of file by ourselves in the CLI.

What we are going to test

There could be many things to test, but in this tutorial we will be covering the following:

UI Rendering, i.e whether the component is being rendered or not.
State changing, i.e when I click on 'Done' button, does the card moves from 'Todo' state to 'Done' state.

Testing UI Rendering

Make a file in /src, named as 'App.test.tsx'. This would be the file where we will be writing our tests.
Testing:

import { render, screen } from "@testing-library/react";
import { TodoPage } from "./pages/todo";
import { DummyTodoList } from "./dummydata";

describe("Todos", () => {
  it("should render all the data", () => {
    render(<TodoPage />);
    const { getByText } = screen;
    DummyTodoList.forEach((item) => {
      expect(getByText(item.title)).toBeTruthy();
    });
  });
});

Explanation:

describe (provided by jest) is used to describe a test suite, group of related tests. It takes 2 args, first, a string, which describes what test suite is related to. Second, a function, which will have different tests.
it (provided by jest) is used to describe an individual test. It is written inside the function provided as second parameter to describe. it also takes 2 parameters, a string, describing the exact test. Second, a function which would actually contain the logic of testing.
render is a function of react testing library, which renders the component.
screen is an object provided by the react testing library that provides multiple functions, like getByText, to access the element in the DOM
expect (provided by jest) is a function which takes an one argument, which we need to test, like the element we are passing, and returns an object which provides multiple functions like toBeTruthy(), meaning it is found in the DOM.

Result

Examples of expect for understanding:
expect(3).toBe(3) - test pass
expect(<any function>).toBeCalled() - test whether the given function is called
expect(<any function>).toBeCalledTimes(2) - test whether the given function is called 2 times
expect(3).not.toBeGreaterThan(1) - test fails as 3 is greater than 1, note that there is **not**
expect(false).toBeTruthy() - test fails as false is not true

Testing todos in respective tabs

Now we want to test that our dummy data is in the respective tabs, i.e we want to check that the todo which is unchecked must be in the Todo tab and checked todos must be in Done tab.
One way of doing that is, we verify that the text is crossed, i.e style.textDecoration is 'none' in unchecked and style.textDecoration is 'line-through' in checked.
We can do it by (inside the function provided as second parameter of describe):

it("should render all the data in the respective tabs", () => {
    render(<TodoPage />);
    const { getByText } = screen;
    const uncheckedItems = DummyTodoList.filter((item) => !item.checked);
    const checkedItems = DummyTodoList.filter((item) => item.checked);
    uncheckedItems.forEach((item) => {
      expect(getByText(item.title).style.textDecoration).toBe("none");
    });
    checkedItems.forEach((item) => {
      expect(getByText(item.title).style.textDecoration).toBe("line-through");
    });
  });

Result

Testing whether clicking on checkbox makes our todo checked/unchecked

it("should move unchecked todo to Done tab when click on checkbox", () => {
    render(<TodoPage />);
    const { getByText, getAllByRole } = screen;
    expect(getByText(DummyTodoList[0].title).style.textDecoration).toBe("none");

    const firstCheckBox = getAllByRole("checkbox")[0];
    fireEvent.click(firstCheckBox);
    expect(getByText(DummyTodoList[0].title).style.textDecoration).toBe(
      "line-through"
    );
  });

Note that we have used, getAllByRole, also provided by screen, fetches all the element having a specified role. Checkbox has role of checkbox. You can read more about the different roles of different elements here

Then with all the elements, we selected the very first element by using [0]. This gives us the first checkbox in the DOM. We confirmed that the todo is not checked and is under Todo Tab by simply checking the styles.textDecoration as 'none'.

Then we clicked on the checkbox we first fetched, by using fireEvent (also provided by React Testing Library). And then we verified that todo is checked by, again, checking style.textDecoration as 'line-through'

Result:

Github Repo

Tests are pushed to this repo

Hope this article helped you understand the very basics of testing. Keep learning ❤️

Git Basic Commands

Husnain Mustafa — Sun, 20 Aug 2023 13:37:23 +0000

Today, we will be learning about the Git Commands which are required when starting to work as a team. We will start from basics.

What is Git

First of all, let me tell you what is Git and why we need it as a software engineer.
If you have been doing some software developing, you might have faced a situation where you need to keep multiple backups of your project, each backup having some is newer version of previous, like, Backup_v1, Backup_v2. I used to do the very same when I started learning coding. But this kind of work is really unorganized and annoying. Then comes git, a tool which keep track of your code history so if at any time you wanna go back to previous versions, you can, with a single command. Other than keeping track of code, git is really useful when working on the project as a team.

Now, its our time to learn some git commands, and we will do it by going through a story. This will make it easy to understand.

The Story

Let's say Bob is a fresh Software Engineer who is hired by the company The Softee. The Softee is working on the project called Project X. Bob is given the access of the repository of Project X. Now Bob will have to download all the code of the Project X. So how will he do it?

Git Clone Command

Bob will download the repository by copying the repo and clone it in the terminal.
git clone <repo_link>
This will download all the code of the main branch to his PC.

Back to story, Now Bob got all the code. Bob has been given a task, Bug Task, to remove a small bug. So rather than starting working on the task, first Bob need to make a separate branch. But why? This is because if Bob does not code well, i.e, not having good quality code, or introducing another bug, or anything else that is not required, it will not affect the main branch. Separate branch keeps the Bob's code separate, and when everything is done by Bob's side, his code will be reviewed by the team and if everything is fine, then Bob's code will be merged to main branch. So to make a branch:

Making Branch in git

Bob will make a branch by:
git branch bugtask
This will make a branch but Bob is still on main branch, so to enter his newly made branch, he can use:
git checkout bugtask

To make a branch and enter in a single line, following command is used:
git checkout -b bugtask

He can also verify on which branch he is by:
git branch
It will list all the branched, and asterik, *bugtask, means he is on bugtask branch.

Now Bob is in his branch where he can start working on the bug. When he is done with removing bug, he will need to commit the branch. Committing in git means making a tracking points, i.e a version of backup. And it is necessary to commit before pushing the code. Pushing code means storing code on the remote repository, meaning it will be saved online on github. So even if code gets deleted from your PC, code will be available online. So Bob can make a commit by:

Committing changes in git

Before committing, Bob need to stage the files he want to commit, i.e he need to tell git that these are the files which are needed to be saved as a backup. So most of the times we need to save all the files, so we stage all files by:
git add .

If there is some specific file, we can:
git add <filename>

After staging files, he need to commit by:
git commit -m '<commit message>'

Commit message is a brief description about the commit. This could be whatever you want but its better to have some meaningful description so that at later, anyone can see what was done in this commit. Mostly we use Conventional Commits, a standard way to write a message of commit.

Now committing is done. Bob need to push the code, i.e send the code to remote repo so it gets saved online and everyone in the team can see it. So he can push by:

Pushing Code

He can push the code by:
git push -u <repo_name> <remote_branch_name>

-u is optional, it sets the upstream for the branch, i.e if you use -u, then it will link your local branch to your remote branch. So later you would not need to write the whole above command, rather just use:
git push
and git will understand that you are pushing your branch, bugtask to your repo. Git push will push the branch on which you are currently on.

Now code is pushed, and team can easily review Bob's code and if it is up to the mark, team will merge Bob's code to main branch, i.e add Bob's code to main branch.

Let's say Bob's pair programmer, Alex, also working on the same branch, bugtask, and he pushed some code too. So Bob can get the latest changes to the branch by:

Pulling Changes

git pull --set-upstream <remote_repo> <remote_branch_name>

--set-upstream is same as -u when pushing the code.
Both of these commands link your local branch to remote branch. So if you typed once -u or --set-upstream, it will link and then you can pull by simply:
git pull
and push by:
git push
while being in required branch, i.e, bugtask.

Now let's suppose another scenario where Bob is half-way between solving the bug that was assigned to him. Now he want to see the code of another branch, let's say branch-x, where he can get some help on how to remove a bug. Now Bob need to save the whatever half changes he did for removing the bug. So he can stash the changes, Stashing means saving the changes in the local PC so one can get those changes later. So Bob can stash his changes by:

Stashing Changes

git stash .
to stash all files that are changed.

git stash <filename>
to stash any specific file.

Now Bob can move around any branch and see all code he want to help him out by:

Changing Branch

git branch <branch_name>

In this case, as Bob want to see branch branch-x:
git branch branch-x

When he got the help, he can switch back to his branch by:
git branch bugtask

But now he wont have those changes that he did to remove bug. These changes are in stash so he can get back all the stashed changes by:

Getting Changed back from stash

He can get back the stashed changes by:
git stash pop
and all the changes he stashed in the most recent stash will be recovered in working directory.

I guess that is enough for this post. Soon we will be learning some advanced git commands which are really useful in the life of software engineer.

Hope it helped you out.
Feel free to ask anything.

Improve performance of React Application

Husnain Mustafa — Sat, 05 Aug 2023 15:58:29 +0000

Performance is the major issue when we develop a medium to large scale projects. React provide us various ways through which we can improve the performance of our react app. Most of it are the hooks that are provided by react, but performance issue is not limited to that. Most of the performance issues in React is because of the re-rendering of the components. So let's discuss about it.

Re-rendering in React:

If you know react, you would know that whenever the props or states gets changed, component re-renders. And not only re-renders it self but all the children also gets re-rendered all the way to the leaf node, i.e last child in the DOM tree, when the parent gets re-rendered.
Furthermore, when component re-renders, it not only affects the DOM, but also re-declare/re-define every variable and function which is the part of the component. This further effects the performance.

Minimizing the re-rendering ripple effect:

Preventing child component to re-render whenever parent re-render:

We can prevent the child component re-rendering on parent re-rendering by use React.memo. By using React.memo, our child component only gets re-rendered only if its props gets changed. So even if our parent is getting re-render, regardless what the reason is, if the props passed to children are not changed, then child component will not re-render.
Here is the example:

...
...
const ChildComponent = ({arg1, arg2}) => {
...
...
}

export default React.memo(ChildComponent)

Preventing the re-defining of the functions on re-render:

Almost all of our functions in the component does not need to be re-defined on the re-render, or we only need to redefine those only if some specific states gets changed. So we can prevent functions to be re-defined on every re-render by using useCallback hook. This hook stores the function and only re-define it if any variable provided in the dependency array gets changed. So we need to provide every variable in the dependency array that is not a part of function but used in function, like:

...
...

const Component = ({arg1, arg2}) => {

     const [myState, setMyState] = useState(0)
     const doSomething = useCallback(()=>{
          <do something with myState>
     }, [myState])
}

In the above example, notice I have added myState in the dependency array. This is because, if I do not add myState in dependency array, doSomething will store the value of myState and always use that value. So even of myState value update to 3, doSomethinig will still be using 0 as myState. So to update our function with new value of myState, we need to add myState in dependency array.

Preventing the re-defining of the variable on re-render:

Some of the variables in the component needs to a very complex function, and then store the value returned by that function. So if we do not prevent this calling of a complex function, we can lose performance. To prevent this, we can use useMemo hook to store the value and provide those variables in the dependency array over which, when any of those variable gets updated, this complex function calculates and return the value again.

...
...

const Component = ({arg1, arg2}) => {

     const [myState, setMyState] = useState(0)
     const someValue = useMemo(() => complexFunction(myState), [myState])
}

Preventing re-rendering when map function is used:

Have you noticed that whenever you use map, without use the prop 'key', it gives you warning. Key prop is useful for performance because React identifies and keep track of the components in the virtual DOM through the key prop. But when using map function, react does not automatically assign key to the components' array that is returned by map function. So if any only one component inside the map function changes, its will re-render all the components that are provided by the map function. So to avoid this re-rendering and restricting it to only re-render the component which got changed, we need to assign the key.

...
...
todoArr.map((el)=>{
     return(
          <TodoComponent key = {el.id} title = {el.title}/>
     )
})
...
...

Preventing re-rendering of input:

Most of the beginners in React, including myself when I started learning React, use controlled inputs through state. Something like:

...
const [myInput, setMyInput] = useState(0)
...
...
<input value = {myInput} onChange = {(event)=>{setMyInput(event.target.value)}}
...

This causes re-rendering of input whenever we type a single character.
So unless you need to make your input controlled, for any reason like validation of input, you should use uncontrolled input. Which you can do using useRef hook as shown below:

...
const myInputRef = useRef()
...
...
<input ref = {myInputRef}/>

and get the value of input by:
myInputRef.current.value

These are some of the ways you can improve performance of your react application. There are many other factors which affect the performance which I might have skipped.

Hope this article helped you.

Let's make your first React Typescript Todo web app

Husnain Mustafa — Mon, 17 Jul 2023 11:16:00 +0000

When I started React with typescript, I found it a bit difficult to code as I had little to no experience in typescript. So I had to go through the web and understand the basics.

Typescript is not that hard as it looks like, it's just a superset of Javascript. So if you know Javascript, it would be really easy to understand.

So let's get started.

Creating React App through Vite

At first, most react developers, including myself, used to create the project through Create-React-App. But this package got deprecated and it is no further updated.

So I shifted to Vite, which is pretty good and much faster.

Before creating React App, you must have Vite installed. You can install Vite by the following command in the terminal:
npm i -g vite

To create a React App:

Open Terminal
Type: npm create vite@latest app-name, app-name is the name of the app, in our case, it is 'todo'. So command becomes npm create vite@latest todo
Now it will ask which template we want to use, select 'React' with arrow keys and press enter
Now it will ask for the language, select 'Typescript'
It will create a folder named 'todo'.
Move to folder by cd todo
Install the required packages by npm install
You can run the basic Vite project by npm run dev and open the browser and type in search bar: localhost:5173

Installing Frontend Libraries

We will be using MUI for this project as it provides variety of components and we do not need to make components from the scratch. So type the following in the terminal:
npm install @mui/material @emotion/react @emotion/styled

Structuring the directory

As our setup is done, now is the time for developing the actual project.
For that, I usually start with making some directory structure.
Below is the directory structure I made for this project:

It is not necessary to make the directory structure at the start of the project. Directory structure is always being updated as the project grows.

Adding Dummy Data

As we are only on the front-end, i.e without any back-end, we would need to create the dummy data.

But before that, we need to make an interface which corresponds to dummy data. An interface defines the syntax that any entity must adhere to. (Definition from tutorialspoint)

So make a file in '/commonInterfaces' by name index.ts and copy paste the interface below:

export interface TodoListProps {
    id: number,
    checked: boolean,
    title: string,
    description: string
}

As interfaces provides a syntax, so it should be having the attributes which our object have. In this case, we know that todo would have title as string, description as string, checked as boolean and finally the id as number

Moving on to adding Dummy Data
So in '/dummydata' directory, make a file named index.ts and paste the dummy data provided below:

import { TodoListProps } from "../commonInterfaces";

export const DummyTodoList: TodoListProps[] = [
    {
        id: 1,
        checked: false,
        title: 'Todo 1',
        description: 'This is Todo 1'
    },
    {
        id: 2,
        checked: false,
        title: 'Todo 2',
        description: 'This is Todo 2'
    },
    {
        id: 3,
        checked: false,
        title: 'Todo 3',
        description: 'This is Todo 3'
    },
    {
        id: 4,
        checked: true,
        title: 'Todo 4',
        description: 'This is Todo 4'
    },
    {
        id: 5,
        checked: true,
        title: 'Todo 5',
        description: 'This is Todo 5'
    },
]

Making Todo Page

Now, it's time to make a todo page which will be a wrapper for all todo related components

So make a directory in '/pages' by name 'todo' and make a file in '/pages/todo/' by name 'index.tsx'.

Styled Components

First, let's make the styled component as wrapper:

import { styled } from "@mui/material";
const FlexCenter = styled('div')(() => ({
    display: 'flex',
    justifyContent: 'center',
    width: '100%'
}))

Now, let's make the styled component of the title:

const Title = styled('h1')( ({theme}) => ({
    color: theme.palette.primary.main 
}))

If you do not know what are styled components and how to make them, you can read it on MUI documentation

Styled component is just another way of writing css for the component.

Making Todo Page Component

export const TodoPage = () => {

    return(
        <Grid container sx = {{px: 1, justifyContent: 'space-around'}}>
            <Grid item xs = {5}>
                <FlexCenter>
                    <div style = {{width: '100%'}}>
                        <Title>
                            Todo
                        </Title>
                        {todoList.filter(el => el.checked == false).map((el)=>{
                            return(
                                <TodoCardComponent key = {el.id} {...el} toggleCheck={toggleCheck} deleteTodo = {deleteTodo} isEditing = {el.id == editIndex} setEditIndex={setEditIndex} saveEdit = {saveEdit}/>
                            )
                        })}
                    </div>
                </FlexCenter>
            </Grid>
            <Grid item xs = {5}>
                <FlexCenter>
                    <div style = {{width: '100%'}}>
                        <Title>
                            Done
                        </Title>
                        {todoList.filter(el => el.checked == true).map((el)=>{
                            return(
                                <TodoCardComponent key = {el.id} {...el} toggleCheck={toggleCheck} deleteTodo = {deleteTodo} isEditing = {el.id == editIndex} setEditIndex={setEditIndex} saveEdit = {saveEdit}/>
                            )
                        })}
                    </div>
                </FlexCenter>
            </Grid>
        </Grid>
    )
}

Now we made the component but many things are missing from it. You can see that we are using the following:

todoList/setTodoList, a state responsible for storing the current todo list
editIndex/setEditIndex, a state responsible for storing the index of the todo item which is currently being in edit mode, if none is in edit mode, it would be -1
toggleCheck, a funciton responsible to update the checked/unchecked status of a single todo
deleteTodo, a fucntion responsible for deleting a single todo
saveEdit, a funciton responsible for saving the edited todo

These were never defined but us, but used in the above code. Through these, we will achieve the functionality of our Todo App so let's define these. Below is the whole file with all these missing items. So you can copy paste the below code into /pages/todo/index.tsx

import { Grid, styled } from "@mui/material";
import { useCallback, useState } from "react";
import { DummyTodoList } from "../../dummydata";
import { TodoCardComponent } from "../../components/todoCard";


const FlexCenter = styled('div')(() => ({
    display: 'flex',
    justifyContent: 'center',
    width: '100%'
}))

const Title = styled('h1')( ({theme}) => ({
    color: theme.palette.primary.main 
}))



export const TodoPage = () => {

    const [todoList, setTodoList] = useState(DummyTodoList)
    const [editIndex, setEditIndex] = useState(-1)

    const toggleCheck = useCallback((id: number) => {
        const tempTodoList = todoList
        const index = tempTodoList.findIndex(e => e.id == id)
        tempTodoList[index].checked = !tempTodoList[index].checked
        setTodoList([...tempTodoList])
    }, [todoList])

    const deleteTodo = useCallback((id: number) => {
        let tempTodoList = todoList
        tempTodoList = tempTodoList.filter(el => el.id != id)
        setTodoList([...tempTodoList])
    }, [todoList])

    const saveEdit = useCallback((id: number, title: string, description: string) => {
        const tempTodoList = todoList
        const index = tempTodoList.findIndex(e => e.id == id)
        tempTodoList[index].title = title
        tempTodoList[index].description = description
        setTodoList([...tempTodoList])
        setEditIndex(-1)
    }, [todoList])

    return(
        <Grid container sx = {{px: 1, justifyContent: 'space-around'}}>
            <Grid item xs = {5}>
                <FlexCenter>
                    <div style = {{width: '100%'}}>
                        <Title>
                            Todo
                        </Title>
                        {todoList.filter(el => el.checked == false).map((el)=>{
                            return(
                                <TodoCardComponent key = {el.id} {...el} toggleCheck={toggleCheck} deleteTodo = {deleteTodo} isEditing = {el.id == editIndex} setEditIndex={setEditIndex} saveEdit = {saveEdit}/>
                            )
                        })}
                    </div>
                </FlexCenter>
            </Grid>
            <Grid item xs = {5}>
                <FlexCenter>
                    <div style = {{width: '100%'}}>
                        <Title>
                            Done
                        </Title>
                        {todoList.filter(el => el.checked == true).map((el)=>{
                            return(
                                <TodoCardComponent key = {el.id} {...el} toggleCheck={toggleCheck} deleteTodo = {deleteTodo} isEditing = {el.id == editIndex} setEditIndex={setEditIndex} saveEdit = {saveEdit}/>
                            )
                        })}
                    </div>
                </FlexCenter>
            </Grid>
        </Grid>
    )
}

We are using TodoCardComponent in the above component, but we never made it. So let's make it.

Making of Todo Card Component

We need to make a component which will be responsible to render the single todo. By doing this, we will be able reuse this component for all the list of todo.

So make a folder in '/components' named 'todoCard', i.e it would become: '/components/todoCard/'. Here make a new file named 'index.jsx' with the following code:

import { Button, Card, Checkbox, Grid, TextField, Typography, styled } from "@mui/material";
import { useRef } from "react";
import { TodoListProps } from "../../commonInterfaces";


const CustomCard = styled(Card)(({ theme }) => ({
    padding: theme.spacing(1),
    borderRadius: theme.shape.borderRadius,
    width: '100%',
    marginBottom: theme.spacing(1),
    marginTop: theme.spacing(1)
}));

interface TodoCardProps extends TodoListProps {
    toggleCheck(id: number): void,
    deleteTodo(id: number): void,
    setEditIndex(id: number): void,
    saveEdit(id: number, title: string, description: string): void,
    isEditing: boolean
}



export const TodoCardComponent = ({id, checked, title, description, toggleCheck, deleteTodo, isEditing, setEditIndex, saveEdit}: TodoCardProps) => {

    const titleRef = useRef<HTMLInputElement>(null)
    const descriptionRef = useRef<HTMLInputElement>(null)

    return(
        <CustomCard elevation={3}>
            <Grid container>
                <Grid item>
                    <Checkbox onChange={()=>{toggleCheck(id)}} checked = {checked}></Checkbox>
                </Grid>
                <Grid item xs = {8}>
                    {!isEditing ?
                        <>
                            <Typography variant = 'h6' style = {{textDecoration: checked ? 'line-through' : 'none', color: checked ? 'lightgray' : 'black'}}>
                                {title}
                            </Typography>
                            <Typography variant = 'body1' style = {{textDecoration: checked ? 'line-through' : 'none', color: checked ? 'lightgray' : 'black'}}>
                                {description}
                            </Typography>
                            <Button onClick = {()=>{setEditIndex(id)}} variant = 'contained' color = 'info' sx = {{marginBottom: 1}}>
                                Edit
                            </Button>
                        </>
                        :
                        <>
                            <TextField inputRef = {titleRef} defaultValue={title} sx = {{marginBottom: 1}}/>
                            <TextField inputRef = {descriptionRef} defaultValue={description} sx = {{marginBottom: 1}}/>
                            <br/>
                            <Button onClick={()=>{if(titleRef.current && descriptionRef.current)saveEdit(id, titleRef.current.value, descriptionRef.current.value)}} variant = 'contained' color = 'success' sx = {{marginBottom: 1}}>
                                Save
                            </Button>
                            <br/>
                            <Button onClick={()=>{setEditIndex(-1)}} variant = 'contained' color = 'warning'>
                                Discard
                            </Button>
                        </>
                    }
                </Grid>
                {!isEditing &&
                    <Grid item xs = {2}>
                        <Button variant="contained" onClick={()=>{deleteTodo(id)}} color="error">
                            Delete
                        </Button>
                    </Grid>
                }
            </Grid>
        </CustomCard>
    )
}

Rendering the Todo Page in App.tsx

Finally we need to render our page in so that it can be shown to us in '/' path.
Open 'App.tsx' and paste the code below:

import { TodoPage } from "./pages/todo"
import './App.css'

function App() {

  return (
    <TodoPage/>
  )
}

export default App

That's it. Now our Todo Page component will get rendered at '/' path.
Now run the dev server by npm run dev if it is not already running and open the browser and type: localhost:5173

This is what it should look like:

Assignment

Notice that I have not added the 'Create New todo' feature in this app. Play around the code and try to make it yourself.

Repository Link

Here is the repo from which you can clone the project and play around.

Hope it helped you understanding the basics. Keep learning. ❤️

How to integrate Paypal with NextJs

Husnain Mustafa — Mon, 03 Jul 2023 09:06:36 +0000

Payment integration is the most required thing when we are heading to develop a an eCommerce website. And Paypal is one of the most common platforms which allow us to make our transactions smoothly. So let's learn how we can integrate Paypal with our NextJs eCommerce App.

Installing the required packages

First, we need some packages which will help us a lot in the integration of Paypal and we would just need to use those according to our need.

@paypal/react-paypal-js

For the front-end, where we need Paypal Payment Buttons to be shown and the functionality of:

Creating an order
Capturing an order

This package will help us in those requriements

@paypal/checkout-server-sdk

For the back-end, where we actually need to call the paypal Api, this package provides us classes which are helpful in that.

Getting Credentials and Setting Environment

Head over to Paypal Developer and create and account.
Once you are on the dashboard:

Click on 'Sandbox Accounts':
Scroll down and view the details of business account:
Under Rest Api Apps, Copy the Cliend ID and Secret and store those in your app in .env file
If you are unable to find these things under Rest Api Apps, you need to create an app by clicking the button, Create App. When popup is shown, select Merchant account.

.env:

PAYPAL_CLIENT_ID = "<your cliend id>"
PAYPAL_CLIENT_SECRET = "<your client secret>"
NEXT_PUBLIC_PAYPAL_CLIENT_ID = "<your client id>"

Note: We are using sandbox account for this tutorial purpose. You can easily switch to live account by replacing the sandbox credentials, cliend ID and Secret, with Live one.

Back-end Integration

We need to define api endpoints through which we will create and capture order from the front-end.

We need to define two endpoints, one for creating an order, other for capturing an order.

But before that, we need to make a client with our required configuration. This client will help us call Paypal Api to create and capture orders. So make a file in

/utils/paypal/index.js:

import checkoutNodeJssdk from '@paypal/checkout-server-sdk'

const configureEnvironment = function () {
  const clientId = process.env.PAYPAL_CLIENT_ID
  const clientSecret = process.env.PAYPAL_CLIENT_SECRET

  return process.env.NODE_ENV === 'production'
    ? new checkoutNodeJssdk.core.LiveEnvironment(clientId, clientSecret)
    : new checkoutNodeJssdk.core.SandboxEnvironment(clientId, clientSecret)
}

const client = function () {
  return new checkoutNodeJssdk.core.PayPalHttpClient(configureEnvironment())
}

export default client

Now we have configured our client to use the client ID and client secret that we defined earlier in .env file. These client ID and client secret are required by Paypal to create and capture order.

Now back to our api endpoints.
/api/paypal/createorder.js:

import client from 'backend/paypal'
import paypal from '@paypal/checkout-server-sdk'

...
...

export default async function Handler(req, res) {

  if(req.method != "POST")
    return res.status(404).json({success: false, message: "Not Found"})

  if(!req.body.order_price || !req.body.user_id)
    return res.status(400).json({success: false, message: "Please Provide order_price And User ID"})


  try{
    const PaypalClient = client()
    //This code is lifted from https://github.com/paypal/Checkout-NodeJS-SDK
    const request = new paypal.orders.OrdersCreateRequest()
    request.headers['prefer'] = 'return=representation'
    request.requestBody({
      intent: 'CAPTURE',
      purchase_units: [
        {
          amount: {
            currency_code: 'USD',
            value: req.body.order_price+"",
          },
        },
      ],
    })
    const response = await PaypalClient.execute(request)
    if (response.statusCode !== 201) {
      console.log("RES: ", response)
      return res.status(500).json({success: false, message: "Some Error Occured at backend"})
    }

    ...

    // Your Custom Code for doing something with order
    // Usually Store an order in the database like MongoDB

    ...   

    res.status(200).json({success: true, data: {order}})
  } 
  catch(err){
    console.log("Err at Create Order: ", err)
    return res.status(500).json({success: false, message: "Could Not Found the user"})
  }

}

/api/paypal/captureorder.js

import client from 'backend/paypal'
import paypal from '@paypal/checkout-server-sdk'


...

export default async function Handler(req, res) {

  if(req.method != "POST")
    return res.status(404).json({success: false, message: "Not Found"})

  if(!req.body.orderID)
    return res.status(400).json({success: false, message: "Please Provide Order ID"})

  //Capture order to complete payment
  const { orderID } = req.body
  const PaypalClient = client()
  const request = new paypal.orders.OrdersCaptureRequest(orderID)
  request.requestBody({})
  const response = await PaypalClient.execute(request)
  if (!response) {
    return res.status(500).json({success: false, message: "Some Error Occured at backend"})
  }

  ...

  // Your Custom Code to Update Order Status
  // And Other stuff that is related to that order, like wallet
  // Here I am updateing the wallet and sending it back to frontend to update it on frontend

  ...

  res.status(200).json({success: true, data: {wallet}})
}

Front-end Integration

Now open a component where you need to show the Paypal Payment Buttons.
Import the following:

import { PayPalScriptProvider, PayPalButtons } from '@paypal/react-paypal-js'

Move over to the 'return' statement and add the Paypal Payment Buttons by:

return (
   ...
   ...

   <PayPalScriptProvider
            options={{
              'client-id': process.env.NEXT_PUBLIC_PAYPAL_CLIENT_ID,
              currency: 'USD',
              intent: 'capture'
            }}
          >
            <PayPalButtons
              style={{
                color: 'gold',
                shape: 'rect',
                label: 'pay',
                height: 50
              }}
              createOrder={async (data, actions) => {
                let order_id = await paypalCreateOrder()
                return order_id + ''
              }}
              onApprove={async (data, actions) => {
                let response = await paypalCaptureOrder(data.orderID)
                if (response) return true
              }}
            />
          </PayPalScriptProvider>

   ...
   ...
)

You can alter the currency and styles of the buttons.
As you can see in the code, we are calling 'paypalCreateOrder' in 'createOrder' and 'paypalCaptureOrder' in 'onApprove'.

createOrder is where we need to define a function which must return an order id of the generated order in Paypal.
For that we are defining another function paypalCaptureOrder which will call our backend api and return order id of generated order.

onApprove is where we define a function which is called when our payment is approved. Here we will call our backend api to capture the order and to update the wallet and order status.

paypalCreateOrder:

   ...
   ...

   const paypalCreateOrder = async () => {
    try {
      let response = await axios.post('/api/paypal/createorder', {
        user_id: store.getState().auth.user._id,
        order_price: amountRef.current.value
      })
      return response.data.data.order.order_id
    } catch (err) {
      // Your custom code to show an error like showing a toast:
      // toast.error('Some Error Occured')
      return null
    }
  }

   ...
   ...

paypalCreateOrder is the function which will call our backend api which is responsible for creating an order in Paypal.

paypalCaptureOrder:

   ...
   ...

   const paypalCaptureOrder = async orderID => {
    try {
      let response = await axios.post('/api/paypal/captureorder', {
        orderID
      })
      if (response.data.success) {
        // Order is successful
        // Your custom code

        // Like showing a success toast:
        // toast.success('Amount Added to Wallet')

        // And/Or Adding Balance to Redux Wallet
        // dispatch(setWalletBalance({ balance: response.data.data.wallet.balance }))
    } catch (err) {
      // Order is not successful
      // Your custom code

      // Like showing an error toast
      // toast.error('Some Error Occured')
    }
  }

   ...
   ...

paypalCaptureOrder is the function which will call our backend api which is responsible for capturing an order, i.e fulfilling an order, in Paypal.

Our Buttons will look like this:

Note: Don't forget to replace the back-end endpoints with your back-end api endpoints in these two functions.

Testing

Now you can test the paypal integration with sandbox personal account's email and password which you will find in:

Sandbox Accounts:
Under Accounts, select Personal Account:
Finally use the credentials to make the payment:

That's all
If you got any questions, feel free to ask.