AI Social Media Manager with Auth0 Security

A powerful, role-based social media management platform with AI-powered content generation, built with React and secured with Auth0 authentication.

🌟 Features

🔐 Authentication & Authorization

• Auth0 Integration - Secure authentication with industry-standard protocols
• Role-Based Access Control (RBAC) - Two distinct user roles:
  • Manager - Full access to create, approve, and publish content
  • Team Member - Create drafts and view content (approval required)
• Token Vault Integration - Secure credential management

✍️ Content Management

• Multi-Platform Support
  • Twitter (280 character limit)
  • LinkedIn (Professional networking)
  • Instagram (Visual-first content)
• AI-Powered Content Generation
  • Smart content suggestions based on platform
  • Platform-optimized formatting
  • Tone and style adaptation
• Draft Management - Save and edit posts before submission

✅ Approval Workflow

• Three-Stage Process
  1. Pending - Submitted by team members, awaiting review
  2. Approved - Reviewed and approved by managers
  3. Published - Live on social media platforms
• Complete Audit Trail - Track who created, approved, and published each post
• Bulk Actions - Approve or reject multiple posts at once

📊 Dashboard & Analytics

• Real-Time Statistics
  • Total posts created
  • Pending approvals
  • Published content count
  • Platform distribution
• Role-Specific Views - Customized dashboard based on user permissions
• Post History - Complete timeline of all activities

🎨 User Interface

• Modern Design - Clean, professional interface built with Tailwind CSS
• Responsive Layout - Works seamlessly on desktop, tablet, and mobile
• Collapsible Sidebar - Maximize workspace when needed
• Status Indicators - Visual badges for post states
• Platform Icons - Easy identification of target platforms

🚀 Quick Start

Prerequisites

• Node.js 16.x or higher
• npm 8.x or higher
• Git

Installation

1. Clone the repository

git clone https://github.com/your-username/social-media-manager.git
cd social-media-manager

2. Install dependencies

npm install

3. Install Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

4. Install Lucide React (for icons)

npm install lucide-react

5. Configure Tailwind CSS

Create/update tailwind.config.js:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

6. Update src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

7. Start the development server

npm start

The app will open at http://localhost:3000

📁 Project Structure

social-media-manager/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── App.jsx              # Main application component
│   ├── index.js             # Entry point
│   ├── index.css            # Global styles with Tailwind
│   └── components/          # (Future: Component directory)
├── tailwind.config.js       # Tailwind CSS configuration
├── postcss.config.js        # PostCSS configuration
├── package.json             # Dependencies and scripts
└── README.md               # This file

🎮 Usage

Login

1. Launch the application
2. Choose your role:
   • Manager - Full access with approval capabilities
   • Team Member - Content creation only

Creating Content (Both Roles)

1. Click "Create New Post with AI" button
2. Select target platform (Twitter, LinkedIn, Instagram)
3. Enter your content or click "Generate AI Suggestion"
4. Review and edit the content
5. Click "Submit for Approval" (Team Member) or "Publish Now" (Manager)

Manager Actions

1. Approve Posts - Review pending submissions and approve
2. Reject Posts - Send back posts that need revision
3. Publish Directly - Create and publish without approval
4. View All Content - Access complete post history

Team Member Actions

1. Create Drafts - Submit content for manager approval
2. View Own Posts - Track status of submitted content
3. Edit Drafts - Modify pending submissions

🔧 Configuration

Environment Variables

Create a .env file in the root directory:

# Auth0 Configuration (for future implementation)
REACT_APP_AUTH0_DOMAIN=your-domain.auth0.com
REACT_APP_AUTH0_CLIENT_ID=your-client-id
REACT_APP_AUTH0_AUDIENCE=your-api-audience

# API Configuration (for future implementation)
REACT_APP_API_URL=https://api.yourdomain.com
REACT_APP_AI_API_KEY=your-ai-api-key

Customization

Change Color Scheme - Edit Tailwind colors in tailwind.config.js:

theme: {
  extend: {
    colors: {
      primary: '#3b82f6',
      secondary: '#10b981',
    }
  }
}

Add New Platforms - Update the platforms array in App.jsx:

const platforms = ['Twitter', 'LinkedIn', 'Instagram', 'Facebook', 'TikTok'];

🛠️ Built With

• React 18.x - Frontend framework
• Tailwind CSS 3.x - Utility-first CSS framework
• Lucide React - Beautiful icon library
• Auth0 - Authentication and authorization (integration ready)
• Create React App - Project bootstrapping

📊 Features Roadmap

Phase 1 (Current) ✅

• Basic authentication simulation
• Role-based access control
• Post creation and management
• Approval workflow
• AI content suggestions
• Multi-platform support

Phase 2 (Planned) 🔄

• Real Auth0 integration
• Backend API integration
• Actual social media API connections
• Image upload and management
• Scheduling capabilities
• Analytics dashboard

Phase 3 (Future) 📅

• Multi-user collaboration
• Advanced analytics
• Content calendar view
• Performance metrics
• A/B testing features
• Mobile app version

🤝 Contributing

Contributions are welcome! Please follow these steps:

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Coding Standards

• Use functional components with hooks
• Follow React best practices
• Use Tailwind utility classes for styling
• Write clean, commented code
• Test before submitting

🐛 Known Issues

• Demo Mode: Currently using simulated authentication (not production-ready)
• No Persistence: Data resets on page refresh (requires backend)
• AI Suggestions: Using mock data (requires OpenAI API integration)
• No Social API: Posts don't actually publish to platforms (requires platform APIs)

🔍 Troubleshooting

Tailwind CSS not working

# Delete node_modules and reinstall
rm -rf node_modules package-lock.json
npm install
npm start

Icons not showing

# Reinstall lucide-react
npm uninstall lucide-react
npm install lucide-react

Build errors

# Clear cache and rebuild
npm run build

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 Your Name

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

👥 Authors

• Your Name - Initial work - YourGitHub

🙏 Acknowledgments

• Auth0 for authentication best practices
• Tailwind CSS for amazing styling utilities
• Lucide for beautiful icons
• React community for excellent documentation
• DEV Community for project inspiration

🔗 Links

• DEV Community Post: Read the article

⭐ Star this repo if you find it helpful!

Made with ❤️ using React and Tailwind CSS

Happy Coding! 🚀