How I Built Smesh.dev Using AI: The Vibe Coding Revolution

We are living in a new era of software engineering. The term "Vibe Coding"—coined to describe developer velocity powered by advanced AI agent code generation tools—is not just a trend. It is a highly efficient operational method.

In this post, I am going to walk you through exactly how Smesh.dev was built, the architecture we chose, and how we integrated n8n and Supabase to build a self-sustaining automation agency site that fetches its content dynamically and deploys via GitHub Actions.

The Architecture: Why Astro + Supabase?

When building a modern agency site, page load speeds and SEO (Search Engine Optimization) are critical. Traditional single-page applications (SPAs) load heavy JavaScript bundles, which slow down initial loads and prevent AI crawlers from scraping content.

We chose Astro for Smesh.dev because of its zero-JS-by-default footprint. Every page is pre-rendered at build time:

• Fast First Contentful Paint (FCP): The browser receives raw HTML, which loads instantly.
• Dynamic Content Fetching: During the Astro build step, we pull all our blog posts, portfolios, and downloadable resources directly from Supabase using the @supabase/supabase-js client.
• GitHub Pages Hosting: The resulting static build is pushed to GitHub Pages. It costs $0 to host and has sub-second load times worldwide.

The Database: Supabase Relational Schema

We use Supabase as our centralized datastore. Instead of local markdown files, our content is stored in clean PostgreSQL tables:

1. blog_posts: Stores all our guides, articles, and logs.
2. resources: Manages locked prompts, checklists, and guides.
3. portfolio: Holds client work details and tech stacks.
4. contact_submissions: Collects leads directly from our multi-step contact funnel.

This structure allows us to manage content from anywhere without having to commit markdown files to git every time we want to publish a post.

The Automation: n8n Workflow Orchestration

An agency site shouldn't just look good; it should automate operations. Smesh.dev is integrated with n8n to automate lead follow-ups:

• When a user submits a project inquiry on Smesh.dev, the form calls a Supabase client insert.
• A Supabase Webhook triggers an n8n workflow.
• n8n instantly sends a WhatsApp notification to our sales team and an automated greeting email to the client.

Building with AI: The Developer Experience

We didn't write this site line-by-line. Instead, we used high-context AI agent coding environments (like Claude Code / Gemini) to scaffold layouts, design responsive CSS grids, and optimize the SQL database structure.

By acting as an architect and letting the AI handle repetitive boilerplate code, we were able to launch Smesh.dev in less than 3 days.

In the next part of this series, I will share the exact n8n workflow JSON we use to automate lead scoring and client routing. Stay tuned!