Social Content Calendar Engine - PRD

Overview

ContentCal is an AI-powered social content calendar platform that helps creators, marketers, and businesses plan, generate, and schedule platform-specific content across Instagram, X (Twitter), and LinkedIn.

Target Users

• Solo entrepreneurs/creators
• Small business owners
• Marketing teams/agencies

Core Features

1. Landing Page

• Hero section with value proposition
• Platform badges (Instagram, X, LinkedIn)
• Features overview (AI-Powered Content, Visual Calendar, Brand Voice Lock, Smart Templates, Flexible Export, Goal Alignment)
• Social proof stats
• Call-to-action for onboarding

2. Onboarding Flow (4 Steps)

1. About You: Business name, industry, user type selection
2. Platforms: Select social platforms to target
3. Goals: Define content objectives (awareness, engagement, leads, sales, authority)
4. Brand Voice: Choose voice traits and set forbidden topics

3. Dashboard

• Stats overview (Total Posts, Scheduled, Published, Drafts)
• Quick action cards (Generate Content, View Calendar, Browse Templates)
• Today's content preview
• Brand voice summary

4. Content Calendar

• Monthly calendar view with navigation
• Today button for quick access
• Click-to-create on any date
• Post preview cards on calendar cells
• Edit/Delete/Duplicate actions

5. AI Content Generator

• Platform selection (Instagram, X, LinkedIn)
• Content goal selection
• Content type templates (Value Tip, Story, How-To, List)
• Optional topic input
• AI-generated content with:
  • Hook (attention-grabbing opening)
  • Body (main content)
  • CTA (call to action)
  • Hashtags (platform-specific)
  • Creative direction
• Copy and save functionality

6. Brand Voice Configuration

• Voice personality traits (up to 4)
• Tone description field
• Voice sample input
• Forbidden topics list
• Real-time voice preview

7. Content Templates

• Pre-built content frameworks:
  • Product Launch
  • Behind the Scenes
  • Value Tip
  • Customer Story
  • Industry News
• Category filtering
• Template detail modal with structure breakdown
• Copy and use functionality

8. Export Options

• CSV: For spreadsheet apps (Excel, Google Sheets)
• ICS: For calendar apps (Google Calendar, Apple Calendar, Outlook)
• JSON: Notion-ready structured data
• Platform and date range filters

Technical Implementation

Frontend Stack

• React 19 with React Router
• Tailwind CSS with custom design system
• shadcn/ui components
• lucide-react icons
• date-fns for date handling
• sonner for toast notifications
• LocalStorage for data persistence (MOCK - no backend integration)

Design System

• Clean, minimal SaaS aesthetic
• Primary color: Ocean Blue (#3B82F6)
• Platform-specific colors for Instagram, Twitter, LinkedIn
• Status colors for draft, scheduled, published, review
• Custom typography: Inter (body), Space Grotesk (headings)
• Light/dark mode support via CSS custom properties

Data Model (LocalStorage)

{
  user_profile: {
    businessName: string,
    userType: string,
    industry: string,
    platforms: string[],
    goals: string[]
  },
  brand_voice: {
    traits: string[],
    sample: string,
    forbiddenTopics: string[],
    toneDescription: string
  },
  content_posts: [{
    id: string,
    hook: string,
    body: string,
    cta: string,
    hashtags: string[],
    platform: string,
    status: string,
    scheduledDate: string,
    createdAt: string
  }],
  templates: [...default templates]
}

IMPORTANT NOTES

MOCK Implementation

⚠️ This is a FRONTEND PROTOTYPE only. The following features are MOCKED:

• AI content generation uses client-side templates, not actual LLM API
• Data is stored in localStorage (no database)
• No user authentication
• No actual post scheduling to social platforms
• Export downloads files but doesn't integrate with scheduling tools

Future Backend Requirements

To make this production-ready, would need:

1. Backend API for user authentication
2. LLM integration (OpenAI/Claude) for actual AI content generation
3. MongoDB database for persistent storage
4. OAuth integrations for social platforms
5. Scheduling service for automated posting

File Structure

/app/frontend/src/
├── components/
│   ├── common/
│   │   ├── ContentCard.jsx
│   │   ├── PlatformBadge.jsx
│   │   └── StatusBadge.jsx
│   ├── layout/
│   │   ├── AppLayout.jsx
│   │   └── Navbar.jsx
│   └── ui/
│       └── [shadcn components]
├── lib/
│   ├── store.js
│   └── utils.js
├── pages/
│   ├── LandingPage.jsx
│   ├── OnboardingPage.jsx
│   ├── Dashboard.jsx
│   ├── CalendarPage.jsx
│   ├── ContentGenerator.jsx
│   ├── BrandVoicePage.jsx
│   ├── TemplatesPage.jsx
│   └── ExportPage.jsx
├── App.js
├── App.css
└── index.css

Routes

• / - Landing page
• /onboarding - Multi-step onboarding
• /dashboard - Main dashboard
• /calendar - Content calendar view
• /generate - AI content generator
• /brand-voice - Brand voice settings
• /templates - Template library
• /export - Export options