Forem: Devyank Nagpal

Understanding JavaScript Internals: Building Array & Function Methods from Scratch

Devyank Nagpal — Tue, 21 Oct 2025 09:29:24 +0000

Note: In this article I build simplified versions of several native JavaScript methods and mechanisms. These are for learning and exploration only and are not intended as full polyfills or production replacements

Map, Filter and Reduce

Map

The map function accepts a single callback function as its argument.
We use a temporary array to store the new results.
The callback function receives three arguments — the current element, the current index, and the array itself.
Inside the callback, this refers to the array on which the map function is being called.

Array.prototype.devMap=function(cb){   

let arr=[]; 
for(let i=0;i<this.length;i++){
arr.push(cb(this[i],i,this)); 
}
return arr;

Filter

The filter function accepts a single callback function as its argument.
Similar to the map function, we use a temporary array to store the filtered results.
Inside the callback, if the specified condition is met, the corresponding value is added to the new array.

Array.prototype.devFilter=function(cb){
  let temp=[];
  for(let i=0;i<this.length;i++){
    if(cb(this[i],i,this)){  
      temp.push(this[i]);
    }
  }
  return temp;
}

Reduce

Polyfill for the reduce function in JavaScript
The reduce function accepts a callback function and an initial value.
By default, the initial value (often referred to as iv) is assigned to the accumulator.
The callback function receives four arguments — the accumulator, the current element, the current index, and the array itself.
If the initial value is not provided, the first element of the array is used as the accumulator.
The results returned from each callback execution are then stored in the accumulator as the reduction progresses.

Array.prototype.devReduce=function(cb,iv) //iv-> initialValue
  let acc=iv; 
  for(let i=0;i<this.length;i++){
    acc=acc?cb(acc,this[i],i,this):this[i]; //this->refers to array 
  }
return acc;

}

Call ,Apply ,Bind

Call

Before exploring the call prototype function, let’s first understand its use case.
Suppose there is a function named getName and an object student that contains a key-value pair for name.
If we want to use the name value from the student object inside the getName function, we can achieve this by calling the function as getName.call(student).
When using call, the this keyword inside the getName function refers to the student object.
Without using call, this inside the getName function would refer to the global object.

 function getName(){
 console.log(`this function print name ${this.name}`};
 }
 const student={
 name:"devyank"
 }
 getName.call(student);

Now, to create a polyfill for the call function, we need to understand that call accepts an object and additional arguments.
Since inside the function we can access the keys or properties of the provided object, we need to temporarily make that function a part of the object itself.

Function.prototype.devCall=function(ob,...args){
ob.fn=this;
ob.fn(...args);
}

Apply

The apply method is similar to call; the only difference is that the arguments are passed in the form of an array.
For example, in the example below, we have passed 15 as an age argument.

function getName(age){
 console.log(`this function print name ${this.name} and ${age}`};
 }
 const student={
 name:"devyank"
 }
 getName.call(student,15);

Function.prototype.devApply=function(ob,args=[]){
ob.fn=this;
ob.fn(...args);
}

Bind

This function is quite different from call and apply, as it returns a new function. However, its behavior is similar to that of the call function.

function getName(age){
  console.log(`this function print name ${this.name} and ${age}`);
}

const student={
  name:"devyank"
}
const bindFunc=getName.bind(student);
bindFunc(15);

Hence, for the bind polyfill as well, we assign the function to the object so that we can access its properties inside the function.
The only difference is that, in this case, we return a new function using bind instead of invoking it immediately.

Function.prototype.devBind=function(ob,...args){
ob.fn=this;
return function(...myargs){
  return ob.fn(...args,...myargs);
}

}

Promise

To create a Promise polyfill, we first need to understand that a Promise has two internal functions — resolve and reject — and its instance provides two methods — then and catch.

There are two cases to consider: synchronous and asynchronous execution.
In the case of an asynchronous function, the value of onResolve is already a function. Therefore, inside the resolve function, we check whether onResolve is a function before calling it.

The callback functions passed to then and catch are assigned to onResolve and onReject, respectively.
In synchronous scenarios, onResolve and onReject are not yet functions when resolve or reject are called, so they are executed later inside the then and catch methods.
However, in asynchronous scenarios, the then and catch methods are executed before resolve or reject are triggered. As a result, the callbacks are already assigned to onResolve and onReject, allowing them to be called directly inside the resolve and reject functions.

function promisePolyfill(executor){
  let onResolve,onReject,isFullfilled,isRejected,isCalled,value;
  function resolve(val){
    value=val;
    isFullfilled=true;
    if(typeof onResolve==='function'){
      onResolve(val);
      isCalled=true;

    }
  }
  function reject(val){
    value=val;
    isRejected=true;
    if(typeof onReject==='function'){
      onReject(val);
      isCalled=true;

    }
  }
  this.then=function(cb){
    onResolve=cb;
    if(isFullfilled && !isCalled){
      onResolve(value);
      isCalled=true;
    }
    return this;
  }
  this.catch=function(cb){
    onReject=cb;
    if(isRejected && !isCalled){
      onReject(value);
      isCalled=true;
    }
    return this;
  }
  executor(resolve,reject);

}

Debouncing and Throttle

Debouncing

This function accepts a callback function and a delay time.
We maintain a variable timer to store the result returned by the setTimeout function.
The callback is executed after the specified delay.
If a timer already exists, we clear the previous timeout before setting a new one.

function useDebounce(fn,delay){
  let timer;
  return function(...args){
    if(timer) clearTimeout(timer);
    timer=setTimeout(()=>{
      fn(...args);
    },delay);
  }
}

Throttling

In this approach, we maintain a variable last to store the last execution time.
We then check if the difference between the current time and the last execution time is smaller than the specified delay.
If it is, we simply return without calling the function; otherwise, we allow the function to execute.

function useThrottle(fn,delay){
  let last;
  return function(...args){
    let now=new Date().getTime();
    if(now-last<delay)return;
    last=now;
    return fn(...args);
  }
}

Circuit Breaker In Javascript

Devyank Nagpal — Sun, 05 Oct 2025 19:36:29 +0000

This is another design pattern in JavaScript that is commonly used to prevent multiple consecutive failure attempts.

One common example of this pattern occurs when making API calls from the frontend. Sometimes, due to various reasons, an API call might fail. To prevent repeated failures, we can halt further API calls for a certain threshold time.

Although this pattern is more commonly used in backend architecture, it can also be implemented on the frontend to improve user experience. By doing so, we can avoid showing multiple failure messages to the user and prevent unnecessary API calls when the backend server is down.

Let’s understand how this pattern works:

If an API call fails, we track the number of consecutive failures. Once the failure count exceeds the predefined limit, we record the time of the last failure. On the next API attempt, our circuit breaker function compares the current time with the last failure time. If the threshold duration has passed, the circuit resets, allowing API calls again.

Alongside, we maintain a variable called isclosed, which indicates whether the circuit is open or closed. Initially, it is set to false. Once the failure limit is exceeded, we set it to true. On subsequent attempts, we first check the value of isclosed. If it is true, we then verify whether the threshold time since the last failure has elapsed before allowing another API call.

const circuitbreaker=(fn,failCountLimit,thresholdTime)=>{
let failAttempt=0;
let timeOfLastFailAttempt=0;
let isClosed=false;


return function(...args){
    if(isClosed){
const diff=Date.now()-timeOfLastFailAttempt;
if(diff>thresholdTime){
isClosed=false;
}else {
    console.log("Service is not available right now");
    return;
}
}

try{
const result=fn(...args);
failAttempt=0;
return result;
}catch(err){
failAttempt++;
timeOfLastFailAttempt=Date.now();
if(failAttempt>=failCountLimit){
isClosed=true;
}
console.log("Failure");
}
}
}

Let’s look at an example of the circuit breaker function. We’ll create a dummy function that throws an error on the first three attempts and returns the count after that.

const fetchApi=()=>{
   let count=0;
   return function(){
    count++;
    if(count<3){
        throw "Error"
    }else{
        return `count ${count}`
    }
}

}

Usage of funciton:

const apiTest=fetchApi();
const test=circuitbreaker(apiTest,2,200);
test();
test();
test(); <- still return "failure"
setTimeout(() => test(), 100); 
setTimeout(() => console.log(test()), 210); <- will return output of count

so the response of the above code is going to be:

As you can see, even the call made after two attempts returned a failure because we set the threshold time to 200 milliseconds. Therefore, any call made after 200 milliseconds will return the expected output.

Observer Design Pattern in Javascript

Devyank Nagpal — Sun, 28 Sep 2025 20:20:31 +0000

The Observer pattern is very commonly used in JavaScript. Whenever a state change is bound to an event, that state becomes observable through the event. As the name suggests, the functions that are subscribed to an event act as observers and receive notifications whenever the event is triggered or updated.

Let’s understand this design pattern with a simple JavaScript example. Imagine we have two input fields: one accepts a number, and the other displays a progress bar whose width increases based on that number. In this case, the progress bar is an observer of the number input field—it subscribes to the input field’s events and updates whenever the value changes.

To implement this, we first create a JavaScript function where each host maintains its own list of observer functions. These functions are stored in an internal list. We then provide a subscribe method, which adds a new observer function to the list, and an unsubscribe method, which removes an observer from the list.

Finally, we define the fire method. This method accepts the state and an optional object reference. Since we want the event to be accessible to all observer functions, the method loops through the observer list and calls each function, using .call to bind the state to the given object.

const progress=function(){
    this.list=[];
    this.subscribe=function(fn){
        this.list.push(fn);
    }
    this.unsubscribe=function(fn){
        this.list=this.list.filter((item)=>item!=fn);
    }
    this.fire=function(state,thisobj){
        const scope=thisobj||window;
        this.list.forEach((item)=>{
            item.call(scope,state);
        })
    }
}

Now, let’s create an instance of our Progress class. We’ll also define a function called applyColor, which will subscribe to this instance. Whenever the input value changes, an event will be fired. This event will trigger the fire() method and pass the new value to all subscribed observers. As a result, the applyColor function will receive the value and update the progress bar accordingly.

const input = document.getElementById("percentInput");
const inputbar = document.getElementById("barInput");


const bar = new progress();
const applycolor = (val) => {
  val = Math.max(0, Math.min(100, val)); // clamp 0–100

  inputbar.style.background = `linear-gradient(
        to right,
        #4caf50 ${val}%,
        #f0f0f0 ${val}%
      )`;
};
bar.subscribe(applycolor);
input.addEventListener("input", () => {
  let val = parseInt(input.value) || 0;
  bar.fire(val);
});

How to use Prisma with Express and Postgresql as database

Devyank Nagpal — Wed, 12 Apr 2023 19:16:43 +0000

Prisma is proud of its type-safety and auto-completion feature

It consist of three parts which makes it different from any traditional orm tool

Prisma Client
Prisma migration
Prisma Studio

diagram shown below shows the abstract view of the working of different parts of prisma

Now let's dive deep into the prisma architecture and in order to understand how does prisma client and prisma migration works let's create a project .

I am gonna make use of prisma with express for building REST api and we are going to use postgresql as our database for this project .

Initialise your nodejs project with the following command and install the following dependencies

 npm init -y

npm install prisma typescript ts-node @types/node --save-dev

Now initialize prisma with the following command

 npx prisma init

This command downloads a .env file and a folder named prisma for you which contains a schema.prisma file after doing this your project directory should look like as shown below

If yes ? then we are good to move forward so firstly let's connect prisma with our local database .

Now open the .env file it contains a connection url which is used for connecting with the database , the general format of this url is shown below

postgresql://USER:PASSWORD@HOST:PORT/DATABASE?schema=SCHEMA

Change the values in the connection url according to your database configuration in order to make things work properly.

Here is look of my connection URL

DATABASE_URL="postgresql://devyanknagpal:devyanknagpal@localhost:5433/first"

Once you head over to the the schema.prisma file it contains some precoded piece of code for you which are generator and datasource objects, generator is used to create the prisma client for you which interacts with the database to make manipulation in the data and datasource is used to connect with the database

Now let's create models in our schema.prisma file which is going to represent the relations in our postgresql database .
Creating model in schema.prisma file is just like creating relation in database .

We are going to create two models namely User and Expense
things we need to know about prisma model is that the value passed inside any model represent table columns and it mainly consist of two more things i.e datatype and attribute , datatype represent the type of data being referred by the particular column and attribute is used for special case i.e wether a particular column consist of unique value or it is a primary key .

Other then that there are only three types of datatype modifiers as shown below

the code below down shows the two models are created and
One thing to notice here is that both model have primary key column which is referenced via @id attribute therefore it shows that it is necessary for every model to have one primary key.


generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User{
  id String @id@default(uuid())
  fisrtname String
  lastname String
  email String
  phoneNo String
}

model Expense{
  expenseid String @id @default(uuid())
  topic String
  price Int


}

@default attribute is used to pass default value in our case we are generating the value of ids using uuid function.

Now let's create relation between the two models and in order to do that we need to add reference of User model in Expense model

Once you run the following command

npx prisma format

then code should look like as shown below it will autogenerate @relation attribute having reference and fields plus it will also add a reference of Expense model in User model.

model User {
  id        String    @id @default(uuid())
  fisrtname String
  lastname  String
  email     String
  phoneNo   String
  Expense   Expense[]
}

model Expense {
  expenseid     String @id @default(uuid())
  topic         String
  price         Int
  ExpenseByUser User   @relation(fields: [userId], references: [id])
  userId        String
}

Now models are created but we need to map these models to databases for that we need prisma migration .

Run the following command

npx prisma migrate dev --name init

Prisma migration will sync the schema with the database before running this command there was an't any relation inside the database but after running this command the below image shows the relations of the database

Now create a tsconfig.json file in your project root directory and add the following piece of code

{
    "compilerOptions": {
      "sourceMap": true,
      "outDir": "dist",
      "strict": true,
      "lib": ["esnext"],
      "esModuleInterop": true
    }
  }

In order to create rest api we need to install some other dependencies

npm install express 
npm install  nodemon @types/express --save-dev
npm install @prisma/client

Now create a script.ts file in the root directory of your project from the beginning of this blog we have been discussing that prisma client is used to interact with the database therefore we need to import PrismaClient in our script file.

finally its the time to make the rest api

therefor in order to manipulate data of User relation we need to access it

the above image shows what type of functions does prisma offer to manipulate data in relations .

Let's use create function in order to add data to User relation it takes data object in which all the values are passed

POST

app.post("/postuser",async(req,res)=>{
    const user=await prisma.user.create({
        data:{
            fisrtname:'devyank',
            lastname:'nagpal',
            email:'devyank@gmail.com',
            phoneNo:'4365879876'
        }
    })
       res.status(200).json(user);
})

GET

app.get("/getuser",async(req,res)=>{
    const user=await prisma.user.findMany()

       res.status(200).json(user);
})

We can also filter the output using Where just like we do in sql

app.get("/getuser",async(req,res)=>{
    const user=await prisma.user.findFirst({
        where:{
           fisrtname:'devyank'
        }
    })

       res.status(200).json(user);
})

UPDATE

while updating the data we need to pass the data that needs to be updated and in Where we need to pass a primary key column value .

app.put("/user",async(req,res)=>{
const user = await prisma.user.update({
    data:{
        email:'devyanknagpal@gmail.com'
    },
    where:{
        id:"c6bd44b2-762a-4a37-8c93-5d355b25c9fa"
    }
})
res.status(201).json(user);

})

DELETE

app.delete("/user",async(req,res)=>{
    const user= await prisma.user.delete({
        where:{
            id:"c6bd44b2-762a-4a37-8c93-5d355b25c9fa"
        }
    })
    res.status(201).json({message:'deleted'})
})

Once done with this you can pass the command given below to take tour of prisma studio

npx prisma studio

TypeScript Being a Good Boy

Devyank Nagpal — Sat, 21 Jan 2023 06:21:18 +0000

Beginning with TypeScript

Let’s walk through with an example

let myname:string

In the above code myname variable is given a type string now what does this signify , this makes sure that myname variable can only be assigned with string value only .

From this we can understand that in TypeScript we can make a variable type specific therefore it reduces the possibility of getting type error because TypeScript catches bugs when we make mistakes in our code .

Here TypeScript compiler warn us at runtime that number value can not be assigned to a string type variable But is it only limited to type checking I guess we are interpreting TypeScript too soon , so the type checker has the ability to check which property can be accessed by a specific variable let me show this with an example

In the above screenshot it can be clearly observed that greetings argument in function namaste is of type string therefore when we are trying to access its properties it is only suggesting property of string .

Is typescript Superset of JavaScript ?

So , we generally can’t say that typescript is a superset of JavaScript because it doesn’t provide additional features to JavaScript but in fact it is a syntactical superset of JavaScript that is it allows to write more precise code with less errors . In simple words JavaScript code is not analyzed by any IDE while writing it but TypeScript point towards the error’s as soon as it find one .

So in the above screenshot on left hand side is the typescript code and on right hand side is the JavaScript code as we can clearly observe that if the argument is not passed in the hello

function then it can be seen that typescript highlight the error at run time whereas JavaScript run time environment does not show any kind of error.

Is TypeScript with Any = JavaScript ?

So below down is an example of a typescript code with use of Type Any .

On left hand side is typescript code it can be clearly seen that name argument is of Any type therefore we can pass any type to the function message whereas JavaScript possess this ability by default .

It is clearly mentioned in Typescript documentation that we can make use of Any whenever we don’t want a particular value to cause type checking error but ain’t type checking is one of the reason we are making use of Typescript .

Meet the Union Type

So there might situation occurs where you want to either pass string or number as type depending on the situation therefore in that case we have a special type known as Union which allows us to pass more than one type and we can make use of any type among those which are passed . Let’s see an example of this

 let myname:string|number
 myname=1234;

In the above example myname variable is passed with Union of string and number therefore we can either assign number or string value to the myname variable .

Let’s go more deep in Union suppose a parameter in a function is Union of string and number type therefore if we try to access the property of that parameter then we can only access those property which are mutual in both types i.e number and string let’s see this with an example

In the above example we can observe that num parameter is Union of string and number therefore we are only able to access the common properties of both type .

Narrowing

Now question arises can we access property of only one member of Union so the answer is yes we can achieve this with Narrowing let’s see this with an example

As we can see in the above code that we are specifically making use of typeof operator to segregate the type of variable to access the property of that particular type this process is known as Narrowing .

Type Aliases

So what do we do in type aliases is that we create a type which have certain properties in which we don’t define any value but only specify the type of that variable , I know it may sound confusing but let’s see an example of this

type student={
    name:string,
    rollno:number
}
const junior:student={
    name:"karan",
    rollno:23
}
const senior:student={
    name:"vyom",
    rollno:12
}

In above code I have created a type student which is passed with property name and roll no and each property is assigned with their types . So one thing to notice with type aliases is that we can pass a single type to more than one objects .

Interface

Interface are very similar to type aliases when it comes to defining a interface , let me show you an example of interface

interface student{
name:string,
rollno:number
}

Interfaces are also used in similar kind as type aliases is used but interface come with its own unique feature lets explore them .

So the way one interface extend other interface is quite different from how type is extended .

So below down in the code I have shown how we can add more properties to an interface as I have added section property to the student interface as well as how can a interface can extend other interface .

 interface student {
    name:string,
    rollno:number
}
interface student{
    section:string
}
interface register extends student{
    school:string
}

If interface is extended this way then how a type is extended let’s take a look at this also

type livingbeing={
    name:string
}
type animal=livingbeing & {
    breed:string
}
function liberty(dog:animal){
console.log(`name of dog is ${dog.name}`)
console.log(` breed is ${dog.breed}`)
}

In the above code type animal is extending the property of type livingbeing .

Generics

Lazy developers like me 😝 want to create reusable components so that we don’t have to code similar functions again and again . So typescript have a very beautiful feature of generics which helps us making a reusable components , but let’s not go deep into it right away first let me walk you through the process how can we make a component reusable .

Shown below is an example of a function

  function reuseme(val:string|number):string|number{
    return val;
    }

In the above example we can either pass string or number value as a parameter and in the same way we can only return string or a number type value but what if we want to pass boolean type value as a parameter the answer is that we won’t be able to pass that value and at the same time we just can’t keep on adding or options to make a component reusable .

Now one might suggest to use Any type but can this solve our problem and help us make a component reusable let’see

function reuseme(val:any):any{
    return val;
    }

So I have taken the same function and passed the parameter and return type as Any , it does help us to pass any type in parameter and in return but with any there may situation occur where we are passing a string value as a parameter and returning a number value therefore it is going to cause an error but with any typescript compiler won’t show error in this case .

Hence typescript have a feature of generics with which almost every problem is solved let’s see how to define a generic type

function reuseme<Type>(val:Type):Type{
return val;
}

So in the above code I have passed Type as argument and return type but I have also passed Type in angular brackets so whenever you pass a type in that brackets it get locked therefore you can’t return other type except which is passed as parameter type that means generics gives us the freedom of passing any type but at the same time it stop us from making any mistake.

Redux Toolkit

Devyank Nagpal — Wed, 16 Nov 2022 15:30:12 +0000

So according to the official documentation of redux now redux toolkit is the only way to write redux logic ,as a matter of fact it was introduced due to the following three reasons :

Configuring redux store is too complicated
A lot of packages needed to be added to make redux logic work
Also it requires too much boilerplate code

Let’s work with an application which make use of redux toolkit to manage the state of application .

So talking about the project it is a simple shopping cart in which we can add some products to the cart , we can remove products , we can increase the amount of products too and all this functionality will be achieved via redux-toolkit.

Firstly install redux-toolkit in your react application with the following command

npm install @reduxjs/toolkit

As we used to create store , exactly same way we are going to create store in our application

  import { configureStore } from "@reduxjs/toolkit";
    export const store=configureStore({
    reducer:{

    }
})

configureStore accept an argument of reducer key which accepts all the slice reducers of the application and it combine all the slice reducer to form the root reducer , basically reducer is an object of the slice reducer .

Now if you don’t know what slice reducer is don’t worry by the end of this blog you will get familiar with all the jargon .

Once store is created now we need to make store available to the whole application so that any component can access the state of the application and how we are going to achieve this for that let's move to the main.jsx of our application where we have to wrap our App inside the provider which can be imported from the react-redux and we need to pass store as props in Provider .

basically provider is used to make store available to the nested components therefore it is passed at the top level this is the reason why we have nested our App inside Provider .

import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import App from './App'
import './index.css'
import { store } from './store'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>
)

So our setup is done , now let’s learn how to create state with createSlice API , think of it as one of the feature of your application , in our project we are managing the products of cart therefore slice logic revolve around products of cart only .

createSlice object accepts an name key , initialstate value and object of reducer function , also it helps to manage redux related logic for a given slice in single file .

Therefore let’s create a feature folder under which create a bag folder and finally under the bag folder create a bag file

import { createSlice } from "@reduxjs/toolkit"
import bagItems from "../../data/data";
const initialState={
    amount:0,
    total:0,
    bagitem:bagItems,
    totalcart:[]
}
const  bagSlice=createSlice({
    name:'bag',
    initialState,
})
export default bagSlice.reducer;

As you can see in above file a slice is created with the name bag and a initial state is passed with amount equal to zero which signify the amount of products in cart , total will be used to calculate the total price of cart , totalcart is kept empty as it will used for storing cart items and bagItems contains the product in our shopping app for which I have created the data which is imported from the data file . In order to access the data you can visit to the github repository of this project link for which is mentioned below .

One thing to note here is that bagSlice is an object which have action , reducer and some other properties from which we have exported reducer as shown in above file .

I have log the bagSlice in order to show you the object which clearly shows that bagSlice contain object of actions , reducer etc .

Remember in beginning we created a store in our application which take an argument of reducer object therefore in order to make this bag slice available to our whole application we need to export the slice reducer to our store .

import { configureStore } from "@reduxjs/toolkit";
import bagReducer from "./features/bag/bag.jsx"
export const store=configureStore({
    reducer:{
        bag:bagReducer
    }
})

therefore in the store file we can see that we have passed the bagReducer imported from bag Slice to a key named bag .

Likewise if there are any other slice in your application needs to be added to the reducer object.

Now let’s move to our home page where we will just show the products name , image and their price and a button used to add products to cart .

Also we can look at the state in our redux devtool in console as shown below

Now let’s learn how to access state from slice in our components for this purpose we are going to import use Selector in our home page, it is used to access the state from store.

import React from 'react'
import { useSelector } from 'react-redux'
const Home = () => {
  const { bagitem } = useSelector((store) => store.bag)
  console.log(bagitem);
  return (
    <div className='home'>
      <div className="mid">
{
        bagitem.map((item)=>{
          return <Item key={item.id} {...item}/>
        })
      }

      </div>
      <div className='tact'>

      <button ><Link to="/bag">
      Go to Cart
      </Link>
      </button>
      </div>
      </div>
    </div>
  )
}
export default Home

As for now currently we have only one slice therefore in the above code we can see that we are accessing the bag slice from store and we are destructuring bag item from this .In order to check whether we are getting the data or not I have log the value of bagitem let’s check

therefore it can be clearly observed that we are able to access the value and our code is working fine up till now.

Our home page kinda look like this as shown below , in this tutorial we are going to keep our focus on the redux-toolkit only therefore if you want to check the code part of the user interface I have added the github link of this repository at the end .

So far we have covered how to create state and how to access the state value from store now let’s take one step ahead and create reducer function in our slice , reducer function contain the logic and calculation needed to be performed on state.

As you can see we have add to cart button in our app so when user click on this we need to add that product in our cart and to achieve this we need to create a reducer function let ‘s create it

import { createSlice } from "@reduxjs/toolkit"
import bagItems from "../../data/data";
const initialState={
    amount:0,
    total:0,
    bagitem:bagItems,
    totalcart:[]
}
const  bagSlice=createSlice({
    name:'bag',
    initialState,
    reducers:{
      addtocart:(state,{payload})=>{
        const bagItem=state.bagitem.filter((item)=>item.id===payload.id);
        state.totalcart.push(bagItem[0]);
      }  
    }
})
export const {addtocart}=bagSlice.actions
export default bagSlice.reducer;

One thing to note here is redux toolkit automatically uses immer library therefore we do not need to return new state in our reducer function we can make changes directly to the state

addtocart is a reducer function i.e it takes previous state and action as an argument and return a new state with applied changes here I have destuctured the payload from action .

In the above code we can see that I have created a addtocartfunction so what is happening in this function is that if a user click on the button add to cart that product is added to the totalcart which was initially kept to be empty .

Now we need to export this function in order to make use of it in components and we can export it by destructuring it from actions property of bagSlice.

Now we need to make use of this function in our component for this purpose let ‘s make use of usedispatch it give us store dispatch method which basically affect the state of store .

import React from 'react'
import { useDispatch } from 'react-redux'
import "../App.css"
import { addtocart } from '../features/bag/bag';
const Item = ({ title, img, price, id }) => {
  const dispatch = useDispatch();
  return (
    <table className="item">
     <tr>
        <td>
          <img src={img} style={{ height: "50px", width: "50px" }} alt="" />
        </td>
        <td>
          <p>{title}</p>
        </td>
        <td>
          <p className='price'>${price}</p>
        </td>
        <td>
          <button className='buts' onClick={() => dispatch(addtocart({ id }))}>Add To Cart</button>
        </td>
      </tr>
    </table>
  )
}

export default Item

dispatch takes the reducer function as an argument and it call the reducer function which finally make changes in the state .

In the above code we can see that we are importing usedispatch from react-redux and we are making use of it in the button to access addtocart function from state also we are passing the id as argument in function addtocart because on the basis of this only selected product will be added to total cart .

Suppose if user add the first product in totalcart and then let’s check the state in redux devtool →the product can be viewed in totalcart

Also we can view the difference in our redux devtool

The highlight part shows that earlier the totalcart was empty now it contain a product .

Once done with the home page now let’s move to our cart page where we can explore other reducer function .

Our cart page look like this

Things to notice in cart page are that we can increase and decrease the amount of product , with the increase in amount of product the total price of cart is increasing with it which can be seen at bottom of cart page plus total amount of product is also increasing which can be seen at the navbar and we also have a remove item button to delete item from cart .

Now we need to create reducer function for all this functionality in our slice

import { createSlice } from "@reduxjs/toolkit"
import bagItems from "../../data/data";

const initialState={
    amount:0,
    total:0,
    bagitem:bagItems,
    totalcart:[]
}

const  bagSlice=createSlice({
    name:'bag',
    initialState,
    reducers:{
      addtocart:(state,{payload})=>{
        const bagItem=state.bagitem.filter((item)=>item.id===payload.id);
        state.totalcart.push(bagItem[0]);
      } ,
      removeItem:(state,{payload})=>{
       state.totalcart=state.totalcart.filter((item)=>item.id!==payload.id);
      } ,
      increaseitem:(state,{payload})=>{
        const cartitem=state.totalcart.find((item)=>item.id===payload.id)
        cartitem.amount=cartitem.amount+1;
      },
      decreaseitem:(state,{payload})=>{
        const cartitem=state.totalcart.find((item)=>item.id===payload.id)
        cartitem.amount=cartitem.amount-1;
      },
      totalamount:(state)=>{
        let amount=0;
        let total=0;
        state.totalcart.forEach((item)=>{
          amount+=item.amount;
          total+=item.amount*item.price;
        })
        state.amount=amount;
        state.total=total;
      }
    }
})
export const {addtocart,removeItem,increaseitem,decreaseitem,totalamount}=bagSlice.actions
export default bagSlice.reducer;

removeitem→ it is a simple function where we are just deleting a element from array .
increaseitem→ In this function we are increasing the amount of product
decreaseitem → In this function we are decreasing the amount of product
totalamount → In this function we are traversing through the whole array and we are calculating the total amount and total price of cart .

One thing to notice here is we are accessing totatlcart from state not bagitem because we are making changes in the cart .

Now we just need to dispatch these function in our cart as shown below

Parent component is the bag page


import React from 'react'
import { useSelector } from 'react-redux'
import Cart from '../components/Cart';
const Bag = () => {
  const { totalcart, total } = useSelector((state) => state.bag);
  console.log(totalcart)
  return (
    <div>
      { totalcart ? (totalcart.map((item) => {
          return <Cart key={item.id} {...item} />
        })) : (
          null   )   }
      <br />
      <hr />
      <div className='total'>
        <p>
          total
        </p>
        <p>${total}</p>
      </div>
    </div>
  )
}
export default Bag

the child component cart is shown below

import React from 'react'
import { useDispatch } from 'react-redux'
import { decreaseitem, increaseitem, removeItem } from '../features/bag/bag';
const Cart = ({ title, img, price, id, amount }) => {
  const dispatch = useDispatch();
  return (
    <table className="item">    
      <tr>
        <td>
          <img src={img} style={{ height: "50px", width: "50px" }} alt="" />
        </td>
       <td>
          <p>{title}</p>
        </td>     
        <td>
          <p className='price'>${price}</p>
        </td>
        <td>
          <button onClick={() => dispatch(increaseitem({ id }))}>+</button>
          {amount}
          <button onClick={() => {
            if (amount === 1) {
              dispatch(removeItem({ id }));}
            dispatch(decreaseitem({ id }))
          }} >-</button>
        </td>
        <td>
          <button onClick={() => dispatch(removeItem({ id }))}>Remove Item</button>
        </td>
      </tr>
    </table>
  )
}

export default Cart

Repository Link
https://github.com/2devyank/Redux-toolkit
Star this repository If you find it useful

Getting Started With Spring Boot

Devyank Nagpal — Wed, 28 Sep 2022 14:12:36 +0000

It provide ready made starter for jdbc , for connecting to the database , for hosting web project etc.

It contains all the jar files needed for an application .

Question arises why do we need spring boot if we already have spring framework ?

See first of all it is based on spring framework only It is just an extension of spring framework .So as a java Developer if you want to use spring framework for building something one has to add so many configurations to work with whereas spring boot came up with the idea that developer should focus on problem solving not on adding configurations to the project . Therefore it provides dependencies , configuration but most importantly it provides production ready application.

So it provide a tool known as Spring Initializer[https://start.spring.io/] which provide starter template for your next spring boot project and user can add dependencies according to their needs.

Rest Api Using Spring Boot

Firstly will create the starter template using Spring Initializer

Once user visit the page let the project details as default and in dependency add the following dependencies

Spring Web pulls out the all configuration required for web development .
H2 database is a in-memory relational database management system .
Spring Data JPA is used for managing relational data in java applications.

Once all the dependencies added user can click on GENERATE button which will download the starter template .

You can open your project in the IDE of your choice , for this tutorial I will be using Intellij IDE.

Once you have opened your project run the demo application to check everything is going fine up till now , so if you get to see what shown in the below Image that means you are good to go forward and it also shows that your project is running on port 8080 .

Now before moving to rest api let’s make a simple get request which will just return a string .

Now under the com.example.demo make a package Controller and under this package create a class HelloController .

In class HelloController create a function which will return a String as shown below

package com.example.demo.controller;

public class HelloController {
    public String hello(){
        return "welcome to the world of spring boot";
    }

}

So user needs to understand that while working with Spring boot we have to play around with the annotations .

Firstly will pass @RestController annotation to the class HelloController which will make this class a request Handler and in order to serve the Hello() function as a get request we will annotate it with the @RequestMapping it takes value and method as argument ,value takes the routes and in method we have to specify the type of request being made . After applying annotation the code looks like as shown below

package com.example.demo.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloController {
    @RequestMapping(value = "/",method = RequestMethod.GET)
    public String hello(){
        return "welcome to the world of spring boot";
    }
}

Once all this is done user can run the project and head over to the link http://localhost:8080/
to see the desired result .

If you are able to see this result then congratulations now lets move to the next step of creating a Rest api for that first I will be adding H2 database configuration in the application.properties page .

spring.h2.console.enabled=true
spring.datasource.url=jdbc:h2:mem:dcbapp
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=devyank
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

After adding theses configuration rerun your project and head over to http://localhost:8080/h2-console/ there you would see this form as shown below just add your name and password and then click on connect .

Once done with this let’s add other element of rest api in our application , in com.example.demo package create packages named entity , repository and service . In package entity create a class Department , in package service create a interface DepartmentService and create a class DepartmentServiceImpl , in package repository create a interface DepartmentRepository and in the package controller add a class DepartmentController . Now your working directory should look like this

Working logic of Rest API

Let’s move to the code part

Entity

package com.example.demo.entity;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
public class Department {
    @Id
    @GeneratedValue(strategy = GenerationType.AUTO)
    private Long departmentId;
    private String departmentNAme;
    private String departmentAddress;
    private String departmentCode;
}

The Department class is annotated with @Entity annotation which specifies that this class is an entity and it is mapped to the database table . Variable passed in this class act as the table column.

As seen in the code part variable departmentId is annotated with @id which shows this is going to be a primary key and by passing @GeneratedValue annotation we are making sure that this value is auto generated .

We also have to generate Getter and Setter , constructors and toString() method for all the variable of this class.

Repository

package com.example.demo.repository;
import com.example.demo.entity.Department;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface DepartmentRepository extends JpaRepository<Department,Long> {
}

The DepartmentRepository class extend the JpaRepository which provide the inbuilt methods for basic crud operations and this class is annotated with @Repository which indicate that this class provide the mechanism for update , delete , storage , search operation .

Service

DepartmentService

package com.example.demo.service;
import com.example.demo.entity.Department;
import java.util.List;
public interface DepartmentService {

   public Department saveDepartment(Department department);
   public List<Department> fetchDepartmentList();
   public void deleteDepartmentById(Long departmentId);
   public Department updateDepartment(Long departmentId, Department department);
}

DepartmentServiceImpl

import org.springframework.stereotype.Service;
import java.util.List;
import java.util.Objects;
@Service
public class DepartmentServiceImpl implements DepartmentService {
    @Autowired
    private DepartmentRepository departmentRepository;
    @Override
    public Department saveDepartment(Department department) {
      return departmentRepository.save(department);
    }
    @Override
    public List<Department> fetchDepartmentList() {
        return departmentRepository.findAll();
    }
    @Override
    public void deleteDepartmentById(Long departmentId) {
        departmentRepository.deleteById(departmentId);
    }
    @Override
    public Department updateDepartment(Long departmentId, Department department) {
        Department depDb=departmentRepository.findById(departmentId).get();

        if(Objects.nonNull(department.getDepartmentNAme())&&
        !"".equalsIgnoreCase(department.getDepartmentNAme())){
            depDb.setDepartmentNAme(department.getDepartmentNAme());
        }
        if(Objects.nonNull(department.getDepartmentCode())&&
                !"".equalsIgnoreCase(department.getDepartmentCode())){
            depDb.setDepartmentCode(department.getDepartmentCode());
        }
        if(Objects.nonNull(department.getDepartmentAddress())&&
                !"".equalsIgnoreCase(department.getDepartmentAddress())){
            depDb.setDepartmentAddress(department.getDepartmentAddress());
        }
        return departmentRepository.save(depDb);
    }
}

DepartmentServiceImpl implements the function of interface DepartmentService and I have annotated this class with @Service annotation because it provide functionality for creating, deleting , updating and reading data from database .

In this class I have made an object of class DepartmentRepository by annotating it with @Autowired so that I can access all the methods from repository .

@Autowired enable us to create a object of class which is part of spring bean .

Also we can observe that all the functions are annotated with the @Override as we are over riding the function from DepartmentService interface.

DepartmentController

package com.example.demo.controller;
import com.example.demo.entity.Department;
import com.example.demo.service.DepartmentService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
public class DepartmentController {
    @Autowired
    private DepartmentService departmentService;

    @PostMapping("/department")
    public Department saveDepartment(@RequestBody Department department){
    return departmentService.saveDepartment(department);
    }

    @GetMapping("/department")
    public List<Department> fetchDepartmentList(){
        return departmentService.fetchDepartmentList();
    }

    @DeleteMapping("/departments/{id}")
    public String deleteDepartmentById(@PathVariable("id") Long departmentId){
    departmentService.deleteDepartmentById(departmentId);
    return "deleted successfully";
    }

    @PutMapping("/departments/{id}")
    public Department updateDepartment(@PathVariable("id") Long departmentId,
                                      @RequestBody  Department department){
    return departmentService.updateDepartment(departmentId,department);
    }
}

This class handle all the requests and in this class I have created an object of DepartmentService so that I can access all the function from service layer.

Post Request

Function saveDepartment is annotated with @Postmapping as it is used to make post request.

It takes Department as argument and it is annotated along with @RequestBody because it is accepted in json format.

Earlier in this tutorial I had make use of @Requestmapping where we have to specify value and type of request , @Postmapping is more specific for only creating post request and it take route as an argument .

Get Request

Function fetchDepartmentList is annotated with @GetMapping as it is used to make get request.

Delete Request

Function deleteDepartment is annotated with @DeleteMapping as it is used to make delete request.

this function takes departmentId as argument in order to delete particular department based on its Id and it is annotated with @PathVariable which takes Id as argument because we are accessing the parameter value from route .

Update Request

Function updateDepartment is annotated with @PutMapping as it is used to make update request.

It take departmentId and Department as argument in order to update depratemtn with particular Id .

Redis

Devyank Nagpal — Mon, 29 Aug 2022 17:18:17 +0000

It is like one giant JSON object that has key value pairs

So what does key-value signify basically when you work with relational databases there you have to define a proper schema, you have to define if a particular key is primary, and one has to define that a particular column will not accept a null value but that is not the case with Redis its a completely schema less database it stores information in the form of key-value where the key is String and the value could be anything number, blob, video, etc.

It is a In memory database that makes it completely dependent on main memory which brings out the following advantages

It makes data retrieval fast
latency is in sub-milli-seconds
The most important one is we can cache data

The only one disadvantage is that data loss can occur in case of server failure.

Redis is a single-threaded system one might thought that single threaded database might not be as much effective as multi-threaded database but that’s not true a single-threaded system still scales because one can spin up as many instances as one wants .

Optional durability

there are two ways to persist data in Redis and both happen in the background asynchronously

Journaling

So what does journaling do suppose if you write a key-value pair obviously it will write it to memory but also at the same time time it will write it to the disk memory.
Snapshotting

the other way it persist data is by taking snapshot i.e copying of the data at one point of time and storing it in disk. Suppose if system failure occurs in between transaction of data then it will cause data loss, only that data will be stored in disk which was snapshotted earlier if snapshotting was enabled .

Let’s move to the coding part I will be using Docker to show the commands so that one can quickly get started with Redis database.

Firstly will spin up Redis instance on docker

sudo docker run --name redisdatabase -p 6379:6379 redis

Now to get into the redis-cli run the following command

sudo docker exec -it redisdatabase redis-cli

Now comes the most hardest part how to set the key-value pair let’s take a look

set name "devyank"

here name refer to the key and devyank refers to the value

So we have set the key-value pair now question arises how to get the value that is too very easy we just have to write the following command to get the value

get name

We can also set an expiration time for the key-value pair

set hobby "running" EX 10

In above example the expiration time for the key-value pair is 10 seconds , if you will run get command after 10 seconds you will get the following result i.e nil

There is also a command to check whether a key exist or not in a database

 exists key

So if a key exists it returns 1 integer value and if key does not exist it returns 0 integer value.

There is also a command to retrieve all the keys from the database

keys *

Pub-Sub model

So in Redis you can subscribe to a channel even if it does not exist and later on if any video will be added to the channel you will get notified .Let’s take a look at command line how does this happen

 subscribe devyankvideos

So in above example I have subscribed to a channel “devyankvideos” which didn’t existed earlier

Now I am going to publish a video in this channel and will see what result I will get

publish devyankvideos "Redis tutorial"

Now you can observe that we received a message that a new video is added.

TCP vs UDP

Devyank Nagpal — Mon, 23 May 2022 05:17:23 +0000

These are communication protocol that allows us to send and recieve data in a network

they reside at layer 4 protocol of OSI model

Let’s first discuss about TCP

tcp stands for transmission control protocol , it was designed to allow transmission of information from one server to another by specifying Ip address and port

What are the benefits of TCP ?

Acknowledgement

If certain information is being transferred using tcp then at the end it ensures that yes your information is delivered .

suppose a server sent a message “Hi” to a client then that message will not only contain the text that is transferred it will be more like “ message received Hi ”,

Here message received shows how tcp acknowledges the information i.e sent .

Guaranteed Delivery

Suppose due to some errors in network or corruption of information occurs in transmission that means information is not sent in that case it will keep sending the information again and again until it receives acknowledge message.

Connection Based

this means that communication between server can only take place if there is a unique connection between the server’s and that uniqueness comes through the IP address that is if a server sends a information in a network then that information is available to every other serer out there but the information will only be decrypted at the server whose IP address is assigned.

Congestion Control

Let me explain this using an example of traffic lights ,suppose there is a place where traffic is a lot so when traffic light become green it will only allow one car at a time then it will be back to red that is at a time only one car passes .

So this example shows if there is a lot traffic of packets [HERE PACKETS ARE PACK OF INFORMATION] in network then TCP will allow only one packet at a time . This leads to delay in transmission of information.

Ordered Packets

It guarantees delivery of data and also it delivers packets in same order as they were sent.

Drawbacks

Larger packets

Since it has to carry more instruction along with information which is to be sent , those instruction includes packet for acknowledgement ,headers for guaranteed delivery ,packets for congestion control etc in order to carry all these information in headers it leads to larger packets .See anything which has advantages comes with drawback too .

More bandwidth

Larger packets leads to more bandwidth , if you are on a 2g 0r 3g network god knows how long will it take to transmit information.

Slower Than UDP

Will talk about UDP in later section of this blog , now what we needs to know is that with other formalities like congestion control [about which we have already discussed] ,also we have to wait for acknowledgement , we have to wait for guaranteed delivery these all things leads to delay in transmission of information.

Stateful

If you can restart your server and the client does not remain connected with the server plus can not resume the work without any interruption this refers to stateful.

In TCP server have the connection details of client and client also have the information about connection detail of server therefore if serer is shutdown or interrupted the connection will be lost now if client wants to send some information it won’t able to.

UDP

it stands for User Datagram Protocol

Cons

No Acknowledgement

so if you send the data using UDP the serer won’t tell you that if client recieve the data or not

No Guaranteed Delivery

In this if data is once transmitted that’s it no re-transmission of data take place in case if data doesn’t reach to user. If information reaches it reaches if doesn’t then it doesn’t.

Connection less

So there is no connection between server and client , server doesn’t know who the client is and client doesn’t know who the server is . Therefore it’s not secure

No Congestion Control

So in this UDP will keep sending information if it is asked to it doesn’t care if there is traffic of packets or not.

No Ordered Packets

If UDP is asked to send 5 packets , then it will send those packets as it is there will be no order followed

PROS

Smaller Packets

See it’s quite opposite to TCP in UDP there is no acknowledgement , no order information , no congestion control , no connection details there are no headers to carry all these information which leads to the smaller packets

Low bandwidth

If there is low data then you don’t need much bandwidth to transfer that data basically smaller packets leads to low bandwidth

Faster Than TCP

See its very clear from the drawacks of UDP that it doesn’t have to wait for acknowledgement ,neither for connection or there is not even congestion control whereas in TCP it’s quite opposite these all factors lead to faster delivery of data as compared to TCP .

Stateless

If you can restart your server and the client remain connected with the server plus can resume the work without any interruption this refers to stateless .

Google Maps Clone Using Mapbox

Devyank Nagpal — Sat, 23 Apr 2022 18:26:16 +0000

It is a mapping and location cloud platform for developers

It has the best customization feature and at the same time very easy to Integrate to your project

So going with either of the choice will be your first step toward integrating map in your project

In this tutorial I have added mapbox CDN to the HTML file

When you will go to the next step you will be given a code asking you to add it to your body of HTML file as soon as you add this following code to the body of your code map will be integrated to your project

<div id='map' style='width: 400px; height: 300px;'></div>
<script>
  mapboxgl.accessToken = 'PRIVATE_KEY';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11'
  });
</script>

Access Token is the private key generated for the user as soon as you register your account in the mapbox

When you will go live you will be able to see the following output

### Let’s make a simple project using mapbox

In order to make Google map clone we will have to manipulate the basic code firstly will obtain the user location and for that purpose will be using navigator.geolocation it return a geolocation object that gives web content access to the location.

moving further to get the current location of the user will be using navigator.geolocation.getCurrentPosition

navigator.geolocation.getCurrentPosition(success, error, [options])

getCurrentPosition takes three argument first is success it takes position as an argument and if everything goes well it return the location , error is used to return the default location and in options we can add more parameters to make amendments in the location.

Now our app.js will look like this

mapboxgl.accessToken = 'PRIVATE_KEY';

  navigator.geolocation.getCurrentPosition(succeslocation,errorlocation,{
    enableHighAccuracy:true
})

function succeslocation(position){
    console.log(position)

}
function errorlocation(){

}
function setupmap(){
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    zoom:15
})
}

In console will get the position object from which we can uproot the value of longitude and latitude of the user’s location

In order to pass the value of longitude and latitude will have to add another key-value pair of center in the map object of mapbox .

 mapboxgl.accessToken = 'PRIVATE_KEY';

  navigator.geolocation.getCurrentPosition(succeslocation,errorlocation,{
    enableHighAccuracy:true
})

function succeslocation(position){
    console.log(position)
    setupmap([position.coords.longitude,position.coords.latitude])
}
function errorlocation(){
setupmap([77.20,28.708])
}
function setupmap(center){
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v11',
    center:center,
    zoom:15
})
}

One thing to notice is that mapbox take longitude argument first instead of latitude

we can also observe that default value of longitude and latitude is provided in error function , with this as soon as you load your map you will be on your current location.

Moving further mapbox provides many feature so in case if you want to add navigation control you can just use addControl function with NavigationControl , below down the syntax and output for the same is shown

map.addControl(new mapboxgl.NavigationControl());

Last but not the least will be adding direction control on the map in order to achieve that will have to use addcontrol with MapboxDirection below down the syntax and output for the same is shown

map.addControl(
    new MapboxDirections({
    accessToken: mapboxgl.accessToken
    }),
    'top-left'
    );

}