AI Dev Session: Carousel Cards & Admin Dashboard

AI Dev Session: Building Social Carousel Cards & Admin Dashboard in 3 Hours

Session Duration: ~3 hours
Features Built: 4
Bugs Fixed: 1
AI Model: Claude 4.5 Opus

What We Accomplished

This session focused on solving a real content marketing problem: creating social media carousel cards without leaving the blog system. We also built the foundation for an admin dashboard and discovered (and fixed) a sneaky bug where custom React components were breaking our Table of Contents.

---

Feature 1: Social Media Carousel Cards

Categories: time-savings, customer-experience
AI Dev Time: ~2 hours

The Problem

Every blog post should have social media assets. But creating carousel cards in Canva or Figma means:

• Context switching out of the development environment
• Manually copying content from the blog
• Inconsistent styling across posts
• No version control on assets

The Solution

We built a complete carousel card system directly into the blog:

11 Card Types:

• intro - Series introduction
• stat - Big number with context
• point - Single key insight
• list - Bulleted items (3-5)
• comparison - Before/after
• quote - Attributed quote
• cta - Call to action
• checklist - Checkmark list
• takeaway - Key insight highlight
• warning - Caution message
• problem-solution - Problem → Solution format

Key Features:

• 1080×1080 PNG output (Instagram-optimized)
• Flowing ribbon design connecting cards visually
• Position indicator ("1 of 8") on each card
• Progress dots showing carousel position
• Download as ZIP - one click exports all cards
• Click individual cards to download single PNG
• 5 theme colors (purple, teal, orange, blue, pink)

The Real ROI

• Quantifiable: Creating 8 carousel cards now takes ~10 minutes vs ~45 minutes in Canva
• Invisible: Content stays in sync—edit the blog, regenerate the cards
• Long-term: Every new blog automatically gets social assets with zero extra effort

---

Feature 2: Blog Feature Audit System

Categories: visibility, data-accuracy
AI Dev Time: ~1 hour

The Problem

With 15+ blog posts, we had no way to track:

• Which posts have carousel cards?
• Which posts are missing newsletter signups?
• Are all posts using consistent theming?
• What's the migration status for older posts?

The Solution

Built an admin dashboard page (/admin/blog-audit) that shows a feature matrix:

Feature	Tracked
Carousel cards	✓
Inline social cards	✓
Theme consistency	✓
Series membership	✓
Newsletter signup	✓
Service CTA	✓
Custom visuals	✓

Each blog post gets a row showing which features it has. Stats at the top show adoption rates.

The Real ROI

• Quantifiable: 30 seconds to see which posts need upgrades vs manually checking each
• Invisible: Creates accountability—you can see the gaps
• Long-term: As we add new features, we can track rollout across all posts

---

Feature 3: Admin Dashboard Foundation

Categories: visibility, workflow-cohesion
AI Dev Time: ~1 hour

The Problem

Managing the site required:

• Checking the database directly for contact submissions
• No central place to see site health
• No authentication system for admin features

The Solution

Built the foundation for a proper admin dashboard:

Routes Created:

• /admin/login - Authentication page
• /admin - Dashboard home
• /admin/contacts - Contact form submissions
• /admin/blog-audit - Blog feature tracking

Technical Stack:

• Passport.js for authentication
• Express sessions for state
• React context for frontend auth state
• Protected routes with redirects

The Real ROI

• Quantifiable: Contact submissions now visible in 2 clicks vs database queries
• Invisible: Foundation for future admin features (newsletter, social publishing)
• Long-term: Every admin feature we build has a home

---

Bug Fix: The Invisible TOC

Categories: error-prevention
AI Dev Time: ~30 minutes

What Happened

Blog post #1 ("The 10-Minute Blog Upgrade") had a Table of Contents showing only 3 items instead of 7 sections.

Root Cause

This was a sneaky architectural issue:

1. Blog posts with custom visual components don't render the markdown content
2. The TOC auto-generates by scanning the DOM for H2/H3 elements
3. Our visual component only had H3 headings (sub-sections), not H2s
4. Result: TOC found only the H3s, missing all main sections

The Fix

Added explicit H2 section headings with IDs to the visual component:

<h2 id="the-wordpress-problem" className="text-3xl font-bold">
  The WordPress Problem
</h2>

The Lesson

When custom React components replace markdown rendering, they MUST include semantic HTML that other components expect. The TOC doesn't know about React—it just scans the DOM.

Documentation updated: Added "⚠️ CRITICAL: Table of Contents Requirements" to BLOG-INSTRUCTIONS.md

---

Session Summary

Metric	Value
Features Built	4
Bugs Fixed	1
Total Dev Time	~3 hours
Files Created	8
Files Modified	5
Lines Changed	6,172 insertions, 377 deletions

Key Learnings

1. DOM-based tools need semantic HTML - Auto-generated features like TOC scan the DOM, not your React component tree
2. Build tools where you work - Carousel cards in the blog system > context switching to Canva
3. Audit systems create accountability - You can't improve what you can't see

Files Created

• client/src/components/blog/carousel-social-card.tsx
• client/src/components/blog/carousel-patterns.tsx
• client/src/pages/admin/index.tsx
• client/src/pages/admin/login.tsx
• client/src/pages/admin/contacts.tsx
• client/src/pages/admin/blog-audit.tsx
• client/src/contexts/auth-context.tsx
• server/auth.ts

---

What's Next

1. Add carousel cards to all existing blog posts
2. Build newsletter subscriber tracking in admin
3. Add social media publishing from admin dashboard
4. Create more card types based on content needs

---

This post is part of the "Building JJM: The Blog" series, documenting how we're building this blog system with AI-powered development.