Socialflow/replit.md

Social Flow - AI-Powered Social Media Management Platform

Overview

Social Flow is a comprehensive social media automation platform designed to streamline content creation and publication across Facebook and Instagram. It enables users to manage multiple social media pages, generate AI-powered post content, optimize media for different platform formats, and schedule posts with automated publishing. The platform aims to automate the entire social media content workflow, from creation to publication, utilizing AI for text generation and intelligent media formatting tailored for platform-specific requirements. Key capabilities include multi-photo carousel posts with drag-and-drop reordering, a preview modal for realistic platform rendering, and an integrated media library. The project's ambition is to provide a complete, AI-driven solution for social media content management, significantly reducing manual effort and improving content quality and reach.

User Preferences

Preferred communication style: Simple, everyday language.

Recent Changes

October 14, 2025

• Android Camera Upload Fix: Fixed critical Android camera capture bug where uploads failed with 400 error. Android devices send captured files with invalid names (empty, 'blob', etc.) that Multer rejects. Solution: handleCameraCapture now detects invalid filenames and creates new File object with generated name camera-${timestamp}.${extension} while preserving MIME type. Applied to both new-post and media-upload components. iPhone functionality unaffected.
• Mobile Performance Optimizations: Implemented comprehensive mobile speed optimizations for "Nouvelle publication" and "Médiathèque" pages. Changes include: (1) Adaptive initial loading - 6 media items on mobile (<768px), 12 on desktop; (2) Optimized thumbnail URLs - replaced originalUrl with facebookFeedUrl (1080x1080 Cloudinary transformed images) for 70-90% reduction in data transfer while keeping originalUrl for zoom/preview quality; (3) Native lazy loading - added loading="lazy" attribute to all <img> tags for deferred off-screen image loading; (4) Responsive grid layout - 2 columns on mobile, 3 on desktop (sm:grid-cols-3) for better touch targets. Expected impact: Initial load time reduced from 3-5s to <1s on mobile devices.
• Camera Capture in Media Library: Added camera button 📷 to MediaUpload component, mirroring functionality from new-post page. Mobile users (lg:hidden) can now capture photos/videos directly from device camera and auto-upload to media library. Implementation includes hidden file input with capture="environment", handleCameraCapture handler with input value reset (e.target.value = '') to enable repeated captures, and integration with existing uploadMutation for seamless cloud storage.
• Video Publishing for Facebook: Implemented complete video support for Facebook feed and stories. Added publishVideoPost() method using /videos endpoint with file_url parameter for feed videos, and publishVideoStory() using /video_stories endpoint for story videos. Modified publishStory() to detect video media type and route to appropriate handler. Updated publishPost() logic to separate image vs video media filtering and use correct publishing methods. Video preview now uses <video> tags with controls in PreviewModal via renderMedia() helper function.

System Architecture

Frontend Architecture

The frontend is built with React and TypeScript, using Vite for bundling. Wouter handles client-side routing. State management primarily uses TanStack Query (React Query) for server state and caching. UI components are built with Radix UI primitives and shadcn/ui, styled with Tailwind CSS. The design emphasizes a component-based structure, responsive design with a mobile-first approach, and real-time data synchronization. Dark mode is the default theme.

Backend Architecture

The backend runs on Node.js with Express.js, fully implemented in TypeScript. It follows a RESTful API design with clear endpoints for authentication, user management, AI content generation, media handling, social page management, and post scheduling. Multer is used for file uploads, integrating with Cloudinary. Node-cron handles background processing for scheduled post publication. Architectural patterns include a service layer, storage abstraction, and a middleware-based request processing pipeline. Session management is handled by express-session with connect-pg-simple for production.

Database Architecture

PostgreSQL is the chosen database, utilizing Drizzle ORM for type-safe operations and Neon serverless driver for WebSocket support. The schema includes core tables for users, cloudinary_config, social_pages, media, posts, post_media, scheduled_posts, and ai_generations. Drizzle Kit manages schema migrations.

Media Processing Pipeline

The platform leverages Cloudinary for cloud-based image and video storage and transformation. Original files are uploaded to Cloudinary. For publishing to Facebook/Instagram, the original image URL is used, allowing platforms to handle cropping and formatting. Cloudinary generates transformation URLs (e.g., 1200x630px landscape, 1080x1080px square, 1080x1920px vertical) exclusively for UI preview purposes.

Authentication & Authorization

Authentication uses Passport.js with local strategy and bcrypt for password hashing. User roles (admin, user) control access, with admin having full access and user limited to publishing features. The AI Assistant is restricted to administrators only. Session management is via express-session with HTTP-only cookies and a 7-day duration. Routes are protected on both the backend (middleware requireAuth, requireAdmin) and frontend (ProtectedRoute component).

UI/UX Decisions

The UI is built with Radix UI and shadcn/ui, leveraging Tailwind CSS. Key design decisions include a component-based architecture, custom path aliases, and a responsive, mobile-first approach. The platform supports multi-photo carousel posts with drag-and-drop reordering, and a PreviewModal offers realistic rendering of posts across Facebook and Instagram formats. The calendar view is responsive, with a grid for desktop and an expandable list for mobile, allowing editing and deletion of scheduled posts. Infinite scroll is implemented in the media library and new post pages for performance, using IntersectionObserver.

External Dependencies

AI Content Generation

• OpenRouter API: Used for AI text generation, specifically with Anthropic Claude 3.5 Sonnet, to create multiple post text variations.

Cloud Storage

• Cloudinary: Provides cloud-based image and video storage, automatic transformations for platform-specific formats, and a global CDN.

Social Media APIs

• Facebook Graph API: Fully implemented for publishing posts to Facebook pages, including multi-photo carousel support.
• Instagram Graph API: Partially implemented for single photo/video posts.

Database Service

• Neon Serverless PostgreSQL: The primary database service, utilizing a WebSocket-based connection pooling and the @neondatabase/serverless driver.

UI Component Libraries

• Radix UI: Accessible UI primitives.
• React Hook Form: Form state management with validation.
• Zod: Schema validation.
• date-fns: Date manipulation.
• react-dropzone: Drag-and-drop file uploads.
• Lucide React: Icon library.
• @dnd-kit: Drag and drop functionality for photo carousel reordering.