DEV Community: Arpit Malik

Title: How I Cracked My Coding Interviews with a Simple Pattern-Based DSA Approach

Arpit Malik — Wed, 13 Aug 2025 08:20:01 +0000

(and How You Can Too)

...

You’ve probably seen this before:
You open a DSA question, stare at it for 20 minutes, and then… Google the solution.

...

The problem?
You’re learning problems, not patterns.

...

When I was preparing for my interviews, I realized something game-changing:
Almost every coding problem falls under a repeatable pattern.

...

Instead of trying to “learn everything,” I focused on:

Mastering Time Complexity Basics
Cracking problems with Kadane’s Algorithm
Moving up to Two Pointers, Sliding Window, Binary Search on Answer
Then tackling Graphs, Tries, and Competitive Programming problems.

...

Why Patterns Work Better Than Random Practice

You solve faster because you’ve seen the core idea before.
You can adapt the pattern to multiple variations.
You feel confident in interviews — even with new problems.

...

What I’ve Created for You

I’ve put together my personal DSA Pattern Notes + 150 Interview Problems in a clean, structured format on Notion.

This includes:

Step-by-step explanations
Time & space complexity analysis
Example problems from LeetCode, Codeforces, and InterviewBit
My CP-ready templates in JavaScript, Java, and C++

...

How to Get It

I’m making it available for a small one-time payment — because good preparation saves months of job hunting.
You’ll get lifetime access + updates whenever I add new problems.

🔗 Get the Complete DSA Patterns & Notes here

💬 If you’ve ever felt stuck in your DSA prep, drop a comment with your biggest struggle — I might make my next free guide about it.

Creating a React and Typescript app with Webpack

Arpit Malik — Tue, 23 Apr 2024 03:25:46 +0000

In a previous article, I went over how you can setup a simple React app with just Webpack and Babel. But what if you also want to enable Typescript for your project?

This article goes over how to add Typescript support to a simple React + Webpack project.

Step 1: Install Typescript and type definitions

The first step is to just install Typescript:


npm install typescript --save-dev

Then, you'll be required to install the type definitions for all the libraries that you already use. Usually, these would be:


npm install @types/node @types/react @types/react-dom @types/jest --save-dev

Step 2: Configure Webpack

For Webpack to be able to process Typescript files, we will first need to install a custom loader.

There are several available, but we’ll use ts-loader for our setup:


npm install ts-loader --save-dev

Next, we need to tell Webpack to process TS files as well. For this, we can update the webpack.config.js file to also support ts and tsx extensions:


// webpack.config.js

{
  // ...,
  module: {
    rules: [
      // `js` and `jsx` files are parsed using `babel-loader`
      {
        test: /\.(js|jsx)$/, 
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      // `ts` and `tsx` files are parsed using `ts-loader`
      { 
        test: /\.(ts|tsx)$/, 
        exclude: /node_modules/,
        use: ["ts-loader"],
      }
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],    
  },
}

Step 3: Configure Typescript

The Typescript compiler supports several options for how to treat the code, which are defined in a tsconfig.json file in the root of the project.

Let’s create one for this project as well:


// tsconfig.json

{
  "compilerOptions": {
    "jsx": "react",
    "noImplicitAny": true,
    "module": "ES6",
    "target": "ES5",
    "outDir": "./build/",
    "preserveConstEnums": true,
    "removeComments": true,
    "sourceMap": true
  }
}

For the purpose of this tutorial, I have just added the minimal settings that are required for the React + TS + Webpack integration, but you can learn more about all the options available in the official documentation.

Step 4: Start using Typescript

If you already have some JS files in your project, now is a good time to change their extensions from js to ts and from jsx to tsx!

Then, restart the app and you should see everything still working ✨

Thats it!

Creating a React app with Webpack

Arpit Malik — Mon, 22 Apr 2024 18:46:40 +0000

Simple step by step walk through of setting up a React app with Webpack

Sometimes you want to get started with React but don’t want all the bloat of create-react-app or some other boilerplate. Here's a step by step walk through of how to set to setup React with just Webpack!

What the project will look like when it’s done

This guide will follow the conventions already established by create-react-app - e.g. build folder is called build, static assets are under public, etc.

At the end, this is the folder structure we’ll have


- build_utils
  - config
    - commonPaths.js
    - env.js
- public
  - index.html
- src
  - App.jsx
  - index.js
.babelrc
package.json
webpack.config.js

We’ll go step by step and check that everything works after every stage:

Basic scaffolding: create project folder and serve plain HTML
Add Webpack and bundle a simple JS file
Add Babel for ES6 support
Add React

Without further ado, let’s get started!

Step 1: Base scaffolding

First step is to create the project folder and add a plain html file.

To create the project and initialize the package.json, run these commands:


mkdir react-webpack
cd react-webpack
npm init -y

Then, add the main index html file - it usually sits in the public directory. So, let's do that:


mkdir public
touch public/index.html

Tip: You can open the project in VSCode by typing code . in the project folder and manually create the public folder from there

The index.html will just contain the base HTML5 boilerplate:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
    name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no"
    />
    <meta
    httpEquiv="Cache-Control"
    content="no-cache, no-store, must-revalidate"
    />
    <title>React + Webpack</title>
  </head>
  <body>
    <h1>Hello React + Webpack!</h1>
  </body>
</html>

Tip: In VSCode, if you type html:5 and hit tab, VSCode will create the index.html contents for you!

Now let’s check it by just serving the HTML we just created with npm serve.


npx serve public

And it does! If you navigate to http://localhost:3000, you should see the html we just added.

Tip: If npx serve public fails for you with Must use import to load ES Module error, check your node version with the help of node -v and make sure you're using at least Node 16 (latest LTS).

Step 2: Adding Webpack

For this section, it’s best to just follow the latest official Webpack docs.

First, install Webpack:


npm install webpack webpack-cli --save-dev

Next, let's create a simple JS file that we can configure Webpack to bundle:


mkdir src
touch src/index.js

We can just create a div with a hello message and add it to the document:


const helloDiv = document.createElement("div");
helloDiv.innerHTML = "Hello from Javascript!";
document.body.append(helloDiv);

Then, we need to configure Webpack by creating a webpack.config.js file in the root of the project and commonPaths.js in build_utils/config:


// webpack.config.js

const path = require("path");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
};

// commonPaths.js

const path = require("path");

const PROJECT_ROOT = path.resolve(__dirname, "../../");

module.exports = {
  projectRootPath: PROJECT_ROOT,
  entryPath: path.join(PROJECT_ROOT, "src", "index.js"),
  outputPath: path.join(PROJECT_ROOT, "build"),
  appEntryPath: path.join(PROJECT_ROOT, "src"),
  buildUtilsPath: path.join(PROJECT_ROOT, "build_utils"),
};

Finally, in package.json, add a new build script:


"scripts": {
    "build": "webpack"
},

Now, let's try it out! After running npm run build, you should see a new folder was created, called build, with a main.js file in it!

Tip: Add the build folder to .gitignore to not commit it by accident. And if you haven't already, make sure to also ignore the node_modules folder.

Next, we need to move the static assets to the bundle. More specifically, we want to also include the index.html file in the build folder.

Easiest way to do this is with the HtmlWebpackPlugin.


npm install html-webpack-plugin --save-dev

And update the webpack.config.js file:


// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
    }),
  ],
};

This will copy the file under public/index.html, copy it to the build folder and inject a link to the bundled JS file (main.js).

Let’s try it out!


npm run build
npx serve build

And it works! You should now also see the message “Hello from Javascript” :D

Adding Webpack dev server

So far, it was ok to just use npx serve to check our app works. But in real life, it's easier to just use the webpack-dev-server, so let's add that as well.


npm install --save-dev webpack-dev-server

Then, configure it in the Webpack config:


// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

const port = process.env.PORT || 3000;

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
    }),
  ],
  devServer: {
    port: port,
    static: {
      directory: commonPaths.outputPath,
    },
    historyApiFallback: {
      index: "index.html",
    },
    webSocketServer: false,
  },
};

And, then add npm run start script to package.json and while we're there, pass in the right --mode:


{
  // ...,
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack serve --mode development"
  }
}

Finally, check that it works: run npm run start, open http://localhost:3000 and check the app still works as before.

Step 3: Adding Babel

This is useful for allowing us to use all ES6 features and having them transpiled down to JS versions that all browsers can understand. (If you want to learn more about what Babel preset-env is and why it's useful, the article by Jacob Lind is a great overview).

First, let’s install the required packages:


npm i @babel/core @babel/preset-env babel-loader --save-dev

Next, update the Webpack config to tell it to pass the files through Babel when bundling:


// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

const port = process.env.PORT || 3000;

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
    }),
  ],
  devServer: {
    port: port,
    static: {
      directory: commonPaths.outputPath,
    },
    historyApiFallback: {
      index: "index.html",
    },
    webSocketServer: false,
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/, // exclude node_modules
        use: ["babel-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js"],
  },
};

Then, create the Babel config file — .babelrc. This is where we configure Babel to apply the preset-env transform.


// .babelrc

{
  "presets": [
    "@babel/preset-env"
  ]
}

Optionally, update the index.js to contain some ES6 features that wouldn't work without Babel 😀 (actually they do work in most browsers, but for example IE still doesn't support Array.fill).


// Use a feature that needs Babel to work in all browsers :)
// arrow functions + Array fill

const sayHelloManyTimes = (times) =>
  new Array(times).fill(1).map((_, i) => `Hello ${i + 1}`);

const helloDiv = document.createElement("div");
helloDiv.innerHTML = sayHelloManyTimes(10).join("<br/>");
document.body.append(helloDiv);

Finally, let’s check everything works — run npm run start and check the app correctly runs:

Step 4: Add React

Finally, we can add React 😅

First, install it:


npm i react react-dom --save
npm i @babel/preset-react --save-dev

Then, update the .babelrc file to also apply the preset-react transform. This is needed, among other things, to support JSX.


// .babelrc

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

Tip: Specifying the preset-react runtime as automatic enables a feature that no longer requires importing React on top of every file.

Also, we need to update the Webpack config to pass jsx files through Babel as well:


// webpack.config.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const package = require("./package.json");
const commonPaths = require("./build_utils/config/commonPaths");

const isDebug = !process.argv.includes("release");

const port = process.env.PORT || 3000;

module.exports = {
  entry: commonPaths.entryPath,
  output: {
    uniqueName: package.name,
    publicPath: "/",
    path: commonPaths.outputPath,
    filename: `${package.version}/js/[name].[chunkhash:8].js`,
    chunkFilename: `${package.version}/js/[name].[chunkhash:8].js`,
    assetModuleFilename: isDebug
      ? `images/[path][name].[contenthash:8][ext]`
      : `images/[path][contenthash:8][ext]`,
    crossOriginLoading: "anonymous",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
      filename: "index.html",
    }),
  ],
  devServer: {
    port: port,
    static: {
      directory: commonPaths.outputPath,
    },
    historyApiFallback: {
      index: "index.html",
    },
    webSocketServer: false,
  },
   module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/, // exclude node_modules
        use: ["babel-loader"],
      },
    ],
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
};

Next, let’s create a React component, so we can check that everything works:


// src/App.jsx

const App = () => <h1>Hello from React!</h1>;

export default App;

And add it to the main app file:


// index.js

import { createRoot } from "react-dom/client";

import App from "./App.jsx";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);

Note we’re using the new React 18 syntax with createRoot.

Finally, we also update the index.html to provide a "root" node for the app:


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
    name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1,user-scalable=no"
    />
    <meta
    httpEquiv="Cache-Control"
    content="no-cache, no-store, must-revalidate"
    />
    <title>React + Webpack</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Let’s check that it works — run npm run start and you should see "Hello from React!":

Also, check there are no errors in the console.

You can also check that the app correctly runs in production, by running npm run build and then npx serve build.

That’s it!