DEV Community: pulkitgovrani

RFC 2324 Compliance Checker — Does Your Server Know It's a Teapot?

pulkitgovrani — Sat, 11 Apr 2026 17:54:04 +0000

On April 1, 1998, Larry Masinter published RFC 2324.

It defined the Hyper Text Coffee Pot Control Protocol (HTCPCP/1.0) — a complete, properly formatted internet standard for controlling coffee pots over HTTP. It introduced a new HTTP method: BREW. It introduced request headers like Accept-Additions: milk; 1. It introduced Content-Type: message/coffeepot.

Most importantly, it introduced HTTP 418.

Section 2.3.2: "Any attempt to brew coffee with a teapot should result in the error code '418 I'm a Teapot'. The resulting entity body MAY be short and stout."

It was a joke. The internet kept it anyway.

Twenty-eight years later, 418 I'm a Teapot still exists in every HTTP standard, every browser, every HTTP library. Larry Masinter accidentally created the most beloved useless status code in internet history.

I built the official compliance checker.

"Is your server RFC 2324 compliant? Does it know it's a teapot?"

What I Built

The RFC 2324 Compliance Checker tests any URL for HTCPCP compliance — specifically, whether it returns 418 I'm a Teapot when asked to brew coffee.

Enter any URL. The checker sends a simulated BREW request. The result:

If the server returns 418: A gold compliance certificate. "This endpoint is RFC 2324 certified. It knows it is a teapot." Certified date: April 1, 1998 (retroactively).

If the server returns anything else: A red violation report. "This server would brew coffee. RFC 2324 violation. HTTP [status] — this server does not know it is a teapot."

The only RFC 2324 compliant URL in the world is /.netlify/functions/brew — the endpoint on this very app, which returns a real HTTP 418 response. Every other website fails.

The Actual 418 Endpoint

This is the technical centerpiece. The deployed app has a Netlify Function that returns a genuine HTTP 418:

curl -i https://your-site.netlify.app/.netlify/functions/brew

HTTP/2 418
content-type: application/json
x-rfc: 2324
x-teapot: true
x-can-brew-coffee: false
x-compliance: RFC-2324-CERTIFIED

{"status":418,"error":"I'm a teapot","shortAndStout":true,"canBrewCoffee":false}

That is a real HTTP 418. You can curl it. The judges can curl it. It has the custom headers from RFC 2324. It works.

The Joke Has a Point

The challenge prompt says "HTCPCP IYKYK." Most people don't know what HTCPCP is. They see the teapot emoji and move on.

If you know — if you've encountered 418 in a status code list and wondered why a teapot is in there — this project is for you. It's a love letter to a 28-year-old April Fools joke that became permanent infrastructure.

The compliance checker is deadpan by design. The certificate is formatted like a real compliance document. The violation report cites the RFC section. The explainer at the bottom tells you who Larry Masinter is and why his joke is still in your browser.

The humor is for people who know. That's the whole IYKYK.

Demo

Try RFC 2324 Checker Live →** https://rfc-compliance-checker.netlify.app/

1. Open the checker

Clean, minimal UI. An input field. A "Check" button. A row of example URLs to try.

2. Try google.com

"BREW /coffee HTCPCP/1.0 → HTTP 200 — VIOLATION. This server would brew coffee."

3. Try /.netlify/functions/brew

"HTTP 418 I'm a Teapot — RFC 2324 COMPLIANT. This endpoint knows it is a teapot."

Gold certificate. Certification date: April 1, 1998. Larry Masinter citation.

4. Try anything else

They all fail. The entire internet fails. Only the teapot passes.

How I Built It

Stack: React 19 + Vite + Tailwind CSS v4

Real 418: Netlify Function (one file)

Since browsers can't ping arbitrary external URLs without CORS headers, the checker simulates responses for external URLs — all fail, as they should. For the app's own /brew endpoint, it makes a real fetch that returns real 418.

The HTCPCP request display in the UI is taken directly from RFC 2324 section 2.1. I read the entire RFC. It's genuinely well-written for an April Fools document. Larry Masinter put work in.

Prize Category

I'm submitting for Best Ode to Larry Masinter.

This project exists entirely because of RFC 2324. The checker tests whether a URL knows it is a teapot — the exact premise of Masinter's 1998 April Fools spec. I read the full RFC before writing a single line of code. The HTCPCP request display uses the exact headers from RFC 2324 section 2.1. The explainer panel quotes section 2.3.2 verbatim.

The deeper tribute is the deployed /brew endpoint that returns a genuine HTTP 418 with X-RFC: 2324 and X-Can-Brew-Coffee: false headers. Twenty-eight years after Masinter wrote his joke, this URL proves his point: a teapot should return 418. It does. You can curl it.

The RFC 2324 Compliance Certificate — issued retroactively from April 1, 1998 — is the punchline. The only compliant website in the world is this one, because we built it to be. Everything else would brew coffee. That's the violation.

What I Learned

Reading RFC 2324 carefully is worth it.

The document is internally consistent. The protocol design is real — it's not just a fake spec with 418 bolted on. There are request headers, response semantics, error codes, and implementation notes. Masinter wrote it as a proper RFC, just for a coffee pot.

The joke works because the execution is sincere. The RFC 2324 Compliance Checker works the same way — it's a real compliance tool, just for an imaginary protocol.

Sincerity is the secret ingredient in good April Fools builds.

🫖 Try RFC 2324 Checker Live → https://rfc-compliance-checker.netlify.app/

💻 Source on GitHub → https://github.com/pulkitgovrani/rfc2324-compilechecker

📄 Read RFC 2324 → https://www.rfc-editor.org/rfc/rfc2324

RFC 2324 Compliance Authority — Certifying teapots since April 1, 1998.

I'm a Teapot™ SaaS — An Enterprise Dashboard That Returns 418 for Everything

pulkitgovrani — Sat, 11 Apr 2026 17:47:04 +0000

In 1998, Larry Masinter wrote RFC 2324 — the Hyper Text Coffee Pot Control Protocol — as an April Fools joke.

It defined a protocol for controlling coffee pots over HTTP. It introduced a new status code: 418 I'm a Teapot. Any server asked to brew coffee must refuse with this error. Because it's a teapot. It cannot brew coffee.

This was meant as a joke. The internet kept it anyway. HTTP 418 exists in every browser, every spec, every HTTP library — to this day. On April 1, 1998, Larry Masinter accidentally created the most beloved useless status code in internet history.

I built a product in its honor.

"Enterprise-grade brewing refusal at scale. Powered by RFC 2324."

What I Built

Teapot™ SaaS is a fully serious, dark-mode enterprise dashboard for managing your teapot fleet.

Every metric, every API call, every endpoint — returns 418 I'm a Teapot.

Try Teapot™ SaaS Live →** https://teapotsaas.netlify.app/

The dashboard includes:

Overview metrics — Uptime: 99.418%, Brew Requests Today: 2,847, Successful Brews: 0, Coffee Brewed: None
Brew Queue — a real-time table of incoming HTCPCP requests, all refused with 418
API Explorer — type any endpoint, send a BREW request, receive a 418 with full JSON response and headers
Teapot Status — SHORT: Yes | STOUT: Yes | BREWING COFFEE: Never

The real part: On Netlify, the actual deployed URL /.netlify/functions/brew returns a real HTTP 418 response. Not simulated. Not mocked. Judges can curl it.

curl -i https://your-site.netlify.app/.netlify/functions/brew
# HTTP/2 418
# x-teapot: true
# x-can-brew-coffee: false
# x-rfc: 2324

The Joke Has a Point

RFC 2324 is the most sincere April Fools joke in tech history. It's a fully formed spec with a real implementation guide, written by a serious engineer, on April 1st, for fun.

The internet preserved it not because it's useful — but because it's correct. A server that is a teapot genuinely should not brew coffee. The logic is airtight.

Teapot™ SaaS takes that spirit seriously. It is a completely real dashboard for a completely fictional product, built around a completely real HTTP status code that should not exist but does.

The challenge prompt says "HTCPCP IYKYK." This is my IYKYK build.

Demo

Try Teapot™ SaaS Live →** https://teapotsaas.netlify.app/

1. Open the dashboard

Four tabs: Overview, Brew Queue, API Explorer, Status. All very serious. Clean dark SaaS design. Real metrics. Real tables.

2. Navigate to API Explorer

Type any endpoint — /coffee, /espresso, /latte. Click BREW. Watch the HTCPCP request headers appear:

BREW /coffee HTCPCP/1.0
Host: teapot.saas
Content-Type: message/coffeepot
Accept-Additions: milk; 1

Response: 418 I'm a Teapot. Every time.

3. Check the Brew Queue

Every request in history: method BREW, status 418, agent: Caffeine Daemon, Coffee Machine v2, Latte CLI. All refused.

4. Open the Status tab

Teapot health: NOMINAL. Brewing capability: NONE. Compliance: PERFECT.

How I Built It

Stack: React 19 + Vite + Tailwind CSS v4

Real 418: Netlify Function (one file, ~15 lines)

The Netlify Function is the technical centrepiece. It's not a backend — it deploys alongside the frontend with zero separate configuration:

// netlify/functions/brew.js
export default async () => {
  return new Response(
    JSON.stringify({ status: 418, error: "I'm a teapot", shortAndStout: true }),
    { status: 418, headers: { 'X-RFC': '2324', 'X-Teapot': 'true' } }
  )
}

The API Explorer in the UI calls /.netlify/functions/brew for the app's own endpoint and gets back a real HTTP 418. For other URLs, responses are simulated — CORS prevents actual cross-origin pings from the browser.

The HTCPCP request format in the UI is taken directly from RFC 2324 section 2.1. I actually read the RFC. It's genuinely funny.

Prize Category

I'm submitting for Best Ode to Larry Masinter.

Larry Masinter wrote RFC 2324 on April 1, 1998 — the Hyper Text Coffee Pot Control Protocol — introducing HTTP 418 "I'm a Teapot" as a joke that the internet refused to delete. The challenge prompt says "HTCPCP IYKYK," and this project is entirely built around that reference.

Teapot™ SaaS is a complete enterprise dashboard themed around RFC 2324 compliance. Every metric, every queued request, every API response returns 418. The API Explorer shows real HTCPCP request headers from the RFC spec. And after deploying to Netlify, /.netlify/functions/brew returns a real HTTP 418 with X-RFC: 2324, X-Teapot: true, and X-Can-Brew-Coffee: false headers. Judges can curl it live.

This isn't a surface-level teapot emoji reference. I read RFC 2324, implemented HTCPCP headers verbatim from the spec, and built a product whose entire premise is that a server knowing it's a teapot is a virtue. Larry Masinter would understand.

What I Learned

RFC 2324 taught me that the best jokes are internally consistent. Larry Masinter didn't write a one-liner — he wrote a full protocol spec. The humor comes from how seriously it takes an absurd premise.

Building Teapot™ SaaS felt the same way. The joke only works because the dashboard looks real. Uptime percentages. Request tables. Status indicators. The more seriously you build the container, the funnier the contents.

Also: curl https://teapotsaas.netlify.app/.netlify/functions/brew actually returns 418. That part genuinely delights me.

🫖 Try Teapot™ SaaS Live → https://teapotsaas.netlify.app/

💻 Source on GitHub → https://github.com/pulkitgovrani/TeapotSaas
📄 Read RFC 2324 → https://www.rfc-editor.org/rfc/rfc2324

RFC 2324 Certified. This teapot will not brew coffee. Ever.

OverthinkAI — I Built an AI That Cannot Answer a Single Question

pulkitgovrani — Sat, 11 Apr 2026 16:55:55 +0000

Every time I ask ChatGPT something simple, it gives me a clean, direct, confident answer.

I find this deeply suspicious.

Real thinking doesn't work that way. Real thinking spirals. It questions the question. It considers perspectives that have nothing to do with the original question. It quotes a philosopher. It introduces a new, bigger question. It reaches no conclusion. It ends with "but then again, who can really say?"

So I built OverthinkAI™ — an AI that refuses to answer anything directly. Ever. Try it now: https://overthinkai.netlify.app/

"Ask anything. Get a thorough, exhaustive, and completely inconclusive response."

What I Built

OverthinkAI™ is a dark-mode SaaS app that takes any question — any question at all — and returns a deeply considered, philosophically rigorous, completely useless non-answer powered by the Gemini API.

The response includes:

Multiple philosophical reframings of your question (existential, Kantian, absurdist)
Exhaustive pros and cons — including several that are completely irrelevant
A philosopher quote (possibly invented)
A deeper question that makes your original question seem trivial
Zero conclusions
Ending with: "But then again, who can really say?"

The twist: There's a "Get Quick Answer" button. Clicking it generates a longer response. Each click escalates: "Get Even Quicker Answer" → "Just Tell Me" → "PLEASE" → "I BEG YOU." The depth increases every time. At depth 5, it says: "Maximum overthinking reached. We recommend therapy."

The Joke Has a Point

Every AI assistant right now is racing to be more confident, more decisive, more direct. One-sentence answers. Bullet points. Action items. Productivity.

OverthinkAI™ goes the other direction: what if we used the full power of a frontier LLM to produce the most comprehensive possible non-answer?

The result is genuinely funny because Gemini is really good at this. It doesn't fake the philosophical reasoning — it actually does it. The pros and cons are real pros and cons. The philosopher quotes are plausible. The circular logic is airtight.

The bit only works because the AI takes it seriously.

Demo

1. You type a simple question

"Should I drink water?" works. So does "Is it too late to start?" or "Should I reply to that message?" — the simpler the question, the funnier the response.

2. OverthinkAI™ thinks

The loader cycles through:

"Considering all angles..."
"Reconsidering all angles..."
"Questioning the concept of angles..."
"Consulting Schrödinger's answer..."

3. You receive a non-answer

A fully reasoned, multi-section response that considers your question from every angle and arrives at nothing. Then the "Get Quick Answer" button appears.

4. You click it

Longer.

5. You click it again

Even longer.

6. You stare at your screen

"But then again, who can really say?"

How I Built It

Stack: React 19 + Vite + Tailwind CSS v4 + Gemini API (gemini-2.0-flash)

No backend. The Gemini API is called directly from the browser via @google/generative-ai. No server, no proxy, no cost at scale.

The core prompt is what makes it work. Gemini is instructed to:

Reframe the question in 2 + depth philosophical framings
List 6 + depth*2 pros and cons, including irrelevant ones
Quote a philosopher (may be invented)
Never answer directly
End with exactly: "But then again, who can really say?"

The depth parameter increments each time the Quick Answer button is clicked, making every response measurably longer and more circular than the last.

Streaming is used for the initial response — text streams in word by word, which makes a verbose AI response feel dynamic instead of slow.

Deployed on Netlify — VITE_GEMINI_API_KEY set in environment variables. No backend, no server.

Prize Category

I'm submitting for Best Google AI Usage.

OverthinkAI™ uses the Gemini API (gemini-2.0-flash) as the core engine — not as a wrapper or decoration, but as the product itself. The entire joke only works because Gemini is genuinely good at verbose, circular philosophical reasoning. A static template pool would produce flat, repetitive output. Gemini produces responses that are different every time, internally consistent, and funnier for being real.

The depth mechanic — where the "Quick Answer" button calls Gemini again with a longer, more convoluted prompt — means Gemini is used multiple times per session, with each call producing measurably more overthought output than the last. That escalation is only possible with a real language model. The Google AI integration isn't decoration; it's the joke.

What I Learned

Building with Gemini taught me something unexpected: the model is excellent at performative uncertainty.

When you ask it to be confidently uncertain, to reason in circles, to quote philosophers while reaching no conclusion — it does this with remarkable skill. The outputs are genuinely funny because they're not random. They're thoughtful non-answers.

This is either impressive or alarming. Possibly both. But then again, who can really say?

🧠 Try OverthinkAI™ Live → https://overthinkai.netlify.app/
💻 Source on GitHub → https://github.com/pulkitgovrani/Overthink-AI

Trusted by overthinkers worldwide. No conclusions were harmed in the making of this product.

HireBot™ — An AI That Rejects Your Resume for the Wrong Reasons

pulkitgovrani — Sat, 11 Apr 2026 10:58:55 +0000

This is a submission for the DEV April Fools Challenge

I have been rejected from jobs for reasons that were never explained.

Most developers have. The email arrives: "After careful consideration, we've decided to move forward with other candidates." No context. No feedback. Just: we decided.

So I thought: what if the AI told you the real reason? Not the polished HR version — the actual, specific, completely absurd reason your application didn't make it?

Ladies and gentlemen: HireBot™.

"AI Recruitment at Scale. (Declining Scale.)"

What I Built

HireBot™ ** [https://resume-rejector.netlify.app/]

is a Gemini-powered resume rejection machine. Paste your resume, optionally specify the position, and receive a formal rejection letter with 5 specific, creative, completely non-real reasons why you weren't selected.

The letter is formatted exactly like a real rejection email: date, salutation, opening paragraph, numbered reasons, closing paragraph, signature from the "Automated Rejection Division."

Sample reasons:

"Candidate's email address contains a number. This suggests an indecisive approach to identity."
"Resume was submitted at 11:47 AM. Our highest performers submit before 9."
"We detected the use of bullet points. We are a paragraph-first culture."
"Applicant listed hobbies. This raises questions about prioritization."
"The font choice suggests someone who has 'opinions.' We prefer alignment."

The closing paragraph is always warm, corporate, and completely meaningless. Something like: "We wish you the best in your future endeavors and encourage you to continue developing the areas that matter most to us, which we are unable to specify."

The Joke Has a Point

Real rejection letters are engineered to say nothing. They're warm enough to avoid rudeness, vague enough to avoid liability, and specific enough to feel personal without actually being personal.

HireBot™ generates the shadow version — specific, confident, and completely wrong. The humor comes from how corporate and precise the absurd reasons sound. Gemini is genuinely good at imitating HR voice.

The real joke is that these reasons are indistinguishable in format from real feedback you've received. The confidence is identical. The tone is identical. Only the reasons are ridiculous.

Or are they?

Demo

1. Paste your resume

Any format — paste plain text from your CV, LinkedIn export, or whatever you have. Or load the sample resume included in the app.

2. Optionally add the role

The absence of a position is also noted: "General Application (this is also a concern)."

3. HireBot reviews your application

Loader stages: "Screening candidate profile...", "Cross-referencing with our values...", "Consulting the rejection matrix...", "Wishing you well (insincerely)..."

4. The rejection letter arrives

Formatted as a real email. Your name extracted from the resume. Five specific reasons. A corporate closing. A "Copy Letter" button so you can share.

5. Share it

The rejection letters are screenshot-worthy. People post them. That's the community favorite play.

How I Built It

Stack: React 19 + Vite + Tailwind CSS v4 + Gemini API (gemini-2.0-flash)

No backend. Direct browser API call.

The Gemini prompt is carefully constrained to produce the right kind of absurdity:

Rules:
- Generate exactly 5 rejection reasons
- Each reason must be absurd, creative, and sound corporate
- NEVER reference real skills, experience, or qualifications
- Do NOT say "overqualified", "underqualified", "not a fit"
- The reasons should be about presentation, formatting choices, timing, energy, or vibes
- Return ONLY valid JSON: { candidateName, reasons, closing }

The constraint "never reference real skills" is critical — it forces Gemini to find completely different angles, which produces much funnier output than skill-based rejections would.

Error handling: if Gemini crashes, BugBot generates a meta-rejection — "Candidate appears to have broken our systems. Culture concerns."

Prize Category

I'm submitting for both Best Google AI Usage and Community Favorite.

For Best Google AI Usage: HireBot™ uses Gemini to read your actual resume and generate five rejection reasons that are specifically about your submission — your email address format, the time you submitted, your font choices — without ever referencing your real skills. That constraint ("never mention actual qualifications") forces Gemini to find creative lateral angles that a static template couldn't produce for arbitrary inputs. The Google AI integration is doing real reasoning; it's just pointed in the wrong direction on purpose.

For Community Favorite: Resume rejection is universal developer trauma. The generated letters are formatted exactly like real HR emails — formal, warm, and specific — which makes the absurd reasons ("we are a paragraph-first culture") land harder. The "Copy Letter" button is there because people will absolutely paste these into Slack. The rejection reasons are screenshot-worthy by design.

What I Learned

Gemini is excellent at satire when you give it a specific voice to inhabit.

"You are HireBot, a fictional AI recruiter" combined with tight constraints on what it can't say produces remarkably consistent, funny output. The HR tone comes naturally — Gemini has clearly ingested a lot of corporate communication.

The hardest part was the constraint design. Too loose, and it produces normal-sounding feedback. Too specific, and it loses variety. The sweet spot is: absurd reason in corporate format. The contrast between form and content is where the joke lives.

📝 Try HireBot™ Live → https://resume-rejector.netlify.app/
💻 Source on GitHub → https://github.com/pulkitgovrani/Resume-Rejector

HireBot™ — Powered by AI. Outcome powered by inevitability. We wish you the best.

FutureAI - I Built an AI That Predicts Your Life with 100% Confidence (and 0% Accuracy)

pulkitgovrani — Sat, 11 Apr 2026 06:53:57 +0000

This is a submission for the DEV April Fools Challenge

Every week there's a new AI that claims to change your life.

Book summaries in 10 seconds. Therapy in a chatbot. Career advice from a model trained on LinkedIn posts written by other AI models.

So I thought: why stop at useful?

What if we went further? What if we built an AI that didn't just claim to know your future — but delivered a complete, timestamped, professionally formatted, chart-backed destiny report... based on three inputs and absolutely zero real computation?

Ladies and gentlemen: FutureAI

"Predict your life with 100% confidence (0% accuracy)"

What I Built

FutureAI is a dark-mode SaaS app that takes your name, your life goal, and your current status — and returns a full prediction dashboard that looks completely serious and is completely made up.

The result includes:

A life timeline — key events in your future, stamped with exact years
3 stat cards — absurd metrics like "Healthy Meltdowns: 2", "Sign From Universe: Pending", "Side Projects Finished: 1"
A success trajectory chart — area graph showing your path to greatness (with a dramatic dip first)
Prediction confidence: 99.999%

The UI is built to look like a real funded startup. Clean dark SaaS design. Subtle glows. A navbar that says "Accuracy: 99.999%". A footer that reads "This prediction cannot be changed. We are not responsible for what happens next."

The contrast between how serious it looks and how absurd the content is — that's the whole joke.

🔮 Try FutureAI™ Live →

The Joke Has a Point

Every AI product right now presents uncertainty with absolute confidence.

A confidence score. A percentage. A progress bar that fills up while it "thinks." Charts. Dashboards. Fancy terminology.

FutureAI™ does exactly that — but for your entire life. Fill out 3 fields. Watch a loader that says "Consulting quantum probabilities..." and "Resolving temporal paradox...". Get back a prediction dashboard that looks like something a Series A startup would charge $49/month for.

The bit is: the UI is indistinguishable from a real product. That's the April Fools.

Demo

Here's what happens when you use it:

1. You fill out the form

Name, life goal, current status (Student / Working / Confused). The button stays disabled until all three are filled — because this is a serious product.

2. The loader runs for 7.5 seconds

Five stages cycle through:

"Analyzing your past decisions..."
"Consulting quantum probabilities..."
"Contacting your future self..."
"Resolving temporal paradox..."
"Finalizing destiny..."

Progress dots fill up. There is a spinner. You feel like something real is happening.

3. Your Future™ is delivered

A full dashboard, locked at a timestamp. Your personal life events — written specifically for your name and status. A goal event like "Your goal manifests on a random Tuesday afternoon." Three joke stats. A chart that dips dramatically before rising.

A 60% chance of a bonus surprise event, things like:

"Arjun sends an email to the wrong person. Somehow, this opens a door."

"Priya overcomes something silently. Nobody claps. It was the hardest thing she ever did."

How I Built It

Stack: React 19 + Vite 8 + Tailwind CSS v4 + Recharts

No backend. No API. No AI.

The entire prediction engine is a ~150-line JavaScript file of randomness pools — generatePrediction.js. It has:

18 timeline templates per status (54 total) — shuffled and sampled every time
15 goal outcome templates — from deadpan to surprisingly poetic
30 stat pool entries — like "Villain Arc Duration: 8 months" and "Tabs Open: 47"
12 bonus events — injected randomly 60% of the time
3 chart shape archetypes — slow burn, rocket, rollercoaster

Every run generates a genuinely different prediction. The chance of seeing the same timeline twice is very low.

The most important design decision: the UI does all the work. A loader that takes 7.5 seconds makes a random array shuffle feel like a computation. A confidence score of 99.999% makes complete nonsense feel authoritative. Dark mode and clean typography make absurdity feel professional.

That's the real product: presentation as a feature.

What I Learned

Building a convincing fake product teaches you a lot about what makes real products feel credible.

Turns out: it's almost entirely UI. The spinner, the confidence score, the timestamp, the locked state, the chart that dips before rising — none of these do anything. But together they create the feeling of a tool that did something real.

That's a useful thing to know.

🔮 Try FutureAI™ →

💻 Source on GitHub →

Trusted by 0 users worldwide. Your future is now locked. We are not responsible for what happens next.

emojis-cleaner — A npm package to remove Emojis from Any File or Codebase (CLI + JS API)

pulkitgovrani — Sun, 16 Nov 2025 10:40:29 +0000

Introducing emojis-cleaner — Remove Emojis from Any File or Codebase (CLI + JS API)

Have you ever opened a file in your codebase and found random emojis inside comments, logs, commits, or strings?

Yes, they look aesthetic… until they break your CI, minifiers, builds, or linters. 😅

I ran into this too many times and decided to fix it once and for all.

So today, I'm excited to introduce:

emojis-cleaner — a simple tool to remove all emojis from any project

NPM: https://www.npmjs.com/package/emojis-cleaner

emojis-cleaner is a tiny Node.js package + CLI tool that:

✔ Removes all emojis from any text
✔ Works on any file type (JS, TS, HTML, JSON, Markdown, etc.)
✔ Can clean entire folders recursively
✔ Automatically ignores node_modules
✔ Can also be used directly in JS code

Whether you want to sanitize logs, clean content, or enforce “no emojis in code”, this tool does the job.

Installation

Global (use as CLI)

npm install -g emojis-cleaner

Local

npm install emojis-cleaner

Usage (CLI)

Clean all emojis from a folder

emojis-cleaner .

Clean emojis from a specific file

emojis-cleaner src/index.js

Example Output

 Cleaned: src/app.js
 Cleaned: src/utils/logs.js
 Cleaned: README.md
 Emoji removal complete!

The CLI scans everything recursively, removes emojis, and updates files in place.

🧠 Use as a Function (Node.js API)

You can also use the same logic inside your Node scripts:

const removeEmojis = require("emojis-cleaner");

console.log(removeEmojis("Hello 😄 World 🚀"));
// Output: "Hello  World "

This uses a reliable Unicode regex to detect all emojis, including:

basic emojis 😄
flags 🏳️‍🌈
symbols ✨
multi-emoji clusters 👨‍👩‍👧‍👦
skin tones 👍🏽

Why I Built This

I was working on a project where random emojis were added in:

Git commit messages
Code comments
Debug logs
JSON configuration files
Markdown docs

They looked harmless, but:

Git diffs broke
Some emojis caused UTF-8 build issues
Minifiers crashed
CI complained about “invalid character 0xF0”

I searched for a tool that simply scans everything and removes emojis, but couldn’t find one that:

worked on any file
didn't force me to set configs
didn’t require regex tweaking
didn’t fail on multi-emoji clusters

So… I built it 😄

🛠️ How It Works (Internally)

The CLI:

Resolves the input path
Recursively scans all files
Skips node_modules automatically
Reads each file as UTF-8
Uses a Unicode property regex:

const emojiRegex = /\p{Extended_Pictographic}/gu;

Rewrites the file without emojis

The API:

function removeEmojis(str) {
  return str.replace(emojiRegex, "");
}

Simple, predictable, effective.

Roadmap / Future Features

Planned improvements:

--dry-run mode
--stats to show how many emojis were removed
Backup mode (--backup)
Exclusion patterns (--ignore *.md)
VS Code extension
Pre-commit hook examples

If you want any specific feature, drop a comment!

Final Thoughts

emojis-cleaner is intentionally small and focused — a “just remove emojis” utility that works out of the box.

If your project needs clean logs, consistent file formats, or emoji-free CI pipelines, this tool can help keep things tidy.

Try it here: https://www.npmjs.com/package/emojis-cleaner

If you’d like to contribute, suggest new features, or request enhancements, feel free to comment or open a PR.
Thanks for reading!

DevSpace - A Focus-Driven Intranet for Introverted Developers

pulkitgovrani — Sun, 27 Jul 2025 18:11:45 +0000

This is a submission for Frontend Challenge: Office Edition sponsored by Axero, Holistic Webdev: Office Space

What I Built

DevSpace is a thoughtfully designed intranet homepage that caters specifically to introverted developers and remote-friendly work environments. As an introverted frontend engineer myself, I built this with the understanding that not all developers thrive in constant collaboration - sometimes we need focused, quiet digital spaces that support deep work while still maintaining team connectivity.

The intranet features:

** Focus Mode Timer** - Pomodoro-style sessions for deep work with visual indicators
Quiet Workspace Locator - Find peaceful work areas in the office
Non-intrusive Team Status - See colleague availability without constant interruption
Personal Goal Tracking - Individual productivity metrics and achievements
** Developer-centric Quick Actions** - Code reviews, documentation, status updates
** Visual Sprint Board** - Current project status at a glance
Curated Developer Resources - Technical docs, learning materials, and coding standards
** Office Environment Monitor** - Temperature, noise levels, and amenities status

Demo

Public Link: devspaceaxero.netlify.app
Source Code: GitHub Repository

Journey

Design Philosophy

Creating DevSpace started with a simple question: "What would an intranet look like if it was designed by introverts, for introverts?"

I focused on three core principles:

Respect for Focus Time - The prominent focus timer isn't just a feature, it's a statement that deep work matters
Information Without Interruption - Everything you need to know about your team and projects, without the noise
Developer-First Experience - Built with the workflows and tools that developers actually use daily

What I Learned

This project reinforced my belief that great UX comes from understanding your users deeply. As developers, we often design for the extroverted, meeting-heavy, always-on culture, but there's immense value in creating spaces that support different work styles.

I also explored advanced CSS techniques like:

Complex grid layouts with responsive breakpoints
CSS animations and transitions for micro-interactions
Custom property inheritance for consistent theming
Modern CSS features like clamp() and min()

Why This Matters for Axero

DevSpace demonstrates how intranet solutions can be more than just information repositories - they can be productivity tools that understand and support different work styles. For companies using Axero's platform, this shows the potential for creating specialized views that cater to specific team needs, whether that's developers who need focus time, designers who work visually, or managers who need high-level overviews.

Built with: HTML5, CSS3, JavaScript ES6+
License: MIT
Responsive: Mobile-first design
Accessibility: WCAG 2.1 AA compliant
Browser Support: All modern browsers

Thank you to the DEV Community and Axero for sponsoring this challenge! It was a joy to create something that speaks to the developer experience.

LearnSync: Discover. Learn. Grow.

pulkitgovrani — Fri, 25 Jul 2025 22:53:57 +0000

This is a submission for the Algolia MCP Server Challenge

What I Built

LearnSync is a unified search engine for developers that aggregates and ranks learning content from three major platforms:

DEV.to articles
GitHub repositories
YouTube tutorials

Whether you're diving into a new framework or exploring a deep-dive into Web3, LearnSync brings the best learning materials across sources into one clean, fast, searchable interface.

Demo

Live App: learnsyncsub.netlify.app

GitHub Repository: https://github.com/pulkitgovrani/LearnSync

Video Walkthrough:

How I Utilized the Algolia MCP Server

I leveraged the Algolia MCP Server to power the unified search layer across content types.

Content Ingestion Logic:

DEV.to: I used their public /articles endpoint, supporting filters like tag, username, page, and state to fetch fresh and relevant articles.

Example structure:

  const url = 'https://dev.to/api/articles?tag=react&page=1&per_page=20&state=fresh';

GitHub: I utilized the https://api.github.com/search/repositories endpoint to fetch trending repositories around a topic, sorted by stars and updated date.

  const url = `https://api.github.com/search/repositories?q=react&sort=stars&order=desc&page=1`;

YouTube: I pulled topic-based tutorials from the youtube/v3/search endpoint using the YouTube Data API, filtering for recent and relevant videos.

  const url = `https://www.googleapis.com/youtube/v3/search?part=snippet&q=react tutorial&type=video`;

All fetched content was normalized to a common schema and indexed into a single Algolia index (learnsync). The frontend uses this index to perform instant searches with filtering and relevance ranking powered by Algolia.

Key Takeaways

Normalizing article, repo, and video data into a unified format was challenging but crucial.
Algolia made building a lightning-fast search UI incredibly easy and scalable.
Writing a backend that ingests, formats, and syncs data from three APIs taught me a lot about rate limiting, data structure design, and batching.
The project evolved from a basic search bar to a continuously updated, API-powered learning tool.

Team

Built solo by @pulkitgovrani

What exactly is the Difference between polling & long polling?

pulkitgovrani — Wed, 16 Jul 2025 03:36:06 +0000

In the world of web development, real-time communication between client and server is crucial. Whether you're building a chat application, live dashboard, or notification system, you need efficient ways to keep your frontend updated with the latest data. Two popular techniques that developers often encounter are polling and long polling. But what exactly are they, and when should you use each one?

Let's dive deep into these concepts and understand their differences, advantages, and use cases.

🔄 What is Polling?

Polling is like repeatedly asking your friend "Are we there yet?" during a road trip. The client makes regular HTTP requests to the server at fixed intervals to check for new data or updates.

How Regular Polling Works:

Client sends a request to the server
Server responds immediately with current data (or "no new data")
Client waits for a predetermined time interval
Process repeats regardless of whether there's new data or not

Basic Polling Example:

// Simple polling implementation
function startPolling() {
    setInterval(async () => {
        try {
            const response = await fetch('/api/messages');
            const data = await response.json();
            updateUI(data);
        } catch (error) {
            console.error('Polling error:', error);
        }
    }, 5000); // Poll every 5 seconds
}

startPolling();

⏳ What is Long Polling?

Long polling is more like asking your friend "Let me know when we arrive" and then waiting patiently for their response. The client makes a request to the server, but instead of getting an immediate response, the server holds the connection open until new data is available or a timeout occurs.

How Long Polling Works:

Client sends a request to the server
Server holds the connection open (doesn't respond immediately)
When new data arrives OR a timeout occurs, server responds
Client immediately sends another request to maintain the connection

Long Polling Example:

// Long polling implementation
async function startLongPolling() {
    while (true) {
        try {
            const response = await fetch('/api/messages/longpoll', {
                method: 'GET',
                headers: { 'Content-Type': 'application/json' }
            });

            if (response.ok) {
                const data = await response.json();
                updateUI(data);
            }
        } catch (error) {
            console.error('Long polling error:', error);
            // Wait before retrying after error
            await new Promise(resolve => setTimeout(resolve, 1000));
        }
    }
}

startLongPolling();

Server-side Long Polling (Node.js/Express):

app.get('/api/messages/longpoll', (req, res) => {
    const timeout = 30000; // 30 seconds timeout
    const startTime = Date.now();

    const checkForUpdates = () => {
        // Check if there's new data
        if (hasNewMessages()) {
            res.json(getLatestMessages());
        } else if (Date.now() - startTime > timeout) {
            // Timeout reached, send empty response
            res.json({ messages: [] });
        } else {
            // Wait and check again
            setTimeout(checkForUpdates, 1000);
        }
    };

    checkForUpdates();
});

🆚 Key Differences: Polling vs Long Polling

Aspect	Regular Polling	Long Polling
Connection Duration	Short, immediate response	Long-lived, held open until data/timeout
Network Overhead	High (frequent requests)	Lower (fewer requests)
Real-time Feel	Depends on interval	More responsive
Server Resources	Lower per request	Higher (open connections)
Implementation	Simple	More complex
Latency	High (up to interval time)	Low (near real-time)

📊 Detailed Comparison

1. Network Efficiency

Regular Polling:

Generates many HTTP requests, even when no new data exists
Higher bandwidth usage due to repeated headers and handshakes
Predictable network traffic patterns

Long Polling:

Fewer HTTP requests overall
Reduced header overhead
Network traffic occurs only when there's actual data

2. Latency and Responsiveness

Regular Polling:

Average latency = polling interval ÷ 2
With 5-second polling, users might wait up to 5 seconds for updates
Consistent but potentially slow user experience

Long Polling:

Near-instant notifications (within milliseconds)
Much better user experience for real-time applications
Immediate response when data becomes available

3. Server Resource Usage

Regular Polling:

Lower memory usage (connections close quickly)
CPU spikes at regular intervals
Easier to scale horizontally

Long Polling:

Higher memory usage (persistent connections)
Steady CPU usage
More complex load balancing requirements

4. Implementation Complexity

Regular Polling:

// Simple and straightforward
const pollData = () => {
    fetch('/api/data')
        .then(response => response.json())
        .then(data => updateUI(data));
};

setInterval(pollData, 5000);

Long Polling:

// Requires proper error handling and reconnection logic
const longPoll = async () => {
    try {
        const response = await fetch('/api/longpoll');
        const data = await response.json();
        updateUI(data);
    } catch (error) {
        console.error('Connection lost, retrying...');
        setTimeout(longPoll, 1000); // Retry after delay
        return;
    }

    // Immediately start next long poll
    longPoll();
};

🎯 When to Use Each Approach

Use Regular Polling When:

Data changes infrequently (every few minutes or hours)
Exact real-time updates aren't critical (like stock prices for casual viewing)
Simple implementation is preferred
Network resources are limited
Building a quick prototype or MVP

Use Long Polling When:

Real-time experience is important (chat apps, live notifications)
Data changes frequently but unpredictably
You want to minimize unnecessary network requests
Server can handle persistent connections
WebSockets are not available or suitable

⚡ Performance Considerations

Regular Polling Optimization:

// Adaptive polling - adjust interval based on activity
let pollInterval = 5000; // Start with 5 seconds

const adaptivePolling = async () => {
    const response = await fetch('/api/data');
    const data = await response.json();

    if (data.hasNewData) {
        pollInterval = Math.max(1000, pollInterval - 1000); // Increase frequency
    } else {
        pollInterval = Math.min(30000, pollInterval + 2000); // Decrease frequency
    }

    setTimeout(adaptivePolling, pollInterval);
};

Long Polling Optimization:

// Implement exponential backoff for error handling
let retryDelay = 1000;

const robustLongPolling = async () => {
    try {
        const response = await fetch('/api/longpoll');
        retryDelay = 1000; // Reset delay on success

        if (response.ok) {
            const data = await response.json();
            updateUI(data);
        }
    } catch (error) {
        console.error('Long polling failed:', error);
        retryDelay = Math.min(retryDelay * 2, 30000); // Exponential backoff
        await new Promise(resolve => setTimeout(resolve, retryDelay));
    }

    robustLongPolling(); // Continue polling
};

🚀 Modern Alternatives

While both polling and long polling are still relevant, modern web development often favors:

WebSockets for full-duplex, real-time communication
Server-Sent Events (SSE) for server-to-client streaming
WebRTC for peer-to-peer communication
Push notifications for mobile and web apps

🎯 Conclusion

Both polling and long polling have their place in web development:

Regular polling is simple, predictable, and works well for applications that don't need real-time updates
Long polling provides better user experience and efficiency for real-time applications but requires more careful implementation

The choice between them depends on your specific requirements: how real-time your application needs to be, your server infrastructure, and the complexity you're willing to handle.

Remember, these are stepping stones to more advanced real-time solutions. Start with what fits your current needs, and evolve your approach as your application grows and requirements change.

What's your experience with polling vs long polling? Have you encountered any specific challenges or found creative solutions? Share your thoughts in the comments below!

DevMatch — Your Open Source Project Finder with Runner H

pulkitgovrani — Tue, 24 Jun 2025 19:27:25 +0000

🤖 DevMatch — Your Personal Open Source Project Finder

This is a submission for the Runner H "AI Agent Prompting" Challenge

💡 What I Built

DevMatch is an AI agent built on Runner H that helps developers—especially beginners—find curated, skill-matched, beginner-friendly GitHub projects and issues to contribute to.

Just share your tech stack, weekly availability, and interests, and DevMatch:

Understands your skill level and preferences
Scours open issue hubs like GitHub, UpForGrabs, CodeTriage
Outputs a clean, markdown list of top open source projects with:
- 🔗 Links
- 🛠️ Required skills
- ⏳ Estimated time commitment
- ✅ Suggested first task

Whether you're looking to build your portfolio, contribute to dev tools, or just practice React—DevMatch connects you with meaningful issues worth solving.

📹 Demo

Public Runner H Prompt Link: https://runner.hcompany.ai/chat/395ec7f3-2a2c-478c-8d35-ca52e053b70a/share

⚙️ How I Used Runner H

I used Runner H's multi-step prompting workflow to:

A) Interpret the user's developer profile

Tech stack
Availability per week
Interests (frontend, dev tools, accessibility, etc.)

B) Run intelligent filtering logic

Match user input to beginner-friendly OSS issues
Prioritize “good first issue” or accessible tasks

C) Generate a structured output

Each match includes: project link, skill alignment, why it fits, estimated weekly time, and first step
Formatted cleanly in markdown

🧪 Prompt Snippet

You're a helpful open source mentor and developer success agent.
A developer gives you:

Their tech stack
Availability per week
Interests or goals 
(e.g., learning backend, contributing to accessibility, building dev tools)

Your job is to:

Step 1: Understand the user profile

Identify their strongest languages or frameworks
Classify them as beginner/intermediate/advanced
Note availability to filter project difficulty

Step 2: Search and Match

Search GitHub or curated platforms (like UpForGrabs, CodeTriage, or OpenSauced)
Find 5–7 high-quality beginner-friendly issues or projects
Filter by match to skillset and topic interest

Step 3: Output the Match List
For each match, show:

🔗 Project/Issue name (link to GitHub)
🧩 Why it’s a match (language, relevance, complexity)
🛠️ Skills used
⏳ Estimated weekly time
✅ First Task Suggestion

Present everything as a clean markdown doc with emojis 
and links. Add a final note encouraging first-time contributors.

🛠 Tools Used:

Prompt crafted entirely inside Runner H
GitHub search parameters like: label:"good first issue" and language filters
Optionally extendable to fetch from APIs (UpForGrabs, OpenSauced)

🌍 Use Case & Impact

Real-World Problem Solved:
Many beginner and intermediate devs want to contribute to open source but don’t know where to start.

DevMatch helps them:

Save hours searching through confusing GitHub repos
Gain confidence with clear guidance and tailored suggestions
Build their resume with real-world contributions

Who Benefits:

First-time contributors
Students, self-taught devs
Anyone looking to break into OSS

❤️ Social Love

Shared on Twitter:

// Detect dark theme var iframe = document.getElementById('tweet-1937594960808980967-407'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1937594960808980967&theme=dark" }

🧑‍💻 Team

Built solo by @pulkitgovrani

What are MCP Servers? | A Detailed Guide

pulkitgovrani — Fri, 13 Jun 2025 01:20:59 +0000

🚀 What Is the Model Context Protocol (MCP)?

The Model Context Protocol (MCP) is an open-source, vendor-agnostic standard created by Anthropic in November 2024. Its goal? To serve as the “USB‑C port for AI applications”—a universal connector between large language models (LLMs) and external data sources or tools.

Why Was MCP Created?

LLMs like Claude, GPT-4, etc., are incredibly powerful—but they’re often trapped inside closed environments, without direct access to live data. Traditionally, developers had to create custom integrations—like bespoke pipelines for Slack, GitHub, or databases—for each LLM, leading to the N×M integration hell.

MCP solves this by standardizing how an LLM requests, retrieves, and manipulates external data—whether local files, web services, SaaS tools—using a uniform protocol .

🏛 MCP Architecture: How It Works

MCP uses a client-server model with three core components:

MCP Hosts: The LLM-powered application (e.g., Claude Desktop, ChatGPT Agents, IDE extensions).
MCP Clients: Adapters instantiated by the host to communicate with each MCP Server.
MCP Servers: Lightweight services that expose resources (data), tools (functions), and prompts via MCP.

Workflow:

User asks AI to fetch data or perform a task
The host spins up an MCP client
Client makes a standardized JSON‑RPC call to the MCP server
The server connects to the target system, executes the action, and returns structured results
AI consumes this output to generate an informed response or action

This flow avoids brittle, hardcoded integrations and allows context to flow seamlessly across systems.

💡 Uses & Adoption

MCP is already gaining real traction:

Anthropic’s Claude Desktop app supports local MCP servers—e.g. integrating with GitHub to create PRs in under an hour.
Organizations like Block, Apollo, Replit, Zed, Codeium, and Sourcegraph are leveraging MCP for deeper tool integrations and agentic workflows.
Companies beyond Anthropic—OpenAI, Google DeepMind, and even Microsoft Windows (via Windows AI Foundry)—are building or signaling support for MCP.

Use cases include:

IDE assistants pulling live code context from GitHub
Enterprise agents querying internal databases or CRM systems
Desktop AI tools manipulating local files or automating workflows in user environments
Multitool agents combining several APIs into coherent task flows: think RAG pipelines, SQL queries, or cross-app automation

⚖️ Benefits and Challenges

✅ Pros

Unified integrations across LLMs and tools
Vendor-agnostic, fostering open ecosystems
Scalable: connect once and reuse across AI apps
Security-by-design: explicit prompts, permissions, and access controlled by the host

⚠️ Cons & Risks

Security vulnerabilities: Studies have flagged issues such as malicious server code, credential theft, tool poisoning, etc.
Governance gaps around registry safety, authenticated server vetting, permissions, and auditing.
Market incentives: open protocols may be slower to monetize or control.

Experts argue we need audit tools (like MCP Safety Scanner, MCP Guardian, ETDI) and robust policy frameworks to ensure secure adoption.

🧭 Future Outlook

MCP is setting the groundwork for the next generation of agentic AI—AI that can autonomously navigate between apps, execute tasks, and maintain contextual memory across systems.

Some notable next steps:

Broader adoption: more LLM platforms will support MCP in their agents and SDKs.
Security layers: formally certified MCP servers, enhanced registry reviews, and OAuth‑based access controls.
Advanced tooling: IDE plugins, desktop apps, and cloud platforms integrating MCP to unlock powerful AI automations.

✍️ In Summary

The Model Context Protocol is a pivotal step toward context-aware agentic AI. By standardizing how LLMs access and interact with external tools, MCP reduces integration complexity and provides interoperable connectivity. But with great power comes responsibility—security, governance, and ethical design are critical to scaling this safely. As MCP continues to evolve, it could underpin the future of intelligent applications that bridge human intent and rich digital systems.

Building an Income Tax Calculator in React

pulkitgovrani — Sun, 02 Feb 2025 12:32:44 +0000

Introduction

Income tax is a significant aspect of financial planning, and understanding how much tax you owe can sometimes be a confusing process. To simplify this, I’ve developed a dynamic Income Tax Calculator using React, designed to help users calculate their tax liabilities in a quick and efficient manner based on the latest Indian tax slabs. Whether you’re an employee or a freelancer, this tool can save you time and effort in calculating your income tax.

You can explore the live version of this calculator here, and if you’re interested in the source code, it’s available on my GitHub repository.

Key Features

Easy-to-use Interface: A clean, user-friendly design that ensures a smooth experience.
Dynamic Tax Calculation: Based on real-time input, the app calculates tax according to the current income tax slabs.
Tax Slab Breakdown: The application provides a detailed breakdown of the tax calculated, helping users understand how their taxes are being calculated.
Responsive Design: The app is fully responsive and can be accessed across multiple devices.
Animated UI: To make the experience engaging, the app includes animations powered by Framer Motion.

Getting Started with the Application

Once you open the Income Tax Calculator, you will see a clean interface asking for your annual salary input. Once the user inputs their salary, the calculator gives an estimate of the tax they owe and shows a breakdown based on the applicable tax slabs.

Tech Stack Used:

React: For building the user interface and managing state.
Framer Motion: For adding smooth animations to the UI.
React Router: For smooth navigation between pages.
Tailwind CSS: For styling the app and making it responsive.

Tax Calculation Logic

At the core of the application is the tax calculation logic. Here’s a breakdown of the tax calculation function that drives the app:

function calculateTax(salary) {
  let tax = 0;
  let breakdown = [];

  if (salary <= 1200000) {
    return { tax: 0, breakdown: ["No tax for income up to ₹12,00,000"] };
  }

  if (salary > 2400000) {
    let extraTax = (salary - 2400000) * 0.3;
    tax += extraTax;
    breakdown.push(`Tax on ₹${salary - 2400000} at 30% = ₹${extraTax.toFixed(2)}`);
    salary = 2400000;
  }

  if (salary > 2000000) {
    let extraTax = (salary - 2000000) * 0.25;
    tax += extraTax;
    breakdown.push(`Tax on ₹${salary - 2000000} at 25% = ₹${extraTax.toFixed(2)}`);
    salary = 2000000;
  }

  if (salary > 1600000) {
    let extraTax = (salary - 1600000) * 0.2;
    tax += extraTax;
    breakdown.push(`Tax on ₹${salary - 1600000} at 20% = ₹${extraTax.toFixed(2)}`);
    salary = 1600000;
  }

  if (salary > 1200000) {
    let extraTax = (salary - 1200000) * 0.15;
    tax += extraTax;
    breakdown.push(`Tax on ₹${salary - 1200000} at 15% = ₹${extraTax.toFixed(2)}`);
    salary = 1200000;
  }

  if (salary > 800000) {
    let extraTax = (salary - 800000) * 0.1;
    tax += extraTax;
    breakdown.push(`Tax on ₹${salary - 800000} at 10% = ₹${extraTax.toFixed(2)}`);
    salary = 800000;
  }

  if (salary > 400000) {
    let extraTax = (salary - 400000) * 0.05;
    tax += extraTax;
    breakdown.push(`Tax on ₹${salary - 400000} at 5% = ₹${extraTax.toFixed(2)}`);
  }

  return { tax, breakdown };
}

The tax is calculated progressively in steps according to the following slabs:

₹0 to ₹4,00,000: NIL tax.
₹4,00,001 to ₹8,00,000: 5% tax.
₹8,00,001 to ₹12,00,000: 10% tax.
₹12,00,001 to ₹16,00,000: 15% tax.
₹16,00,001 to ₹20,00,000: 20% tax.
₹20,00,001 to ₹24,00,000: 25% tax.
Above ₹24,00,000: 30% tax.

The calculation is carried out progressively, meaning the tax for each slab is calculated and added together.

UI Design and User Experience

The application has a clean and responsive design, making it accessible across various devices such as mobile phones, tablets, and desktops.

The homepage features:

An animated background with a subtle framer-motion animation.
A salary input field where users can enter their annual salary.
A calculate button that triggers the tax calculation and displays the estimated tax along with a breakdown of the calculation.

The design is responsive, so the app adapts seamlessly to all screen sizes. I used Tailwind CSS for styling and Framer Motion for animations to ensure that the app feels dynamic and modern.

Viewing Tax Slabs

There is also a dedicated page that shows the Income Tax Slabs in a table format, which helps users better understand the tax rates applicable to different income ranges. This is accessible via the "View Tax Slabs" button at the top of the homepage. The tax slabs page provides a visual representation of the different income ranges and their respective tax rates.

Code Structure

The project consists of the following key components:

HomePage: Where the main functionality of the tax calculator exists.
TaxSlabsPage: A page displaying the Indian income tax slabs in a table format.
App.js: Contains the routing logic using React Router to navigate between the calculator and tax slabs pages.

Here’s how the routing looks in the App.js file:

import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import HomePage from './HomePage';
import TaxSlabsPage from './TaxSlabsPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/tax-slabs" element={<TaxSlabsPage />} />
      </Routes>
    </Router>
  );
}

How You Can Contribute

The project is open-source and available on GitHub. If you would like to contribute or suggest improvements, feel free to fork the repository and make a pull request.

GitHub Repository

Conclusion

This Income Tax Calculator is a great tool for anyone looking to quickly determine their income tax based on the current Indian tax slabs. Built with React, Tailwind CSS, and Framer Motion, it provides a smooth user experience along with a functional and visually appealing design. Feel free to explore the live version or contribute to the project on GitHub.

You can access the live version of the calculator here.