This document provides API details and usage guide for the core social media integration components in the apps/frontend package.
Promote (Social Posts)
The Promote component is the main interface for creating and scheduling social media posts. It features a two-column layout inspired by modern post composers.
File: apps/frontend/src/components/campaigns/Promote.tsxRoute: /social-posts
Props
| Prop | Type | Description |
|---|---|---|
ideas | BlogIdea[] | Campaign ideas/drafts to generate posts from |
posts | GeneratedPost[] | List of generated posts |
isGenerating | boolean | Loading state during AI generation |
onGenerate | (ideaId, profiles, name, campaignId?) => void | Handler to trigger content generation |
appSettings | AppSettings | Global application settings |
connectedAccounts | Record<string, boolean> | Map of connected platform accounts |
onSaveDisk | () => void | Handler to save functionality |
onSaveDB | () => void | Handler to save to database |
onDragEnd | (result: any) => void | Handler for drag-and-drop reordering |
onUpdatePost | (post: GeneratedPost) => void | Handler for updating a post object |
onRepost | (post: GeneratedPost) => void | Handler for reposting content |
initialIdeaId | string | null | ID of initial idea to select |
onGenerateImage | (post: GeneratedPost, prompt: string) => void | Handler for regenerating post images |
Features
- Two-Column Layout: Left side for composition, right side for settings
- Campaign Linking: Optional campaign association
- Platform Selection: Choose target platforms with validation
- First Comment: Add hashtags/links as first comment
- Scheduling: Post now or schedule for later
- Media Picker: Attach images and videos
- Toggle View: Switch between composer and post feed
Link In Bio
Manage bio link pages with customizable themes and analytics.
Route: /user/link-in-bio
Features
- Create multiple bio link pages
- Customize appearance (colors, button styles, CSS)
- Track views and click analytics
- Drag-and-drop link reordering
- Mobile/desktop preview
Schedule (Calendar)
Interactive calendar for scheduling and managing content.
File: apps/frontend/src/components/calendar/Schedule.tsxRoute: /schedules
Features
- Month/Week Views: Toggle between views
- Drag-and-Drop: Reschedule posts and ideas by dragging
- Quick Actions: Click to view details, edit, or delete
AnalyticsDashboard
Displays performance metrics and charts for generated content.
Props
| Prop | Type | Description |
|---|---|---|
posts | GeneratedPost[] | List of posts to derive analytics from |
Features
- KPI Cards: Shows total views, engagement rate, clicks, and content score.
- Growth Chart: Line chart visualizing daily views over time (7d/30d/90d).
- Outlier Detection: Highlights top-performing posts based on views.
PlatformAuthModal
Modal dialog for handling OAuth connections to social platforms.
Props
| Prop | Type | Description |
|---|---|---|
platform | Platform | The platform to connect (e.g., Platform.X) |
onClose | () => void | Handler to close the modal |
onConnect | (platform, type, status) => void | Callback when connection succeeds/fails |
connectionStatus | { personal: boolean, business: boolean } | Current connection state |
Features
- Profile Types: Separate flows for Personal vs Business accounts.
- Error Handling: Displays user-friendly error messages on failure.
- Visual Feedback: Loading states and success confirmations.