Ads Dashboard

The open-source ads reporting dashboard for the Zernio API. Paste your API key and see spend, performance, campaigns, and creatives across every ad platform you run through Zernio (Meta, Google, TikTok, LinkedIn, Pinterest, X, ChatGPT).

What you get

• Overview: spend, impressions, clicks, conversions, CTR, CPC, CPM, and ROAS for any date range, with a previous-period comparison.
• Trends: daily, weekly, or monthly time series for any metric.
• Campaigns: sortable campaign table with drill-down into ad sets and individual ads.
• Ad detail: per-ad metrics (including video funnel), creative, and the platform's own ad preview.
• Accounts: connection health for every ad account.

Quickstart

git clone https://github.com/zernio-dev/ads-dashboard
cd ads-dashboard
npm install
npm run dev

Open http://localhost:3000 and paste your Zernio API key. You can create one in your Zernio settings.

Self-host mode

Set the key in the environment instead and the connect screen is skipped:

cp .env.example .env.local
# put your key in ZERNIO_API_KEY

How it works

There is no database and no server-side state. The browser stores your API key in localStorage and sends it with each request to a small proxy route in this app, which forwards the call to the Zernio API:

Browser (key in localStorage)
   -> GET /api/zernio/v1/ads/...   (key in x-zernio-key header)
      -> https://zernio.com/api/v1/ads/...   (key as Bearer token)

The proxy (app/api/zernio/[...path]/route.ts) is deliberately restrictive:

• GET only. The dashboard reads data; it can never modify your campaigns.
• Allowlisted paths only: /v1/accounts and /v1/ads/*. Nothing else is forwarded.
• Stateless. The key is never logged or persisted server-side.

API endpoints used

Endpoint	Used for
GET /v1/accounts	Account picker, connection status
GET /v1/ads/timeline	Overview totals and trend chart
GET /v1/ads/tree	Campaign > ad set > ad table
GET /v1/ads/{adId}	Ad detail
GET /v1/ads/{adId}/preview	Platform ad preview (Meta)

See the Zernio API docs for the full Ads API.

Environment variables

All optional:

Variable	Purpose
ZERNIO_API_KEY	Self-host mode: use this key for all requests and skip the connect screen
ZERNIO_API_BASE	Override the API base URL (default https://zernio.com/api)

Development

npm run dev    # start the dev server
npm test       # run unit tests (vitest)
npm run lint   # eslint
npm run build  # production build

License

MIT