This is a Next.js project bootstrapped with create-next-app.

sstocode - AI-Powered Design to Code

Transform UI designs into production-ready React components with AI precision. Upload your design mockups and get clean, responsive code instantly.

🚀 Features

• AI-Powered Generation: Convert designs to React components using Gemini AI
• Live Preview: Real-time code editing with instant preview
• Clean Code Output: Production-ready components with Tailwind CSS
• Responsive Design: Mobile-first, responsive components
• Copy & Export: Easy code copying and component export

🛠️ Getting Started

Prerequisites

• Node.js 18+
• Gemini API key

Installation

# Clone the repository
git clone https://github.com/your-username/sstocode.git
cd sstocode

# Install dependencies
npm install
# or
yarn install
# or
pnpm install

# Set up environment variables
cp .env.local.example .env.local
# Add your GEMINI_API_KEY to .env.local

# Run the development server
npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

📋 Usage

1. Upload Design: Upload your UI design image (PNG, JPG, WebP)
2. AI Generation: Our AI analyzes and converts your design to React code
3. Live Preview: View and edit the generated component in real-time
4. Export Code: Copy the code or download the component

🗺️ Roadmap

Check out our detailed roadmap to see what's coming next:

• Phase 1: Enhanced preview features, multiple AI providers, code quality improvements
• Phase 2: User accounts, collaboration features, advanced editor
• Phase 3: API integration, enterprise features, performance optimization
• Phase 4: Mobile apps, plugin system, community marketplace

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details on:

• Setting up the development environment
• Code style and conventions
• Pull request process
• Issue reporting guidelines

Quick Contribution Areas

• 🟢 Beginner: UI improvements, documentation, bug fixes
• 🟡 Intermediate: New features, AI integration, performance
• 🔴 Advanced: Architecture, security, complex features

📚 Learn More

To learn more about the technologies used:

• Next.js Documentation - learn about Next.js features and API
• Tailwind CSS - utility-first CSS framework
• Google Gemini AI - AI model for code generation

🚀 Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

📄 License

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

🙏 Acknowledgments

• Built with Next.js and Tailwind CSS
• AI powered by Google Gemini
• Icons by Lucide React

📞 Contact

For questions, issues, or discussions:

• Email: koustavganguly24@gmail.com
• Website: iamk.xyz
• Twitter: @iamk_xyz

---

Star ⭐ this repo if you find it helpful!