🚀 COMPLETE DASHBOARD SETUP GUIDE

What You're Building

A professional web dashboard that:

Generates articles from keywords
Validates Amazon affiliate links automatically
Builds live preview of your site
Publishes directly to GitHub
All from one beautiful interface

⚡ Quick Setup (5 Minutes)

Step 1: Install Dependencies

cd C:\dev\itblogpros\_automation\webapp
npm install

What this installs:

Express (web server)
WebSocket (real-time updates)
simple-git (GitHub integration)
open (auto-open browser)

Step 2: Verify Existing Systems

Make sure you have:

✅ C:\dev\itblogpros\_automation\gemini-article-generator.js
✅ C:\dev\itblogpros\_automation\.env (with GEMINI_API_KEY)
✅ C:\dev\itblogpros\.eleventy.js
✅ Git configured with GitHub credentials

Step 3: Launch Dashboard

Option A: Double-Click

Double-click: START-DASHBOARD.bat

Option B: Command Line

npm start

Dashboard opens automatically at: http://localhost:3000

🎯 How It Works

Architecture Flow

┌─────────────────────────────────────────────────┐
│  Dashboard (http://localhost:3000)              │
│  - Enter keyword                                 │
│  - Select options                                │
│  - Monitor progress                              │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  article-workflow.js                             │
│  - Orchestrates entire process                   │
│  - Real-time status updates via WebSocket       │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  Stage 1: Analyze (10%)                          │
│  - Parse keyword                                 │
│  - Identify product type                         │
│  - Extract ISP if mentioned                      │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  Stage 2: Generate (30%)                         │
│  - Call gemini-article-generator.js              │
│  - Create 1350±100 word article                  │
│  - Include 3+ Amazon products                    │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  Stage 3: Validate (60%)                         │
│  - Run gemini-enhanced.js validator              │
│  - Test all Amazon ASINs                         │
│  - Check for meta-commentary                     │
│  - Calculate quality score                       │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  Stage 4: Build (80%)                            │
│  - Run Eleventy build                            │
│  - Generate preview                              │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  Stage 5: Complete (100%)                        │
│  - Save to tracking database                     │
│  - Display in dashboard                          │
│  - Ready for preview/publish                     │
└──────────────────────────────────────────────────┘

Preview Flow

┌─────────────────────────────────────────────────┐
│  Click "Start Preview Server"                    │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  Launch Eleventy Dev Server (port 3001)          │
│  - Watches for file changes                      │
│  - Auto-rebuilds on changes                      │
│  - Serves _site/ directory                       │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  Click "Preview" on any article                  │
│  Opens: http://localhost:3001/posts/article-url │
└──────────────────────────────────────────────────┘

Publish Flow

┌─────────────────────────────────────────────────┐
│  Click "Publish" on article                      │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  git add posts/article-file.md                   │
│  git commit -m "Add article: filename"           │
│  git push origin main                            │
└────────────┬────────────────────────────────────┘
             │
             ↓
┌─────────────────────────────────────────────────┐
│  GitHub triggers Cloudflare Pages deployment     │
│  - Build runs on Cloudflare                      │
│  - Site updates in 2-3 minutes                   │
│  - Live at https://itblogpros.com                │
└──────────────────────────────────────────────────┘

📁 Files Created

Core Files

webapp/
├── server.js                    # Main Express server
│   └── Port: 3000
│   └── Handles API requests
│   └── WebSocket server
│
├── article-workflow.js          # Workflow orchestration
│   └── Connects all systems
│   └── Tracks progress
│   └── Manages article lifecycle
│
├── system-adapter.js            # System integration
│   └── Bridges existing scripts
│   └── Loads Gemini generator
│   └── Validates environment
│
├── index.html                   # Dashboard UI
│   └── Beautiful interface
│   └── Real-time updates
│   └── Responsive design
│
├── package.json                 # Dependencies
│   └── Express
│   └── WebSocket (ws)
│   └── simple-git
│   └── chokidar (file watching)
│
├── START-DASHBOARD.bat          # Windows launcher
│   └── Auto-installs dependencies
│   └── Launches server
│   └── Opens browser
│
└── README.md                    # User guide

Generated Files

webapp/
└── article-tracking.json        # Article database
    └── All article metadata
    └── Generation history
    └── Publish status

🔧 Configuration Options

Environment Variables

Create C:\dev\itblogpros\_automation\.env:

# Required
GEMINI_API_KEY=your_gemini_key_here

# Optional (defaults shown)
DASHBOARD_PORT=3000
PREVIEW_PORT=3001
SITE_URL=https://itblogpros.com

# Optional for Bing submission
BING_API_KEY=your_bing_key_here

Port Configuration

If ports conflict, change in your .env:

DASHBOARD_PORT=4000    # Instead of 3000
PREVIEW_PORT=4001      # Instead of 3001

Then restart dashboard.

🎨 Using The Dashboard

Dashboard Interface

┌─────────────────────────────────────────────────┐
│  🚀 ITBlogPros Article Dashboard                │
│  Generate, preview, and publish articles         │
└─────────────────────────────────────────────────┘

┌──────────────────────┬──────────────────────────┐
│  📝 Generate New     │  📚 Articles             │
│  Article             │                          │
│                      │  ┌─────────────────────┐ │
│  Keyword:            │  │ Total     │ 5       │ │
│  [____________]      │  │ Drafts    │ 2       │ │
│                      │  │ Published │ 3       │ │
│  Product Type:       │  └─────────────────────┘ │
│  [Routers ▼]         │                          │
│                      │  Article Cards:          │
│  [Generate Article]  │  ┌──────────────────── ┐ │
│                      │  │ WiFi 7 slower...    │ │
│  ──────────────────  │  │ Score: 85/100       │ │
│                      │  │ [Preview][Publish]  │ │
│  🔍 Preview Controls │  └──────────────────── ┘ │
│                      │                          │
│  [Start Preview]     │  ┌──────────────────── ┐ │
│  [Stop Preview]      │  │ Best router for...  │ │
│  [Rebuild Site]      │  │ Score: 92/100       │ │
│                      │  │ [Preview][Delete]   │ │
│  Preview running at: │  └──────────────────── ┘ │
│  localhost:3001      │                          │
└──────────────────────┴──────────────────────────┘

Real-Time Progress

When generating:

Progress Bar: [████████░░░░░░░░░░] 60%

Messages:
✓ 🔍 Analyzing keyword and fetching Bing opportunities...
✓ 🤖 Generating article with Gemini AI...
⟳ 🔍 Validating Amazon links and content...
  🏗️ Building site preview...
  ✅ Complete!

Article Card Details

┌─────────────────────────────────────────────┐
│  WiFi 7 slower than expected               │  [Draft]
├─────────────────────────────────────────────┤
│  📝 1,350 words  │  🔗 3 Amazon links      │
│  Score: 85/100   │  ✓ No meta-commentary   │
├─────────────────────────────────────────────┤
│  [🔍 Preview]  [🚀 Publish]  [🗑️ Delete]   │
└─────────────────────────────────────────────┘

✅ Testing Your Setup

System Health Check

Check files exist:

cd C:\dev\itblogpros\_automation\webapp
dir server.js
dir article-workflow.js
dir index.html

Verify dependencies:

npm list express
npm list ws
npm list simple-git

Test Gemini connection:

cd ..
node gemini-article-generator.js
# Should show help or run successfully

First Article Test

Start dashboard
Enter keyword: "test article"
Click "Generate Article"
Watch progress bar complete
Verify article appears in list
Click "Preview" to view
Click "Delete" to remove test

Preview Server Test

Click "Start Preview Server"
Wait for success message
Open http://localhost:3001
Should see your site
Click article preview
Click "Stop Preview Server"

Publish Test (Optional)

⚠️ Only if ready to publish!

Generate real article
Preview and verify quality
Click "Publish"
Confirm action
Check GitHub for commit
Wait 2-3 minutes
Check live site

🐛 Common Issues & Fixes

Issue: "Port 3000 already in use"

# Find and kill process
netstat -ano | findstr :3000
taskkill /PID [number] /F

# Or change port in .env
echo DASHBOARD_PORT=4000 > .env

Issue: "Cannot find module 'express'"

cd C:\dev\itblogpros\_automation\webapp
npm install

Issue: "Gemini generator not found"

Check file exists:

dir C:\dev\itblogpros\_automation\gemini-article-generator.js

If missing, you need the generator script.

Issue: "Git push failed"

# Check git status
cd C:\dev\itblogpros
git status

# Configure git
git config user.email "[email protected]"
git config user.name "Your Name"

# Test connection
git fetch

Issue: "Preview shows old content"

Click "Rebuild Site"
Hard refresh: Ctrl+Shift+R
Clear browser cache
Restart preview server

Issue: "Article generation fails"

Check Gemini API key:

cd C:\dev\itblogpros\_automation
type .env
# Should show GEMINI_API_KEY=...

Check API key valid:

Visit https://makersuite.google.com/app/apikey
Verify key is active
Check usage limits

📊 Monitoring & Logs

View Server Logs

Server shows detailed logs:

🔌 Client connected
📨 Received: {type: 'generation-update'}
✅ Article generated successfully
🔌 Client disconnected

Article Tracking Database

View all articles:

type C:\dev\itblogpros\_automation\webapp\article-tracking.json

Structure:

{
  "articles": [
    {
      "keyword": "WiFi 7 slower than expected",
      "article": {
        "filename": "2025-11-26-wifi-7-slower...",
        "wordCount": 1350,
        "qualityScore": 85
      },
      "published": false,
      "createdAt": "2025-11-26T10:30:00.000Z"
    }
  ]
}

🎓 Advanced Features

Batch Generation

Generate multiple articles by calling API:

const keywords = [
  'WiFi 7 slower than expected',
  'best router for Virgin Media',
  'smart home setup guide'
];

for (const keyword of keywords) {
  await fetch('http://localhost:3000/api/generate', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({ keyword })
  });
  
  // Wait 5 minutes between generations
  await new Promise(r => setTimeout(r, 300000));
}

Custom Quality Rules

Edit article-workflow.js to add rules:

async validateCustomRules(article) {
  // Minimum word count
  if (article.wordCount < 1200) {
    throw new Error('Article too short');
  }
  
  // Require specific products
  if (!article.content.includes('TP-Link')) {
    throw new Error('Must mention TP-Link products');
  }
  
  return true;
}

Webhook Notifications

Get notified when articles publish:

// In article-workflow.js
async publishArticle(filename, commitMessage) {
  const result = await super.publishArticle(filename, commitMessage);
  
  // Send webhook
  await fetch('https://hooks.slack.com/your-webhook', {
    method: 'POST',
    body: JSON.stringify({
      text: `📝 New article published: ${filename}`
    })
  });
  
  return result;
}

🚀 Next Steps

Immediate (Start Now)

✅ Double-click START-DASHBOARD.bat
✅ Generate first test article
✅ Preview and verify it works
✅ Delete test article

This Week

Generate 2-3 real articles
Preview each before publishing
Publish best article
Monitor live site performance

This Month

Build article production routine
Track quality scores
Optimize generation process
Add custom validation rules

💡 Pro Tips

Keyword Selection

Best keywords:

Specific pain points
Include brand names
Target user intent
Natural language

Examples:

✅ "WiFi 7 slower than expected"
✅ "Virgin Media router keeps disconnecting"
❌ "router" (too generic)
❌ "WiFi technology" (no pain point)

Quality Scores

90-100: Publish immediately
80-89: Quick review, then publish
70-79: Minor improvements needed
Below 70: Regenerate or edit manually

Preview Best Practices

Always preview before publishing:

✓ Test all Amazon links
✓ Check formatting
✓ Read for errors
✓ Test on mobile
✓ Verify no meta-commentary

Workflow Optimization

Generate articles in batches
Preview all before publishing
Publish best scores first
Track successful patterns
Refine keyword selection

🎉 Success Metrics

Track These

Articles generated per week
Average quality score
Publish rate (published/generated)
Time from generation to publish
Amazon link validation rate

Goals

Week 1: 3 articles generated and published
Month 1: 10+ high-quality articles
Month 3: Consistent 5+ articles/week
Month 6: Fully optimized workflow

📞 Need Help?

Resources

Dashboard README: webapp/README.md
System Logs: Console output
Article Database: article-tracking.json
Workflow Code: article-workflow.js

Contact

Email: [email protected]
Site: https://itblogpros.com

🎊 You're Ready!

Your complete article dashboard is set up and ready to use.

Start generating articles now:

Double-click: START-DASHBOARD.bat

Then enter a keyword and watch the automation magic! ✨

Time saved per article: 20-35 minutes Quality improvement: Automated validation ensures consistency Peace of mind: Preview before publishing

Welcome to streamlined article production! 🚀