🎨 AstraForge

A modern, AI-powered website builder that creates beautiful, functional websites using various tech stacks. Built entirely using prompt engineering , developed using React, Tailwind CSS, Node.js, and powered by Google’s Gemini.

✨ Features

Modern UI Design

• 🎨 Clean, glassmorphic interface with smooth animations
• 📱 Fully responsive design (desktop, tablet, mobile)
• 🌈 Beautiful gradient accents and modern typography
• 🔍 Real-time search and project history
• 📊 Live generation status with detailed progress tracking

Multi-Tech Stack Support

• ⚛️ React - Modern React with hooks and functional components
• 🟢 Vue.js - Progressive Vue.js framework with Composition API
• 🟠 Svelte - Compile-time optimized Svelte components
• 🔴 Angular - Full-featured Angular framework
• 🟡 Vanilla JS - Pure JavaScript without frameworks
• 🔵 Next.js - React with Server-Side Rendering
• 🟣 Nuxt.js - Vue with Server-Side Rendering

AI-Powered Generation

• 🤖 Powered by Google Gemini 2.5 Flash API
• 🔍 Auto-detection of tech stack from prompts
• ⚡ Fast generation with real-time status updates
• 🎯 Context-aware website creation
• 🔄 Easy modification and regeneration

SketchBuilder - Turn Sketches into Code

• ✏️ Upload hand-drawn sketches or wireframes
• 🦙 Ollama qwen2.5vl:7b for intelligent content detection
• 🤖 Gemini AI for code generation
• 🎨 Detects text, buttons, inputs, colors, and layout
• 💻 Generates working HTML/CSS/JS code
• 📱 Fully responsive output

Project Management

• 📁 Local project history with localStorage
• 🕒 Time-based project grouping (Today, Yesterday, 7 Days Ago)
• 💾 Auto-save generated projects
• 📥 One-click HTML download
• 🔍 Search through project history

Live Preview

• 👀 Full-screen preview modal
• 📱 Responsive preview with iframe
• 💻 Source code viewer
• 📊 Generation status sidebar
• ⬇️ Direct download functionality

📱 Bot Integration

AstraForge supports both Telegram and WhatsApp bots for generating projects directly from your messaging apps!

Telegram Bot

• See TELEGRAM_SETUP.md for detailed setup instructions
• Generate websites, apps, and resumes from Telegram
• Interactive commands with inline keyboards

WhatsApp Bot

• See WHATSAPP_SETUP.md for detailed setup instructions
• Same features as Telegram bot
• QR code authentication
• Works with WhatsApp Web

🚀 Quick Start

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Ollama (for SketchBuilder feature) - Download

Installation

1. Clone the repository

   git clone <repository-url>
   cd ai-website-builder

2. Install dependencies

   npm run install-all

3. Setup Ollama for SketchBuilder (Optional but recommended)

   # Install Ollama from https://ollama.ai/download
   # Then pull the vision model (note: no hyphen between 2.5 and vl):
   ollama pull qwen2.5vl:7b

   See QUICKSTART_OLLAMA.md for detailed setup.

4. Start the development servers

   npm run dev

5. Open your browser

   • Frontend: http://localhost:3000
   • Backend: http://localhost:3001

🛠️ Development

Project Structure

ai-website-builder/
├── client/                 # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── services/       # API services
│   │   └── App.js
│   └── package.json
├── server/                 # Node.js backend
│   ├── routes/            # API routes
│   ├── services/          # Gemini AI service
│   └── index.js
└── package.json           # Root package.json

Available Scripts

Root Level

• npm run dev - Start both frontend and backend
• npm run install-all - Install all dependencies
• npm run build - Build frontend for production
• npm start - Start production server

Frontend (client/)

• npm start - Start React development server
• npm run build - Build for production
• npm test - Run tests

Backend (server/)

• npm start - Start production server
• npm run dev - Start with nodemon (development)

🎨 Customization

Changing Colors

Edit client/tailwind.config.js:

colors: {
  primary: {
    500: '#6366f1', // Change this
  },
  secondary: {
    500: '#8b5cf6', // Change this
  },
}

Adding New Tech Stacks

Edit server/services/geminiService.js:

const techStackConfigs = {
  yourNewStack: {
    name: 'Your New Stack',
    description: 'Description here',
    template: `<!DOCTYPE html>...`,
    instructions: 'Instructions here'
  }
};

Modifying UI Components

All components are in client/src/components/:

• Sidebar.js - Left navigation sidebar
• MainContent.js - Main content area
• PreviewModal.js - Full-screen preview modal

🔧 Configuration

Environment Variables

Create server/.env:

PORT=3001
GEMINI_API_KEY=your_gemini_api_key_here
NODE_ENV=development
CORS_ORIGIN=http://localhost:3000

# Ollama Configuration (for SketchBuilder)
OLLAMA_BASE_URL=http://localhost:11434

See .env.example for a complete template.

API Configuration

The Gemini API key is already configured in server/config.js:

geminiApiKey: 'AIzaSyCcxskdSphcirKJaRzLdXl32WBJC0qF3X4'

📱 Usage

Creating a Website

1. Enter your prompt - Describe what you want to build
2. Choose tech stack - Select from dropdown or let AI auto-detect
3. Click Generate - AI will create your website
4. Preview & Download - View in full-screen modal and download HTML

Example Prompts

• "Create a modern portfolio website for a photographer with a dark theme and image gallery"
• "Build a landing page for a SaaS product with pricing plans and testimonials"
• "Make a restaurant website with menu, reservations, and contact form"
• "Design a blog website with article listings and search functionality"

Using SketchBuilder

1. Draw a sketch - Hand-draw or digitally create a wireframe
2. Upload the image - Click "Upload Sketch" in SketchBuilder
3. Wait for analysis - Ollama analyzes your sketch (5-15 seconds)
4. Review detected elements - See text, buttons, inputs, colors
5. Generate code - Gemini creates working HTML/CSS/JS
6. Preview & Download - Test and download your application

See QUICKSTART_OLLAMA.md for detailed SketchBuilder guide.

🎯 Features in Detail

Auto-Detection

The AI automatically detects the tech stack from your prompt:

• "react calculator" → React
• "vue dashboard" → Vue.js
• "svelte todo app" → Svelte
• "angular e-commerce" → Angular

Project History

• Projects are automatically saved to localStorage
• Grouped by time: Today, Yesterday, 7 Days Ago, Older
• Click any project to reload it
• Search through project titles

Generation Status

Real-time status updates during generation:

• Analyzing requirements
• Generating HTML structure
• Adding CSS styling
• Implementing JavaScript
• Optimizing for performance

🐛 Troubleshooting

Common Issues

"API configuration error"

• Check that the Gemini API key is correct
• Verify the server is running on port 3001

"Request timed out"

• Try with a shorter prompt
• Check your internet connection

"Content blocked by safety filters"

• Modify your prompt to be more specific
• Avoid potentially harmful content

Frontend not loading

• Ensure the React dev server is running on port 3000
• Check for any console errors

Debug Mode

Enable debug logging by setting NODE_ENV=development in your environment.

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

• Google Gemini - AI generation capabilities
• Ollama - Local LLM inference for vision
• qwen2.5vl - Vision language model
• React - Frontend framework
• Tailwind CSS - Styling framework
• Express.js - Backend framework
• Lucide React - Beautiful icons

📞 Support

If you encounter any issues or have questions:

1. Check the troubleshooting section
2. Look at the console for error messages
3. Create an issue on GitHub
4. Check the API health endpoint: http://localhost:3001/api/health

---

Built with ❤️ using modern web technologies and AI