README.md

SocialGen 🎨

SocialGen is a high-performance, aesthetically pleasing Social Media Image Generator. Upload your transparent logo once, select a background color, and instantly generate perfectly centered assets for all major social networks.

✨ Features

• 🚀 Instant Generation: Client-side processing using the Canvas API for blazing-fast previews.
• 🎨 Rich Aesthetics: Premium UI with glassmorphism, grainy gradients, and smooth Framer Motion animations.
• 🔍 Intelligent Scaling: Dynamic "Logo Zoom" control to perfectly fit high-resolution logos.
• 📱 Multi-Platform Support:
  • Twitter / X: 400x400
  • YouTube: 800x800
  • Instagram: 1080x1080
  • TikTok: 200x200
  • Discord: 512x512
• 📦 Bulk Download: Export individual assets or download everything in a single .zip archive.
• 🔒 Privacy First: All image processing happens locally in your browser. No images are uploaded to any server.

🛠️ Tech Stack

• Framework: React 19 + TypeScript
• Bundler: Vite 7
• Styling: Tailwind CSS 3
• Animations: Framer Motion
• Icons: Lucide React
• Assets: JSZip & FileSaver

🚀 Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/socialgen.git
   cd socialgen

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

Building for Production

To create an optimized production build:

npm run build

The output will be in the dist/ directory, ready to be deployed to Vercel, Netlify, or GitHub Pages.

📁 Project Structure

src/
├── components/     # UI Components (LogoUpload, ColorPicker, ScaleSlider, etc.)
├── utils/          # Logic (Canvas generator, Tailwind merging)
├── App.tsx         # Main entry point & state management
├── index.css       # Global styles & Tailwind directives
└── main.tsx        # React DOM initialization

🤝 Contributing

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

1. Fork the Project
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

📄 License

Distributed under the MIT License. See LICENSE for more information.

🙌 Acknowledgments

• Inspired by the need for quick branded assets.
• Design inspiration from various modern dark-mode dashboards.
• Icons by Lucide.