HUBZ
Autonomous web agency engine & instant landing page platform.
The System Bottleneck & Problem Statement
Local businesses (cafes, beauty salons, auto workshops, healthcare clinics) often boast high Google Maps reviews but lack websites. Traditional web agencies waste days cold-calling with abstract proposals that business owners reject because they cannot envision the finished product.
Architected Solution & Execution Mechanics
Built an end-to-end "Build First, Pitch Later" platform: AI discovers businesses lacking websites, crafts customized websites with tailored copywriting, sector-matched colors, and unique SVG branding, then deploys them live to hubz.my.id/[slug] with an automated WhatsApp pitch pipeline.
Lead Discovery Agent
Finds businesses with high ratings but missing website URL.
Core Architecture Implementation
Production-grade architecture implementation powering HUBZ:
import { NextResponse } from 'next/server';
import { db } from '@/lib/db';
// Autonomous Client Site Deployment Endpoint
export async function POST(req) {
const token = req.headers.get('authorization')?.replace('Bearer ', '');
if (token !== process.env.HUBZ_DEPLOY_SECRET) {
return NextResponse.json({ error: 'Unauthorized deployment key' }, { status: 401 });
}
const { slug, businessName, industry, htmlBundle, metadata } = await req.json();
// Atomically register client site in PostgreSQL registry
const { data, error } = await db
.from('hubz_sites')
.upsert({
slug,
business_name: businessName,
industry,
html_bundle: htmlBundle,
metadata,
deployed_at: new Date().toISOString(),
active: true
}, { onConflict: 'slug' })
.select()
.single();
if (error) {
return NextResponse.json({ error: error.message }, { status: 500 });
}
return NextResponse.json({
success: true,
url: `https://hubz.my.id/${slug}`,
siteId: data.id
});
}Key Engineering Responsibilities
Engineered dynamic [slug] server rendering in Next.js to host unlimited client websites simultaneously.
Created custom deployment API endpoints (/api/jules/deploy) with secure upload tokens.
Built an AI generation rulebook featuring 5 distinct layout archetypes to avoid cookie-cutter designs.
Designed human-in-the-loop WhatsApp response escalations for deal closing and customer negotiation.
Non-Trivial Trade-Offs & Decisions
Preventing AI Output From Looking Generic
System Friction: Early generation outputs used identical blue gradients, generic hero layouts, and repetitive corporate copy that business owners immediately ignored.
Architectural Decision: Designed 5 strictly defined visual archetypes (Warm Editorial, Clean Precision, Bold Dark, High-Contrast Swiss, Artisan Craft) with deterministic font pairings and handcrafted vector SVG accents.
Measured Outcome: Business owners responded with genuine surprise that a custom site had already been built for their exact brand.