DEV Community: Neel-Vekariya

Testing Pyramid

Neel-Vekariya — Tue, 15 Sep 2026 10:30:53 +0000

In recent my posts, I talk about the AAA model of the testing and what is the importance of testing. Now I think this time is perfect for introduce and talk about the testing Pyramid.

The concept of the testing pyramid is introduced by Mike Cohn in 2004. Then in 2009 The formal and polished version of the testing pyramid is introduced in his book “Succeeding with Agile”. They introduce three levels pyramid which is UI tests, Service tests and Unit tests.

The levels of pyramid divides based on their scope, speed, cost and frequency. Different levels have different scope, speed, cost and the running frequency. Based on this parameter, you can easily decide which type of tests to use, where to use them, and how much of each type you need.

Generally, the ratio of this tests levels is 10:20:70. 10 percent of your tests is UI tests, 20 percent tests is service tests and rest of 70 percent tests is unit tests. This ratio is popularized by the google in 2015, in their testing blog “Just Say No to More End-to-End Tests”.

Now let’s understand deeply what are those different levels. Let’s start with unit tests.

Unit Tests

Generally, Unit tests are small and independent block of tests for small feature, small function or small component. This unit tests are isolated then other tests. It tests and checks smallest part of the program.

It run on isolation so that their scope is limited to that function or that component. Unit tests are extremely fast due to mocking of database query, API requests and file I/O. The mocking of those operation makes unit tests faster to execute.

The frequency of the unit tests is very high. After every file change, the unit tests run automatically, testing the relevant cases and providing instant feedback.

Now after every change the test cases automatically checks every component or feature then if any mistake was created it directly indicates failure and the cost of fix this mistake in development phase is very cheap.

So that’s is all about unit tests now let’s understand service tests.

Service Tests

In unit tests we tests individual component, function or feature working individually in isolation or not. But that is not necessary if component works on isolation then it also works when they dependent to each other. In real application most of function is dependent on some component or some dependency in this time unit test is not reliable. So, we done service tests.

In service case we test that the interaction between different parts like function or component is done reliably or not. The goal is to ensure that the complete system behaves correctly when its components are connected.

In service tests, mocking is rarely used. In case where you use external API that is expensive, unreliable or unavailable then the mocking is used in service tests.

In service tests the scope of the tests is from two component to multiple component due to use case of service test. The component is not isolated because they depend on other component so the speed of executing service test is slower than unit test.

The frequency of service tests is lower than unit tests. Because service tests require multiple components or dependencies to work together, they take more time to execute. So we don't need to run every service test after every small file change.

But when we change something that can affect the interaction between components, service tests become very important.

They give us confidence that different parts of our application are working correctly when they are connected with each other.

Now we understand unit tests and service tests. But there is still one level remaining in the Testing Pyramid. That is UI tests.

UI Tests

UI tests are tests where we test the application from the user interface. Instead of directly testing a function or connecting different components, here we test the application from the point where the real user interacts with it.

The test can open the application, find the email input, enter the email, enter the password, click on the login button and check whether the user successfully reaches the dashboard.

So, UI tests test the complete user interaction with the application.

The scope of UI tests is much bigger than unit tests and service tests because it can cover the complete application flow. It can involve UI components, frontend logic, backend services, database and other dependencies.

Because of this large scope, UI tests are much slower than unit tests and service tests. The test needs to start and interact with the application and sometimes it also needs to communicate with the backend and database.

The cost of UI tests is also higher. Writing and maintaining these tests takes more time because even a small change in UI can break the test. For example, if we change the button structure or change some text or element, the UI test may need to be updated.

The frequency of UI tests is also lower. We don't want to run every UI test after every small change because they take more time and resources.

So if we compare all three levels, unit tests have the smallest scope, highest speed, lowest cost and highest frequency.

Service tests have a bigger scope than unit tests, slower speed, higher cost and lower frequency.

UI tests have the biggest scope, lowest speed, highest cost and lowest frequency.

This is the basic idea behind the Testing Pyramid.

There is one more thing that is important to understand.

The terminology around the Testing Pyramid has changed over time.

The original Testing Pyramid described the three levels as Unit Tests, Service Tests and UI Tests.

But as software development practices evolved, different teams and organizations started using different terminology for these levels.

The term UI tests is now often discussed as End-to-End tests, or E2E tests, and service tests discussed as integration tests.

Is Being Good at Coding Enough?

Neel-Vekariya — Sat, 12 Sep 2026 05:26:05 +0000

Over the last six months, I’ve learned a few things that changed the way I think about building a career in software.

When we think about technical careers like software engineering, frontend development, or backend development, we usually believe technical skills are enough to build a successful and stable career.

so we focusing on learning new languages, explore new frameworks, new tools and try to become good in problem solving.

but this is really enough?. I don't saying like this technical skills is not necessary. it is necessary but this are skills alone actually enough.

And this is where social media become interesting.

Today, social media is not just place for entertainment it also become marketplace. where every company today come and they market them and gets visibility and trust. they build their identity as brand use of social media.

do you think how companies build their identity.

lets understand by simple example

How Companies Build Their Identity

lets imagine a company has a good product. does it simply build the product and wait for people to discover it?

usually not.

After building great product company market their product, communicate with community, creates content and tells people about what they stands for. what it does, what it believes in, and what makes its product valuable.

over a time people start recognize the company and associating them with some products which company sells. now company have their identity in the market.

Now Come to Our Main Question

now come to our main question Is it really enough?. now in this case the product is our skills. company may have good product but does it automatically have customers? not

so what does company do?

its markets its product

in a same way we need to market our skills. we need to create our identity, we need to tell people what we does, what is believes in and why we are valuable.

But Think About It Again

Now, let's recall the process of how a company builds its identity.

But think about it again.

Is the company actually trying to build an identity?

Not exactly.

The company is actually building its distribution a way to get its product and services in front of more people.

Let's Understand How Distribution Actually Works

First, let's make one thing clear:

The benefits of content are random and unexpected.

You cannot predict exactly who will see your content, who will connect with it, or what opportunity may come from it.

But through distribution, you increase your chances and expend your surface area of getting opportunities.

The more people who discover your work, your skills, and your thinking, the more chances you have of getting an opportunity.

And over time, this repeated exposure creates recognition and builds your professional identity.

So Is Being Good at Coding Enough?

so now give answer Is Being Good at Coding Enough? no

because "Jo dikhta he vo bikta he"

Why need software testing

Neel-Vekariya — Sun, 06 Sep 2026 07:06:08 +0000

Why need software testing

Two days before, I posted about how my thoughts will change around testing, talked about the AAA model of testing, and how the AAA model is used for testing.

Now the next question came into my mind: if testing is important is ok, but what are the actual and well-defined advantages of testing we have?

I have some thoughts about those advantages, but I can’t describe them in words because I have very unclear thoughts.

Then I decided, let’s make this answer clear. I searched about that and found lots of content created around testing.

The content I found has different-different opinions about testing, but deeply I observed that all the content directly or indirectly indicates the same points, but people have different-different tests and experiences to explain those points.

All the content I found describes the actual thinking on top of product management and software engineering, which is very important to create and maintain the product.

In software engineering, to build the feature or product is not always the task. Software engineering is never about building new ordinary features and products which do not function properly, are not reliable, and do not have enough efficient use cases.

It’s all about achieving maximum functionality, reliability, usability, efficiency, maintainability, and portability of the feature or product.

And the thinking behind testing is to test a feature and product on top of these parameters. And at this point, I have some clear thoughts about testing, so let’s clean those thoughts more.

I described many words like functionality, reliability, usability, efficiency, maintainability, and lastly portability, but what the actual meaning of these words is, let’s clear out more.

Functionality

Functionality :- Functionality means whether all the created or implemented functions do their work correctly or not.

All the functions which are built to achieve some level of expected task, give the correct and well-defined output, and using all the output we achieve the expected task, output is defined by this functionality.

Reliability

Reliability :- Reliability means the downtime and failure rate of the software or service tend to be lower.

The software or service must have maximum uptime and minimum failure time so the software or service does its work reliably.

Usability

Usability :- Usability means designing your software in a way where the features of the software are actually usable and have maximum and easy access to the feature.

This thinking leads to improving the GUI of the product or feature.

Efficiency

Efficiency :- Efficiency means using your resources very wisely.

The resources are very expensive, so design your feature or product in a way where your feature or product consumes a minimum amount of resources and gives the best output using the consumed resources.

Maintainability

Maintainability :- Maintainability means the feature or product is maintainable.

If you design your feature or product in a way where maintaining the feature or product is harder or complex, then this will kill the maintainability of the product.

In software engineering, we try to build a feature or product in a way where the maintainability of the feature or product is very high, so later, if we need to make changes, then we can make changes simply.

Portability

Now last is portability :- Portability is all about running your product on various operating systems.

If your product or feature only runs on your operating system, then the portability of your product or feature is very low.

So this is all the parameters where the quality of the software depends, and to test all the parameters, you need to test these points.

New way to build the software

Neel-Vekariya — Wed, 02 Sep 2026 05:56:48 +0000

If you read my blogs, then you definitely know I learned to build a full-stack application.

But to build an application and to build an application that is efficient, robust, and performs well under any circumstances are different levels of skills and engineering.

In this AI era, everyone generates code using AI and builds applications, but actual software engineering is never about writing code.

The real engineering is to build software that works under any conditions, gives the correct output, and is reliable and well-tested.

This one thought led me to explore things about testing.

Before building my project, I never thought about testing and edge cases.

I built the feature, and if it gave the correct output, then fine, my feature was ready and I moved on to build another feature.

I wrote hundreds of lines of code without any real value because the feature was not reliable, not robust, and did not perform well under critical situations.

Then I found out this is the difference between a senior developer and a junior developer.

I learned to build software, but I didn’t learn to think about edge cases, what if my feature faced a critical situation, and what about robustness.

I missed thinking about edge cases, critical situations, and robustness.

This is the thinking that differentiates a junior developer from a senior developer.

At this stage, I had one doubt, and the doubt was: if testing is important, then I want to learn testing deeply.

If you have the same doubt, then I found the correct answer.

To build reliable, robust software that works in critical situations, you don’t need to learn software testing deeply if your goal is not to become a QA engineer specifically.

Why did I say this? The reason is that you only need to know how to verify your feature in the way you want to perform the task.

During the development period, the cost of finding bugs and vulnerabilities in the feature is very low if the developer finds their bugs in the early development stage.

To overcome the maximum damage of the feature and save your resources, testing becomes very essential in the development phase.

Now I understand the real value of testing, so I need to go deep into testing and need to learn testing.

And I found out that the basic thinking of testing depends on AAA (Arrange, Act, and Assert).

Think like this: these are the main pillars of testing.

In testing, you first arrange your configuration related to the feature, define some inputs and dependencies.

This is called Arrange.

Then the next step is Act.

In Act, you execute the behavior of the feature using the configuration you created in Arrange.

Now the next step is Assert.

Assert means verifying whether the output of the feature matches your expectation or not.

Let’s take one example for that.

I want to test my function greaterOfTwoNumber().

Then my flow of the testing is like that:

// Arrange

// Import the Function for testing.

const a = 2;
const b = 4;

// Act

const result = greaterOfTwoNumber(a, b);

// Assert

expect(result).toBe(4);

This is the most basic example of AAA.

In the first step, we do all the configuration like defining inputs and importing the dependencies and functions or features for the test.

Now in the next step, we do Act.

In Act, we execute the behavior of the function or feature, and in Assert, we check whether the output is as per our need or not.

If the output is not as per our need, then the test fails; if we have the correct output, then the test passes.

This is the basic overview of the testing.

If I am wrong in any section, please drop your thoughts in the comments.

Next step to client-side storage

Neel-Vekariya — Sun, 23 Aug 2026 09:44:40 +0000

Next step to client-side storage

In my past one blog, I wrote about how I improve the performance of the application using the local storage. And the problem local storage solves.

But now I face another problem about the client storage. My project is simply about order management software for the rental clothing industry.

In the rental clothing industry, Showrooms or small shops have a big problem. The problem starts when one order has a single or multiple items that are booked in a particular time range.

Now, a second order wants the same item in between that particular time range. If, by mistake, the second order books that item, then the problem starts.

The item is booked two times in that particular time range. That is called double booking of the item.

This mistake is created by the use of traditional register booking. Now, when I need to store the items data, that is a small amount of data, so I simply use the local storage.

But now I need another and a big storage for storing order details. I build two features: first one is for showing all the orders and second one is for showing the full order.

To implement those features and to maintain the user experience, I decide to store a small amount of data about the order on the client side. First, I decide to store data in local storage.

But to store data in the local storage is not a good option because the local storage is used for storing small details about the application, and storing order details in the local storage compromises the performance of the application.

Now I want a new storage option for storing order details. And again I find out, and that is the IndexedDB.

To integrate IndexedDB in my application, I want to learn about that storage. I search multiple videos about IndexedDB, but no one is teaching me properly.

After finding hundreds of tutorials, I finally found one tutorial that is teaching properly how to integrate IndexedDB in the application. Now I want to share that learning with you.

To integrate IndexedDB, we want to create first one database in IndexedDB. The dbConnect is built for that and used to get the reference of the created database.

To build that function, we want to create first two environment variables: db_name and version. Those two variables describe the name and the version of that database.

If any updation happens in the version variable, then this function will execute and update the database.

const dbConnect = () => {

  const req = indexedDB.open(db_name, version);

  req.onupgradeneeded = () => {

    const db = req.result;

    // Access the reference of the database.

    const payload = {
      keyPath: "id",
      autoIncrement: true
    };

    // The payload is for creating a primary key.

    db.createObjectStore("orders", payload);

    // Create the object that is called store in IndexedDB.
  };

  req.onsuccess = () => {
    console.log("Success", req.result);
  };

  req.onerror = () => {
    console.log("Failed", req.error);
  };
};

Now, in the function, we create first one database and get the reference of that database. The req.onupgradeneeded is an event for updating the database when the version variable is changed, then this event is run and updates the database.

The req variable sends the request to open the database, and after the request is complete, we now have access to the database connection reference. The payload is the rule for how the primary key of that particular store will be generated.

To create a store, first we access the result object, and in the result object, we use the createObjectStore method. onsuccess and onerror are events that indicate the success or failure of the connection.

The function dbConnect is an asynchronous function, so the next step is to convert this asynchronous function to a synchronous function. To create a synchronous function, we simply wrap this function into the promise.

Let's do that.

We do this promise in the req.onsuccess or req.onerror event. If the req is successful, we resolve the promise; otherwise, we reject the promise.

The updated event is:

req.onsuccess = resolve();
req.onerror = reject();

const dbConnect = () => {

  return new Promise((resolve, reject) => {

    const req = indexedDB.open(db_name, version);

    req.onupgradeneeded = () => {

    };

    req.onsuccess = () => resolve(req.result);

    req.onerror = () => reject(req.error);

  });
};

Now our function is converted into the synchronous function. Now, the next step we explore is how to store, update, read and delete the data.

In IndexedDB, all the operations are transactions. Means if any error happens, then all the started operations are undone.

Now the next step is to get knowledge about the permission. When we want to store or delete or update the data, the first step is to define the permission.

readonly, readwrite are the types of permission.

const storeData = async () => {

  try {

    const db = await dbConnect();

    const transaction = db.transaction("orders", "readwrite");

    // Define the permission.

    const payload = {
      name: "Neel",
      email: "neel@gmail.com"
    };

    // The data to store.

    transaction.objectStore("orders").add(payload);

    transaction.oncomplete = () => {
      console.log("Data Stored Successfully.");
    };

  } catch (error) {
    console.log(error);
  }
};

This is all about storing the data. Now we learn about reading the data.

For reading the data, we use readonly permission. The getAll() function is used to get all the data, and get() is used to get particular data.

const readData = async () => {

  try {

    const db = await dbConnect();

    const transaction = db.transaction("orders", "readonly");

    // Define the permission.

    const request = transaction.objectStore("orders").getAll();

    request.onsuccess = () => {
      console.log("Data Fetched Successfully.", request.result);
    };

  } catch (error) {
    console.log(error);
  }
};

This is all about how to read the data. Now next, we learn how to update the data.

To update the data, we use the readwrite permission.

const updateData = async () => {

  try {

    const db = await dbConnect();

    const transaction = db.transaction("orders", "readwrite");

    // Define the permission.

    const store = transaction.objectStore("orders");

    // In this store we do not use any function; either we get the reference.

    const req = store.get(id); // Get old data.

    req.onsuccess = () => {

      const data = req.result;

      if (!data) return;

      const payload = {
        ...data,
        name: "Jay",
        email: "Jay@gmail.com"
      };

      // Only change name and email and other data store as it is.

      store.put(payload);
    };

  } catch (error) {
    console.log(error);
  }
};

This is all about how to update the data. Now next, we learn how to delete the data.

To delete the data, we use the .delete() method.

const deleteData = async () => {

  try {

    const db = await dbConnect();

    const transaction = db.transaction("orders", "readwrite");

    // Define the permission.

    const store = transaction.objectStore("orders");

    // In this store we do not use any function; either we get the reference.

    const req = store.delete(id); // Delete data.

  } catch (error) {
    console.log(error);
  }
};

Now we successfully implemented the IndexedDB in our project.

If I made any mistake, then share my mistake in the comments.

Then My Project Needed This

Neel-Vekariya — Sat, 15 Aug 2026 07:33:22 +0000

Finally, I Integrated the Multiselect Autocomplete Dropdown

In the past few months, I learned a lot of things and also made a project after many retries. The project taught me many important concepts that I didn’t know after learning languages, frameworks, or even in lectures.

These were concepts that I only came across when I wanted to use them in my project or when I faced some issues. The Multiselect Autocomplete Dropdown is one of the concepts that I didn’t learn when I was actually in the learning phase, but I learned it when I was building something on top of my learnings.

In my project, I wanted a feature in the frontend where a user could send me multiple-selected values of one field, and I also wanted that field to be searchable and autocomplete.

Then I noticed that this type of feature is also provided in HTML with the select tag, but there was an exception with this tag, and the exception was that the tag is not searchable and does not support multiple values.

So, I needed a different solution, and I wanted to figure out that solution.

In the age of AI, finding a solution is very easy, but the difficult part was integrating it into my project.

I found the solution with the help of AI, and now the next step is to integrate it into my project.

I think this type of feature is learned only for a purpose. The topic is learned when the functionality is needed.

When the topic is learned only for the purpose of learning, then the topic is not available in the course we want to learn from, documentation, or some video where the topic is not fully explained.

In this case, I faced the same problem.

If you face the same problem, please share your experience in the comments.

Finally I access The Child Element

Neel-Vekariya — Tue, 11 Aug 2026 04:21:58 +0000

Recently, if you read my little weird blogs, you know I learn React.js and build one project. In the project, I made many mistakes like creating a complex component structure. Later I removed all components and made a clear folder structure.

I created cards that did not show data, and I don’t know why. And so on. But one problem came when I used the React-Hook-Forms and my custom input field.

This problem gave me more knowledge as well as an idea about how react-hook-form works. The problem is like this. When I want to access the child component from the parent component to access the data entered by the user.

That gave me undefined instead of the value which was passed by the user. I was not able to find out why that happened. Later I found out that my parent element does not have access to the input field. That is the problem.

Now I don’t know why the parent element does not access the child element. In the parent element, I did not make a mistake in using the child element. Then why did that happen.

Subsequently, I found out that the register which is used for accessing the value from the child element sends one ref to the child element. But I did not define that or use that. Now I found out the method that is used to pass reference to the child component.

React provides a higher order function named forwardRef to solve the problem of passing the reference to the child component. The forwardRef is not needed in a normal input or select field.

The custom component built for reusability blocks the reference. In this situation, we need a service that passes the reference from the parent to the child component.

The service is provided by the higher order function forwardRef. To use forwardRef in the custom component, you need to import it from React. And pass it as a secondary separate parameter ref in the function.

Now pass this parameter as a ref property in the custom input component. And wrap your exported component in forwardRef. Now you have access to the child component in the parent.

And also have the value which is passed in your child component. Now this function solved my problem of passing undefined value.

If I have done something wrong, please let me know in the comments.

How I Prevent unauthorized user to access restricted routes

Neel-Vekariya — Fri, 07 Aug 2026 04:55:29 +0000

In my last post, I talked about how I simplified managing all my components. After building all the components for my backend project, I assembled them into the home page and created a flow between them to navigate from one feature to another.

But, I didn’t run the frontend for testing. Consequently, I did that, and obviously, I had many errors on the screen.

Firstly, I solved all the errors I had and checked whether all the components were working properly or not. After checking all components, suddenly I found one security issue in my application.

When I wanted to switch from one feature to another feature, I tried some kind of shortcut in the URL, and it worked. How, I don’t know.

As a result, it rendered my component that was restricted for the user I logged in. This was a problem for me due to data security and the exposure of protected routes.

I needed a solution. As a result, I searched about the problem and found out this is not only my problem but also a problem that all developers face.

They have a centralized solution for that, in addition to using a Protected component. The main idea of the protected component is to check given conditions.

If the conditions are true, then render the protected component, else navigate them to the login or register page. The component is also used to boost user experience.

Due to redirecting the user to the login or register page, this creates a smooth path for the user to use your application.

Now let’s understand the working of the protected component. The component generally takes two parameters.

The first one is children, which is the component we want to protect from unauthorized users. The second one is whether the user is logged in or not.

Now in the component, we need access to the state that shows whether the user is logged in or not. Now we have two variables that decide whether the user is authenticated or not.

Now one question may come to your mind: why do we give the second parameter when we already have access to the state that represents whether the user is logged in or not?

The reason is that if you want optional control over the controller, as a result, you have special control over this component. Now we check the condition.

For checking conditions, we use useEffect to track all variable or state changes. Now if the condition is fulfilled, then render the protected component, else navigate.

In the code section, I have done the same thing I mentioned.


export default function Protected({ children, authenticated = true }) {
  const navigate = useNavigate();
  const authstatus = useSelector((state) => state.auth.authstatus);

  useEffect(() => {
    if (authenticated && authstatus !== authenticated) {
      navigate("/login");
    } else if (!authenticated && authstatus !== authenticated) {
      navigate("/home");
    }
  }, [authenticated, navigate, authstatus]);

  return children ? children : <h1>Loading...</h1>;
}

I am still learning frontend development, so if you find anything wrong or have suggestions, feel free to share your thoughts in the comments.

Thanks for reading!

How I Simplified My React Project Using Feature-Based Component Structure

Neel-Vekariya — Tue, 04 Aug 2026 04:44:50 +0000

Recently, I learned React.js, including how frontend development works, how to make the frontend responsive, and how to make reusable components. The only part that was missing to become a full-stack developer is now fulfilled.

Now, I am officially a full-stack developer.

In the journey of becoming a full-stack developer, I picked one project and improved it. First, I learned Node.js, Express.js, and MongoDB and developed one project using these technologies.

The project I developed had many issues, so I built the same project again from scratch using the same technologies. At this point, I learned how to make a backend, but I wanted to learn Fastify and PostgreSQL, so I learned both of them.

After learning Fastify and PostgreSQL, I built the same project using these technologies, and this helped me understand the backend deeply. Now, I have learned how to make backend APIs and databases.

But one part was missing to develop a full product, and that is the frontend. I only knew how to make backend APIs and design databases.

A month ago, I started learning how the frontend works, learned React.js, and other things like routers, hook-forms, localStorage, stores, etc. After learning the frontend, I made a React app for my backend project.

But I didn’t know how to manage components, so I created components in a way that made my project complex to manage. I simply created one parent folder named "components", and in the parent folder, I created multiple subfolders like Button for the Button component, Login for the login page, Input for input fields, Register for the register page, Select for the dropdown component, Footer for the footer component, and so on.

This means that I made one subfolder for each component, and now I realize this structure made it complex to manage all components.

Why I Chose Feature-Wise Component Structure

At this point, I decided to learn component structure next. I found many structures for managing components, but feature-wise component management is best for me.

Why is it best for me? The answer is the backend project I built. In the project, I built role-wise login, logout, and features.

Due to my backend project, I needed login, logout, register pages, and components for both roles. The feature-wise structure is best for me.

How Feature-Wise Structure Works

In a feature-wise structure, we build two main folders — the first one is "components" and the second one is "features". Now, we build role-wise subfolders in the "features" folder.

In the "components" folder, we build components that are reusable for other components like Input, Button, and Select components. This is the main concept of the feature-wise component structure.

The pages or components used for a specific feature that refers to a specific role are created in the role-wise folder. This structure removes complexity, which was a problem for me.

Now, I add more components or features, and I manage all of this in a simple way. You get an idea from the reference image that I attached.

I am still learning frontend development, so if you find anything wrong or have suggestions, feel free to share your thoughts in the comments.

Thanks for reading!

How Local Storage improves the Frontend performance

Neel-Vekariya — Sat, 01 Aug 2026 07:19:58 +0000

How Local Storage improves the performance

In the past many days, I learned about how frontend actually works and I learned lots of things. React is one of them. I learned how to manage state, how hooks work, how to make frontend faster and reliable, and the most important thing is how client-side data is actually stored using the local storage object.

If you don’t know, the local storage object is provided by all web platforms by default.

How Local Storage Works

Now that we know where local storage actually lives, the next question is how local storage actually works. Let’s imagine you open one website, you change the theme, you select your preference, and you refresh the page.

Now all your selected things or preferences get reset. And this is the problem. If your selected preferences or theme get reset, this creates a lack of user experience. To solve this problem, we actually use local storage.

Now you know about which problem we face and how it can be solved by local storage. So the next question may come: how does it work?

The working mechanism is when a user selects the preference or theme or any other things which boost user experience, then it is stored in client-side storage using local storage.

The data is stored in object format. All browsers provide around 5MB of local storage for one domain. When you first time access the local storage data, it is read from the disk and loaded into the RAM, and the browser keeps that data in cache for faster access in the future. Now the second time you need data, we don’t carry data from the disk, we already have it in cache. That improves the user experience.

Implementation of Local Storage

Now you know how local storage actually works under the hood. The next question might come: how do we implement local storage?

The answer is using the setItem and getItem methods of local storage. First we know about how to store created items or data in localStorage, after that we talk about how the API data is stored.

1) Store Created Data in Local Storage

To store data into local storage, we need two types of data. First is created data or data which is extracted from the response, and second is already stored data in localStorage.

Before combining, we need to convert stored data into an object. Now we combine both data and create one object. But we can’t store it directly into localStorage. To store data, first we need to convert that object into JSON format or string format. After converting into JSON or string format, we store it in localStorage using the setItem method.

This is the code:


const res = await axios.post("https://example.com/users");   
const newData = response.data.data; 

const existingData = JSON.parse(localStorage.getItem("user")) || {};     // Get old data   

const mergedData = {     
  ...existingData,     
  ...newData   
};    // Merge    

localStorage.setItem("user", JSON.stringify(mergedData)); // Save again

In the code, “user” is the object where data is stored.

2) Store API Data with Deduplication

Now talk about the data which comes from the API. In this case, we again need two types of data. First is response data and second is the stored data which we need to convert into an object. After that, we combine both data, but we need to implement a filter for the data which is present in response and also in stored data, so we remove duplicate data. Now we merge into the object, convert into string, and store it into localStorage. This is the code:


const localData = JSON.parse(localStorage.getItem("bookings")) || []; // Get old data 

const res = await axios.get("/api/shop/orders"); 
const apiData = res.data;  // New data

const merged = [ 
  ...localData, 
  ...apiData.filter((api) => !localData.some((local) => local.id === api.id)), // Filter the data which is already present
];  // Combine the data

localStorage.setItem('bookings', JSON.stringify(merged)); // Store the data

I am still learning frontend development, so if you find anything wrong or have suggestions, feel free to share your thoughts in the comments.

Thanks for reading!

How to Prevent Hanging Network Calls — What I Found After Investigating a Real Performance Issue

Neel-Vekariya — Mon, 13 Jul 2026 03:26:53 +0000

In the past two months I explored a lot of things Express, Fastify, MongoDB, PostgreSQL, Node.js. I built around three to four projects in this time.

All of them focused on backend because I haven't learned React yet. But the next one will be full stack.

While building these projects, I noticed one issue that kept repeatedly coming back.

Every time I called a database or an external service something that depends on a network call things would get weird.

Sometimes the response never came. Sometimes it took way longer than it should. And this was creating a performance issue in my application that I couldn't ignore.

So I investigated it properly. And I found that this is actually a common problem a lot of developers face this. And there's a standard solution for it.

The Solution is a Timeout Wrapper

The idea is simple. When you make a network call, instead of just calling it directly, you pass it through a timeout wrapper.

If the call takes more time than it should, the wrapper skips or terminates the call and moves on.

This keeps your application from getting stuck waiting on something that's never going to respond in time.

Two Functions : Two Different Approaches In Timeout

While building this, I found there are two ways to implement a timeout wrapper. Both solve the same problem but work very differently.

1. withTimeout()

export function withTimeout(promise, ms, errorMessage = "Operation timed out") {
    const timeout = new Promise((_, reject) =>
        setTimeout(() => reject(new Error(errorMessage)), ms)
    )
    return Promise.race([promise, timeout])
}

This function takes two things the promise (which is your network call) and the time limit in milliseconds.

Inside, it creates a second promise called timeout. This promise does one thing if the given time runs out, it rejects with an error message.

Then it uses Promise.race(). This function takes both promises and returns whichever one finishes first.

If your network call responds in time, Promise.race gives you that response. If the timeout fires first, you get the error.

Simple. Clean. Works.

But there's a catch I found and this is the important part.

withTimeout() doesn't actually terminate the original network call. If the timeout fires and you move on, the network call is still running in the background.

The socket is still open. Memory is still being used. CPU is still consumed. The request finishes eventually you just stopped waiting for it. The resources are still gone.

This is where the second function solves a different problem.

2. fetchWithTimeout()

export function fetchWithTimeout(url, options = {}, timeoutMs = 10_000) {
    const controller = new AbortController()
    const timer = setTimeout(() => controller.abort(), timeoutMs)

    return fetch(url, { ...options, signal: controller.signal })
        .finally(() => clearTimeout(timer))
}

This function takes the URL, options for the network call, and the timeout.

The key difference here is AbortController. This is a browser and Node.js API specifically built for canceling asynchronous operations without creating memory leaks.

You create a controller, attach its signal to the fetch call, and start a timer. If the timer runs out before the call responds controller.abort() is called.

The fetch is terminated. Not just skipped actually terminated. All the resources that were being consumed get freed.

And the finally() at the end makes sure the timer gets cleared if the call does respond in time. No timer left hanging.

The Real Difference Between Both

This is the thing I want to make clear because it took me a bit to fully understand it.

withTimeout() skips the wait. If the call takes too long, you move on. But the call is still running. Resources are still being consumed. You just stopped caring about the response.

fetchWithTimeout() terminates the call. If it takes too long, the request is actually cancelled. Network socket freed. Memory freed. CPU freed.

For most external API calls where you're using fetch, fetchWithTimeout is the right choice because it actually cleans up after itself.

For other types of async operations database queries, file reads, anything that returns a promise withTimeout is what you'd use. Just know that the operation continues in the background even after the timeout fires.

Why This Actually Matters

When I was building my projects and network calls were just hanging my application was stuck. The user was waiting. The server was waiting. Nothing was happening.

After adding timeout wrappers, if a call hangs, the application moves on. The user gets a proper error response instead of waiting forever. And with fetchWithTimeout, the resources actually get freed instead of piling up in the background.

This is the kind of thing that feels small but makes a real difference in how your application behaves under real conditions.

One investigation. One problem. Two functions that solved it.

If I got something wrong or anything can be improved please drop it in the comments. I'm still learning and I want to get this right.

The Next Token, Not the Next Script

Neel-Vekariya — Wed, 08 Jul 2026 05:45:51 +0000

Everyone is using AI to write code now. But I think the real future of programming isn't AI generating full scripts or full products it's AI predicting the next token, and us deciding whether that token is right or not.

Here's why. When you write code manually, you're already doing something similar in your head predicting the next line based on patterns you've seen before, then checking if it's correct as you write it. Every line passes through your judgment.

When AI generates a full script or product, that judgment gets skipped. You review the code, sure, but not the way you'd review your own. You skim "this line does X, this line does Y" and move on. You're checking outcomes, not making decisions. That's a completely different mental process, and it's shallower.

But when AI suggests the next token, or the next line, instead of the next thousand lines, you're forced back into the same loop you'd use writing manually: is this right, or not? You stay the one making the call.

That's why I think the best use of AI in programming isn't generate my whole app. It's predict what comes next, and let me decide. Smaller suggestions keep engineers in the driver's seat. Full generations quietly take the wheel.