Portfolio Project 3 of 5 · Live

Three production automations.
One dashboard. Real results.

An interactive dashboard running three live n8n workflows — lead qualification, invoice generation, and daily digest — all powered by Claude AI. Trigger them from the browser and watch results land in Slack, Airtable, Gmail, and Google Sheets in seconds.


▶︎  Open Live Dashboard


← All Projects
3/3
Workflows live

5
Integrations wired

<15s
Avg end-to-end latency

0
Manual steps required

The Project

One dashboard. Three complete business automations.

Most portfolio projects show one workflow in isolation. This dashboard proves something harder — designing, building, and operating an entire automation stack, presented in a single client-facing interface. Each workflow solves a real, recurring business problem.

01 — LEAD QUALIFY
AI Lead Qualification
A contact form submits a lead. Claude scores it HOT / WARM / COLD with reasoning and a suggested action. The result lands in Airtable, and HOT leads fire a Slack alert to #leads — automatically.
webhook
claude
airtable
slack

02 — INVOICE GEN
AI Invoice Generator
Enter a client name and line items. Claude generates a professional HTML invoice with GST calculation and 14-day payment terms. Gmail delivers it to the client’s inbox; Google Sheets logs the record instantly.
webhook
claude
gmail
google sheets

03 — DAILY DIGEST
Daily Business Digest
Scheduled at 8am daily. n8n pulls yesterday’s data from Google Sheets, Claude writes a 150-word plain-English summary, and Gmail delivers the brief to the business owner’s inbox before their first coffee.
schedule
sheets
claude
gmail

All three workflows are live and interactive. Submit a lead, generate an invoice, fire a digest — and watch the results appear in Slack, Airtable, and Gmail in real time.

Try the dashboard ↗

Architecture

Every workflow follows the same reliable pattern

Browser → Netlify proxy → n8n webhook → Claude API → downstream integrations. Each layer has a clear responsibility, and each is replaceable without touching the others.

▶
Browser trigger
User submits a form or clicks a button on the live dashboard

▲
n8n + Claude
Webhook fires, Claude processes the task, nodes route the result to integrations

✓
Real output
Slack alert, Airtable row, Gmail delivery, or Sheets log — confirmed live

Tech Stack

Every layer serves a purpose

No over-engineered dependencies. Each tool was chosen because it is the best fit for its layer — and because clients are likely already using it.

n8
n8n Cloud
Workflow orchestration — all 3 automations
AI
Claude API (claude-sonnet-4-6)
Lead scoring, invoice HTML, digest prose
λ
Netlify Functions
Serverless proxy — protects webhook URLs, handles CORS
AT
Airtable
Lead CRM — one row per qualified lead
GS
Google Sheets
Invoice log + daily business data source
SL
Slack
Real-time HOT lead alerts to #leads
GM
Gmail
Invoice delivery + daily digest emails

// Workflow 1 — Lead Qualify (node flow)

Webhook
→
receives POST from lead form
Claude
→
scores HOT / WARM / COLD + JSON
Parse
→
Code node extracts + validates
Airtable
→
appends lead row with score
If HOT?
→
conditional branch fires Slack
Respond
→
JSON payload back to dashboard UI

// Claude system prompt — Lead Qualify
// Structured output, strict JSON schema
system: `You are a senior B2B sales qualifier.
Score HOT, WARM or COLD.

SCORING SIGNALS
– HOT: named company, corporate email,
urgency signals, buying language
– COLD: free email + generic message

OUTPUT: ONLY valid JSON — no prose
{
“score”: “HOT|WARM|COLD”,
“reasoning”: “max 160 chars”,
“suggestedAction”: “max 140 chars”
}`

Skills Demonstrated

What this project proves I can build for you

n8n Workflow Design
  • Webhook-triggered flows
  • Scheduled automation (cron)
  • Conditional branching (If node)
  • Multi-node data pipelines
  • Error handling & input validation
Claude API Prompt Engineering
  • Structured JSON output (strict schema)
  • HTML document generation
  • Prose writing with tone control
  • Output sanitisation for n8n JSON
  • 3 distinct output formats in one project
Multi-Tool Integration
  • Airtable API (create records)
  • Google Sheets (read + append)
  • Slack webhooks (rich block kit)
  • Gmail OAuth (send HTML email)
  • Netlify serverless proxy
Full-Stack Architecture
  • Vanilla JS dashboard UI
  • Netlify Functions (API proxy layer)
  • CORS handling & security
  • Real-time UI feedback on execution
  • End-to-end deployment pipeline

Build Process

From blank repo to live dashboard in 5 phases

Each phase had clear deliverables. The n8n workflows were smoke-tested end-to-end before the frontend was wired up — no surprises at integration time.

1
Project Setup & Data Stores
Created Airtable base (Leads table), Google Sheets workbook (Invoices + DailyData), and Slack #leads channel. Initialised Git repo and Netlify project with environment variable placeholders for the three webhook URLs.

airtable · google sheets · slack · github

2
Build All 3 n8n Workflows
Each workflow built and activated in n8n Cloud with real credentials. Key engineering challenge: Claude’s response text (containing newlines) causes “bad control character” errors when interpolated directly into HTTP Request JSON bodies. Fixed with a Code node sanitisation step before every Claude HTTP call.

n8n.cloud · claude api · code nodes

3
Netlify Serverless Proxy
Three proxy functions (lead.js, invoice.js, digest.js) receive browser POST requests, forward them to the correct n8n webhook, and return the response. Handles CORS and keeps all webhook URLs out of the browser — never exposed in source.

netlify functions · node.js · env vars

4
Dashboard Frontend
Single-file Vanilla JS dashboard with three interactive panels. Live status indicators, animated loading states, and inline result rendering — AI score badge, invoice preview, digest text. Netlify’s 10-second timeout on longer Claude calls was solved by pointing those requests directly at n8n webhook production URLs.

vanilla js · html · css · fetch api

5
Deploy & End-to-End Smoke Tests
Deployed to Netlify (auto-deploy on push to GitHub), configured Hostinger subdomain. Ran full end-to-end smoke tests on all three workflows from the live URL — confirmed Slack alerts, Airtable rows, and Gmail delivery all firing correctly in production.

netlify · hostinger · end-to-end testing

Proven Results

Benchmarked, live, and verifiable

Every metric was measured in production on the live deployment — not estimated. You can verify them yourself by triggering the dashboard now.

<10s
Lead qualify → Slack alert

<15s
Invoice generated + emailed

<20s
Daily digest delivered

3
Distinct Claude prompt patterns

5
Live SaaS integrations

100%
Smoke tests passing

Want something like this built for your business?

Let’s automate what’s slowing you down

Lead qualification, invoice generation, daily reporting — or whatever your team does manually that it shouldn’t have to. Let’s talk.

Get in touch
See the live dashboard ↗