Forem: Suman Kshetri

The 3-Layer Trick That Completely Killed My Spam Problem

Suman Kshetri — Thu, 05 Mar 2026 18:26:57 +0000

A few days ago I learned an uncomfortable lesson about leaving public forms unprotected on the internet.

My portfolio contact form got absolutely destroyed by bots.

Not exaggerating — ~400 spam emails in about 3 minutes.

My inbox looked like a denial-of-service attack, but for email. Every message was some variation of:

"Johndoe..."
"Hello..."

You know the type.

At first I thought: "Okay… maybe just a few bots."

Then the notifications kept coming.

So I did what every developer eventually does — I built a fix.

Why Does This Happen?

Any public form on the internet will eventually be targeted. Bots continuously crawl the web looking for:

Contact forms
Email endpoints
Comment sections
Signup pages

If your form has no protection between the user and your email server, you're essentially leaving the front door wide open.

The fix? Layer multiple lightweight protections. No single check is bulletproof, but together they make your form extremely hard to abuse.

Layer 1 — Honeypot 🍯

A honeypot is a hidden form field that real users never see or interact with. Bots, however, tend to fill out every field they find — so if it has a value, you know it's a bot.

Frontend (React/JSX):

<input
  type="text"
  name="honeypot"
  style={{ display: "none" }}
  tabIndex={-1}
  autoComplete="off"
/>

Backend check:

export function isBot(honeypot: unknown): boolean {
  return typeof honeypot === "string" && honeypot.trim().length > 0;
}

The trick: if a bot triggers it, return a fake success instead of an error. Bots retry on errors — silence keeps them away.

if (isBot(honeypot)) {
  // Don't tell the bot it failed
  return Response.json({ success: true }, { status: 200 });
}

Layer 2 — Rate Limiting 🚦

Even if a bot slips past the honeypot, it might hammer your endpoint with dozens of requests per second. Rate limiting caps how many requests a single IP can make in a given window.

const rateLimitMap = new Map<string, { count: number; resetAt: number }>();

export function isRateLimited(
  ip: string,
  maxRequests = 3,
  windowMs = 60_000, // 1 minute
): boolean {
  const now = Date.now();
  const entry = rateLimitMap.get(ip);

  if (!entry || now > entry.resetAt) {
    rateLimitMap.set(ip, { count: 1, resetAt: now + windowMs });
    return false;
  }

  if (entry.count >= maxRequests) return true;

  entry.count++;
  return false;
}

This allows 3 requests per IP per minute. If exceeded, return a 429:

if (isRateLimited(ip)) {
  return Response.json(
    { success: false, error: "Too many requests. Please wait a minute." },
    { status: 429 }
  );
}

⚠️ Note: This in-memory approach resets on server restart. For production, use a distributed store like Redis or Upstash.

Layer 3 — Google reCAPTCHA 🤖

The final gate. Even if a bot bypasses the honeypot and rotates IPs to beat rate limiting, it still needs to pass Google's reCAPTCHA verification.

Frontend — load the reCAPTCHA script and get a token on submit:

// Add to your <head>
<script src="https://www.google.com/recaptcha/api.js?render=YOUR_SITE_KEY" />

// In your submit handler
const token = await grecaptcha.execute("YOUR_SITE_KEY", { action: "contact" });

// Send token with your form data
await fetch("/api/contact", {
  method: "POST",
  body: JSON.stringify({ name, email, message, honeypot, recaptchaToken: token }),
});

Backend — verify the token with Google:

export async function verifyRecaptcha(token: string): Promise<boolean> {
  if (!token) return false;

  const res = await fetch(
    `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RECAPTCHA_SECRET_KEY}&response=${token}`,
    { method: "POST" }
  );

  const data = await res.json();
  return data.success === true;
}

const isHuman = await verifyRecaptcha(recaptchaToken);

if (!isHuman) {
  return Response.json(
    { success: false, error: "reCAPTCHA verification failed." },
    { status: 400 }
  );
}

Putting It All Together (Next.js API Route)

export async function POST(req: NextRequest) {
  // 1. Get IP
  const ip =
    req.headers.get("x-forwarded-for")?.split(",")[0]?.trim() ?? "unknown";

  // 2. Rate limit check
  if (isRateLimited(ip)) {
    return Response.json(
      { success: false, error: "Too many requests." },
      { status: 429 }
    );
  }

  const { name, email, message, honeypot, recaptchaToken } = await req.json();

  // 3. Honeypot check
  if (isBot(honeypot)) {
    return Response.json({ success: true }); // Silent drop
  }

  // 4. reCAPTCHA check
  const isHuman = await verifyRecaptcha(recaptchaToken);
  if (!isHuman) {
    return Response.json(
      { success: false, error: "reCAPTCHA verification failed." },
      { status: 400 }
    );
  }

  // ✅ Safe to send email
}

A request only reaches your email logic if it passes all three checks.

The Result


Before	400 spam emails in ~3 minutes
After	0 spam emails

Not one since.

Going Further in Production

This setup is lightweight and perfect for a portfolio. If you need more:

Redis / Upstash — distributed rate limiting that survives server restarts
Cloudflare Turnstile — a privacy-friendlier CAPTCHA alternative
Arcjet — modern security layer with bot detection built in
Vercel KV — great if you're already in the Vercel ecosystem

The Takeaway

Security doesn't need to be complicated.

Layer	Purpose
Honeypot	Catches dumb bots instantly
Rate Limiting	Stops flooding & repeat attempts
reCAPTCHA	Verifies a real human is submitting

Stack them together and your contact form becomes very hard to abuse — with zero impact on real users.

Have you dealt with bot spam on your own projects? What approach did you take? Drop it in the comments.

GSAP Animations: From “Cool Effects” to Intentional Motion

Suman Kshetri — Wed, 25 Feb 2026 18:35:45 +0000

🎬 GSAP Animation Guide

Motion should guide, not distract.

A practical guide to thinking about and building intentional animations with GSAP (GreenSock Animation Platform) — not just how to animate, but how to think about animation.

What is GSAP?

GSAP stands for GreenSock Animation Platform — a powerful JavaScript motion engine for the web.

You can animate:

Position (x, y)
Opacity
Scale & Rotation
Colors
SVG paths
Scroll-based effects
Entire sequenced timelines

Unlike CSS animations, GSAP gives you full control over timing, sequencing, and logic.

Core Philosophy

Animation is not decoration. It's communication.

Good Animation	Bad Animation
Guides attention	Distracts the user
Creates hierarchy	Feels random
Improves perceived performance	Slows everything down
Makes transitions feel intentional	Makes users dizzy

The difference? Timing and intention.

Core Concepts

`from`, `to`, and `fromTo`

// Animate from 50px below and invisible → natural position
gsap.from(".card", {
  y: 40,
  opacity: 0,
  duration: 0.5,
  ease: "power3.out"
});

Timelines — Sequencing Animations

const tl = gsap.timeline();

tl.from(".label",   { y: 12, opacity: 0, duration: 0.4 })
  .from(".heading", { y: 24, opacity: 0, duration: 0.6 }, "-=0.2");

The "-=0.2" offset means: start this animation 0.2s before the previous one ends.

Offset	Effect
`"-=0.1"`	Subtle overlap
`"-=0.4"`	Heavy overlap
(none)	Strict sequence

ScrollTrigger

scrollTrigger: {
  trigger: ".grid",
  start: "top 82%",
}

"top 82%" means: start the animation when the top of the element reaches 82% down the viewport.

This is precision — not "when it enters", but exactly when you define.

Timing Reference

Duration + Stagger + Ease = Feel

Headings

gsap.from(".heading", {
  y: 24,
  opacity: 0,
  duration: 0.6,      // 0.5 – 0.7
  ease: "power3.out"
});

Cards (with stagger)

gsap.from(".card", {
  y: 40,
  opacity: 0,
  duration: 0.5,      // 0.45 – 0.6
  stagger: 0.08,      // 0.06 – 0.1
  ease: "power3.out"
});

Too small a stagger → robotic. Too big → slow and annoying. Sweet spot = 0.06–0.1.

Animation Hierarchy (Mental Model)

Each UI layer deserves a different animation weight:

Labels      →  Subtle intro
Headings    →  Strong presence
Cards       →  Cascading reveal
Buttons     →  Micro-interaction only

Common Mistakes to Avoid

Mistake	Why It's a Problem
Animating too much	If everything moves, nothing feels important
Long durations (1.2s+)	Feels cool once, then just feels slow
No easing	Linear animations look robotic
Animating layout props (`top`, `left`)	Bad for performance — use `x`, `y`, `scale` instead

What's Next

Topics worth exploring deeper:

Advanced timeline orchestration
Page transitions in Next.js
Parallax (done correctly)
Scroll-based storytelling
Performance optimization with heavy animation
Combining GSAP with React state logic

The Real Advice

Don't just copy animations from tutorials. Break them.

Change durations. Change overlaps. Remove stagger. Add more.
Feel the difference. That's how you actually learn GSAP.

Resources

I’m Suman Kshetri — grinding through computer engineering, building real-world web projects, and sharing what I learn without the fluff.

Let's Connect:

LinkedIn: Suman-Kshetri
GitHub: Suman-Kshetri

A Full-Stack Productivity Platform

Suman Kshetri — Thu, 19 Feb 2026 15:31:33 +0000

I created Focus Portal to help people stay focused and organized in a world full of distractions. I wanted a simple platform where users could manage tasks, write notes, and track their progress without unnecessary complexity.

The goal was to combine productivity tools with real-time updates and rich content features, so users can work efficiently in one place.

Key Features

Create, organize, and track tasks
Real-time updates for questions and answers
Rich text editing for notes and documents
File uploads and download
Secure account authentication with email verification

I built this project as a full-stack application to improve my skills in frontend, backend, real-time communication, and deployment. Along the way, I learned how to structure a project cleanly, handle authentication securely, and implement interactive features that feel smooth for users.

🔗 Github
🔗 Live Demo