Campaignix

• 

  Homepage

• 

  Report Page

• 

Inspiration

Every growth team we talked to had the same complaint: they weren't short on marketing tools, they were drowning in them. One tab for ad spend, another for the content calendar, a spreadsheet for competitor pricing, a Slack channel for "did anyone check if that ad is fatiguing yet." Nothing talked to anything else, so someone always ended up being the human API between five different dashboards. We wanted to build the thing that team lead kept sketching on a whiteboard — one control room where specialized agents actually share context instead of five disconnected apps that happen to live in the same browser window.

What it does

Campaignix is a control room for a marketing team, built around a network of cooperative agents that all read from the same shared state:

• The Dashboard pulls conversion rates, spend efficiency, and live agent activity into one view, so nobody has to reconcile five different "sources of truth."
• The Autopilot Ad Optimizer shifts budget toward whichever channel is actually converting, and flags creative fatigue before it quietly tanks your conversion rate.
• The Content Creator & Copywriting Suite generates on-brand headlines, email sequences, and social copy, then reshapes it per platform instead of pasting the same paragraph everywhere.
• The Content Calendar gives a visual, cross-channel view of what's scheduled and whether it's actually syncing.
• Market Intelligence maps competitor positioning and surfaces the market gaps worth targeting.
• A set of Workspace Utilities rounds it out — a lead scraper that hunts competitor mentions, a wholesale price optimizer for margin modeling, and an SEO analyzer for keyword opportunity.

The idea isn't "more dashboards." It's fewer decisions made blind.

How we built it

We went with React 19 and TypeScript for the frontend, Vite 6 for the dev loop (the HMR speed genuinely changed how fast we could iterate on the agent views), and Tailwind CSS v4 for styling — which meant relearning our config approach almost immediately, more on that below. Motion handles the transitions and micro-interactions that make the "agents talking to each other" feel real rather than static, and Lucide React covers the iconography.

Structurally, AppContext holds the shared state and dispatch logic that every "agent" view reads from and writes to, which is what makes the cross-agent sync feel cohesive instead of six separate mini-apps stapled together. Each major feature lives in its own view — dashboard, ad optimizer, calendar, content creator, market research, and a catch-all utilities shell — routed through a single navigation hub.

Challenges we ran into

Tailwind v4's config changes broke more of our early setup than we expected, and we lost a chunk of the first day just getting the build pipeline stable again. Once that was sorted, the harder problem was design, not code: we had six genuinely different workflows (budget allocation, copywriting, scheduling, competitive research, pricing math) and needed them to feel like one product instead of six. That's where the indigo/violet system and consistent component density did a lot of quiet work. We also spent real time tuning the Motion transitions — it's easy to make a dense data grid feel busy instead of alive, and we rewrote the ripple and modal transitions more than once to get that balance right.

Accomplishments that we're proud of

Getting six distinct agent domains to feel like one coherent product, not a folder of prototypes, is the thing we're most proud of. The information density in the dashboard and utilities views is high, but it still reads cleanly at a glance — that took more iteration than any single feature did.

What we learned

Beyond the Tailwind v4 migration lessons, the bigger takeaway was architectural: centralizing shared state early (even with mock data) made every agent-to-agent interaction easier to reason about later. If we'd built each view in isolation and tried to wire them together at the end, we'd still be doing it.

What's next for Campaignix

Swapping the mock data layer for real integrations — actual ad platform APIs (Meta, Google, LinkedIn), a real LLM layer behind the copywriting and market intelligence agents, and

Built With

• css
• css3
• html5
• javascript
• lucide
• motion
• node.js
• npm
• react
• tailwind
• typescript
• vite