Socialflow/replit.md at 5829873f8c8c4d08e9f094848fd3b6af17a92322

0 Fork 0

mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-11 17:26:45 +02:00

Files

T

michaelschal 2f693b744a Add a comprehensive AI-powered social media management platform

Adds a README.md file detailing the Social Flow platform, including its overview, features, user preferences, and detailed frontend, backend, and database architectures.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/ds3R7vP

2025-10-01 13:10:55 +00:00

6.3 KiB

Raw Blame History

Overview

Social Flow is a comprehensive social media automation platform designed to streamline content creation and publication across Facebook and Instagram. The application enables users to manage multiple social media pages, generate AI-powered post content, process and optimize media for different platform formats, and schedule posts with automated publishing capabilities.

Core Purpose: Automate social media content workflow from creation to publication, with AI assistance for text generation and intelligent media formatting for platform-specific requirements.

Key Features:

Multi-page social media account management (Facebook & Instagram)
AI-powered content generation using OpenRouter API
Automated media processing and format optimization
Post scheduling with automated publication
Media library management
Dashboard analytics and activity tracking

User Preferences

Preferred communication style: Simple, everyday language.

System Architecture

Frontend Architecture

Framework: React with TypeScript using Vite as the build tool

Routing: Wouter for lightweight client-side routing

State Management:

TanStack Query (React Query) for server state management and caching
Local component state with React hooks

UI Framework:

Radix UI primitives for accessible, unstyled components
shadcn/ui component library (New York style variant)
Tailwind CSS for styling with custom design tokens
Dark mode as default theme

Key Design Decisions:

Component-based architecture with reusable UI components
Custom path aliases (@/, @shared) for clean imports
Responsive design with mobile-first approach
Real-time data synchronization through React Query

Backend Architecture

Runtime: Node.js with Express.js server

Type Safety: Full TypeScript implementation across frontend, backend, and shared schema

API Design: RESTful endpoints with conventional HTTP methods

/api/stats - Dashboard statistics
/api/ai/generate - AI text generation
/api/media/* - Media upload and management
/api/pages/* - Social page management
/api/posts/* - Post and scheduling management

File Upload: Multer middleware for handling multipart/form-data with in-memory storage strategy

Background Processing:

Node-cron for scheduled task execution
Scheduler service running every minute to check for pending posts
Automated post publication to social media platforms

Session Management: Stateless authentication with session cookies (connect-pg-simple for PostgreSQL session store)

Key Architectural Patterns:

Service layer pattern (OpenRouterService, ImageProcessor, SchedulerService)
Storage abstraction layer for database operations
Middleware-based request processing pipeline
Separation of concerns between routes, services, and storage

Database Architecture

ORM: Drizzle ORM for type-safe database operations

Database: PostgreSQL (via Neon serverless driver with WebSocket support)

Schema Design:

Core Tables:

users - User authentication and profiles
social_pages - Connected Facebook/Instagram pages with access tokens
media - Uploaded media files with platform-specific processed versions
posts - Post content with AI generation tracking and status
scheduled_posts - Scheduled publication queue with page assignments
ai_generations - History of AI-generated content

Enumerations:

platform: facebook, instagram
post_type: feed, story
post_status: draft, scheduled, published, failed
media_type: image, video

Relationships:

One-to-many: users → social_pages, users → media, users → posts
Many-to-many: posts ↔ social_pages (through scheduled_posts)
Foreign key cascading deletes for data integrity

Migration Strategy: Drizzle Kit for schema migrations with PostgreSQL dialect

Media Processing Pipeline

Image Processing Library: Sharp for high-performance image manipulation

Format Optimization Strategy:

Facebook Feed: 1200x630px (landscape format)
Instagram Feed: 1080x1080px (square format)
Instagram Story: 1080x1920px (vertical format)

Storage: Local filesystem storage in /uploads directory with unique UUID-based filenames

Processing Flow:

Upload original file to memory buffer
Generate three optimized versions for different platforms
Store all versions with references in database
Serve via /uploads static route

External Dependencies

AI Content Generation

Service: OpenRouter API

Model: Anthropic Claude 3.5 Sonnet
Purpose: Generate multiple post text variations from product information
Configuration: Requires OPENROUTER_API_KEY environment variable
Temperature: 0.8 for creative variation

Facebook Graph API:

Purpose: Publishing posts to Facebook pages
Authentication: Page access tokens stored per social_page
Status: Integration prepared (not fully implemented in codebase)

Instagram Graph API:

Purpose: Publishing posts and stories to Instagram
Authentication: Page access tokens stored per social_page
Status: Integration prepared (not fully implemented in codebase)

Database Service

Neon Serverless PostgreSQL:

WebSocket-based connection pooling
Connection string via DATABASE_URL environment variable
Serverless-optimized with @neondatabase/serverless driver

Development Tools

Replit Integration:

Vite plugins for runtime error overlay
Cartographer plugin for code navigation
Dev banner for development environment

Build and Deployment

Production Build Process:

Vite builds React frontend to dist/public
esbuild bundles server code to dist/index.js
Node.js serves bundled application

Environment Variables Required:

DATABASE_URL - PostgreSQL connection string
OPENROUTER_API_KEY - AI text generation API key
SESSION_SECRET - Session encryption key
APP_URL - Application public URL
PGPASSWORD - Database password (for Docker deployments)

UI Component Libraries

Radix UI: Comprehensive set of accessible UI primitives
React Hook Form: Form state management with validation
Zod: Schema validation for forms and API data
date-fns: Date manipulation and formatting
react-dropzone: Drag-and-drop file uploads
Lucide React: Icon library

6.3 KiB Raw Blame History

Social Flow - AI-Powered Social Media Management Platform