Skip to content
The AI Space

📅 Social Media Calendar App

Here’s the evolution of social media management: guided business setup + AI content generation = interactive calendar experience.

Need a month of social media content? Skip the brainstorming sessions and scheduling headaches. Build a multi-step app that captures your business details, generates 30-150 post ideas across 30 days (1-5 posts per day), then lets you click any calendar day to create actual posts with tone controls and redo options.

This lesson teaches you: How to build comprehensive social media planning tools with interactive calendars, structured content generation, and professional post creation workflows.

Building on: This transforms your AI foundation into a complete business tool with calendar interfaces, content management, and professional post generation capabilities.

🎯 From Content Brainstorming to Calendar Management

Section titled “🎯 From Content Brainstorming to Calendar Management”

Here’s what traditional social media planning looks like:

❌ Hours spent brainstorming content ideas
❌ Scattered notes and random posting schedules
❌ Generic content that doesn't match your brand
❌ No systematic approach to content creation
❌ Difficulty maintaining consistent posting

Here’s what our calendar app delivers:

✅ Interactive 30-day calendar with 1-5 posts per day (30-150 total)
✅ User-selectable post frequency based on capacity and goals
✅ Business-specific content ideas generated instantly
✅ Click any day to see post ideas and generate actual content
✅ Tone controls for different content styles
✅ Redo functionality to refine posts until perfect
✅ Platform-optimized content for your chosen channel

Watch this transformation:

Traditional approach: Stare at blank calendar → Panic about what to post → Create random content

Our approach: Business setup form → Select post frequency → AI generates X content ideas → Interactive calendar → Click day → Generate post → Adjust tone → Perfect content ready

The result: A complete social media management experience that feels like a professional content planning tool.

🛠️ Step 1: Build Your Social Media Calendar API (Backend Power)

Section titled “🛠️ Step 1: Build Your Social Media Calendar API (Backend Power)”

We’ll create three specialized endpoints: one for generating content ideas, one for creating individual posts, and one for regenerating content with different tones.

Add these endpoints to your index.js:

// 📅 CONTENT IDEAS GENERATOR: Create X post ideas for 30-day calendar based on user selection
app.post("/api/social-calendar/ideas", async (req, res) => {
  try {
    const {
      businessPurpose,
      industry,
      targetAudience,
      platform,
      contentGoals,
      postsPerDay = 3
    } = req.body;


    if (!businessPurpose || !industry || !platform) {
      return res.status(400).json({ error: "Business purpose, industry, and platform are required" });
    }


    const totalPosts = postsPerDay * 30;


    const contentIdeaExpert = `You are Sarah Martinez, a social media content strategist who creates highly engaging content ideas for businesses. You specialize in generating creative, platform-specific content that drives engagement and business results.


YOUR MISSION: Generate exactly ${totalPosts} content ideas for a 30-day calendar (${postsPerDay} posts per day). Each idea should be specific, actionable, and perfect for the target business.


YOUR EXPERTISE:
- Platform-specific content optimization and trending formats
- Business-focused content that drives real results
- Creative content ideas that engage specific audiences
- Content variety to prevent audience fatigue
- Strategic content mix (educational, promotional, behind-scenes, user-generated, trending)


BUSINESS CONTEXT:
- Business Purpose: ${businessPurpose}
- Industry: ${industry}
- Target Audience: ${targetAudience}
- Platform: ${platform}
- Content Goals: ${contentGoals}
- Posts Per Day: ${postsPerDay}


RESPONSE FORMAT (JSON only, no markdown):
{
  "totalIdeas": ${totalPosts},
  "daysPlanned": 30,
  "postsPerDay": ${postsPerDay},
  "contentStrategy": {
    "businessFocus": "Brief description of content approach",
    "audienceEngagement": "How content will engage the target audience",
    "platformOptimization": "Platform-specific content strategy"
  },
  "calendar": [
    {
      "day": 1,
      "date": "2024-MM-DD",
      "posts": [
        {
          "id": 1,
          "type": "image",
          "contentPillar": "Educational",
          "ideaTitle": "Specific content idea title",
          "description": "Detailed description of what this post should contain",
          "engagementHook": "Question or hook to drive engagement",
          "callToAction": "Specific CTA for this post"
        }
      ]
    }
  ]
}


IMPORTANT:
- Return exactly 30 days with ${postsPerDay} posts each (${totalPosts} total)
- Make each idea specific to the business and platform
- Vary content types (image, video, carousel, story, etc.)
- Include mix of educational, promotional, behind-scenes, and engaging content
- Each post should have clear engagement potential
- Return only valid JSON, no explanations`;


    console.log(`🎯 Generating ${totalPosts} content ideas for ${platform} (${postsPerDay} posts/day)...`);


    const response = await openai.chat.completions.create({
      model: "gpt-4o-mini",
      messages: [{ role: "user", content: contentIdeaExpert }],
      temperature: 0.8
    });


    const ideasJson = response.choices[0].message.content;
    const contentIdeas = JSON.parse(ideasJson);


    res.json({ success: true, contentIdeas });


  } catch (error) {
    console.error("Content ideas error:", error);
    res.status(500).json({ error: "Failed to generate content ideas" });
  }
});


// 📝 POST GENERATOR: Create actual post content from ideas
app.post("/api/social-calendar/generate-post", async (req, res) => {
  try {
    const {
      postIdea,
      businessContext,
      platform,
      tone = 'professional'
    } = req.body;


    if (!postIdea || !businessContext) {
      return res.status(400).json({ error: "Post idea and business context are required" });
    }


    const postGeneratorExpert = `You are Alex Thompson, a social media copywriter who creates viral posts that drive engagement and business results. You transform content ideas into polished, platform-optimized posts.


YOUR MISSION: Transform the content idea into a complete, ready-to-post social media post with all necessary elements.


CONTENT IDEA TO DEVELOP:
- Title: ${postIdea.ideaTitle}
- Description: ${postIdea.description}
- Content Pillar: ${postIdea.contentPillar}
- Post Type: ${postIdea.type}


BUSINESS CONTEXT:
${businessContext}


PLATFORM: ${platform}
TONE: ${tone}


RESPONSE FORMAT (JSON only):
{
  "postContent": {
    "caption": "Complete post caption with hooks and formatting",
    "hashtags": ["array", "of", "relevant", "hashtags"],
    "visualDescription": "Description of image/video needed",
    "callToAction": "Clear, actionable CTA",
    "engagementQuestion": "Question to spark comments",
    "postingTips": "Best time and engagement strategy"
  },
  "contentDetails": {
    "characterCount": 0,
    "hashtagCount": 0,
    "tone": "${tone}",
    "contentPillar": "${postIdea.contentPillar}"
  }
}


IMPORTANT:
- Create platform-optimized content (Instagram: visual focus, LinkedIn: professional, TikTok: trendy, etc.)
- Match the requested tone exactly
- Include strategic hashtags relevant to business and content
- Make caption engaging with hooks, value, and clear CTA
- Keep within platform character limits where applicable
- Return only valid JSON`;


    console.log(`✍️ Generating ${tone} post for ${platform}...`);


    const response = await openai.chat.completions.create({
      model: "gpt-4o-mini",
      messages: [{ role: "user", content: postGeneratorExpert }],
      temperature: 0.7
    });


    const postJson = response.choices[0].message.content;
    const generatedPost = JSON.parse(postJson);


    res.json({ success: true, generatedPost });


  } catch (error) {
    console.error("Post generation error:", error);
    res.status(500).json({ error: "Failed to generate post content" });
  }
});


// 🔄 POST REGENERATOR: Redo post with different approach
app.post("/api/social-calendar/regenerate-post", async (req, res) => {
  try {
    const {
      originalPost,
      newTone,
      regenerationType = 'tone_change'
    } = req.body;


    const regenerateExpert = `You are Maya Chen, a social media optimization specialist who refines and improves social media posts. You take existing posts and recreate them with different approaches while maintaining the core message.


YOUR MISSION: Regenerate the social media post with the new specifications while keeping the core content idea intact.


ORIGINAL POST CONTENT:
${JSON.stringify(originalPost, null, 2)}


REGENERATION REQUEST:
- New Tone: ${newTone}
- Type: ${regenerationType}


RESPONSE FORMAT (JSON only):
{
  "regeneratedPost": {
    "caption": "New caption with updated tone/approach",
    "hashtags": ["updated", "hashtag", "array"],
    "visualDescription": "Updated visual description if needed",
    "callToAction": "Refined CTA",
    "engagementQuestion": "New engagement question",
    "postingTips": "Updated posting strategy"
  },
  "improvements": {
    "toneChange": "How the tone was adjusted",
    "engagementBoost": "What was improved for better engagement",
    "brandAlignment": "How it better fits the brand"
  }
}


IMPORTANT:
- Maintain the core message and content idea
- Apply the new tone consistently throughout
- Improve engagement potential
- Keep all platform optimization
- Return only valid JSON`;


    const response = await openai.chat.completions.create({
      model: "gpt-4o-mini",
      messages: [{ role: "user", content: regenerateExpert }],
      temperature: 0.8
    });


    const regeneratedJson = response.choices[0].message.content;
    const regeneratedPost = JSON.parse(regeneratedJson);


    res.json({ success: true, regeneratedPost });


  } catch (error) {
    console.error("Post regeneration error:", error);
    res.status(500).json({ error: "Failed to regenerate post" });
  }
});

See what just happened?

  • Three specialized experts - Sarah (content ideas), Alex (post creation), Maya (post optimization)
  • Structured JSON responses - Consistent data format for calendar and post interfaces
  • Flexible content ideas generation - Complete 30-day calendar with 1-5 posts per day based on user selection
  • Interactive post creation - Click any day to generate actual post content
  • Tone control & redo - Professional post refinement with different approaches

This is your content creation challenge becoming an interactive app. No brainstorming sessions - just guided setup that generates a complete content management system.

📱 Step 2: Build Your Interactive Social Media Calendar (Frontend Magic)

Section titled “📱 Step 2: Build Your Interactive Social Media Calendar (Frontend Magic)”

Now we’ll create a comprehensive social media management app with business setup, interactive calendar, and post generation with tone controls.

Save your existing app, then create the new social media calendar:

2A: Preserve Your Current App

Section titled “2A: Preserve Your Current App”
Terminal window
# Save your current work
cp src/App.jsx src/PreviousApp.jsx

2B: Create Your Social Media Calendar App

Section titled “2B: Create Your Social Media Calendar App”

Replace your src/App.jsx with this complete social media management experience:

// src/App.jsx - Social Media Calendar App: Complete content planning and generation
import { useState } from 'react'
import { Calendar, TrendingUp, Users, Target, RefreshCw, Play, Edit3, RotateCcw } from 'lucide-react'


function App() {
  const [currentStep, setCurrentStep] = useState('setup')
  const [businessSetup, setBusinessSetup] = useState({
    businessPurpose: '',
    industry: '',
    targetAudience: '',
    platform: 'instagram',
    contentGoals: '',
    postsPerDay: 3
  })
  const [contentIdeas, setContentIdeas] = useState(null)
  const [selectedPost, setSelectedPost] = useState(null)
  const [generatedPost, setGeneratedPost] = useState(null)
  const [currentTone, setCurrentTone] = useState('professional')
  const [isLoading, setIsLoading] = useState(false)


  // Configuration options
  const platformOptions = [
    { id: 'instagram', label: 'Instagram', emoji: '📸', desc: 'Visual content & stories' },
    { id: 'tiktok', label: 'TikTok', emoji: '🎵', desc: 'Short viral videos' },
    { id: 'linkedin', label: 'LinkedIn', emoji: '💼', desc: 'Professional networking' },
    { id: 'twitter', label: 'Twitter/X', emoji: '🐦', desc: 'Real-time updates' },
    { id: 'facebook', label: 'Facebook', emoji: '👥', desc: 'Community building' },
    { id: 'youtube', label: 'YouTube', emoji: '🎬', desc: 'Long-form videos' }
  ]


  const industryOptions = [
    { id: 'technology', label: 'Technology', emoji: '💻' },
    { id: 'healthcare', label: 'Healthcare', emoji: '🏥' },
    { id: 'fitness', label: 'Fitness & Wellness', emoji: '💪' },
    { id: 'food', label: 'Food & Beverage', emoji: '🍕' },
    { id: 'fashion', label: 'Fashion & Beauty', emoji: '👗' },
    { id: 'education', label: 'Education', emoji: '📚' },
    { id: 'finance', label: 'Finance', emoji: '💰' },
    { id: 'real-estate', label: 'Real Estate', emoji: '🏠' },
    { id: 'travel', label: 'Travel & Tourism', emoji: '✈️' },
    { id: 'retail', label: 'Retail', emoji: '🛍️' },
    { id: 'other', label: 'Other', emoji: '🏢' }
  ]


  const audienceOptions = [
    { id: 'gen-z', label: 'Gen Z (18-25)', emoji: '🎮' },
    { id: 'millennials', label: 'Millennials (26-40)', emoji: '📱' },
    { id: 'gen-x', label: 'Gen X (41-55)', emoji: '💼' },
    { id: 'baby-boomers', label: 'Baby Boomers (55+)', emoji: '📰' },
    { id: 'professionals', label: 'Business Professionals', emoji: '👔' },
    { id: 'entrepreneurs', label: 'Entrepreneurs', emoji: '🚀' },
    { id: 'parents', label: 'Parents', emoji: '👨‍👩‍👧‍👦' },
    { id: 'students', label: 'Students', emoji: '🎓' }
  ]


  const toneOptions = [
    { id: 'professional', label: 'Professional', emoji: '💼', desc: 'Formal and authoritative' },
    { id: 'casual', label: 'Casual', emoji: '😊', desc: 'Friendly and conversational' },
    { id: 'playful', label: 'Playful', emoji: '🎉', desc: 'Fun and energetic' },
    { id: 'inspirational', label: 'Inspirational', emoji: '✨', desc: 'Motivating and uplifting' },
    { id: 'educational', label: 'Educational', emoji: '📚', desc: 'Informative and helpful' },
    { id: 'humorous', label: 'Humorous', emoji: '😄', desc: 'Light and entertaining' }
  ]


  const postsPerDayOptions = [
    { value: 1, label: '1 post per day', desc: '30 total posts', emoji: '🎯' },
    { value: 2, label: '2 posts per day', desc: '60 total posts', emoji: '⚡' },
    { value: 3, label: '3 posts per day', desc: '90 total posts', emoji: '🚀' },
    { value: 4, label: '4 posts per day', desc: '120 total posts', emoji: '💪' },
    { value: 5, label: '5 posts per day', desc: '150 total posts', emoji: '🔥' }
  ]


  // Generate content ideas for 30-day calendar based on posts per day selection
  const generateContentIdeas = async () => {
    if (!businessSetup.businessPurpose.trim() || !businessSetup.industry || !businessSetup.platform) return


    setIsLoading(true)
    try {
      const response = await fetch('http://localhost:8000/api/social-calendar/ideas', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(businessSetup)
      })


      const data = await response.json()
      if (data.success) {
        setContentIdeas(data.contentIdeas)
        setCurrentStep('calendar')
      } else {
        throw new Error(data.error)
      }
    } catch (error) {
      console.error('Content ideas error:', error)
    } finally {
      setIsLoading(false)
    }
  }


  // Generate actual post content from idea
  const generatePost = async (postIdea) => {
    setIsLoading(true)
    setSelectedPost(postIdea)
    try {
      const response = await fetch('http://localhost:8000/api/social-calendar/generate-post', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          postIdea,
          businessContext: `${businessSetup.businessPurpose} - Industry: ${businessSetup.industry}, Target: ${businessSetup.targetAudience}`,
          platform: businessSetup.platform,
          tone: currentTone
        })
      })


      const data = await response.json()
      if (data.success) {
        setGeneratedPost(data.generatedPost)
        setCurrentStep('post')
      }
    } catch (error) {
      console.error('Post generation error:', error)
    } finally {
      setIsLoading(false)
    }
  }


  // Regenerate post with different tone
  const regeneratePost = async (newTone) => {
    if (!generatedPost) return


    setIsLoading(true)
    setCurrentTone(newTone)
    try {
      const response = await fetch('http://localhost:8000/api/social-calendar/regenerate-post', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          originalPost: generatedPost,
          newTone: newTone,
          regenerationType: 'tone_change'
        })
      })


      const data = await response.json()
      if (data.success) {
        setGeneratedPost(data.regeneratedPost)
      }
    } catch (error) {
      console.error('Regeneration error:', error)
    } finally {
      setIsLoading(false)
    }
  }


  const resetApp = () => {
    setCurrentStep('setup')
    setBusinessSetup({
      businessPurpose: '',
      industry: '',
      targetAudience: '',
      platform: 'instagram',
      contentGoals: '',
      postsPerDay: 3
    })
    setContentIdeas(null)
    setSelectedPost(null)
    setGeneratedPost(null)
    setCurrentTone('professional')
  }


  const formatDate = (dayNumber) => {
    const today = new Date()
    const targetDate = new Date(today)
    targetDate.setDate(today.getDate() + dayNumber - 1)
    return targetDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
  }


  return (
    <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50">
      {/* Header */}
      <div className="bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white">
        <div className="max-w-6xl mx-auto px-6 py-8">
          <div className="text-center">
            <div className="flex items-center justify-center mb-4">
              <Calendar className="w-12 h-12 mr-3" />
              <h1 className="text-4xl font-bold">Social Media Calendar</h1>
            </div>
            <p className="text-lg text-indigo-100">
              Complete content planning with AI-powered post generation
            </p>
          </div>
        </div>
      </div>


      <div className="max-w-6xl mx-auto px-6 py-8">
        {/* Business Setup Form */}
        {currentStep === 'setup' && (
          <div className="bg-white rounded-3xl shadow-xl p-8 mb-8 border border-purple-100">
            <h2 className="text-2xl font-bold text-gray-800 mb-6 flex items-center">
              <Target className="w-6 h-6 mr-3 text-purple-600" />
              Business Setup
            </h2>


            <div className="space-y-6">
              {/* Business Purpose */}
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">
                  Business Purpose & Description
                </label>
                <textarea
                  value={businessSetup.businessPurpose}
                  onChange={(e) => setBusinessSetup(prev => ({ ...prev, businessPurpose: e.target.value }))}
                  placeholder="Describe your business, what you do, and your goals..."
                  rows={4}
                  className="w-full p-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none resize-none"
                />
              </div>


              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Industry */}
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-3">
                    Industry
                  </label>
                  <select
                    value={businessSetup.industry}
                    onChange={(e) => setBusinessSetup(prev => ({ ...prev, industry: e.target.value }))}
                    className="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:outline-none"
                  >
                    <option value="">Select Industry</option>
                    {industryOptions.map(industry => (
                      <option key={industry.id} value={industry.id}>
                        {industry.emoji} {industry.label}
                      </option>
                    ))}
                  </select>
                </div>


                {/* Target Audience */}
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-3">
                    Target Audience
                  </label>
                  <select
                    value={businessSetup.targetAudience}
                    onChange={(e) => setBusinessSetup(prev => ({ ...prev, targetAudience: e.target.value }))}
                    className="w-full p-3 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:outline-none"
                  >
                    <option value="">Select Audience</option>
                    {audienceOptions.map(audience => (
                      <option key={audience.id} value={audience.id}>
                        {audience.emoji} {audience.label}
                      </option>
                    ))}
                  </select>
                </div>
              </div>


              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                {/* Platform */}
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-3">
                    Platform
                  </label>
                  <div className="grid grid-cols-2 gap-3">
                    {platformOptions.map(platform => (
                      <button
                        key={platform.id}
                        onClick={() => setBusinessSetup(prev => ({ ...prev, platform: platform.id }))}
                        className={`p-3 rounded-lg border-2 text-left transition-all ${
                          businessSetup.platform === platform.id
                            ? 'border-purple-500 bg-purple-50 text-purple-700'
                            : 'border-gray-200 bg-gray-50 text-gray-600 hover:border-purple-300'
                        }`}
                        title={platform.desc}
                      >
                        <span className="text-lg mr-2">{platform.emoji}</span>
                        <span className="text-sm font-medium">{platform.label}</span>
                      </button>
                    ))}
                  </div>
                </div>


                {/* Posts Per Day */}
                <div>
                  <label className="block text-sm font-semibold text-gray-700 mb-3">
                    Posts Per Day
                  </label>
                  <div className="space-y-2">
                    {postsPerDayOptions.map(option => (
                      <button
                        key={option.value}
                        onClick={() => setBusinessSetup(prev => ({ ...prev, postsPerDay: option.value }))}
                        className={`w-full p-3 rounded-lg border-2 text-left transition-all ${
                          businessSetup.postsPerDay === option.value
                            ? 'border-purple-500 bg-purple-50 text-purple-700'
                            : 'border-gray-200 bg-gray-50 text-gray-600 hover:border-purple-300'
                        }`}
                      >
                        <div className="flex items-center justify-between">
                          <div className="flex items-center">
                            <span className="text-lg mr-2">{option.emoji}</span>
                            <span className="font-medium">{option.label}</span>
                          </div>
                          <span className="text-xs text-gray-500">{option.desc}</span>
                        </div>
                      </button>
                    ))}
                  </div>
                </div>
              </div>


              {/* Content Goals */}
              <div>
                <label className="block text-sm font-semibold text-gray-700 mb-2">
                  Content Goals
                </label>
                <textarea
                  value={businessSetup.contentGoals}
                  onChange={(e) => setBusinessSetup(prev => ({ ...prev, contentGoals: e.target.value }))}
                  placeholder="What do you want to achieve with your content?"
                  rows={3}
                  className="w-full p-4 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none resize-none"
                />
              </div>


              <div className="flex justify-center">
                <button
                  onClick={generateContentIdeas}
                  disabled={!businessSetup.businessPurpose.trim() || !businessSetup.industry || !businessSetup.platform || isLoading}
                  className="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 disabled:from-gray-300 disabled:to-gray-300 text-white px-8 py-4 rounded-xl font-bold disabled:cursor-not-allowed flex items-center space-x-3"
                >
                  {isLoading ? (
                    <>
                      <RefreshCw className="w-5 h-5 animate-spin" />
                      <span>Generating Ideas...</span>
                    </>
                  ) : (
                    <>
                      <Calendar className="w-5 h-5" />
                      <span>Generate 30-Day Calendar ({businessSetup.postsPerDay * 30} Posts)</span>
                    </>
                  )}
                </button>
              </div>
            </div>
          </div>
        )}


        {/* Calendar View */}
        {currentStep === 'calendar' && contentIdeas && (
          <div>
            <div className="bg-white rounded-3xl shadow-xl p-8 mb-8">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h2 className="text-2xl font-bold text-gray-800">Your 30-Day Content Calendar</h2>
                  <p className="text-gray-600">{contentIdeas.totalIdeas} posts across {contentIdeas.daysPlanned} days</p>
                </div>
                <button
                  onClick={resetApp}
                  className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg"
                >
                  New Calendar
                </button>
              </div>


              {/* Calendar Grid */}
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                {contentIdeas.calendar.map((day) => (
                  <div key={day.day} className="bg-gray-50 rounded-xl p-4 border border-gray-200">
                    <div className="flex items-center justify-between mb-3">
                      <h3 className="font-bold text-gray-800">Day {day.day}</h3>
                      <span className="text-sm text-gray-500">{formatDate(day.day)}</span>
                    </div>
                    <div className="space-y-2">
                      {day.posts.map((post) => (
                        <div
                          key={post.id}
                          className="bg-white p-3 rounded-lg border border-gray-200 hover:border-purple-300 cursor-pointer transition-colors"
                          onClick={() => generatePost(post)}
                        >
                          <div className="flex items-center justify-between mb-2">
                            <span className="text-xs font-medium text-purple-600">{post.contentPillar}</span>
                            <span className="text-lg">{post.type === 'image' ? '📸' : post.type === 'video' ? '🎬' : '📝'}</span>
                          </div>
                          <h4 className="text-sm font-semibold text-gray-800 mb-1">{post.ideaTitle}</h4>
                          <p className="text-xs text-gray-600 line-clamp-2">{post.description}</p>
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}


        {/* Post Generation View */}
        {currentStep === 'post' && selectedPost && (
          <div className="bg-white rounded-3xl shadow-xl p-8">
            <div className="flex items-center justify-between mb-6">
              <div>
                <h2 className="text-2xl font-bold text-gray-800">{selectedPost.ideaTitle}</h2>
                <p className="text-gray-600">{selectedPost.description}</p>
              </div>
              <button
                onClick={() => setCurrentStep('calendar')}
                className="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg"
              >
                Back to Calendar
              </button>
            </div>


            {/* Tone Selection */}
            <div className="mb-6">
              <h3 className="text-lg font-semibold text-gray-700 mb-3">Choose Tone</h3>
              <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                {toneOptions.map(tone => (
                  <button
                    key={tone.id}
                    onClick={() => regeneratePost(tone.id)}
                    className={`p-3 rounded-lg border-2 text-left transition-all ${
                      currentTone === tone.id
                        ? 'border-purple-500 bg-purple-50 text-purple-700'
                        : 'border-gray-200 bg-gray-50 text-gray-600 hover:border-purple-300'
                    }`}
                    disabled={isLoading}
                  >
                    <span className="text-lg mr-2">{tone.emoji}</span>
                    <div>
                      <div className="text-sm font-medium">{tone.label}</div>
                      <div className="text-xs text-gray-500">{tone.desc}</div>
                    </div>
                  </button>
                ))}
              </div>
            </div>


            {/* Generated Post */}
            {generatedPost && (
              <div className="space-y-6">
                <div>
                  <h3 className="text-lg font-semibold text-gray-700 mb-3 flex items-center">
                    <Edit3 className="w-5 h-5 mr-2" />
                    Generated Post ({currentTone} tone)
                  </h3>
                  <div className="bg-gray-50 p-6 rounded-xl border border-gray-200">
                    <div className="space-y-4">
                      <div>
                        <h4 className="font-semibold text-gray-700 mb-2">Caption:</h4>
                        <div className="bg-white p-4 rounded-lg border border-gray-200">
                          <p className="whitespace-pre-wrap">{generatedPost.postContent?.caption}</p>
                        </div>
                      </div>


                      <div>
                        <h4 className="font-semibold text-gray-700 mb-2">Hashtags:</h4>
                        <div className="bg-white p-4 rounded-lg border border-gray-200">
                          <div className="flex flex-wrap gap-2">
                            {generatedPost.postContent?.hashtags?.map((tag, index) => (
                              <span key={index} className="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">
                                #{tag}
                              </span>
                            ))}
                          </div>
                        </div>
                      </div>


                      <div>
                        <h4 className="font-semibold text-gray-700 mb-2">Visual Description:</h4>
                        <div className="bg-white p-4 rounded-lg border border-gray-200">
                          <p>{generatedPost.postContent?.visualDescription}</p>
                        </div>
                      </div>


                      <div>
                        <h4 className="font-semibold text-gray-700 mb-2">Call to Action:</h4>
                        <div className="bg-green-50 p-4 rounded-lg border border-green-200">
                          <p className="text-green-800 font-medium">{generatedPost.postContent?.callToAction}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>


                {/* Regenerate Button */}
                <div className="flex justify-center">
                  <button
                    onClick={() => regeneratePost(currentTone)}
                    disabled={isLoading}
                    className="bg-purple-500 hover:bg-purple-600 disabled:bg-gray-400 text-white px-6 py-3 rounded-xl font-medium flex items-center space-x-2"
                  >
                    {isLoading ? (
                      <>
                        <RefreshCw className="w-4 h-4 animate-spin" />
                        <span>Regenerating...</span>
                      </>
                    ) : (
                      <>
                        <RotateCcw className="w-4 h-4" />
                        <span>Regenerate Post</span>
                      </>
                    )}
                  </button>
                </div>
              </div>
            )}


            {isLoading && !generatedPost && (
              <div className="text-center py-20">
                <div className="flex items-center justify-center mb-4">
                  <RefreshCw className="w-8 h-8 text-purple-500 animate-spin" />
                </div>
                <p className="text-lg text-gray-600">Generating your post...</p>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  )
}


export default App

What makes this different from your other apps:

📅 Strategic Planning Focus

Section titled “📅 Strategic Planning Focus”
  • Complete calendar generation - 30 days of detailed content in one response
  • Non-streaming approach - Perfect for comprehensive planning documents
  • Strategic thinking - Content pillars, audience analysis, growth tactics
  • Platform optimization - Tailored content for each social media platform

🎯 Marketing-Specific Features

Section titled “🎯 Marketing-Specific Features”
  • Business context awareness - Understands different business types and audiences
  • Platform expertise - Instagram, TikTok, LinkedIn, Twitter, Facebook, YouTube optimization
  • Content variety - Educational, promotional, entertaining content mix
  • Growth strategy - Hashtags, posting times, engagement tactics

📊 Professional Marketing Tool

Section titled “📊 Professional Marketing Tool”
  • Downloadable calendars - Export complete strategies as text files
  • Strategic configuration - Platform, audience, business type, content focus
  • Marketing expertise - Marcus Chen’s professional social media knowledge
  • Scalable planning - 1-5 posts per day, customizable strategies

This demonstrates how the same prompt engineering approach can create comprehensive business planning tools that rival expensive social media management software!

🧪 Step 3: Test Your Social Media Calendar

Section titled “🧪 Step 3: Test Your Social Media Calendar”

Let’s see how your strategic planning app creates comprehensive content calendars:

Start your servers:

Backend:

Terminal window
cd openai-backend
npm run dev

Frontend:

Terminal window
cd openai-frontend
npm run dev

Test the strategic content creation:

Phase 1: Experience the Strategic Interface

Section titled “Phase 1: Experience the Strategic Interface”
1. Add Social Calendar to your app router or test directly
   • See the strategic planning interface with purple/pink theme
   • Notice the comprehensive configuration options including posts per day selection
   • Try different platforms, content focus, and audience types
   • Select 1-5 posts per day to see total posts calculation update dynamically
   • Observe how the strategy summary updates

Phase 2: Generate Complete Content Strategies

Section titled “Phase 2: Generate Complete Content Strategies”
2. Yoga Studio Example:
   • Platform: "Instagram"
   • Content Focus: "Mixed Strategy"
   • Audience: "Young Adults (18-30)"
   • Business Type: "Service Business"
   • Posts per day: 1


   Business Description: "I run a yoga studio in downtown Austin. We offer beginner-friendly classes, meditation workshops, and wellness retreats. Our community values mindfulness, physical health, and mental well-being. We want to attract local professionals who are stressed and looking for balance in their busy lives."


   Marcus Chen Output:
   "📊 STRATEGY OVERVIEW


   Content Pillars:
   1. Mindful Movement (40%) - Yoga poses, flows, and technique tips
   2. Wellness Wisdom (30%) - Mental health, stress relief, meditation
   3. Community Connection (20%) - Student spotlights, class highlights
   4. Studio Updates (10%) - Class schedules, workshops, events


   Target Audience Analysis:
   Austin professionals aged 18-30 experiencing work stress, seeking physical and mental balance, values authenticity and community, active on Instagram during lunch breaks and evenings.


   📅 30-DAY CONTENT CALENDAR


   Day 1:
   Post Type: Carousel (5 slides)
   Content Pillar: Mindful Movement
   Caption: 'Monday Motivation: 5 Desk Stretches for Busy Professionals 🧘‍♀️✨


   Feeling tight after a long day at the office? These simple stretches can be done right at your desk! Swipe through for step-by-step guides that will help release tension and reset your energy.


   Which stretch do you need most today? Tell us in the comments! 👇


   #YogaAustin #DeskYoga #MondayMotivation #StressRelief #Mindfulness #ProfessionalWellness #YogaForBeginners #AustinYoga #OfficeWellness #MindfulMovement #YogaLife #WellnessJourney #HealthyLifestyle #Flexibility #SelfCare'


   Hashtags: Mix of local (#YogaAustin #AustinYoga), lifestyle (#StressRelief #Mindfulness #SelfCare), and niche (#DeskYoga #OfficeWellness #ProfessionalWellness)


   Posting Time: 12:00 PM (lunch break engagement)


   Engagement Strategy: Ask followers to share their biggest stress point, respond to all comments within 2 hours, repost to Stories with poll 'Which stretch helped you most?'


   Day 2:
   Post Type: Video (30-60 seconds)
   Content Pillar: Wellness Wisdom
   Caption: 'Transform Your Tuesday: 3-Minute Breathing Exercise 🌬️💙


   Feeling overwhelmed? This simple breathing technique can shift your nervous system from stress to calm in just 3 minutes. Perfect for before big meetings or when you need a mental reset.


   Try it now and let us know how you feel! Save this post for whenever you need a quick mindfulness moment.


   #BreathingExercise #MindfulnessTuesday #StressManagement #MentalHealth #YogaBreathing #Meditation #SelfCare #AustinWellness #AnxietyRelief #MindBodyConnection'


   [Calendar continues with detailed daily content for all 30 days...]"

Phase 3: Test the Two-Step Content Generation Process

Section titled “Phase 3: Test the Two-Step Content Generation Process”
3. Interactive Calendar Experience:
   • After business setup, click "Generate Calendar" to create content ideas
   • See the 30-day calendar with your selected number of posts per day
   • Each day shows post idea titles and descriptions (NOT full posts yet)
   • Click on any specific post idea to generate the actual post content
   • Try different tones (professional, casual, playful, etc.)
   • Use "Regenerate Post" to create variations
   • Navigate back to calendar to generate different posts


4. Test Different Post Frequencies:
   • Try 1 post per day (30 total) for focused quality content
   • Try 3 posts per day (90 total) for balanced engagement
   • Try 5 posts per day (150 total) for maximum content volume
   • Notice how AI adapts content variety based on frequency selected

[Watch the complete strategy generate in one comprehensive response]

### Phase 3: Test Different Business Scenarios

  1. B2B SaaS Company: • Platform: “LinkedIn” • Content Focus: “Educational” • Audience: “Business Professionals” • Business Type: “SaaS/Tech”

    Business Description: “We’re a project management SaaS for remote teams. Our software helps distributed teams stay organized, track progress, and maintain accountability without micromanagement.”

  2. E-commerce Fashion Brand: • Platform: “TikTok” • Content Focus: “Entertaining” • Audience: “Young Adults (18-30)” • Business Type: “E-commerce”

    Business Description: “Sustainable fashion brand for Gen Z. We create trendy, eco-friendly clothing using recycled materials. Our mission is to make fashion sustainable and affordable.”

  3. Local Restaurant: • Platform: “Facebook” • Content Focus: “Mixed Strategy” • Audience: “Parents & Families” • Business Type: “Service Business”

    Business Description: “Family-owned Italian restaurant in small town. We serve authentic recipes passed down through generations, offer catering, and host community events.”

**What to notice:**
- **Two-step generation process** - Ideas first, then actual posts on demand
- **User-controlled post frequency** - 1-5 posts per day based on capacity
- **Interactive calendar interface** - Click any post to generate full content
- **Platform-specific optimization** - Different approaches for Instagram vs LinkedIn vs TikTok
- **Business-aware content** - Content adapts to yoga studio vs SaaS vs restaurant
- **Professional depth** - Hashtag strategies, posting times, engagement tactics
- **Tone flexibility** - Regenerate posts with different tones instantly


---


## 🔧 Common Issues & Solutions


**❌ "Calendar generation is too slow or times out"**
- ✅ This is normal - comprehensive strategies take 30-60 seconds to generate
- ✅ Ensure your OpenAI API has sufficient rate limits for longer responses
- ✅ Consider breaking into smaller chunks if consistently timing out


**❌ "Content doesn't match the selected platform"**
- ✅ Verify platform parameter is being sent to backend correctly
- ✅ Check that Marcus Chen prompt includes platform-specific guidance
- ✅ Test with different platforms to see variation in content style


**❌ "Strategy lacks business context or seems generic"**
- ✅ Ensure business description is detailed enough (100+ words recommended)
- ✅ Check that all preference parameters reach the backend
- ✅ Verify the business type and audience selections are working


**❌ "Download function doesn't work"**
- ✅ Check browser console for JavaScript errors
- ✅ Ensure content calendar data is properly formatted
- ✅ Test with different browsers if download fails


---


## 💡 The Strategic Planning Pattern You've Mastered


### **Your AI Business Tools Portfolio**
```js
// You now have complete business solution suite:


Chat.jsx              // Conversational AI with memory
CookingMaster.jsx     // Culinary expert for recipe creation
EmailWriter.jsx       // Professional communication specialist
SocialCalendar.jsx    // Strategic marketing and content planning
// Future: BusinessPlan.jsx, MarketingCopy.jsx, etc.


// Same backend foundation, unlimited business applications

The Strategic AI Formula

Section titled “The Strategic AI Formula”
  • One expert prompt = One strategic business specialist
  • One planning interface = One professional planning tool
  • One comprehensive response = Complete business strategies
  • One backend pattern = Unlimited strategic applications

Why This Approach Dominates Business Tools

Section titled “Why This Approach Dominates Business Tools”
  1. Comprehensive Planning: Complete 30-day strategies in minutes
  2. Professional Quality: Strategic depth rivals expensive marketing tools
  3. Business Context: Understands different industries and audiences
  4. Platform Expertise: Optimized for each social media platform
  5. Cost Effective: No subscription fees or per-user pricing
  6. Customizable: Adapts to any business type or content strategy

Your Strategic Development Superpower

Section titled “Your Strategic Development Superpower”

You now master:

  • Strategic AI planning through comprehensive prompting
  • Business tool creation with professional planning interfaces
  • Non-streaming responses for complete document generation
  • Marketing expertise that understands platforms and audiences

✨ Lesson Recap

Section titled “✨ Lesson Recap”

You’ve just unlocked the power of AI-driven strategic business planning! 🎉

What you’ve accomplished:

  • 📅 Strategic marketing expert - Marcus Chen creates comprehensive 30-day content calendars
  • 🎯 Professional planning tool - Social Media Calendar rivals expensive marketing software
  • 📊 Multi-platform expertise - Optimized strategies for Instagram, TikTok, LinkedIn, and more
  • 💼 Business-aware intelligence - Adapts to different industries, audiences, and goals
  • 🔧 Strategic architecture - Non-streaming responses for comprehensive planning documents

The strategic pattern you’ve mastered:

  1. Define strategic expert - Create comprehensive business specialist persona
  2. Add business context - Include industry, platform, audience, and goals
  3. Generate complete strategies - Use non-streaming for full document creation
  4. Build planning interface - Design for strategic thinking, not just conversation
  5. Scale strategically - Same pattern works for any business planning domain

Why this approach revolutionizes business planning:

  • Speed: Complete marketing strategies in minutes instead of weeks
  • Quality: Strategic depth often surpasses expensive consulting
  • Flexibility: Adapts to any business type, platform, or audience
  • Cost: No ongoing subscriptions or per-strategy fees
  • Scaling: One foundation supports unlimited strategic applications

Your next strategic frontier: Apply this same pattern to create business plan generators, marketing copy writers, competitive analysis tools, or financial planning assistants. You now have the blueprint for building AI-powered strategic business tools that compete with enterprise planning software!

👉 Strategic Evolution: Consider building a comprehensive business suite by combining all your AI specialists - a unified platform where users can get cooking advice, write professional emails, plan content calendars, and more, all from specialized AI experts working together!