Code Review AI Bot
Go to file
lintsinghua 93bac360f1 feat(deployment): Add Docker support and deployment configuration
- Add Dockerfile for multi-stage build with Node.js and Nginx
- Create docker-compose.yml for simplified container deployment
- Add .dockerignore to optimize Docker build context
- Configure nginx.conf with performance and security optimizations
- Update README.md and README_EN.md with Docker deployment instructions
- Enhance database configuration to support optional Supabase integration
- Improve environment configuration handling for local and containerized environments
Enables easier deployment and provides a standardized container-based setup for the application.
2025-10-23 00:13:48 +08:00
history Initial commit: Add XCodeReviewer project files 2025-09-20 00:09:00 +08:00
public feat(audit): Enhance CreateTaskDialog with improved task creation workflow 2025-10-22 22:18:19 +08:00
rules Initial commit: Add XCodeReviewer project files 2025-09-20 00:09:00 +08:00
scripts refactor(project-structure): Restructure project architecture and improve code organization 2025-10-22 15:12:59 +08:00
src feat(deployment): Add Docker support and deployment configuration 2025-10-23 00:13:48 +08:00
supabase/migrations refactor(project-structure): Restructure project architecture and improve code organization 2025-10-22 15:12:59 +08:00
.dockerignore feat(deployment): Add Docker support and deployment configuration 2025-10-23 00:13:48 +08:00
.env.example refactor(project-structure): Restructure project architecture and improve code organization 2025-10-22 15:12:59 +08:00
.gitignore 更新.gitignore,移除public目录;新增多个图像文件,包括favicon、错误页面和logo等SVG文件。 2025-09-20 11:59:24 +08:00
Dockerfile feat(deployment): Add Docker support and deployment configuration 2025-10-23 00:13:48 +08:00
LICENSE Initial commit 2025-09-19 23:53:48 +08:00
README.md feat(deployment): Add Docker support and deployment configuration 2025-10-23 00:13:48 +08:00
README_EN.md feat(deployment): Add Docker support and deployment configuration 2025-10-23 00:13:48 +08:00
components.json chore(config): Update components.json configuration 2025-10-22 15:13:18 +08:00
docker-compose.yml feat(deployment): Add Docker support and deployment configuration 2025-10-23 00:13:48 +08:00
index.html feat(branding): Update project logo and favicon 2025-10-22 16:57:52 +08:00
nginx.conf feat(deployment): Add Docker support and deployment configuration 2025-10-23 00:13:48 +08:00
package.json refactor(project-structure): Restructure project architecture and improve code organization 2025-10-22 15:12:59 +08:00
pnpm-lock.yaml Initial commit: Add XCodeReviewer project files 2025-09-20 00:09:00 +08:00
postcss.config.js refactor(project-structure): Restructure project architecture and improve code organization 2025-10-22 15:12:59 +08:00
sgconfig.yml Initial commit: Add XCodeReviewer project files 2025-09-20 00:09:00 +08:00
tailwind.config.js style(theme): Refactor global CSS with professional color scheme and design system 2025-10-22 17:42:48 +08:00
tsconfig.app.json Initial commit: Add XCodeReviewer project files 2025-09-20 00:09:00 +08:00
tsconfig.check.json Initial commit: Add XCodeReviewer project files 2025-09-20 00:09:00 +08:00
tsconfig.json Initial commit: Add XCodeReviewer project files 2025-09-20 00:09:00 +08:00
tsconfig.node.json Initial commit: Add XCodeReviewer project files 2025-09-20 00:09:00 +08:00
vite.config.ts refactor(project-structure): Restructure project architecture and improve code organization 2025-10-22 15:12:59 +08:00

README_EN.md

XCodeReviewer - Your Intelligent Code Audit Partner 🚀

XCodeReviewer Logo

Build Status License: MIT React TypeScript Vite Supabase Google Gemini

XCodeReviewer is a modern code audit platform powered by Large Language Models (LLM), designed to provide developers with intelligent, comprehensive, and in-depth code quality analysis and review services.

🌟 Why Choose XCodeReviewer?

In the fast-paced world of software development, ensuring code quality is crucial. Traditional code audit tools are rigid and inefficient, while manual audits are time-consuming and labor-intensive. XCodeReviewer leverages the powerful capabilities of Google Gemini AI to revolutionize the way code reviews are conducted:

  • 🤖 AI-Driven Deep Analysis: Beyond traditional static analysis, understands code intent and discovers deep logical issues.
  • 🎯 Multi-dimensional, Comprehensive Assessment: From security, performance, maintainability to code style, providing 360-degree quality evaluation.
  • 💡 Clear, Actionable Fix Suggestions: Innovative What-Why-How approach that not only tells you "what" the problem is, but also explains "why" and provides "how to fix" with specific code examples.
  • Real-time Feedback, Instant Improvement: Whether it's code snippets or entire repositories, get fast and accurate analysis results.
  • Modern, Beautiful User Interface: Built with React + TypeScript, providing a smooth and intuitive user experience.

🎬 Project Demo

Main Feature Interfaces

📊 Intelligent Dashboard

Intelligent Dashboard Real-time display of project statistics, quality trends, and system performance, providing comprehensive code audit overview

Instant Analysis

Instant Analysis Support for quick code snippet analysis with detailed What-Why-How explanations and fix suggestions

🚀 Project Management

Project Management Integrated GitHub/GitLab repositories, supporting multi-language project audits and batch code analysis

🚀 Quick Start

Deploy quickly using Docker without Node.js environment setup.

  1. Clone the project

    git clone https://github.com/lintsinghua/XCodeReviewer.git
    cd XCodeReviewer
    
  2. Configure environment variables

    cp .env.example .env
    # Edit .env file and set at least VITE_GEMINI_API_KEY
    
  3. Build and start

    docker-compose build
    docker-compose up -d
    
  4. Access the application

    Open http://localhost:5174 in your browser

Common commands:

docker-compose logs -f      # View logs
docker-compose restart      # Restart service
docker-compose down         # Stop service

💻 Local Development Deployment

For development or custom modifications, use local deployment.

Requirements

  • Node.js: 18+
  • pnpm: 8+ (recommended) or npm / yarn
  • Google Gemini API Key: For AI code analysis

Installation & Setup

  1. Clone the project

    git clone https://github.com/lintsinghua/XCodeReviewer.git
    cd XCodeReviewer
    
  2. Install dependencies

    # Using pnpm (recommended)
    pnpm install
    
    # Or using npm
    npm install
    
    # Or using yarn
    yarn install
    
  3. Configure environment variables

    # Copy environment template
    cp .env.example .env
    

    Edit the .env file and configure the necessary environment variables:

    # Google Gemini AI Configuration (Required)
    VITE_GEMINI_API_KEY=your_gemini_api_key_here
    VITE_GEMINI_MODEL=gemini-2.5-flash
    VITE_GEMINI_TIMEOUT_MS=25000
    
    # Supabase Configuration (Optional, for data persistence)
    VITE_SUPABASE_URL=https://your-project.supabase.co
    VITE_SUPABASE_ANON_KEY=your-anon-key-here
    
    # GitHub Integration (Optional, for repository analysis)
    VITE_GITHUB_TOKEN=your_github_token_here
    
    # Application Configuration
    VITE_APP_ID=xcodereviewer
    
    # Analysis Configuration
    VITE_MAX_ANALYZE_FILES=40
    VITE_LLM_CONCURRENCY=2
    VITE_LLM_GAP_MS=500
    
  4. Start development server

    pnpm dev
    
  5. Access the application Open http://localhost:5174 in your browser

🔑 Getting API Keys

Google Gemini API Key

  1. Visit Google AI Studio
  2. Create a new API Key
  3. Add the API Key to VITE_GEMINI_API_KEY in your .env file

Supabase Configuration (Optional)

  1. Visit Supabase to create a new project
  2. Get the URL and anonymous key from project settings
  3. Run database migration scripts:
    # Execute in Supabase SQL Editor
    cat supabase/migrations/full_schema.sql
    
  4. If Supabase is not configured, the system will run in demo mode without data persistence

Core Features

🚀 Project Management
  • One-click Repository Integration: Seamlessly connect with GitHub, GitLab, and other mainstream platforms.
  • Multi-language "Full Stack" Support: Covers popular languages like JavaScript, TypeScript, Python, Java, Go, Rust, and more.
  • Flexible Branch Auditing: Support for precise analysis of specified code branches.
Instant Analysis
  • Code Snippet "Quick Paste": Directly paste code in the web interface for immediate analysis results.
  • 10+ Language Instant Support: Meet your diverse code analysis needs.
  • Millisecond Response: Quickly get code quality scores and optimization suggestions.
🧠 Intelligent Auditing
  • AI Deep Code Understanding: Based on Google Gemini, providing intelligent analysis beyond keyword matching.
  • Five Core Detection Dimensions:
    • 🐛 Potential Bugs: Precisely capture logical errors, boundary conditions, and null pointer issues.
    • 🔒 Security Vulnerabilities: Identify SQL injection, XSS, sensitive information leakage, and other security risks.
    • Performance Bottlenecks: Discover inefficient algorithms, memory leaks, and unreasonable asynchronous operations.
    • 🎨 Code Style: Ensure code follows industry best practices and unified standards.
    • 🔧 Maintainability: Evaluate code readability, complexity, and modularity.
💡 Explainable Analysis (What-Why-How)
  • What: Clearly identify problems in the code.
  • Why: Detailed explanation of potential risks and impacts the problem may cause.
  • How: Provide specific, directly usable code fix examples.
  • Precise Code Location: Quickly jump to the problematic line and column.
📊 Visual Reports
  • Code Quality Dashboard: Provides comprehensive quality assessment from 0-100, making code health status clear at a glance.
  • Multi-dimensional Issue Statistics: Classify and count issues by type and severity.
  • Quality Trend Analysis: Display code quality changes over time through charts.

🛠️ Tech Stack

Category Technology Description
Frontend Framework React 18 TypeScript Vite Modern frontend development stack with hot reload and type safety
UI Components Tailwind CSS Radix UI Lucide React Responsive design, accessibility, rich icon library
Data Visualization Recharts Professional chart library supporting multiple chart types
Routing React Router v6 Single-page application routing solution
State Management React Hooks Sonner Lightweight state management and notification system
AI Engine Google Gemini 2.5 Flash Powerful large language model supporting code analysis
Backend Service Supabase PostgreSQL Full-stack backend-as-a-service with real-time database
HTTP Client Axios Ky Modern HTTP request libraries
Code Quality Biome Ast-grep TypeScript Code formatting, static analysis, and type checking
Build Tools Vite PostCSS Autoprefixer Fast build tools and CSS processing

📁 Project Structure

XCodeReviewer/
├── src/
│   ├── app/                # Application configuration
│   │   ├── App.tsx         # Main application component
│   │   ├── main.tsx        # Application entry point
│   │   └── routes.tsx      # Route configuration
│   ├── components/         # React components
│   │   ├── layout/         # Layout components (Header, Footer, PageMeta)
│   │   ├── ui/             # UI component library (based on Radix UI)
│   │   └── debug/          # Debug components
│   ├── pages/              # Page components
│   │   ├── Dashboard.tsx   # Dashboard
│   │   ├── Projects.tsx    # Project management
│   │   ├── InstantAnalysis.tsx # Instant analysis
│   │   ├── AuditTasks.tsx  # Audit tasks
│   │   └── AdminDashboard.tsx # System management
│   ├── features/           # Feature modules
│   │   ├── analysis/       # Analysis related services
│   │   │   └── services/   # AI code analysis engine
│   │   └── projects/       # Project related services
│   │       └── services/   # Repository scanning, ZIP file scanning
│   ├── shared/             # Shared utilities
│   │   ├── config/         # Configuration files (database, environment)
│   │   ├── types/          # TypeScript type definitions
│   │   ├── hooks/          # Custom React Hooks
│   │   ├── utils/          # Utility functions
│   │   └── constants/      # Constants definition
│   └── assets/             # Static assets
│       └── styles/         # Style files
├── supabase/
│   └── migrations/         # Database migration files
├── public/
│   └── images/             # Image resources
├── scripts/                # Build and setup scripts
└── rules/                  # Code rules configuration

🎯 Usage Guide

Instant Code Analysis

  1. Visit the /instant-analysis page
  2. Select programming language (supports 10+ languages)
  3. Paste code or upload file
  4. Click "Start Analysis" to get AI analysis results
  5. View detailed issue reports and fix suggestions

Project Management

  1. Visit the /projects page
  2. Click "New Project" to create a project
  3. Configure repository URL and scan parameters
  4. Start code audit task
  5. View audit results and issue statistics

Audit Tasks

  1. Create audit tasks in project detail page
  2. Select scan branch and exclusion patterns
  3. Configure analysis depth and scope
  4. Monitor task execution status
  5. View detailed issue reports

Build and Deploy

# Development mode
pnpm dev

# Build production version
pnpm build

# Preview build results
pnpm preview

# Code linting
pnpm lint

Environment Variables

Variable Required Description
VITE_GEMINI_API_KEY Google Gemini API key
VITE_GEMINI_MODEL AI model name (default: gemini-2.5-flash)
VITE_GEMINI_TIMEOUT_MS Request timeout (default: 25000ms)
VITE_SUPABASE_URL Supabase project URL
VITE_SUPABASE_ANON_KEY Supabase anonymous key
VITE_APP_ID Application identifier (default: xcodereviewer)
VITE_MAX_ANALYZE_FILES Maximum files to analyze (default: 40)
VITE_LLM_CONCURRENCY LLM concurrency limit (default: 2)
VITE_LLM_GAP_MS Gap between LLM requests (default: 500ms)

🤝 Contributing

We warmly welcome all forms of contributions! Whether it's submitting issues, creating PRs, or improving documentation, every contribution is important to us. Please contact us for detailed information.

Development Workflow

  1. Fork this 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. Create a Pull Request

🙏 Acknowledgments

  • Google Gemini AI: Providing powerful AI analysis capabilities
  • Supabase: Providing convenient backend-as-a-service support
  • Radix UI: Providing accessible UI components
  • Tailwind CSS: Providing modern CSS framework
  • Recharts: Providing professional chart components
  • And all the authors of open source software used in this project!

📞 Contact Us


If this project helps you, please give us a Star! Your support is our motivation to keep moving forward! [Star History](https://star-history.com/#lintsinghua/XCodeReview