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:

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

2. Install dependencies:

npm install

3. Set up environment variables:

cp .env.example .env.local

Configure your environment:

# 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:

npm run dev

5. Open your browser: Navigate to 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

// 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

// 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

// 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

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

AI Configuration

{
  defaultProvider: 'google',
  defaultModel: 'gemini-2.5-flash',
  maxTokens: 8192,
  temperature: 0.7
}

🤝 Contributing

We welcome contributions! Please see our Contributing Guide 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 file for details.

🆘 Support

• Documentation: docs.deepsite.dev
• Issues: GitHub Issues
• Discussions: GitHub 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