Forem: Nitin Kumar Yadav

"I Built a Web Browser from Scratch in 42 Days — No Libraries, Just Node.js"

Nitin Kumar Yadav — Sat, 04 Apr 2026 19:02:26 +0000

I Built a Web Browser from Scratch in 42 Days

42 days ago I made a decision.

I wanted to understand how the internet actually works. Not just use it. Not just build on top of it. Actually understand it — at the wire level.

So I started building a web browser from scratch. In Node.js. No external libraries. Every line written by hand.

I called it Courage.

What Courage can do today

...

Parse URLs into protocol, host, port, path
Open raw TCP and TLS connections
Build and send HTTP GET requests
Parse HTTP responses including chunked encoding
Tokenize raw HTML character by character
Build a DOM tree using a stack
Match CSS rules to DOM nodes
Calculate layout (x, y, width, height) for every element
Paint rectangles and text on a Canvas using Electron
Execute JavaScript via eval()
Navigate with back, forward, reload
Multiple tabs with independent history
Render real websites — today it rendered Wikipedia

What I learned

Before this project I knew how to use the web. Now I understand it.

TCP handshakes aren't magic. HTTP is just text. HTML is just tokens. CSS is just rules. A browser is just a pipeline.

Every abstraction that used to feel like magic now makes complete sense.

The most surprising thing — a layout engine is just two passes over a tree. Width flows down from parent to child. Height bubbles up from child to parent. That's it. That's what every browser does.

The hard days

Day 9 — built a DOM tree using a stack. Failed 6 times before it clicked.

Day 21 — layout engine born. Took 3 days to get width and height right.

Day 42 — fixed a bug where CSS inside style tags was breaking the entire DOM tree because my tokenizer treated > in CSS selectors as HTML tag endings.

Every bug taught me something real.

The code

github.com/Nitin-kumar-yadav1307/Courage

42 days. No libraries. Every line by hand.

This is just the beginning.

BugVaulty — Auto-Track Every Error to Notion with AI Solutions 🐛

Nitin Kumar Yadav — Sat, 28 Mar 2026 07:23:31 +0000

🤖 This is a submission for the Notion MCP Challenge

What I Built

BugVaulty is an npm package that automatically catches
every error in your Node.js, Express, or React app — analyzes
it with AI — and saves it to Notion automatically.

No manual work. One line of code. Forever.

In my early coding journey, I used to write down errors because it's one of the best ways to debug. If you already know how an error happened, it becomes easier to fix.

Also, if you're working in a team, everyone can see the errors and help debug them, so you don't have to search the same error again and again on Google or AI.

So I automated this process using Notion, MCP, and AI. Once you install and configure this package, all the errors from your terminal will automatically be tracked in your Notion.

How it works:

Error happens in your app
        ↓
BugVaulty catches it automatically
        ↓
AI analyzes it (Groq / OpenAI / Claude)
        ↓
Notion page created automatically with:
  📅 Date & Time
  📁 File path & line number  
  ❌ What went wrong
  💡 Step by step solution
  🔧 Code fix
  🚀 How to avoid it
  ⭐ Difficulty rating
  🏷️ Tags

One line setup:

require('dotenv').config();
const bugvaulty = require('bugvaulty');

bugvaulty.init();
// That's it! All errors now tracked to Notion automatically

Supports 3 AI providers:

// Free option - Groq
bugvaulty.init({ ai: { provider: 'groq', apiKey: 'gsk_xxx' }})

// OpenAI
bugvaulty.init({ ai: { provider: 'openai', apiKey: 'sk-xxx' }})

// Anthropic Claude
bugvaulty.init({ ai: { provider: 'claude', apiKey: 'sk-ant-xxx' }})

Works with Express:

app.use(bugvaulty.expressMiddleware());

Works with React:

import { BugVaultyProvider } from 'bugvaulty/react';

<BugVaultyProvider keys={{...}}>
  <App />
</BugVaultyProvider>

What Notion looks like after an error:

Every project gets its own page in Notion — detected automatically from your package.json name!

Video Demo

Show us the code

📦 npm package

💻 GitHub

Install it:

npm install bugvaulty

How I Used Notion MCP

Notion MCP is the entire backbone of BugVaulty.

Instead of building a custom database or dashboard,
I used Notion as the storage and display layer via
the Notion API and MCP.

Here is what Notion MCP unlocks:

1. Auto project organization
BugVaulty detects your project name from package.json
and automatically creates a dedicated Notion page for
that project. Every error goes under the right project
automatically.

2. Rich structured pages
Each error is saved as a beautifully structured Notion
page with headings, bullet points, and code blocks —
not just plain text.

3. Searchable knowledge base
Because everything is in Notion, you can search your
entire error history instantly. Next time you hit the
same error — your own solution is already there.

4. Zero infrastructure
No custom dashboard needed. No database to maintain.
Notion IS the interface. This is what makes Notion MCP
so powerful for developer tools.

BugVaulty + Notion MCP = your personal AI debugging
brain that never forgets. 🧠

⚡ GitZip — Turning Git Commands into One-Word Spells with GitHub Copilot CLI

Nitin Kumar Yadav — Tue, 10 Feb 2026 05:11:28 +0000

What I Built

GitZip is a CLI productivity tool that turns long and hard-to-remember Git commands into short, reusable one-word "spells".

Instead of repeatedly typing complex Git commands or copy-pasting them from Google or ChatGPT, developers can save a command once and reuse it instantly.

For example, instead of running:

git reset --soft HEAD~1

I can save it as a spell called gundo and run it anytime with a single word.

GitZip focuses on improving developer productivity, reducing mistakes, and making Git easier to use — especially for beginners.

Demo

🎥 Demo Video:

for demo video click here

The demo shows:

Creating a Git command spell
Running the spell inside a Git repository
Using gitzip demo, which automatically:
- Initializes a Git repository
- Creates commits
- Creates a spell
- Undoes a commit
- Shows before/after Git logs

This makes it very easy for judges to test and understand the project.

My Experience with GitHub Copilot CLI

GitHub Copilot CLI played an important role in my development workflow.

While building GitZip, I frequently used Copilot (CLI / Chat) to:

Ask for correct Git commands
Understand safer alternatives to risky Git operations
Validate commands before saving them as reusable spells

GitZip is designed around this exact workflow:
Ask GitHub Copilot for a Git command → Save it once → Reuse it forever.

Instead of replacing Copilot, GitZip extends it by making Copilot's output reusable inside the terminal. This helped me build faster, avoid mistakes, and focus on designing a better user experience.

Source Code

🔗 GitHub Repository:

https://github.com/Nitin-kumar-yadav1307/GitZip