Skip to content

P1John Mann · dev mode

Full-stack engineer. Explore how I build AI systems.

Co-founding engineer of Feta AI, the operating system behind a 17‑person marketing agency, and solo builder of AdPacer AI.

● ~

Projects

Feta AI (in production)

Feta AI is a comprehensive agency management operating system I architected and built as a co-founding engineer. It serves as the central hub for a digital marketing agency, managing everything from client relationships and contracts to ad performance, SEO strategy, and team task coordination. AI is woven throughout, from intelligent task creation and communications analysis to keyword research and content planning.

Challenge: Agency teams were juggling fragmented tools for CRM, analytics, task management, SEO, and client delivery, which created operational drag and weak executive visibility. Solution: As a co-founding engineer, I designed and built a unified platform that brings client ops, reporting, AI workflows, and marketing tooling into one multi-tenant system with strong access control and automation. Impact: The result is a central operating layer that supports day-to-day execution, strategic reporting, and scalable service delivery for a real agency business.

  • CRM & Client Management: Full company, people, and contact management with activity timelines, communication history, and service assignment tracking across 150+ client accounts.
  • Contract Lifecycle: End-to-end contract management with PDF generation, e-signatures, billing breakdowns, auto-renewal tracking, and $253K annual TCV monitoring.
  • AI Task Management: Task system with AI-powered task creation from natural language, templates, subtasks, priorities, and automated notifications via Inngest workflows.
  • Analytics Dashboards: Unified dashboards pulling data from Google Analytics 4, Google Ads, Meta Ads, Search Console, and PageSpeed with AI-generated insights.
  • SEO Suite: Keyword research, competitor scorecards, site maps, content planning, keyword position tracking, SERP analysis, and AI-powered content editing.
  • Google Ads Toolkit: Campaign builder, RSA ad writer, budget calculator, negative keyword manager, ad strength analyzer, and keyword research integrated with the Google Ads API.
  • Executive Command Center: Communications digest, G Suite integration, mail management, recruiting tools, and high-level performance overviews for agency leadership.
  • Data Sync Engine: Idempotent, retry-safe sync pipelines for GA4, Google Ads, Meta Ads, and Search Console across hundreds of accounts, run on Inngest job and scheduled queues. Error-classified logging, full vs. partial re-syncs, fan-out per account, and fan-in roll-ups so franchise and multi-location businesses get one unified dashboard.
  • Multi-Company Architecture: Multi-tenant system supporting 150+ client companies with role-based access, impersonation, and per-company data isolation via Supabase RLS.

Built with Next.js 16, React 19, Supabase, Tailwind, React Query, Inngest, Anthropic, OpenAI, Google APIs, Sentry, Resend, Stripe

AdPacer AI (offline)

AdPacer AI is a standalone SaaS product I conceived, designed, and built entirely on my own. It solves a real problem for ad agencies and in-house teams, keeping ad spend on pace with monthly budgets. The platform connects to Google Ads via OAuth, pulls real-time spend data, and provides pacing dashboards with AI-powered forecasting to predict end-of-month spend.

Challenge: Marketing teams needed a faster way to spot pacing problems before budgets drifted off target, without relying on manual spreadsheet checks and delayed reporting. Solution: I built a focused SaaS product that connects directly to Google Ads, forecasts spend trajectory, and wraps the full product in self-serve billing and multi-org account management. Impact: It demonstrates full-stack product ownership, from go-to-market landing page and onboarding flow to the core forecasting experience and billing engine.

  • Google Ads OAuth Integration: Full OAuth 2.0 flow for connecting Google Ads accounts, with MCC support for agency-level access to multiple client accounts.
  • Budget Pacing Dashboard: Real-time pacing calculations showing daily spend vs. target, projected end-of-month spend, and alerts for over/under-pacing campaigns.
  • AI Forecasting: ML-powered spend forecasting using historical patterns, seasonality, and current trajectory to predict month-end budget utilization.
  • Stripe Billing: Complete subscription management with Stripe, including signup, plan selection, payment processing, and lifecycle handling.
  • Multi-Org Architecture: Support for multiple organizations with team invitations, role-based access, and per-org Google Ads account connections.
  • Polished Landing Page: Marketing site with animated background, typewriter hero, bento grid features, pricing section, and smooth scroll powered by GSAP and Lenis.

Built with Next.js 15, React 19, Supabase, Stripe, Framer Motion, GSAP, Google Ads API, Anthropic, OpenAI, Recharts

Engineering decisions in Feta AI

  • One context per client. A multi-tenant context engine that connects each client's relationship history, interactions, contracts, purchased services, assigned work and measurable results, with tools for teams and AI agents to act inside the platform.
  • Sync to the database; don't call vendor APIs live. Rate-aware ingestion pipelines that persist each platform's lowest useful data grain, so dashboards and custom MCP tools query and join cross-platform data at the database layer.
  • A canonical identity for every record. A reusable multi-tenant data model built around canonical organization and client identities, with normalized relationships, source provenance and tenant isolation.
  • Entitlements, not feature flags. A layered access-control model that separates development flags, organization-level product entitlements and member-level permissions, with scoped controls for super admins, developers and organization admins.
  • Tenant isolation in depth. Isolation enforced at every layer, so users only ever touch data that belongs to the organization they have selected.

Fleet Command Center (prototype)

When several AI agents build in separate git worktrees at once, the hard part stops being the code. It becomes knowing which lane serves which task, which lanes touch the same files, what is waiting on me, and what is safe to clean up. Fleet Command Center puts all of that on one animated terminal screen, so I don't have to hold it in my head.

The terminal UI is a working prototype that runs on a snapshot file. The live layer (git, GitHub, tmux and task-board sync) is specified but not built yet.

  1. Spin-up asks once. Starting a lane asks one question: which project or task is this for? It pulls project, milestone and task from the task board, then links the worktree.
  2. A singleton hub. tmux decides whether the hub is running. If it is, the new lane just animates in. If not, one detached session starts. If two start at once and the name is taken, that counts as running. No PID files.
  3. The link is declared once. The worktree-to-task link is written to git config, so it travels with the branch, and to a link file the hub watches. Links are many-to-many. A link the AI inferred is drawn dashed with a ? until it is confirmed.
  4. The board follows the code. Each board lane maps to a code stage. Cards move as a side effect of linking, pushing and merging. Merges done elsewhere are caught through gh and queued for one-key approval.
  5. Every write is previewed. A board move or task-description update is shown before and after, then confirmed with one keypress. If the board is unreachable, writes wait in a queue and are never dropped silently.
  • One hub, ever. One tmux session named fleet-hub. Every spin-up joins the hub that is already running instead of starting another.
  • Declare the link once, at spin-up. Ask once when the lane starts and store the answer in git config and in a watched link file.
  • The board follows the code. Map the four board lanes to four code stages and move cards as a side effect of linking, pushing and merging, through a single board-move call. Cards never move across workspaces.
  • Preview every write. Every write is shown first and confirmed with one keypress. Description updates replace only a short “From the build” section, at most three plain-language bullets.
  • Show commands, never run them. The hub never runs git or shell commands. It shows the command, like git wt remove <name>, and a person or an agent runs it.
  • Keep live data and AI judgment apart. A live layer polls git, gh, tmux and the board with no AI. A judgment layer calls Claude (claude -p) on demand, at most every 30 minutes, and caches the result with its age.
  • Visual before verbal. Motion and markers carry status: ◆ board vs ● code (merging into ◉ when they agree), a ↯ line between lanes that share files, one ▪ per worktree in each cleanup zone. Text is short labels.

Skills

Frontend & UI

  • Next.js: App Router, server components, ISR, streaming, middleware, used as the primary framework on both Feta AI and AdPacer AI.
  • React 19: Server components, Suspense boundaries, useTransition, composition patterns. 460+ components across Feta AI.
  • Tailwind CSS: Utility-first styling with design tokens, dark mode, and responsive patterns across every project.
  • shadcn/ui: Radix-based component primitives customized with project-specific design tokens and compound component patterns.
  • Framer Motion: Scroll-triggered animations, page transitions, and layout animation systems used across the portfolio and product work.
  • GSAP: Complex timeline animations, smooth scroll with Lenis, and advanced landing page motion work in AdPacer AI.
  • TipTap: Rich text editing with bubble menus, mentions, tables, and media support for content workflows.
  • Recharts: Data visualization for analytics dashboards, funnels, and KPI surfaces across marketing systems.

Backend & APIs

  • Next.js API Routes: 436 route handlers in Feta AI alone, with validation, auth middleware, and production error handling.
  • Supabase: PostgreSQL database with RLS policies, real-time subscriptions, auth, and storage. Backbone of multiple shipped systems.
  • Drizzle ORM: Type-safe database queries, migrations, relations, and transaction flows.
  • Inngest: Event-driven background jobs for notifications, data sync, AI pipelines, and scheduled tasks.
  • REST APIs: Designed and consumed 15+ third-party APIs including Google Ads, Meta Ads, GA4, Search Console, and DataForSEO.
  • Webhooks: Stripe webhook handling, Slack event subscriptions, and Google Pub/Sub style event flows.
  • OAuth 2.0: Implemented full OAuth flows for Google Ads, Google Analytics, Gmail, and Search Console access.
  • Stripe: Subscriptions, payment flows, customer portal, and lifecycle handling in AdPacer AI.

AI & LLM

  • Anthropic Claude: Primary AI provider in Feta AI for task analysis, content generation, SEO writing, and communications intelligence.
  • OpenAI: Used for specialized tasks like ad copy generation, keyword analysis, and structured extraction.
  • Google Gemini: Multi-modal AI for image analysis and content understanding inside broader product workflows.
  • Perplexity: Integrated for research workflows and competitive intelligence use cases.
  • AI SDK (Vercel): Unified provider abstraction for streaming responses, tool calling, and model switching across providers.
  • Tool Use: Built AI systems where models can query databases, search the web, analyze data, and trigger structured workflows.
  • RAG: Document embedding, vector search, and retrieval-augmented generation for context-aware responses.
  • Prompt Engineering: Production prompt design for classification, generation, extraction, and multi-step reasoning chains.

Marketing Tech

  • Google Ads API: Full campaign management, keyword data, conversion tracking, budget monitoring, and LSA integration.
  • Meta Ads API: Ad creative management, campaign analytics, audience insights, and spend tracking.
  • Google Analytics: GA4 Data API integration for sessions, conversions, traffic sources, and device breakdowns.
  • Search Console: Keyword rankings, CTR, impression data, and crawl statistics via direct API integrations.
  • Local Services Ads: Google LSA integration for lead tracking, call data caching, and service-business reporting.
  • Budget Pacing: Built an entire SaaS product around real-time ad budget pacing with AI-powered forecasting.

DevOps & Infra

  • Vercel: Primary deployment platform with preview deployments, edge functions, ISR, and production hosting.
  • Supabase: Managed Postgres, auth, storage, and real-time systems used as full backend infrastructure.
  • GitHub Actions: CI/CD pipelines for type checking, linting, testing, and deployment automation.
  • Sentry: Error tracking, performance monitoring, and release visibility in production.
  • Docker: Containerized workflows for consistent local development and deployable infrastructure.
  • Playwright: Cross-browser E2E testing for critical user flows.
  • Vitest: Unit and integration testing with React Testing Library and API mocking.
  • Storybook: Component documentation and visual testing for design systems and UI libraries.

Languages & Tools

  • TypeScript: Strict mode across all projects with large-scale type-safe application architecture.
  • React: Advanced React architecture including server components, custom hooks, and performance optimization.
  • Node.js: Server-side runtime for APIs, background jobs, scripts, and tooling.
  • SQL: Complex Postgres queries, migrations, RLS policies, and performance tuning.
  • Python: Used for data analysis, scripting, OAuth diagnostics, and technical utilities.
  • Zod: Runtime validation at every important boundary, from APIs to forms to AI outputs.
  • React Query: Server-state patterns with cache invalidation, optimistic updates, and live sync.
  • React Hook Form: Complex form management with Zod integration and multi-step workflows.

Data & Analytics

  • PostgreSQL: Primary database engine via Supabase with complex relations, RLS, and production analytics workloads.
  • Supabase RLS: Row-level security for multi-tenant data isolation across agency and SaaS contexts.
  • Real-Time Subscriptions: Postgres change streams wired into responsive dashboard experiences.
  • GA4 Data API: Google Analytics reporting integrations with custom queries and funnel analysis.
  • Recharts: Interactive charts, KPI cards, sparklines, and marketing performance visualization.
  • Data Pipelines: Automated sync pipelines pulling from Google Ads, Meta, GSC, and GA4 into unified schemas.

SEO & Search

  • Keyword Research: Built keyword research tooling with volume, difficulty, CPC, SERP features, and clustering.
  • Competitor Analysis: Scorecards comparing keyword overlap, rankings, and domain visibility across competing sites.
  • Site Audits: Automated crawling with indexability checks, response-code analysis, and technical SEO insights.
  • SERP Tracking: Keyword position monitoring with map pack detection, organic tracking, and change alerts.
  • Content Strategy: AI-assisted topic clustering, search intent classification, and editorial planning.
  • DataForSEO: Deep API integration for keyword data, SERP analysis, and backlink-oriented research.

About

I like building software that sits close to the business, where product strategy, engineering, and day-to-day operations overlap. I work best with real ownership: understanding the problem, designing the system, shipping it, and then staying accountable for whether it actually made the team faster or the company stronger.

Feta AI is what that looks like at scale. AdPacer AI, built solo from concept through billing, is what it looks like with no team at all.

Co-founding engineer, Feta AI, Blackhawk Digital Marketing. Co-founded the agency's internal platform and build and operate it day to day, working directly with the team that uses it. The role spans product strategy, architecture, implementation, and accountability for the business outcomes the software is responsible for.

Contact