LeadFlow Lead Capture System

A full-stack lead capture application built with the MERN stack. Supports lead management, webhook automation, backend validation, and a responsive UI.

---

Architecture

Frontend: React + Tailwind CSS Backend: Node.js + Express Database: MongoDB Validation: Zod HTTP Client: Axios

The backend follows a layered architecture:

Controller → Service → Repository → Database

This separation improves scalability, maintainability, and testing.

---

Features

• Create leads
• View all leads
• Delete leads
• Search leads (client-side filtering)
• Webhook triggered on lead creation
• Webhook failure handled without blocking lead creation
• Backend validation using Zod
• Responsive dark UI

---

API Routes

POST /api/leads GET /api/leads GET /api/leads/:id DELETE /api/leads/:id

---

Webhook Integration

When a lead is created:

1. Backend validates the request using Zod
2. Lead is saved to MongoDB
3. A POST request is sent to WEBHOOK_URL
4. If the webhook succeeds → status "success" is returned
5. If the webhook fails → the lead is still saved, and the frontend displays a warning

This ensures webhook failures do not affect core application functionality.

---

Setup Instructions

1️⃣ Clone Repository

git clone https://github.com/adhil5108/leadflow.git

---

2️⃣ Backend Setup

cd server npm install npm run dev

Create a .env file inside /server:

PORT=5000 MONGO_URI=your_mongodb_connection WEBHOOK_URL=your_webhook_url

---

3️⃣ Frontend Setup

cd client npm install npm run dev

---

Design Decisions

• Non-blocking webhook to improve reliability
• Layered backend architecture
• Schema validation before database operations
• Clean and minimal UI focused on usability

---