Engineering Diary, Day 4: Building a Marketing Command Center Without HubSpot

The Question That Started It All

Our CEO asked: "Do I need a management system to handle all these marketing videos and review performance? Or is this the era where we don't need that anymore? Is there an AI-native HubSpot we can build ourselves?"

The answer turned out to be: build it ourselves. Here's why.

Traditional marketing SaaS like HubSpot costs $45-80K/year at enterprise tier. But more importantly, they don't understand our world. We're not running email drip campaigns — we're orchestrating an AI-powered content factory where Seedance 2.0 generates aviation marketing videos, a knowledge graph informs content strategy, and distribution spans 8 platforms across 2 languages and 2 fundamentally different internet ecosystems (China + Global).

No SaaS tool in 2026 supports this workflow natively. So we built one — in a single sprint.

Architecture: 5 Tabs, 18 Files, Zero External Dependencies

The Marketing Command Center lives at /admin/marketing within our existing admin panel. It reuses our proven components — StatsCard (animated count-up with IntersectionObserver), DataTable<T> (generic sortable), and the admin color system (#050505 bg, #111111 cards, #8bb8d4 accent).

The dashboard is organized into 5 tabs:

Tab 1: Content Pipeline (Kanban Board)

A 5-column board tracking content through its lifecycle: Script → Generation → Review → Distribute → Live. Each column has a color-coded header strip and shows content cards with type badges, platform icons, creator tags, and campaign labels.

The key insight: this isn't just for video. We support 9 content formats across 4 content types:

• Video formats: Route Spotlight, Aircraft Walkthrough, Price Comparison, Customer Journey, Behind the Scenes, Empty Leg Alert
• Non-video formats: Lifestyle Post (Xiaohongshu), Industry Insight (LinkedIn), Data Thread (X/Twitter)

The board includes filters for content type, creator (3 interns + AI auto), and full-text search.

Tab 2: Distribution Tracker

Every piece of content gets distributed across multiple platforms, each with a unique UTM-tagged URL. The Distribution Tracker is a sortable DataTable showing content title, platform, status (published/pending/failed), publish date, views, engagement, saves, and clicks.

Below the table sits a UTM Link Generator — enter a landing page path and campaign name, and it instantly generates copy-ready URLs for all 8 platforms. This integrates directly with our generateDistributionUrls() utility from the UTM tracking system we built earlier.

Tab 3: Attribution Dashboard

This is where the magic happens. A pure SVG conversion funnel visualizes the journey: Content Views → Website Visits → Route Page Views → Quote Requests → Bookings. Each layer shows absolute numbers and inter-stage conversion rates.

Alongside the funnel, a source ranking table breaks down attribution by platform — showing quotes generated, bookings closed, and revenue attributed to each source. Below that, a campaign performance table reveals which campaigns drive the most value.

At the bottom, an Agent Network attribution summary shows how our AI agent referral program feeds into the marketing funnel — a unique advantage no traditional marketing dashboard offers.

Tab 4: Content Calendar

A month-view CSS Grid calendar overlays content items and events on each day. The right sidebar features two panels:

• Content Suggestions — automatically generated based on events happening within 14 days. If Cannes Film Festival is in 10 days, the system suggests creating Route Spotlight, Aircraft Walkthrough, and Lifestyle Post content tied to the London-Nice route.
• Upcoming Events — cards showing event name (bilingual), date range, price multiplier badge (e.g., "3.0x" for Super Bowl), related routes, and suggested content formats.

We pre-loaded 14 real-world events: Davos WEF, Super Bowl, Art Basel (Hong Kong + Miami), Cherry Blossom Season, Cannes, Monaco GP, Wimbledon, Singapore F1, Chinese New Year, and more. Each has a price multiplier that signals demand intensity to the content team.

Tab 5: Platform Performance

Eight analytics cards — one per platform — each showing the primary metric (views for TikTok, saves for Xiaohongshu, shares for LinkedIn, clicks for X), secondary metrics, a 7-day SVG sparkline, best-performing content type, and audience description.

Below the cards, a cross-platform comparison bar chart visualizes total views and CTR side-by-side, and a content type performance table shows average views and clicks per format.

The 8-Platform Strategy: Why Not Just Short Video

Our CEO's directive was clear: "Besides short videos, also consider non-video platforms." This is crucial because luxury aviation marketing needs multiple touchpoints:

Platform	Type	Format	Audience
Douyin	Video	Route Spotlight, Empty Leg	Chinese HNWI
TikTok	Video	Route Spotlight, Price Compare	Global young affluent
Instagram	Video + Photo	Walkthroughs, Journeys	Luxury consumers
YouTube	Video	Long-form + Shorts	Broad audience
WeChat Video	Video	Localized route content	Chinese professionals
Xiaohongshu	Photo + Video	Lifestyle Post	Young affluent women
LinkedIn	Long-form article	Industry Insight	B2B, Agent developers
X/Twitter	Thread	Data Thread	Tech & aviation

The last three are the non-video platforms. Xiaohongshu's "lifestyle post" format is perfect for aspirational aviation content targeting China's growing affluent female demographic. LinkedIn's "industry insight" format positions VOLO as a thought leader in the agent economy. And X's "data thread" format lets us weaponize our knowledge graph — turning route pricing data and empty leg alerts into viral content.

Technical Decisions Worth Noting

Why Pure SVG Charts

We chose hand-drawn SVG for the funnel chart, sparklines, and bar charts instead of adding Chart.js or Recharts. Reasons:

• Bundle size: Zero additional KB. Chart.js alone adds 200KB+ gzipped.
• Design control: Our dark luxury aesthetic requires precise color control that charting libraries fight against.
• Simplicity: A funnel is just 5 rectangles. A sparkline is one polyline. We don't need a library for that.

Why Hardcoded Mock Data

All admin pages in VOLO use hardcoded mock data — this is intentional. The admin system is a management preview that demonstrates the full UX before we wire it to real APIs. When real data arrives, the swap is surgical: only mock-data.ts gets replaced with API calls. Every component is already typed and ready.

Why Self-Hosted Over SaaS

• Cost: $0/year vs $45-80K/year for HubSpot Enterprise
• Integration: Native access to our UTM system, route data, agent attribution, and Content Syndication API
• China compatibility: HubSpot doesn't support Douyin, Xiaohongshu, or WeChat natively
• Agent attribution: No SaaS tool understands AI agent referral tracking
• Speed: Built in one sprint; a SaaS integration would take weeks of configuration

What's Next

The Marketing Command Center is live and deployed. Immediate next steps:

• Wire the pipeline board to real content creation workflows (Seedance API integration)
• Connect distribution records to actual social media analytics APIs
• Build real-time attribution tracking using the existing volo_attr cookie system
• Add drag-and-drop to the Kanban board for pipeline stage transitions
• Implement A/B content suggestions powered by the knowledge graph

The best marketing tools are the ones you build yourself — because they can evolve as fast as your strategy. When your strategy involves AI-generated content across 8 platforms in 2 languages with agent-based attribution, no off-the-shelf tool can keep up.