Aman Suryavanshi

Posted on Jan 16 • Originally published at amansuryavanshi.me

How I Built an Organic Lead Gen Machine: A ₹3 Lakh Case Study

#nextjs #n8n #automation #seo

How I Replaced ₹50k/Month Ad Spend with a Next.js + n8n Lead Machine

TL;DR:

I built a full-stack lead generation system for a flight school that cut ad spend to zero while generating ₹3,00,000+ in revenue.
The stack uses Next.js 14, n8n, Firebase, and Airtable—all running on ₹0/month infrastructure costs.
Key technical win: A non-blocking webhook architecture that ensures 99.7% reliability even if the automation backend is busy.

Prerequisites

To follow along with this architecture, you should have a basic understanding of:

Next.js (App Router & API Routes)
Webhooks (How to send and receive JSON data)
Low-code automation (Basic familiarity with n8n or Zapier)

The Problem: 100% Ad Dependency

I recently worked with Aviators Training Centre, a premier DGCA ground school in India. When we started, they were caught in a classic "ad-spend trap":

Bleeding Cash: Spending ₹35,000–₹50,000/month on Facebook ads.
High CPL: Paying nearly ₹800 per lead.
Manual Chaos: Leads were scattered across WhatsApp, and the owner spent 4 hours a day on admin work instead of teaching.

The client asked me: "Can we stop depending on paid ads?"

I said yes. But to do that, we didn't just need a website; we needed a revenue machine.

The Architecture: The "Zero-Cost" Stack

I chose tools that offer generous free tiers or can be self-hosted to keep the overhead at exactly ₹0/month:

Frontend: Next.js 14 (Vercel) for SSR and SEO.
Database: Firebase Realtime DB (Free Tier) for instant lead storage.
Automation: n8n (Self-hosted) to glue everything together.
CRM: Airtable for a visual sales pipeline.
CMS: Sanity.io for SEO-optimized blog content.

1. The Non-Blocking Webhook Pattern

One of the biggest mistakes I see beginners make is making the user wait for an automation to finish. If your n8n server is slow, your user sees a spinning wheel—or worse, a timeout error.

I built a non-blocking architecture. The Next.js API route saves the data to Firebase immediately and triggers the webhook in the background. The user gets a "Success" message in milliseconds.

// src/app/api/lead/route.ts
import { db } from '@/lib/firebase';
import { ref, push } from 'firebase/database';

export async function POST(req: Request) {
  const data = await req.json();

  try {
    // 1. Save to Firebase immediately (The Source of Truth)
    await push(ref(db, 'leads'), {
      ...data,
      timestamp: Date.now(),
    });

    // 2. Trigger n8n Webhook (Background task)
    // We don't 'await' this if we want maximum speed,
    // or we use a try/catch to ensure user UX isn't broken.
    fetch(process.env.N8N_WEBHOOK_URL!, {
      method: 'POST',
      body: JSON.stringify(data),
    }).catch(err => console.error("n8n Trigger Failed:", err));

    return new Response(JSON.stringify({ success: true }), { status: 200 });
  } catch (error) {
    return new Response(JSON.stringify({ error: 'Database failure' }), { status: 500 });
  }
}

2. Solving the Lead Attribution Mystery

If you're moving away from ads, you need to know where your organic leads are coming from. I built a simple UTM tracking utility that captures URL parameters and stores them in the browser session.

// src/utils/trackUtm.js
export const getUtmParams = () => {
  if (typeof window === 'undefined') return {};

  const params = new URLSearchParams(window.location.search);
  return {
    source: params.get('utm_source') || 'organic',
    medium: params.get('utm_medium') || 'direct',
    campaign: params.get('utm_campaign') || 'none',
    content: params.get('utm_content') || 'none',
  };
};

When a user submits a form, we bundle these UTMs with their contact info. This allowed the client to see that 15% of their high-quality leads were actually coming from AI search engines like Perplexity and ChatGPT!

Key Challenges & "Aha!" Moments

The n8n "Empty Object" Bug

Early on, 40% of our booking confirmations were sending blank emails. I realized that if the webhook payload was slightly malformed, n8n would still execute but with empty data.

The Fix: I implemented a 3-layer validation system inside n8n using an "If Node" to check for the existence of the email and name fields before proceeding. Reliability shot up from 60% to 99.7%.

Lighthouse Optimization

SEO was our primary growth driver. By using Next.js next/image and aggressive code splitting, I took the Lighthouse score from under 50 to 95+. This single change pushed 20+ keywords to Page 1 of Google India within 4 months.

The Results (The Numbers Don't Lie)

Revenue: ₹3,00,000+ from organic leads.
Ad Spend: Reduced from ₹50,000/month to ₹0.
Admin Time: 4 hours/day → 30 mins/day (85% reduction).
Response Time: Leads get a personalized email/WhatsApp in <2 minutes instead of 6 hours.

Key Takeaways for Developers

UX is King: Never make your user wait for a third-party API (like n8n or Airtable). Save to your DB first, then trigger automations.
Free Tier Stacking is a Superpower: You don't need a huge budget to build professional-grade systems. Vercel + Firebase + Airtable is a lethal combo for small business clients.
Performance = Revenue: In this project, a 95+ Lighthouse score directly correlated to ₹3L in revenue. Speed isn't just a dev metric; it's a business metric.

What do you think?

I'm curious—how do you handle lead processing in your apps? Do you prefer a heavy backend like Node/Express, or are you leaning into the "Serverless + Automation" approach like I did here?

Let's discuss in the comments! 👇

DEV Community