DEV Community: Pulkit Gupta

Building for Developers, Thinking Like a Product Engineer

Pulkit Gupta — Thu, 08 May 2025 07:39:12 +0000

My journey at Atlan over the past year

Over the last year, I’ve grown from writing frontend code to fully owning product features that power workspace onboarding workflows and infrastructure scale.

🚀 What I Work On

At Atlan, I contribute to our Internal Developer Portal (IDP) — a platform that helps onboard new customer workspaces, manage infrastructure at scale, and bring cost transparency across teams.

This means building tools for developers — and ensuring they’re reliable, scalable, and easy to use.

💡 From Engineer to Product Thinker

What started as a frontend engineering role soon turned into something much bigger.

I started picking up backend tickets. Then I started thinking about how features connect. Then I started owning entire problems end-to-end — and began thinking like a Product Engineer.

It wasn’t just about building things.

It was about building the right things.

🛠️ Tech I Touched

Daily Stack

Go (Backend)
Vue.js (Frontend)
PostgreSQL
Docker, Kubernetes, Loft
Argo CI/CD
AWS Cloud Services

🏆 Highlights from the Year

✅ Reduced tenant onboarding time by 30%

By introducing QA automation in our developer onboarding workflow.

✅ Built dynamic tenant scaling (Atlas)

Designed and delivered full-stack support for on-demand tenant scaling inside our IDP.

✅ Improved cost transparency and infra scalability

Always thinking about the bigger picture — not just building features, but building with intention.

🧠 What I Learned

→ Real ownership drives better outcomes

→ Collaboration is about alignment, not just hand-offs

→ Writing good docs is just as important as writing good code

🔮 Looking Forward

I’m still a Software Engineer by title, but I work and think like a Product Engineer.

Next goals:

📦 Deepen my product thinking
💬 Build with more user empathy
🛠️ Solve harder, more meaningful platform problems

🤝 Let’s Connect

If you’re building internal platforms, developer tools, or solving scale challenges, I’d love to hear from you.

💬 Drop me a message on LinkedIn

📁 Check out my portfolio

Thanks for reading! And if you’ve walked a similar path, I would love to hear your learnings too.

You're not in the right place if...

Pulkit Gupta — Mon, 24 Jun 2024 14:54:05 +0000

Lack of Support from Management:
Your manager does not provide the necessary guidance or opportunities to help you grow professionally. Without their support, it becomes challenging to develop new skills or advance in your career.
Credit for Work Taken by Senior:
Your senior colleague often presents the work you have completed as their own, taking credit for your efforts and contributions. This undermines your achievements and can negatively impact your career progression.
Team Members Hindering Recognition:
Your team members actively prevent you from receiving the recognition you deserve for your hard work and accomplishments. This lack of acknowledgment can be demotivating and can affect your job satisfaction.
Insufficient Time for Task Completion:
You are not allocated enough time to complete tasks effectively, leading to rushed work and potentially lower-quality results. This can create stress and hinder your ability to perform to the best of your abilities.
Lack of Team Cohesion:
Your team does not function cohesively and fails to work collaboratively. This lack of teamwork can lead to inefficiencies, misunderstandings, and a less productive work environment.

Anything I missed? Please mention that in the comments.

Polling in Vue.js

Pulkit Gupta — Sun, 16 Jun 2024 09:35:59 +0000

Designing a composable in Vue.js to continuously poll data after the "x" interval.

What is Polling?

It is defined as the process when a client requests a particular piece of data at regular intervals (maybe every x seconds) and the server reverts with a usual response with the required data.

Composable

Let's write a composable usePolling inside src/composables/usePolling.ts



import { ref, onMounted, onUnmounted } from "vue";

const usePolling = (method, timeInterval = 10000) => {

  const interval = ref(null);

  const callMethod = ref(method);

  const isPolling = ref(false);

const clear = () => {

    clearInterval(interval.value);

    interval.value = null;

    isPolling.value = false;

  };

const fetchData = (poll = true) => {

    callMethod.value();

    if (poll) {

      // start interval

      interval.value = setInterval(() => {

        callMethod.value();

      }, timeInterval);

    } else {

      clear();

    }

  };

const start = () => {

    // clear any existing polling calls

    clear();

    // set polling flag to true

    isPolling.value = true;

    // fetch data

    fetchData();

  };

onMounted(() => isPolling.value && fetchData());

onUnmounted(clear);

return {

    start,

    clear,

  };

};

export default usePolling;

Component:

Now, let's use this composable inside any component.



<script setup>

import { onMounted } from "vue";

import usePolling from "../composables/usePolling";

const apiCall = async () => {

  console.log("api call");

  // const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");

  // const data = await response.json();

  // console.log(data);

};

const { start, clear } = usePolling(apiCall, 1000);

onMounted(start);

</script>



<template>

  <h1>Hello world!</h1>

</template>

Console output:

Let's Explore React Together.

Pulkit Gupta — Tue, 05 Sep 2023 11:00:37 +0000

Lets share our knowledge.

Let's discuss about cool tricks and hacks you used in react. Or, anything you want to share (experience, learning) related to react.

Feel free to use comment box to share your thoughts and experience. I will learn and explore them more.

React.js Hooks: A Quick Guide

Pulkit Gupta — Sat, 26 Aug 2023 12:30:35 +0000

As developers, we're constantly looking for ways to build cleaner, more efficient, and more modular code. React, a popular JavaScript library for building user interfaces, has recently introduced a game-changing feature called Hooks. In this blog post, we'll dive into the world of React Hooks, understand their purpose, and learn how to use them with real-life examples. So, let's get hooked on Hooks!

What are React Hooks?

React Hooks are a set of functions that allow us to "hook" into React state and lifecycle features from function components. They were introduced in React 16.8 to enable developers to write cleaner and more reusable code by eliminating the need for classes and simplifying complex components. Some of the most common Hooks are useState, useEffect, and useContext.

*1. useState *

The useState Hook allows us to add state to our functional components. It's a great replacement for the old setState method in class components.

Example:



import React, { useState } from 'react';  

function Counter() {  
  const [count, setCount] = useState(0);  

  return (  
    <div>  
      <p>clicked {count} times</p>  
      <button onClick={() => setCount(count + 1)}>  
        Click me  
      </button>  
    </div>  
  );  
}  

export default Counter;

In this example, we create a simple counter component. We use the useState Hook to initialize the count state variable to 0 and provide a setCount function to update the state. When the button is clicked, the setCount function is called to increment the count by 1.

2. useEffect

The useEffect Hook allows us to perform side effects, like data fetching or updating the DOM, in our functional components. It replaces lifecycle methods like componentDidMount, componentDidUpdate, and componentWillUnmount.

Example:



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

function User({ userId }) {  
  const [user, setUser] = useState(null);  

  useEffect(() => {  
    const fetchUser = async () => {  
      const response = await fetch(`https://api.example.com/users/${userId}`);  
      const userData = await response.json();  
      setUser(userData);  
    };  

    fetchUser();  
  }, [userId]);  

  return (  
    <div>  
      {user ? <p>{user.name}</p> : <p>Loading...</p>}  
    </div>  
  );  
}  

export default User;

In this example, we create a User component that fetches a user's data based on their userId. We use the useEffect Hook to make an API call when the component mounts or when the userId changes. The useEffect Hook takes two arguments: a function to perform the side effect and an array of dependencies. In this case, the dependency is the userId.

3. useContext

The useContext Hook allows us to access the value of a given context without using the traditional Context.Consumer component. It simplifies the process of retrieving context values in our components.

Example:



import React, { useContext } from 'react';  
import { ThemeContext } from './ThemeContext';  

function ThemedButton() {  
  const theme = useContext(ThemeContext);  

  return (  
    <button style={{ background: theme.background, color: theme.foreground }}>  
      I am a themed button!  
    </button>  
  );  
}  

export default ThemedButton;

In this example, we create a ThemedButton component that uses the useContext Hook to access the theme values from a ThemeContext. We then apply the theme's background and foreground colors to the button's style.

Conclusion:

React Hooks have truly revolutionized the way we build modern web applications. By understanding and implementing Hooks like useState, useEffect, and useContext, we can write cleaner, more efficient, and more modular code. So go ahead, give Hooks a try, and watch our React development skills soar to new heights

In Next Blog, I'll cover more hooks with proper examples. Stay tuned.

Containerizing Next.js App with Docker: Quick Guide

Pulkit Gupta — Tue, 22 Aug 2023 17:34:09 +0000

Next.js is a powerful React framework that makes it easy to create server-rendered React applications with exceptional performance and user experience. However, deploying Next.js applications can be a bit challenging, especially when it comes to managing dependencies, configuring the environment, and ensuring consistent behavior across different platforms.

This is where Docker comes in. Docker is an open-source platform that simplifies the process of building, deploying, and running applications in containers. By containerizing your Next.js app, you can streamline your deployment process, improve portability, and ensure that your app runs consistently across different environments.

‣ To learn more about docker, read Getting Started With Docker

In this blog post, we'll walk you through the process of containerizing your Next.js app using Docker. We'll start by discussing the benefits of using Docker with Next.js and then dive into the steps you need to take to get your app up and running in a Docker container.

Why Use Docker with Next.js?

There are several reasons why you might want to consider containerizing your Next.js application with Docker:

Consistent behavior across environments: Docker containers provide an isolated environment where your app runs, ensuring that it behaves consistently across different platforms and environments.
Simplified dependency management: By bundling all the dependencies your app needs within a Docker container, you eliminate the need to install and manage them manually on the host machine.
Easy deployment and scaling: With Docker, you can easily deploy and scale your Next.js app to multiple instances, making it easier to handle traffic spikes and high availability requirements.
Portable and shareable: Docker containers can be easily shared with others, making it easy for team members to collaborate on a project or deploy your app to different environments without the need for manual configuration.

Containerizing Your Next.js App: A Step-by-Step Guide

To get started with containerizing your Next.js app, follow these steps:

Step 1: Install Docker

Before you can containerize your Next.js app, you need to have Docker installed on your machine. You can download the appropriate version of Docker for your operating system from the Docker website (https://www.docker.com/products/docker-desktop).

Step 2: Create a Dockerfile

A Dockerfile is a script that contains instructions for building a Docker image. It specifies the base image, dependencies, and configuration needed to run your Next.js app in a container.

In your Next.js project's root folder, create a new file named Dockerfile with the following content:



# Use the official Node.js image as the base  
FROM node:14  

# Set the working directory inside the container  
WORKDIR /app  

# Copy package.json and package-lock.json to the container  
COPY package*.json ./  

# Install dependencies  
RUN npm install  

# Copy the app source code to the container  
COPY . .  

# Build the Next.js app  
RUN npm run build  

# Expose the port the app will run on  
EXPOSE 3000  

# Start the app  
CMD ["npm", "start"]

This Dockerfile specifies that we'll be using the official Node.js image as our base and sets up a working directory inside the container. We then copy our package.json and package-lock.json files to the container and install the dependencies. Next, we copy the source code to the container and build the Next.js app. Finally, we expose port 3000 and start the app using npm start.

Step 3: Build the Docker Image

With the Dockerfile in place, you can now build the Docker image for your Next.js app. Run the following command in your project's root folder:



docker build -t your-image-name .

Replace your-image-name with a name of your choice for the Docker image. This command will create a Docker image with your Next.js app and its dependencies.

‣ To learn more about docker images, read Docker Image: A Quick Guide

Step 4: Run the Docker

Run Docker Image using the command given below:



docker run --rm -p 3000:3000 --name <container-name> <image-name>

🎉 We have containerize out Next.js application

Step 5: Stop Docker Container

To Stop running docker conatiner run the command below:



docker stop <container-name>

🎉 By this, we have successfully containerize our Next.js project using Docker 🚀.

Follow for more.

Docker Images: A Quick Guide

Pulkit Gupta — Mon, 23 Jan 2023 15:54:30 +0000

Docker Images

Docker images are pre-built software packages that include all of the necessary files and dependencies to run a specific application or service. These images are stored in a registry, such as Docker Hub, and can be easily downloaded and used to create new containers. They are used to package and distribute software in a consistent and portable way, making it easy to deploy and run applications in different environments.

How to create Docker images

We can create an image using a Dockerfile. A Dockerfile is a script that contains instructions on how to build your image.

Here is the basic steps to create a Docker image:

Create a new folder and navigate to it.
Create a new file called Dockerfile and open it in a text editor.
Use the FROM instruction to specify the base image that your image will be built on.
Use the RUN instruction to execute commands that will be run during the image build process.
Use the COPY instruction to copy files or folders from your host machine to the image.
Use the CMD instruction to specify the command that will be run when a container is created from the image.
Save the Dockerfile.
Open a terminal window and navigate to the folder where the Dockerfile is located.
Run the following command to build the image:

docker build -t my-image .

The -t flag is used to give the image a tag (name), in this case "my-image". The . at the end specifies the current directory as the build context.

Once the image is built, you can run it using the following command:

docker run -p 80:80 my-image

This command runs the image and maps port 80 on the host to port 80 in the container.

Example

Here is an example Dockerfile that creates an image with the latest version of Ubuntu and installs the Apache web server:

FROM ubuntu:latest
RUN apt-get update && apt-get install -y apache2
CMD ["/usr/sbin/apache2ctl", "-D", "FOREGROUND"]

To build the image, open a terminal window and navigate to the directory where the Dockerfile is located. Then run the following command:

docker build -t ubuntu-local .

Next, we will build a docker image for node.js application.
Follow for more.

Getting started with Docker

Pulkit Gupta — Fri, 20 Jan 2023 07:41:35 +0000

What is Docker?

Docker is a platform for developing, shipping, and running applications in containers. Containers are lightweight, portable, and self-sufficient environments that allow developers to package an application with all its dependencies and run it consistently across different environments. Docker provides a command-line interface and API for managing and interacting with containers, as well as tools for building and distributing container images. It is widely used in the software development industry to improve the efficiency and consistency of the development and deployment process.

Why to use Docker?

There are several reasons why developers and organizations use Docker:

Consistency: Docker allows developers to package an application and its dependencies into a container, which ensures that the application runs consistently across different environments.
Isolation: Containers provide a level of isolation between the application and the host system, which can improve security and reduce conflicts between different applications running on the same machine.
Portability: Containers can be easily moved between different environments, such as from a developer's local machine to a staging or production environment, making it easier to manage the application's lifecycle.
Scalability: Docker allows you to easily run multiple instances of a container, which can be useful for scaling an application horizontally.
Resource Efficiency: Docker containers are lightweight, which means they use less resources than traditional virtual machines, making it easier to run multiple containers on a single machine.
Microservices: Docker is widely used in microservices architecture, where each microservice runs in its own container, allowing for better isolation and scalability.
Community: Docker has a large and active community, which means that there are many resources available for learning and troubleshooting.

What are Docker Images?

Docker images are the building blocks of containers in Docker. An image is a lightweight, stand-alone, executable package that includes everything needed to run a piece of software, including the code, runtime, system tools, libraries, and settings.

Images are created using the docker build command, which takes a Dockerfile as input. A Dockerfile is a script that contains instructions for building an image, such as specifying the base image, installing dependencies, and configuring the environment. Once an image is built, it can be run as a container using the docker run command.

Docker images are stored in a registry, such as Docker Hub, which is a centralized repository for storing and distributing images. Developers can push their images to a registry and share them with others, or pull images from a registry to use in their own projects.

Docker images are also layered. Each instruction in a Dockerfile creates a new image layer, and each layer is cached. It allows reusing the layer for multiple images. This means that if multiple images use the same base image, only one copy of the base image needs to be stored on the host. This makes images lightweight, and fast to transfer.

What are Docker Containers?

Docker containers are the instances of Docker images. They are lightweight, standalone, and executable packages that include everything needed to run a piece of software, including the code, runtime, system tools, libraries, and settings.

When you run a container, Docker creates a container object and starts the container process. The container process runs the application and its dependencies inside the container. Containers share the host system's kernel, but they have their own file system, network, and process space.

You can start, stop, move, or delete a container using the docker command-line interface. Containers can also be managed using the Docker API and various tools that integrate with the API.

Containers are isolated from each other and the host system, which means that they can't interfere with other containers or the host system, and vice versa. This isolation provides a level of security, and allows multiple containers to run on the same host without conflicts.

Containers are also ephemeral, which means that they don't persist data or state. Any changes made to a container during its lifetime are lost when the container is deleted. To persist data, you can use Docker Volumes or bind-mounts to connect a container to a directory on the host system.

This concludes our basic introduction to Docker. Up next, we'll look at how to install Docker on your machine and create a Docker image.

Follow for more.

Coding Period GSoC'22 | Week 10 + 11 + 12

Pulkit Gupta — Thu, 08 Sep 2022 07:08:10 +0000

I am sharing my progress for Weeks 10 and 11 in this blog.

Task Completed

By now, we have completed following tasks:

Week In Review

Completed Mobile Touch Compatibility task for simulator and finally got Pull Request merged in Primary codebase 🎉.

Now we can simulate circuits from our mobile or tablet.

Pull Requests

Future Plan

Currently, we are working on Custom Dialog Box task 🚀. Hopefully we will complete Custom Dialog task by next week 🥳.

That's all for now; stay tuned for more updates😉.

Thank You

Coding Period GSoC'22 | Week 7 + 8 + 9

Pulkit Gupta — Sat, 20 Aug 2022 15:34:20 +0000

I will share my progress for Weeks 7, 8 and 9 in this blog.

Journey so far

For me, GSoC'22 journey is going smoothly. Everything was easy to understand and my mentor helped me in every way possible. The community was a great support in the whole process.

I also passed my mid-term evaluation 🥳.

Completed Tasks

By now, we have completed Simulator Testing and Importing and Exporting of circuit Files tasks and working on other tasks as well.

Future Plan

We are working on Mobile Touch Compatibility Task and started working on Custom Dialog Box task 🚀. Hopefully we will complete Touch Compatibility Task by the next week 🥳.

Pull Requests

Mobile Touch compatibility

That's all for now; stay tuned for more updates😉.

Thank You

Coding Period GSoC'22 | Week 4 + 5

Pulkit Gupta — Mon, 18 Jul 2022 12:03:54 +0000

This blog is about my progress for week 4 and Week 5. I implemented the import and export of circuit-files and Mobile Touch Compatibility tasks.

Work Done(Week 4 + Week 5)

These two weeks were full of fun and learning new things. It began with the completion of the import and export of circuit-files task. In the fifth week of the coding period, I and Aman started working on the Mobile Touch Compatibility task. We also had a meeting with mentors to discuss about the Touch Compatibility task.

Work Sample :

Open Pull Requests

What Next...?

We will complete the Mobile Touch Compatibility task and will fix the codeClimate issues .
After completing the above tasks, we will start with my next task which is custom alert and prompt dialog boxes 🎉.

That's all for now; stay tuned for more updates😉.

Coding Period GSoC'22 | Week 2 + 3

Pulkit Gupta — Sun, 03 Jul 2022 18:17:15 +0000

These two weeks were full of fun and learning new things, it began with adding the tests for combinational analysis, bit converters, sub-circuits, and force gates in the second week.

On Saturday, June 25th, we joined a weekly meeting in which all mentors and contributors participated. During this meeting, we contributors presented our work and received guidance from the mentors.

As we entered the third week, me and my mentor decided to review our plans and to begin with the second task, which is the import and export of circuitFiles.

Work done(Week 2 + Week 3)

The second task, import & export of circuitFiles, is now being taken on, as the Simulator Testing task is almost finished 🎯 .

Link to Pull Request's

What Next...?

We will focus on updating the documentation for simulator testing and completing the importing and exporting of circuitFiles during the next few weeks.

Completion of Import and Export of CircuitFiles.
Complete documentation stuff for Simulator Testing Part.

That's all for now; this series will go on.