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.
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.
AI Dev Session
December 8, 2024
3 hours. 4 features. 1 bug fix. 6,172 lines of code. All powered by Claude Opus 4.6.
Feature 1: Social Media Carousel Cards
The Problem We Solved
Context switching to Canva, manual copying, inconsistent styling
Build carousel cards in the blog with one-click ZIP download
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, and no version control on assets.
Features Built
- 1
Social Media Carousel Cards
- 2
Blog Feature Audit System
- 3
Admin Dashboard Foundation
- 4
TOC Bug Fix
The ZIP Download Feature
Creating carousel cards: 45 min in Canva → 10 min in blog system
Feature 2: Blog Feature Audit System
With 15+ blog posts, we had no way to track which posts have carousel cards, which are missing newsletter signups, or whether all posts use consistent theming. The audit system creates accountability—you can see the gaps.
Admin Routes
- ✓
/admin/login - Auth
- ✓
/admin - Dashboard
- ✓
/admin/contacts - Forms
- ✓
/admin/blog-audit - Tracking
Feature 3: Admin Dashboard Foundation
Managing the site required checking the database directly for contact submissions. No central place to see site health. No authentication system for admin features. Now we have a foundation for everything.
Admin Routes
- ✓
/admin/login - Auth
- ✓
/admin - Dashboard
- ✓
/admin/contacts - Forms
- ✓
/admin/blog-audit - Tracking
Bug Fix: The Invisible TOC
Bug Found & Fixed
TOC showed 3 items instead of 7. Custom React components need explicit H2 headings for DOM-scanning tools.
Blog post #1 had a Table of Contents showing only 3 items instead of 7 sections. The root cause: custom React components don't render markdown content. The TOC auto-generates by scanning the DOM for H2/H3 elements. Our visual component only had H3 headings, so the TOC missed all main sections.
The Lesson
Key Learnings
Key Learning
Build tools where you work. The best tool is the one that doesn't break your flow.
Three Takeaways
DOM-based tools need semantic HTML
Auto-generated features like TOC scan the DOM, not your React component tree
Build tools where you work
Carousel cards in the blog system beats context switching to Canva every time
Audit systems create accountability
You can't improve what you can't see—track feature adoption across all content
Files Created
# Carousel Cards System client/src/components/blog/carousel-social-card.tsx client/src/components/blog/carousel-patterns.tsx # Admin Dashboard 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 # Auth System client/src/contexts/auth-context.tsx server/auth.ts
Social Media Carousel
Download these cards for Instagram, LinkedIn, or any social platform. Click individual cards or use "Download as ZIP" for all.
Social Media Carousel
8 cards • Download as ZIP (images) or PDF (LinkedIn)
AI Dev Session
December 8, 2024
3 hours. 4 features. 1 bug fix. 6,172 lines of code. All powered by Claude Opus 4.6.
Creating carousel cards: 45 min in Canva → 10 min in blog system
The Problem We Solved
Context switching to Canva, manual copying, inconsistent styling
Build carousel cards in the blog with one-click ZIP download
Features Built
- 1
Social Media Carousel Cards
- 2
Blog Feature Audit System
- 3
Admin Dashboard Foundation
- 4
TOC Bug Fix
Admin Routes
- ✓
/admin/login - Auth
- ✓
/admin - Dashboard
- ✓
/admin/contacts - Forms
- ✓
/admin/blog-audit - Tracking
Bug Found & Fixed
TOC showed 3 items instead of 7. Custom React components need explicit H2 headings for DOM-scanning tools.
Key Learning
Build tools where you work. The best tool is the one that doesn't break your flow.
Building JJM: The Blog
Part 6 of documenting how we build this blog system with AI.
Building JJM: The Blog
Share This Article
Spread the knowledge