frontend-dev-guidelines

Dashboard


Real-time metrics showing code quality scores, issue breakdown, and review history

GitLab Integration


AI-powered inline comments directly on merge request code changes


Comprehensive merge request summary with quality score and categorized issues

Developer Analytics


Track individual developer performance and improvement trends over time

> Note: Add your screenshots to the /images folder to display them here.

Code Review Intelligence

• AI-Powered Analysis: Utilizes Azure OpenAI Haiku 4.5 for fast, accurate code reviews
• Multi-Language Support: Analyzes TypeScript, JavaScript, Python, Java, Go, Rust, PHP, and more
• Smart Batching: Combines multiple file changes into single LLM call for efficiency (≤500 lines)
• False Positive Filtering: Verifies LLM findings against actual file content to reduce noise

Review Capabilities

• Inline Comments: Posts comments directly on specific code lines for critical/high/medium issues
• Comprehensive Summary: Detailed MR-level summary with quality scores and issue breakdown
• Issue Categorization:

- Severity: Critical, High, Medium, Low

- Type: Security, Performance, Logic, Style

• Context-Aware: Includes ±10 lines of context and imports for accurate analysis

Developer Metrics

• Quality Scoring: 0-100 score based on issue severity
• Historical Tracking: Review history and trends per developer
• Project Analytics: Aggregate metrics across projects

Integration

• GitLab Webhooks: Automatic review on MR open/update
• Queue Processing: Async job processing with Bull + Redis
• API Access: RESTful API for frontend consumption

```

reviewbot/

├── reviewbot-backend/ # NestJS API + Queue Processor

│ ├── src/

│ │ ├── webhook/ # GitLab webhook receiver

│ │ ├── llm/ # Azure OpenAI integration

│ │ ├── queue/ # Bull queue processing

│ │ ├── gitlab/ # GitLab API client

│ │ └── prisma/ # Database models

│ ├── prisma/ # Database schema

│ └── docker-compose.yml # Infrastructure stack

│

└── reviewbot-frontend/ # React + Vite Dashboard

└── src/

├── pages/ # Dashboard, Projects, Developers, Reviews

├── components/ # Reusable UI components

└── api/ # API client

```

Tech Stack

Backend:

• NestJS (Node.js framework)
• Prisma ORM
• PostgreSQL (database)
• Redis + Bull (queue processing)
• Azure OpenAI API (Haiku 4.5)
• GitLab REST API (@gitbeaker/rest)

Frontend:

• React 19
• Vite (build tool)
• TanStack Query (data fetching)
• Tailwind CSS + shadcn/ui
• Recharts (visualization)

• Node.js: v18+ (backend and frontend)
• Docker & Docker Compose: For PostgreSQL and Redis
• Azure OpenAI: API key and Haiku 4.5 deployment
• GitLab: Personal access token with API scope
• Git: For version control

1. Clone Repository

```bash

git clone

cd reviewbot

```

2. Backend Setup

```bash

cd reviewbot-backend

# Install dependencies

npm install

# Copy environment template

cp .env.example .env

# Edit .env with your credentials

nano .env

```

Required Environment Variables:

```env

# Database

DATABASE_URL=postgresql://reviewbot:your_password@localhost:5432/reviewbot

DB_PASSWORD=your_password

# Redis

REDIS_HOST=localhost

REDIS_PORT=6379

# Azure OpenAI

AZURE_OPENAI_KEY=your_api_key

AZURE_OPENAI_ENDPOINT=https://your-resource.cognitiveservices.azure.com/

AZURE_OPENAI_DEPLOYMENT=haiku-4-5

AZURE_OPENAI_MODEL_NAME=haiku-4-5

# GitLab

GITLAB_HOST=https://gitlab.com

GITLAB_WEBHOOK_SECRET=your_webhook_secret

GITLAB_ACCESS_TOKEN=your_gitlab_token

# Auth

JWT_SECRET=your_jwt_secret

ADMIN_USERNAME=admin

ADMIN_PASSWORD=change_me

```

3. Start Infrastructure

```bash

# Start PostgreSQL and Redis

docker-compose up -d postgres redis

# Run database migrations

npm run prisma:generate

npm run prisma:migrate

```

4. Start Backend

```bash

# Development mode with hot-reload

npm run start:dev

# Production mode

npm run build

npm run start:prod

```

Backend runs on http://localhost:3000

5. Frontend Setup

```bash

cd ../reviewbot-frontend

# Install dependencies

npm install

# Create .env.local

echo "VITE_API_URL=http://localhost:3000" > .env.local

# Start development server

npm run dev

```

Frontend runs on http://localhost:5173

GitLab Webhook Setup

1. Go to your GitLab project → Settings → Webhooks
2. Add webhook:

- URL: http://your-server:3000/webhook

- Secret Token: Use value from GITLAB_WEBHOOK_SECRET

- Trigger: ✅ Merge request events

- SSL verification: Enable if using HTTPS

1. Click Add webhook
2. Test by creating a test MR

Azure OpenAI Setup

1. Create Azure OpenAI resource in Azure Portal
2. Deploy Haiku 4.5 model (or your preferred model)
3. Get API key and endpoint from Keys and Endpoint section
4. Update .env with credentials

Dashboard

Access the frontend at http://localhost:5173 to view:

• Code Quality Metrics: Issues found, review scores, trends
• Project Management: Configure webhooks, view project stats
• Developer Performance: Individual metrics, improvement trends
• Review History: Full review details with inline comments

API Endpoints

Webhook (GitLab calls this):

• POST /webhook - Receive MR events

Projects:

• GET /projects - List all projects
• POST /projects - Add project
• GET /projects/:id/reviews - Project review history

Reviews:

• GET /reviews - List all reviews
• GET /reviews/:id - Review details

Developers:

• GET /developers - List all developers
• GET /developers/:id/stats - Developer metrics

Review Workflow

1. Developer creates/updates MR → GitLab webhook fires
2. Backend receives webhook → Creates review job in queue
3. Queue processor:

- Fetches MR diffs from GitLab

- Collects file context (imports, surrounding lines)

- Decides batching strategy (≤500 lines = batch)

- Calls Azure OpenAI for review

- Verifies issues to filter false positives

- Posts inline comments (critical/high/medium)

- Posts summary comment with all issues

1. Frontend displays:

- Summary comment appears on MR

- Inline comments appear on specific lines

- Dashboard shows updated metrics

Project Structure

```

reviewbot-backend/src/

├── main.ts # Application entry point

├── webhook/

│ ├── webhook.controller.ts # Webhook endpoint

│ └── webhook.service.ts # Webhook validation

├── llm/

│ ├── llm.service.ts # Azure OpenAI integration

│ ├── diff-processor.ts # Diff parsing

│ └── issue-verifier.service.ts # False posi