DEV Community: Riddhi Agrawal

[Boost]

Riddhi Agrawal — Sat, 15 Aug 2026 20:11:07 +0000

Riddhi Agrawal

Aug 15

I Miss Being a Coder in the Age of AI !!

#ai #coding #programming #sideprojects

3 min read

I Miss Being a Coder in the Age of AI !!

Riddhi Agrawal — Sat, 15 Aug 2026 16:26:48 +0000

In this whole AI-written-code era, I've started feeling a little lost.

New AI tools, frameworks, projects, and software seem to be launching every hour. And somewhere in all of this, I started missing something very simple: writing code myself!

I miss brainstorming an idea, getting stuck on a problem, rummaging through piles of Stack Overflow tabs at 2 AM, trying things that made absolutely no sense, and finally figuring out what was wrong.

That feeling when something you've been struggling with for hours finally works? That dopamine hit.

So over the past few weeks, I've been looking for something I could get genuinely hooked on again. Something that would force me to sit down, think, experiment, break things, and actually write code.

And then an idea came up in my mind:

Why not build my own browser engine in Rust?

Not exactly a unique idea , there's already a real-life project, Servo, originally started by Mozilla. But as a frontend developer, building a browser engine from scratch felt crazy enough to be interesting. And I wanted to build it in Rust (why? just because I'm fascinated with the language).

There's just one small problem: I have a very basic understanding of Rust. So I'll be learning it along the way.

Why a Browser Engine?

I've always wondered what actually happens between writing HTML/CSS and seeing it appear on the screen.

How does HTML become a DOM?
How does CSS get parsed and applied?
How does the browser figure out where everything goes, and eventually turn it into pixels?

I want to understand that by building a tiny version of it myself. Not because I think I can build a better browser , but because building one is probably a pretty good way to understand one.

AI Will Be Part of the Process

I'll absolutely be using AI. It'll help me understand concepts, learn Rust, break down problems, think through architecture, and get unstuck.

But I'll try to write as much of the actual code myself as possible.

The goal isn't the final codebase. The goal is the learning.

The Plan

My current milestones are (as helped by Claude to break it down for me):

Project Skeleton
Parse HTML → DOM Tree
Parse CSS → Rules
Style Resolution
Block Layout
Paint
Text Rendering
Basic Interactivity

I'm sure this list will change as I go.

The Real Goal

I'm not trying to build the next Chrome or Firefox. This is purely an educational project.

More than anything, I want to keep the coder in me alive. With AI making it incredibly easy to jump from an idea to working code, I don't want to lose the joy of figuring things out myself.

The bugs.
The bad code.
The documentation rabbit holes.
The late nights.
And that moment when it finally works.

I'll be documenting each milestone, what I learn, and hopefully some of the things that go horribly wrong along the way.

Maybe this project goes nowhere. Maybe I abandon it halfway through. I'm okay with that , because the goal isn't really to build a browser.

Either way, I want to document the process.

Because with AI making it easier than ever to generate code, I think it’s worth occasionally slowing down and remembering what it feels like to actually write it.

Here’s to getting that coding dopamine back. 🚀

And yes, I might take a little help from ChatGPT to turn some of those learnings into articles. 😄

Create React App without create-react-app (Typescript)

Riddhi Agrawal — Mon, 16 Aug 2021 10:55:14 +0000

In my previous post on Create react App from scratch using JS , I got positive responses and many comments on making a post on typescript, hence i decided to do the same task using Typescript with Fast Refresh. Hope you would like this as well! :)

The simplest way to create a basic react app is to run npx create-react-app my-app --template typescript and boom your basic react app will be created but have you ever wondered, can I do that whole process on my own? Well yes, you can.

Pre-requisites: Node js and Vs code. That’s all you need.

Let’s go..!!

1. Open your vs code terminal and run the below commands:

npm init -y

By running this command package.json will be formed, which holds important information required before publishing to NPM and defines attributes of a project that is used by npm to install dependencies, run scripts, and identify the entry point of the project.

npm install react react-dom

React will be needed to create user interfaces whereas React-Dom is a glue between React and browser DOM.

After running this command, node_modules and package.lock.json will be created. Node modules hold all the dependencies downloaded from npm. Package.lock.json keeps track of the exact version of every package installed and the dependency tree of every package.

npm install --save-dev typescript @types/react @types/react-dom

To get the support of typescript the above command is used along with types.

npm install --save-dev @babel/core @babel/preset-env  @babel/preset-react @babel/preset-typescript babel-loader

Babel is a JS Compiler that converts modern JS code into vanilla Js code that can be supported in older browsers and environments. Babel-loader transpile JS files using Babel and webpack. Babel’s preset-typescript is used to generate your JS files and you get the ability to work with existing build pipelines.

For further reading visit https://babeljs.io/docs/en/

2.Create a file .babelrc and copy the code below

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

This file is a configuration file for babel whereas presets act as a shareable set of Babel plugins and/or config options.

3.Create a file tsconfig.json and copy the code below

{
    "compilerOptions": {
        "target": "ES5" ,
        "module": "ESNext" ,
        "moduleResolution": "node" ,
        "lib": [
            "DOM",
            "ESNext"
        ] ,
        "jsx": "react-jsx" ,
        "noEmit": true ,
        "isolatedModules": true ,
        "esModuleInterop": true ,
        "strict": true ,
        "skipLibCheck": true ,
        "forceConsistentCasingInFileNames": true ,
        "resolveJsonModule": true
    },
    "include": [
        "src/**/*"
    ]
}

This file is a configuration file for typescript. The presence of a tsconfig.json file in a directory indicates that the directory is the root of a TypeScript project. The tsconfig.json file specifies the root files and the compiler options required to compile the project.

npm install --save-dev webpack webpack-cli @pmmmwh/react-refresh-webpack-plugin react-refresh

Webpack is a tool that lets you compile JavaScript modules, also known as module bundlers.Given a large number of files, it generates a single file (or a few files) that run your app. Webpack-CLI provides the interface of options webpack uses in its configuration file.React-refresh-webpack-plugin and React-refresh helps in fast Refresh with state retention property.

npm install --save-dev html-webpack-plugin style-loader css-loader file-loader

All these are loaders that help in bundling various files along with webpack.

4.Create a file webpack.config.js and copy the code below

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const path = require("path");
const webpack = require("webpack");

const isDevelopment = process.env.NODE_ENV !== "production";

module.exports = {
  mode: isDevelopment ? "development" : "production",
  entry: "./src/index.tsx",
  devServer: {
    hot: true,
  },
  target: "web",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    isDevelopment && new webpack.HotModuleReplacementPlugin(),
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.ts$|tsx/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
        options: {
          plugins: [
            isDevelopment && require.resolve("react-refresh/babel"),
          ].filter(Boolean),
        },
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
      },
    ],
  },
};

This config file provides all the required information like an entry point,bundle output filename and path , plugins and various loaders that are being used for webpack to bundle and resolve various kinds of files.
For further reading visit: https://webpack.js.org/concepts/

5.Create a folder “src” and inside that create a file “App.tsx”

import React from "react";
import  Counter  from "./Counter";
 const App=()=>{
    return (
    <div>
    <h1>Create React App from Scratch Using Typescript..!!</h1>
    <Counter/>
    </div>
    )
}
export default App;

This is a basic arrow function that returns Create React App from Scratch Using Typescript wrapped inside an h1 tag along with Counter Component.

6.Create another file "Counter.tsx " inside “src” folder.

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)
  return (
    <div>
      <h3>Update the count and edit src/App.tsx, state is preserved</h3>
      <button onClick={() => setCount((c) => c + 1)}>Count - {count}</button>
    </div>
  )
}

export default Counter;

This component returns a basic button with Counter increasing on every click. This components uses react hook "useState" to store the current value of counter.

7.Create a file “index.tsx” which will be the entry point of our code.

import React from "react";
import ReactDOM from "react-dom";
import  App  from "./App";

ReactDOM.render(<App/>,document.querySelector("#root"))

8.Create another file “index.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.0">
    <title>React with Typescript </title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

In our configuration, we specified that it should read ./src/index.HTML as a template. We have also set the inject option to true. With that option, Html-webpack-plugin adds a script tag with the path provided by Webpack right into the final HTML page. This final page is the one you get in dist/index.html after running npm run build, and the one that gets served from / when you run npm start.

9.In your package.json write the following lines of code in place of the script tag

"scripts": {
   "start": "webpack serve  --hot --open",
    "build": "webpack --config webpack.config.js --mode development"
  }

You can start your react app by writing npm start and you will see a blank page with Hello React written on it.

Finally you are done ..!!

As Fast Refresh was included, even after doing some changes the state would be preserved and the previous state would not be lost. This comes in very handy during development.

It was a longer process than creating React app from scratch with Js as Fast Refresh was included and that’s what create-react-app makes it easier for you. It automates this whole hefty process of making every single file by replacing it with just a single command .

Create React App without create-react-app !

Riddhi Agrawal — Fri, 13 Aug 2021 10:22:40 +0000

The simplest way to create a basic react app is to run npx create-react-app and boom your basic react app will be created but have you ever wondered, can I do that whole process on my own? Well yes, you can.

Pre-requisites: Node js and Vs code. That’s all you need.

Let’s do it ..!!!

1. Open your vs code terminal and run the below commands:

npm init -y

By running this command package.json will be formed which holds important information which is required before publishing to NPM, and also defines attributes of a project that is used by npm to install dependencies, run scripts, and identify the entry point of the project.

npm install react react-dom

React will be needed to create user interfaces whereas React-Dom is a glue between React and browser DOM.

After running this command, node_modules and package.lock.json will be created. Node modules hold all the dependencies downloaded from npm. Package.lock.json keeps track of the exact version of every package that is installed as well as the dependency tree of every package.

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader

Babel is a JS Compiler that converts modern JS code into vanilla Js code that can be supported in older browsers and environments. Babel-loader transpile JS files using Babel and webpack.
For further reading visit https://babeljs.io/docs/en/

2.Create a file .babelrc and copy the code below

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

This file is a configuration file for babel whereas presets act as a shareable set of Babel plugins and/or config options.

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

npm install --save-dev html-webpack-plugin style-loader css-loader file-loader

All these are loaders that help in bundling various files along with webpack.

3.Create a file webpack.config.js and copy the code below

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

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
      }, 
    ],
  },
};

4.Create a folder “src” and inside that create a file “App.js”

import React from "react";

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

export default App;

This is a basic arrow function that returns Hello React wrapped inside an h1 tag.

5.Create a file “index.js” that will be the entry point of our code.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App/>,document.querySelector("#root"));

6.Create another file “index.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.0">
    <title>React</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

In our configuration, we specified that it should read ./src/index.HTML as a template. We have also set the inject option to true. With that option, Html-webpack-plugin adds a script with the path provided by Webpack right into the final HTML page. This final page is the one you get in dist/index.html after running npm run build, and the one that gets served from / when you run npm start.

7.In your package.json write the following lines of code in place of the script tag

"scripts": {
    "start": "webpack serve  --hot --open",
    "build": "webpack --config webpack.config.js --mode production"
  }

You can start your react app by writing npm start and you will see a blank page with Hello React written on it.

And you are done ..!!

Now you can customize your React app and add various components to it .

Though it was quite a long process and that’s what create-react-app makes it easier for you. It automates this whole hefty process of making every single file by replacing it with just a single command npx create-react-app filename.