README-v2.md

# DeepSite 2.0 🚀

**The Next-Generation AI-Powered Web Development Platform**

DeepSite 2.0 is a revolutionary web development platform that combines the power of Google Gemini AI with an intuitive, professional-grade development environment. Create, edit, and manage complete web projects with unprecedented AI assistance.

## ✨ Key Features

### 🤖 Advanced AI Integration
- **Google Gemini 2.5 Models**: Access to the latest and most powerful AI models
- **Smart Code Generation**: Generate complete projects from simple descriptions
- **Intelligent Code Improvement**: AI-powered code optimization and bug fixing
- **Context-Aware Assistance**: AI that understands your project structure
- **Custom Prompt System**: Reusable AI prompts for consistent workflows

### 🎯 Professional Development Environment
- **Multi-Tab Editor**: Monaco-based editor with advanced features
- **File Explorer**: Hierarchical file and folder management with drag-and-drop
- **Live Preview**: Real-time preview with multiple viewport sizes
- **Smart File Detection**: Automatic file type detection and syntax highlighting
- **Version Control**: Built-in file versioning and change tracking

### 🎨 Modern User Experience
- **Responsive Design**: Optimized for all screen sizes
- **Dark Theme**: Professional dark interface
- **Customizable Layout**: Flexible panel system with resizable components
- **Keyboard Shortcuts**: Full keyboard navigation support
- **Performance Optimized**: Fast loading and smooth interactions

### 🔧 Advanced File Management
- **Hierarchical Structure**: Organize files in folders and subfolders
- **File Type Support**: HTML, CSS, JS, TS, React, Vue, and more
- **Drag & Drop**: Intuitive file organization
- **Search & Filter**: Quickly find files and content
- **Bulk Operations**: Manage multiple files at once

## 🛠 Tech Stack

### Frontend
- **Next.js 14**: React framework with App Router
- **React 18**: Latest React with concurrent features
- **TypeScript**: Full type safety
- **Tailwind CSS**: Utility-first styling
- **shadcn/ui**: Modern component library
- **Monaco Editor**: VS Code-powered editor

### Backend & AI
- **Google Gemini API**: Advanced AI models
- **MongoDB**: Document database
- **Mongoose**: Object modeling
- **NextAuth.js**: Authentication

## 🚀 Getting Started

### Prerequisites
- Node.js 18+
- MongoDB database
- Google Gemini API key

### Installation

1. **Clone the repository**:
```bash
git clone https://github.com/yourusername/deepsite.git
cd deepsite
```

2. **Install dependencies**:
```bash
npm install
```

3. **Set up environment variables**:
```bash
cp .env.example .env.local
```

Configure your environment:
```env
# Database
MONGODB_URI=your_mongodb_connection_string

# Authentication
NEXTAUTH_SECRET=your_nextauth_secret
NEXTAUTH_URL=http://localhost:3000

# AI Integration
GEMINI_API_KEY=your_google_gemini_api_key
HF_TOKEN=your_hugging_face_token
```

4. **Run the development server**:
```bash
npm run dev
```

5. **Open your browser**:
Navigate to [http://localhost:3000](http://localhost:3000)

## 📖 Usage Guide

### Creating Your First Project

1. **Sign Up/Login**: Create an account or sign in
2. **New Project**: Click "Create Project" and choose a template
3. **AI Generation**: Use the AI Project Generator for instant setup
4. **Code Editing**: Use the multi-tab editor with AI assistance
5. **Live Preview**: See changes in real-time
6. **Export/Deploy**: Download or deploy your project

### AI-Powered Development

#### Project Generation
```
Describe your project: "Create a modern portfolio website with dark theme, 
image gallery, contact form, and smooth animations"
```

#### Smart Code Assistance
- **Code Improvement**: Select code and use AI to enhance it
- **Bug Fixing**: Automatic detection and fixing of issues
- **Code Explanation**: Get detailed explanations of complex code
- **Style Enhancement**: Improve visual design with AI suggestions

#### Custom Prompts
Create reusable prompts for:
- Code reviews
- Performance optimization
- Security audits
- Documentation generation

## 🔌 API Reference

### Projects API
```typescript
// Get all projects
GET /api/projects

// Create project
POST /api/projects
{
  "name": "My Project",
  "description": "Project description",
  "type": "website"
}

// Get specific project
GET /api/projects/[id]

// Update project
PUT /api/projects/[id]

// Delete project
DELETE /api/projects/[id]
```

### Files API
```typescript
// Get project files
GET /api/projects/[id]/files

// Create file
POST /api/projects/[id]/files
{
  "name": "index.html",
  "content": "<html>...</html>",
  "type": "html"
}

// Update file
PUT /api/projects/[id]/files/[fileId]

// Delete file
DELETE /api/projects/[id]/files/[fileId]
```

### AI API
```typescript
// Generate with Gemini
POST /api/ai/gemini
{
  "model": "gemini-2.5-flash",
  "prompt": "Create a responsive navbar",
  "config": {
    "temperature": 0.7,
    "maxTokens": 4096
  }
}

// Generate project files
POST /api/projects/[id]/generate-files
{
  "prompt": "Create a landing page",
  "projectType": "website",
  "framework": "vanilla"
}
```

## 🎨 Features Overview

### File Management System
- **Hierarchical Organization**: Create folders and subfolders
- **Drag & Drop**: Move files between folders easily
- **File Type Detection**: Automatic detection of 20+ file types
- **Search & Filter**: Find files quickly with advanced search
- **Bulk Operations**: Select and manage multiple files

### AI-Powered Editor
- **Smart Suggestions**: Context-aware code completions
- **Code Analysis**: Real-time error detection and fixes
- **Performance Optimization**: AI-powered code improvements
- **Security Audits**: Automatic vulnerability detection
- **Documentation**: Auto-generate code documentation

### Multi-Tab Interface
- **Unlimited Tabs**: Open multiple files simultaneously
- **Tab Management**: Close, duplicate, and organize tabs
- **Unsaved Changes**: Visual indicators for modified files
- **Auto-Save**: Automatic saving with configurable intervals
- **Session Restore**: Restore tabs after browser restart

### Live Preview System
- **Real-Time Updates**: See changes instantly
- **Multiple Viewports**: Test responsive designs
- **Device Simulation**: Mobile, tablet, and desktop views
- **Console Integration**: Debug JavaScript in real-time
- **Error Reporting**: Visual error indicators and fixes

## 🔧 Configuration

### Editor Settings
```typescript
{
  theme: 'deepsite-dark',
  fontSize: 14,
  fontFamily: 'JetBrains Mono',
  tabSize: 2,
  wordWrap: 'off',
  minimap: true,
  lineNumbers: 'on'
}
```

### AI Configuration
```typescript
{
  defaultProvider: 'google',
  defaultModel: 'gemini-2.5-flash',
  maxTokens: 8192,
  temperature: 0.7
}
```

## 🤝 Contributing

We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.

### Development Setup
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

### Code Style
- Use TypeScript for all new code
- Follow the existing code style
- Add JSDoc comments for functions
- Write tests for new features

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🆘 Support

- **Documentation**: [docs.deepsite.dev](https://docs.deepsite.dev)
- **Issues**: [GitHub Issues](https://github.com/yourusername/deepsite/issues)
- **Discussions**: [GitHub Discussions](https://github.com/yourusername/deepsite/discussions)
- **Email**: support@deepsite.dev

## 🗺 Roadmap

### Version 2.1 (Coming Soon)
- [ ] Real-time collaboration
- [ ] Cloud synchronization
- [ ] One-click deployment
- [ ] Advanced analytics
- [ ] Plugin system

### Version 2.2 (Future)
- [ ] Mobile app
- [ ] Offline mode
- [ ] Team workspaces
- [ ] Advanced AI models
- [ ] Custom themes

---

**Built with ❤️ by the DeepSite Team**