mirror of
https://github.com/R0m1k3/Socialflow.git
synced 2026-10-11 17:26:45 +02:00
michaelschal
956c226373
Remove console logs and simplify image selection logic in the image editor. Update the project description in replit.md. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: 5c57cf12-84be-4da7-9921-4d0e283a6bd9 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/JgqpaNl
51 lines
4.7 KiB
Markdown
51 lines
4.7 KiB
Markdown
# Social Flow - AI-Powered Social Media Management Platform
|
|
|
|
## Overview
|
|
Social Flow is an AI-powered social media automation platform designed to streamline content creation and publication across Facebook and Instagram. Its core purpose is to enable users to manage multiple social media pages, generate AI-powered post content, optimize media for various platform formats, and schedule posts with automated publishing. The platform aims to be a complete, AI-driven solution for social media content management, reducing manual effort and improving content quality and reach. Key capabilities include multi-photo carousel posts with drag-and-drop reordering, a preview modal for realistic platform rendering, and an integrated media library.
|
|
|
|
## User Preferences
|
|
Preferred communication style: Simple, everyday language.
|
|
|
|
## System Architecture
|
|
|
|
### Frontend Architecture
|
|
The frontend is built with React and TypeScript, leveraging Vite for bundling and Wouter for routing. State management is primarily handled by TanStack Query. UI components are constructed using Radix UI primitives and shadcn/ui, styled with Tailwind CSS, emphasizing a component-based, responsive, mobile-first design with real-time data synchronization. Dark mode is the default theme.
|
|
|
|
### Backend Architecture
|
|
The backend is developed in Node.js with Express.js, entirely in TypeScript. It adheres to a RESTful API design with dedicated endpoints for authentication, user management, AI content generation, media handling, social page management, and post scheduling. Multer is utilized for file uploads, integrated with Cloudinary. Node-cron manages background processes for scheduled post publication. The architecture incorporates a service layer, storage abstraction, and a middleware-based request processing pipeline. Session management is handled by `express-session` with `connect-pg-simple`.
|
|
|
|
### Database Architecture
|
|
PostgreSQL serves as the database, interfaced using Drizzle ORM for type-safe operations and Neon serverless driver for WebSocket support. The schema includes tables for `users`, `cloudinary_config`, `social_pages`, `media`, `posts`, `post_media`, `scheduled_posts`, and `ai_generations`. Drizzle Kit is used for schema migrations.
|
|
|
|
### Media Processing Pipeline
|
|
Cloudinary is central to the platform's media processing, providing cloud-based storage, transformations, and CDN capabilities for images and videos. Original files are uploaded to Cloudinary, and their URLs are used for publishing. Transformation URLs are primarily generated by Cloudinary for UI preview purposes. The platform also includes server-side image processing using Sharp for features like logo overlay and text rendering for stories.
|
|
|
|
### Authentication & Authorization
|
|
Authentication relies on Passport.js with a local strategy and bcrypt for password hashing. User roles (`admin`, `user`) dictate access levels. AI text generation is accessible to all authenticated users via a shared admin OpenRouter configuration. Session management is handled by `express-session` with HTTP-only cookies, set for a 7-day duration. Both backend (middleware `requireAuth`, `requireAdmin`) and frontend (`ProtectedRoute` component) implement route protection.
|
|
|
|
### UI/UX Decisions
|
|
The UI uses Radix UI and shadcn/ui, styled with Tailwind CSS. Design principles include a component-based architecture, custom path aliases, and a responsive, mobile-first approach. Features like multi-photo carousel posts with drag-and-drop reordering and a PreviewModal offer realistic rendering across Facebook and Instagram. The calendar view is responsive, featuring a grid for desktop and an expandable list for mobile, enabling editing and deletion of scheduled posts. Infinite scroll, powered by IntersectionObserver, is implemented in the media library and new post pages. A company logo overlay system has been integrated into the image editor, providing options for positioning, size, and opacity.
|
|
|
|
## External Dependencies
|
|
|
|
### AI Content Generation
|
|
- **OpenRouter API**: Used for AI text generation (e.g., Anthropic Claude 3.5 Sonnet).
|
|
|
|
### Cloud Storage
|
|
- **Cloudinary**: Cloud-based image and video storage, transformations, and CDN.
|
|
|
|
### Social Media APIs
|
|
- **Facebook Graph API**: For publishing posts to Facebook pages, including multi-photo carousel and video.
|
|
- **Instagram Graph API**: For single photo/video posts.
|
|
|
|
### Database Service
|
|
- **Neon Serverless PostgreSQL**: Primary database service.
|
|
|
|
### 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. |