admin/ClaudeMarketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: scaffold Next.js 15 project with TypeScript and Tailwind

Browse Source
This commit is contained in:
Trey t
2026-03-23 11:50:39 -05:00
commit 3abe46fba6
395 changed files with 18064 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/reference/THE_COMPLETE_PICTURE.md
+445
View File
@@ -0,0 +1,445 @@
# The Complete Picture
---
## What You're Building
A self-hosted AI marketing engine that researches trends, writes scripts, generates images, produces videos, writes copy, and publishes to Instagram, TikTok, and Nextdoor — autonomously — with you as the only human in the loop approving what goes live.
No marketing team. No freelancers. No design tools. No video editors. One prompt per campaign. ~20 minutes of your time. 20-30 ad assets out the other end.
---
## Part 1: Setup (One Time)
### What You Need Before Starting
- A machine that runs Docker (Mac, Linux, or Windows with WSL)
- Claude Max subscription (already have it)
- Tavily AI free account (1,000 research credits/month)
- Self-hosted Postiz (included in your Docker stack)
- Instagram Business/Creator account connected to Postiz
- TikTok developer app connected to Postiz
- Nextdoor Ads API partnership (apply at developer.nextdoor.com)
### Step 1: Clone and Configure
```bash
git clone https://github.com/your-repo/marketing-command-center.git
cd marketing-command-center
cp .env.example .env
```
Edit `.env`:
```bash
# Research
TAVILY_API_KEY=tvly-your-key
# Publishing
POSTIZ_API_KEY=your-postiz-key
POSTGRES_PASSWORD=a-secure-password
# Nextdoor (direct API — Postiz doesn't support it)
NEXTDOOR_API_TOKEN=your-token
NEXTDOOR_ADVERTISER_ID=your-id
# Dashboard login
NEXTAUTH_SECRET=generate-random-string
ADMIN_EMAIL=you@yourdomain.com
ADMIN_PASSWORD=your-password
```
That's it. 5 keys. No Anthropic API key — your Max plan handles Claude.
### Step 2: Authenticate Claude Code
```bash
claude login
# Browser opens → log in with your Max plan → done
```
### Step 3: Launch Everything
```bash
docker compose up -d
```
This starts 4 containers:
| Container | What It Does |
|-----------|-------------|
| **app** | Your Next.js dashboard + Claude Code pipeline |
| **postiz** | Social scheduling + media hosting for IG/TikTok |
| **postiz-db** | Postgres for Postiz (you never touch this) |
| **redis** | Cache for Postiz (you never touch this) |
### Step 4: Initialize
```bash
docker compose exec app npx prisma db push # Create database tables
docker compose exec app npx prisma db seed # Create your admin account
```
### Step 5: Connect Social Accounts in Postiz
Open `http://localhost:5000` → Postiz dashboard:
1. Connect Instagram (OAuth login — Postiz handles tokens forever)
2. Connect TikTok (OAuth login — Postiz handles daily token refresh)
### Step 6: Write Your Brand Files
Open `http://localhost:3000` → your dashboard, or edit directly:
```
pipeline/knowledge/brand_identity.md ← Who your brand is
pipeline/knowledge/platform_guidelines.md ← How content looks per platform
pipeline/knowledge/product_campaign.md ← What you're selling
pipeline/assets/ ← Drop your logos, product shots, screenshots
```
**You're live.**
---
## Part 2: Your Daily Process
### Morning (~5 minutes)
```
1. Open http://localhost:3000
2. Check the Trends page
→ Trend Scout ran overnight (automated cron)
→ You see: "POV hooks trending on TikTok this week"
→ You see: "Competitor X running UGC-style ads about [topic]"
→ You see: "Carousel posts outperforming single images on IG this week"
3. Decide: "I want to run a campaign around [feature/angle]"
```
### Campaign Creation (~2 minutes)
```
1. Click "New Campaign"
2. Fill in the form:
- Name: "Snarky Competitor Takedown"
- Platforms: ☑ Instagram ☑ TikTok ☐ Nextdoor
- Goal: App downloads
- Key message: "We do what [competitor] can't"
- Social proof: "50K downloads, 4.8★"
- Variations: 5 hooks per platform
- Use latest trend report: ☑
3. Click "Launch Pipeline"
```
### Pipeline Runs (~15-20 minutes, you do nothing)
You watch the pipeline progress page update in real-time:
```
✅ Trend Scout 12s Pulled 5 trending hooks from this week
✅ Research Agent 2m Market report: competitor gaps, audience pain points
✅ Script Writer 3m 15 ad scripts (5 hooks × 3 platforms)
✅ Ad Creative 3m 8 static ad images across 3 sizes
✅ Video Producer 5m 6 video ads (3 IG polished + 3 TikTok raw)
✅ Copywriter 2m Captions + hashtags for every asset
✅ Distribution 1m Publish manifest ready for review
```
**What each agent actually did:**
| Agent | Input | What It Did | Output |
|-------|-------|-------------|--------|
| **Trend Scout** | Automated web scan | Searched TikTok/IG trends, competitor ads, viral hooks | `trend_report.json` |
| **Research Agent** | Your campaign brief + trend report | Ran 5 Tavily searches (market, competitors, pain points, hooks, viral) | `research_results.json` + `interactive_report.html` |
| **Script Writer** | Research output + brand voice | Wrote 15 ad scripts with timed Hook→Body→CTA structure | `scripts/` folder with 15 scripts |
| **Ad Creative** | Scripts + brand assets | Generated images via NanoBanana → built HTML layouts → Playwright screenshotted them | 8 PNGs at platform-exact dimensions |
| **Video Producer** | Scripts + brand assets | Built Remotion compositions → rendered frame-by-frame | 6 MP4s (polished IG + raw TikTok styles) |
| **Copywriter** | Research + scripts + brand voice | Wrote platform-tuned captions, hashtags, metadata | `instagram_captions.json`, `tiktok_captions.json` |
| **Distribution** | All of the above | Assembled the publish manifest | `Publish_campaign_date.md` |
### Review (~10-15 minutes)
```
1. Click the Assets tab
2. Browse the gallery:
- 8 static ad images (IG feed 1080x1080, IG Stories 1080x1920, Nextdoor 1200x1200)
- 6 video ads (IG Reels 1080x1920 polished, TikTok 1080x1920 raw/authentic)
- Each card shows: preview, caption, hashtags, hook text, platform badge
3. Click to expand any asset → see full preview + all metadata
4. Approve the ones you like (green check)
5. Reject the ones you don't (red X)
```
### Give Feedback (Optional, ~5 minutes)
Switch to the Claude tab if anything needs tweaking:
```
You: "Hook B is too corporate, make it snarkier"
Claude: *rewrites script, re-renders video* → new asset appears in gallery
You: "The colors on the static ads feel off, use more contrast"
Claude: *updates HTML/CSS, re-screenshots* → updated PNGs in gallery
You: "Create one more ad that directly calls out [competitor] by name"
Claude: *writes script, generates image + video* → 3 new assets appear
You: "Here are our actual competitors for future research: [list]"
Claude: *updates knowledge/product_campaign.md* → all future campaigns reflect this
```
### Publish (~2 minutes)
```
1. Select approved assets
2. Click "Push to Postiz"
3. Modal shows:
- Which platform each goes to
- Caption preview
- Suggested schedule time (from research data)
4. Adjust schedule if you want
5. Click "Confirm"
6. Postiz uploads media → schedules posts → handles publishing
```
### What Happens Behind the Scenes
```
Your approved static ad (PNG) for Instagram:
→ Your app uploads PNG to Postiz (/upload endpoint)
→ Postiz stores it, returns public URL
→ Postiz creates scheduled post with caption + image
→ At scheduled time: Postiz calls Instagram Graph API
→ Instagram creates container → processes → publishes
→ Post is live on your Instagram
Your approved video for TikTok:
→ Your app uploads MP4 to Postiz
→ Postiz stores it, returns public URL
→ Postiz creates scheduled post with caption + video
→ At scheduled time: Postiz calls TikTok Content Posting API
→ TikTok processes and publishes
→ Video is live on TikTok
Your approved ad for Nextdoor:
→ Your app calls Nextdoor Ads API directly (GraphQL)
→ Creates campaign → ad group → uploads creative → creates ad
→ Nextdoor reviews → approves → ad goes live
```
### Monitor
```
Queue page shows:
┌──────────────────────────────────────────────────┐
│ Scheduled │
│ 📷 IG Feed - "Still doing X?" Tue 7:30 AM │
│ 🎬 IG Reel - Hook A (polished) Tue 12:00 PM │
│ 🎬 TikTok - Hook A (raw) Tue 5:00 PM │
│ 📷 IG Feed - "Your app sucks" Wed 7:30 AM │
│ │
│ Published ✅ │
│ 📷 IG Feed - "Upgrade Your..." Mon 7:30 AM │
│ 🎬 TikTok - "POV: you found..." Mon 5:00 PM │
└──────────────────────────────────────────────────┘
```
---
## Part 3: What You're Getting
### Per Campaign (from one prompt)
| Asset Type | Quantity | Details |
|-----------|----------|---------|
| Static image ads | 6-10 | IG Feed (1080x1080), IG Stories (1080x1920), Nextdoor (1200x1200, 1200x628) |
| Video ads (motion graphic) | 4-6 | IG Reels (polished), TikTok (raw/authentic) — 15-30s each |
| Ad scripts | 15+ | 5 hook variations × 3 platform styles |
| Captions | 1 per asset per platform | Platform-tuned tone, hashtags, CTAs |
| Research report | 1 | Interactive HTML dashboard with market data, competitor analysis, keywords |
| Trend report | 1 | What's working right now on each platform |
| Publish manifest | 1 | Complete publishing plan with schedule recommendations |
### Per Week (running 2-3 campaigns)
| Output | Quantity |
|--------|----------|
| Static ads | 15-30 |
| Video ads | 10-18 |
| Unique scripts | 30-45 |
| Published posts | 15-25 across platforms |
| Your time invested | ~1 hour total |
### Per Month
| Output | Quantity |
|--------|----------|
| Static ads | 60-120 |
| Video ads | 40-72 |
| Published posts | 60-100 |
| Research reports | 8-12 |
| Your time invested | ~4 hours total |
---
## Part 4: What This Is Supplying
### The Full Marketing Stack, Replaced
| Traditional Role | What They Cost | Your System Replaces It With |
|-----------------|----------------|------------------------------|
| Market Researcher | $60-100/hr | Trend Scout + Research Agent (Tavily, automated) |
| Creative Director | $80-150/hr | Script Writer agent (knowledge files drive brand decisions) |
| Graphic Designer | $50-100/hr | Ad Creative Designer (NanoBanana + Playwright) |
| Video Editor | $50-120/hr | Video Ad Producer (Remotion, auto-rendered) |
| Copywriter | $50-100/hr | Copywriter Agent (platform-tuned, brand-voiced) |
| Social Media Manager | $40-80/hr | Distribution Agent + Postiz (scheduling, publishing) |
| **Total team cost** | **$5,000-15,000/mo** | **~$50/mo** (Max plan + Tavily free + Postiz self-hosted) |
### What You're Actually Paying
| Service | Cost | What It Does |
|---------|------|-------------|
| Claude Max | $100/mo (or $200 for Max 5x) | Powers all 7 agents — research, writing, image gen, video gen, copy, distribution |
| Tavily AI | Free (1,000 credits/mo) | Web research for trends + market data |
| Postiz | Free (self-hosted) | Media hosting + scheduling + publishing to IG/TikTok |
| NanoBanana | ~$5-15/mo (image generation) | AI images for static ads |
| Docker hosting | Free (your machine) or ~$5-20/mo (VPS) | Runs everything |
| **Total** | **~$110-235/mo** | |
---
## Part 5: Your Competitive Advantage
### 1. Speed
A human marketing team takes **1-2 weeks** to go from brief to published campaign. You do it in **20 minutes**. That's not an incremental improvement — it's a category change. You can react to trends the same day they emerge.
### 2. Volume
Human teams produce 5-10 ad variations per campaign. You produce **20-30 per campaign, 2-3 campaigns per week**. More variations = more data on what works = faster optimization. The platforms reward volume — their algorithms need creative variety to test and optimize delivery.
### 3. Consistency
Every asset is generated through the same knowledge files. Brand voice never drifts. Platform specs are never wrong. CTAs always follow the rules. A human team has bad days, misremembers guidelines, and cuts corners under deadline pressure. Your system doesn't.
### 4. Cost Structure
Your competitors are paying $5,000-15,000/month for a marketing team or agency. You're paying ~$150/month for the same output volume. That's a **97% cost reduction**. That gap doesn't close as you scale — it widens. More campaigns cost you almost nothing extra.
### 5. Institutional Memory
Every trend report, every research finding, every winning hook gets captured. Your knowledge files accumulate intelligence over time. After 3 months, your system knows your market, competitors, and audience better than any new hire could learn in a year.
### 6. Test Everything
You can't afford to have a human team create 20 hook variations to find the one that converts. You can. The research says top-performing TikTok ads hit 40-45% hook rates, but finding those hooks requires testing 10-20 variations. Your system generates them in minutes.
### 7. Platform-Native at Scale
Each platform gets content optimized for how it actually works:
- **Instagram:** Polished, aspirational, branded motion graphics
- **TikTok:** Raw, authentic, trend-driven, sounds-on
- **Nextdoor:** Neighborly, local, community-first
A human team tends to create one asset and resize it. Your system creates genuinely different content per platform because each agent applies platform-specific rules from the knowledge files.
### 8. You Own Everything
No SaaS vendor lock-in. No monthly platform fees that increase. No API changes that break your workflow overnight. The dashboard is yours. The pipeline is yours. Postiz is self-hosted. The database is a SQLite file you can back up with `cp`. If Postiz dies, you swap in Buffer's API. If Tavily dies, you swap in Exa. The architecture is modular — every piece is replaceable.
---
## Part 6: The Architecture (Final State)
```
┌─────────────────────────────────────────────┐
│ YOUR BROWSER │
│ │
│ Dashboard → Campaigns → Assets → Claude │
│ Gallery Chat Queue │
└──────────────────┬──────────────────────────┘
│
▼
┌──────────────────────────────────────────────┐
│ YOUR DOCKER HOST (single machine) │
│ │
│ ┌────────────────────────────────────────┐ │
│ │ Next.js App (port 3000) │ │
│ │ ├─ SQLite database (campaigns/assets) │ │
│ │ ├─ NextAuth (login) │ │
│ │ ├─ SSE (realtime pipeline progress) │ │
│ │ ├─ File server (preview outputs) │ │
│ │ └─ Claude subprocess spawner │ │
│ └─────────────────┬──────────────────────┘ │
│ │ │
│ ┌──────────────┼──────────────┐ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ ┌──────┐ ┌───────────┐ ┌────────┐ │
│ │Claude│ │ Postiz │ │Pipeline│ │
│ │Code │ │ (5000) │ │Outputs │ │
│ │(Max) │ │ ├─Postgres│ │(volume)│ │
│ │ │ │ └─Redis │ │ │ │
│ └──┬───┘ └─────┬─────┘ └────────┘ │
│ │ │ │
└─────┼─────────────┼──────────────────────────┘
│ │
│ ├──→ Instagram API (posts go live)
│ └──→ TikTok API (videos go live)
│
├──→ Tavily API (research)
├──→ NanoBanana/Gemini API (images)
└──→ Nextdoor API (ads)
```
### Data Flow: Prompt to Post
```
You type a campaign prompt in the browser
│
▼
Next.js API spawns Claude Code subprocess (uses Max plan)
│
▼
Claude reads CLAUDE.md → loads skills → reads knowledge files
│
├─→ Trend Scout: scans web via Tavily → trend_report.json
├─→ Research Agent: 5 Tavily queries → research_results.json + report.html
├─→ Script Writer: reads research → writes 15 scripts
├─→ Ad Creative: NanoBanana generates images → Claude builds HTML → Playwright screenshots → PNGs
├─→ Video Producer: Claude writes Remotion compositions → renders → MP4s
├─→ Copywriter: reads everything → writes platform-tuned captions
└─→ Distribution: assembles publish manifest
│
▼
All outputs saved to pipeline/outputs/{campaign}/
Next.js detects new files → creates asset records in SQLite
SSE pushes updates to your browser in real-time
│
▼
You browse the asset gallery → approve what you like
│
▼
Click "Push to Postiz" → Next.js uploads media to Postiz → schedules post
│
▼
Postiz publishes at scheduled time → content is live on Instagram/TikTok
│
▼
Person scrolling Instagram sees your ad → downloads your app
```
---
## Part 7: What's in Each File
Here's every document we've built and what to use it for:
| File | Use It For |
|------|-----------|
| `FULL_SYSTEM_ANALYSIS.md` | Reference if you want to see how the original AndyNoCode system worked |
| `BEST_PRACTICES_GUIDE.md` | Official Anthropic skill-writing guidelines, 60+ linked resources |
| `PLATFORM_SPECS.md` | Instagram, TikTok, Nextdoor API details, dimensions, creative specs |
| `AUTONOMOUS_MARKETING_PLAN.md` | 7-agent pipeline design, ad creative frameworks, what makes people download |
| `FRONTEND_ARCHITECTURE.md` | Next.js dashboard architecture, database schema, Docker Compose, Claude/Postiz integration code |
| `THE_COMPLETE_PICTURE.md` | This document — the executive overview of everything |
| `transcript_clean.txt` | Original video transcript for reference |