A full-stack Meta Ads analytics dashboard built with React, TypeScript, tRPC, and Drizzle ORM. Provides real-time campaign performance tracking, funnel analysis, ad fatigue detection, budget monitoring, and AI-powered daily task recommendations.
- Overview Dashboard — KPI cards for spend, leads, impressions, and clicks with trend indicators
- Funnel Analysis — TOFU / MOFU / BOFU spend breakdown with conversion metrics
- Campaign Table — Sortable, searchable campaign performance table with ad-set drill-down
- Delivery Insights — CPM, CTR, and frequency comparisons across campaigns
- Ad Fatigue Detection — Frequency-based fatigue scoring with spend-at-risk alerts
- Budget Tracker — Pacing and allocation analysis across campaigns
- Daily Tasks — AI-generated optimization tasks with priority scoring
- Date Range Selector — Switch between last 7, 14, 30, 60, and 90-day windows
- Dark Aerospace HUD — Cyan/amber/coral accent design with JetBrains Mono data typography
| Layer | Technology |
|---|---|
| Frontend | React 19, TypeScript, TailwindCSS v4, Recharts, Framer Motion |
| API | tRPC v11, Express, Zod |
| Database | MySQL / TiDB via Drizzle ORM |
| Auth | Manus OAuth (JWT cookie sessions) |
| Build | Vite 7, esbuild |
- Node.js 22+
- pnpm 10+
- MySQL or TiDB database
# Install dependencies
pnpm install
# Copy environment variables
cp .env.example .env
# Edit .env with your credentials
# Push database schema
pnpm db:push
# Start development server
pnpm dev| Command | Description |
|---|---|
pnpm dev |
Start development server (Vite + Express) |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm check |
TypeScript type check |
pnpm db:push |
Generate and run database migrations |
pnpm format |
Format code with Prettier |
pnpm test |
Run tests with Vitest |
meta-ads-dashboard/
├── client/ # React frontend
│ ├── index.html
│ └── src/
│ ├── components/ # UI components and dashboard sections
│ ├── contexts/ # React context providers
│ ├── hooks/ # Custom hooks
│ ├── lib/ # Utilities and data helpers
│ └── pages/ # Page components
├── server/ # Express + tRPC backend
│ ├── _core/ # Server infrastructure (auth, db, trpc, vite)
│ ├── routers/ # tRPC routers (meta, tasks)
│ ├── db.ts # Database connection and user queries
│ └── task-generator.ts # AI-powered task generation
├── shared/ # Shared types and constants
├── drizzle/ # Database schema and migrations
└── package.json
See .env.example for all required environment variables.
MIT