SocialAI - AI-Powered Social Media Manager

A comprehensive AI social media management platform that helps small businesses integrate AI into their workflow and grow their social media presence.

Features

• AI Content Generation - Generate captions, hashtags, ideas, and full posts with AI
• Multi-Platform Scheduling - Schedule posts across Instagram, Facebook, Twitter, LinkedIn, TikTok, and YouTube
• Content Calendar - Visual calendar with drag-and-drop scheduling
• Advanced Analytics - Track performance, engagement, and growth across all platforms
• Unified Inbox - Manage comments, mentions, and DMs from one place with sentiment analysis
• Audience Insights - Understand demographics, behavior, and optimal posting times
• Hashtag Manager - Discover trending hashtags and save collections
• Competitor Analysis - Benchmark against competitors and get strategy insights
• Team Collaboration - Multi-user support with role-based permissions
• Approval Workflows - Review and approve content before publishing

Tech Stack

• Frontend: React 18 + TypeScript + Tailwind CSS
• Backend: Supabase (PostgreSQL + Auth + Storage + Edge Functions)
• Build Tool: Vite
• Deployment: Netlify
• AI: OpenAI GPT-4 (ready to integrate)
• Icons: Lucide React

Quick Start

Prerequisites

• Node.js 18+
• npm or yarn
• Supabase account (free tier available)

Installation

1. Clone the repository

   git clone <your-repo-url>
   cd ai-social-media-manager

2. Install dependencies

   npm install

3. Set up environment variables

   Create a .env file in the root directory:

   VITE_SUPABASE_URL=your_supabase_url
   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

4. Run development server

   npm run dev

5. Open browser Navigate to http://localhost:5173

Database Setup

The database schema is automatically created when you first deploy. The schema includes:

• User profiles and authentication
• Organizations with team management
• Social media account connections
• Posts with scheduling and approval workflows
• Analytics tracking
• Content pillars and hashtag collections
• Inbox for engagement management

All tables have Row Level Security (RLS) enabled for data protection.

Deployment to Netlify

Option 1: One-Click Deploy

1. Click the "Deploy to Netlify" button above
2. Connect your GitHub account
3. Configure environment variables:
   • VITE_SUPABASE_URL
   • VITE_SUPABASE_ANON_KEY
4. Deploy!

Option 2: Manual Deploy

1. Push code to GitHub

   git init
   git add .
   git commit -m "Initial commit"
   git remote add origin your-repo-url
   git push -u origin main

2. Deploy on Netlify

   • Go to Netlify
   • Click "Add new site" > "Import an existing project"
   • Choose your repository
   • Add environment variables
   • Deploy!

For detailed deployment instructions, see DEPLOYMENT.md

Project Structure

├── src/
│   ├── components/       # Reusable UI components
│   │   ├── layout/      # Layout components (Sidebar, Header)
│   │   └── OnboardingModal.tsx
│   ├── contexts/        # React contexts (Auth, Organization)
│   ├── lib/             # Utilities and types
│   │   ├── supabase.ts  # Supabase client
│   │   └── types.ts     # TypeScript types
│   ├── pages/           # Page components
│   │   ├── AuthPage.tsx
│   │   ├── Dashboard.tsx
│   │   ├── CalendarPage.tsx
│   │   ├── ComposePage.tsx
│   │   ├── AIStudioPage.tsx
│   │   ├── AnalyticsPage.tsx
│   │   ├── InboxPage.tsx
│   │   ├── AudiencePage.tsx
│   │   ├── HashtagsPage.tsx
│   │   ├── CompetitorsPage.tsx
│   │   └── SettingsPage.tsx
│   ├── App.tsx          # Main app component
│   ├── main.tsx         # Entry point
│   └── index.css        # Global styles
├── supabase/
│   └── migrations/      # Database migrations
├── public/              # Static assets
├── netlify.toml         # Netlify configuration
└── package.json

Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Lint code with ESLint
• npm run typecheck - Check TypeScript types

Environment Variables

Variable	Description	Required
VITE_SUPABASE_URL	Your Supabase project URL	Yes
VITE_SUPABASE_ANON_KEY	Your Supabase anonymous key	Yes

Next Steps

After deployment, you'll want to:

1. Integrate Social Media APIs

   • Facebook/Instagram (Meta)
   • Twitter/X
   • LinkedIn
   • TikTok
   • YouTube

2. Add AI Integration

   • OpenAI for content generation
   • Image generation (DALL-E or Replicate)
   • Sentiment analysis

3. Set Up Supabase Edge Functions

   • Post scheduling
   • Analytics fetching
   • Inbox synchronization
   • Token refresh

4. Configure Webhooks

   • Real-time engagement notifications
   • Comment and mention alerts

See the comprehensive implementation guide in the codebase for detailed instructions.

Features Roadmap

• User authentication
• Organization management
• Post composer with scheduling
• Content calendar
• AI content generation UI
• Analytics dashboard
• Unified inbox
• Audience insights
• Hashtag discovery
• Competitor tracking
• Social media OAuth integration
• Live AI content generation
• Automated posting
• Real-time analytics sync
• Media library
• A/B testing
• Team collaboration features
• Mobile app

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License.

Support

For support, email support@yourapp.com or open an issue in the repository.

---

Built with ❤️ using React, Supabase, and AI