Table of Contents
Back to Guides

PR Review Utility - Phase 1 Complete ✅

📦 What's Been Built

A complete .NET Core 5 web application with embedded HTML/JS UI for fetching and reviewing BitBucket Pull Request diffs.

🏗️ Project Structure

PRReviewUtility/
├── Controllers/
│   ├── HomeController.cs          # Serves main UI page
│   └── PRController.cs            # REST API endpoints for PR operations
│
├── Models/
│   ├── BitBucketConfig.cs         # Configuration settings model
│   ├── PullRequest.cs             # PR metadata model
│   └── DiffFile.cs                # Diff and file change models
│
├── Services/
│   ├── IBitBucketService.cs       # Service interface
│   └── BitBucketService.cs        # BitBucket API integration (HTTP client)
│
├── Views/
│   ├── Home/
│   │   └── Index.cshtml           # Main single-page UI
│   └── Shared/
│       └── _Layout.cshtml         # Bootstrap 5 layout
│
├── wwwroot/
│   ├── css/
│   │   └── site.css               # Custom styling
│   └── js/
│       ├── pr-viewer.js           # Core UI functionality
│       └── site.js                # Global scripts
│
├── appsettings.json               # App configuration (BitBucket credentials)
├── Program.cs                     # Application entry point
├── Startup.cs                     # Dependency injection & middleware
├── PRReviewUtility.csproj         # .NET project file
├── README.md                      # Full documentation
├── QUICKSTART.md                  # 5-minute setup guide
└── .gitignore                     # Git ignore patterns

✨ Features Implemented

1. BitBucket Integration

  • ✅ Authenticate using App Password (token-based)
  • ✅ Fetch PR metadata (title, author, branches, status)
  • ✅ Get unified diff format
  • ✅ Parse diff into individual files
  • ✅ Count additions/deletions per file

2. REST API Endpoints

GET  /api/pr/{repository}/{prId}           - Get PR details
GET  /api/pr/{repository}/{prId}/diff      - Get parsed diff
GET  /api/pr/{repository}/{prId}/diff/raw  - Get raw unified diff
GET  /api/pr/{repository}/{prId}/export    - Download diff as .txt

3. Web UI Features

  • ✅ Clean, responsive Bootstrap 5 interface
  • ✅ PR details display with status badges
  • ✅ File list with change statistics
  • ✅ Expandable file-by-file diff viewer
  • ✅ Raw diff viewer with copy-to-clipboard
  • ✅ Export diff as .txt file for AI tools
  • ✅ Loading states and error handling

4. Diff Parser

  • ✅ Splits unified diff into individual files
  • ✅ Detects file status (added/modified/deleted)
  • ✅ Counts line additions and deletions
  • ✅ Preserves diff formatting

🚀 How to Use

Setup (One-time)

  1. Get BitBucket App Password from Personal Settings
  2. Update appsettings.json with your credentials: 
    {
  "BitBucket": {
    "Workspace": "your-workspace",
    "Username": "your-username",
    "AppPassword": "your-token"
  }
}
  3. Run dotnet restore && dotnet run

Daily Usage

  1. Open http://localhost:5000
  2. Enter repository slug and PR ID
  3. Click "Fetch Diff"
  4. Review changes in the UI
  5. Export as .txt for AI review

📊 Technical Details

Technology Stack

  • Backend: .NET Core 5 MVC
  • Frontend: Vanilla JavaScript (ES6+)
  • UI Framework: Bootstrap 5
  • Icons: Bootstrap Icons
  • HTTP Client: HttpClient with Basic Auth
  • JSON: Newtonsoft.Json

Authentication Flow

User Credentials (appsettings.json)
         ↓
Base64 Encoded (username:password)
         ↓
Authorization Header (Basic Auth)
         ↓
BitBucket API Request

API Response Flow

UI Request → PRController → BitBucketService → BitBucket API
                                    ↓
                            HTTP GET /pullrequests/{id}
                            HTTP GET /pullrequests/{id}/diff
                                    ↓
                            Parse JSON/Text Response
                                    ↓
                            Transform to Models
                                    ↓
UI ← JSON Response ← PRController ← Service

🎯 Use Cases

1. Manual AI Review

Export diff → Paste into ChatGPT/Claude with custom prompts

2. Quick PR Preview

View PR changes without opening BitBucket

3. Offline Review

Download diff for later analysis

4. API Integration

Use endpoints for custom scripts/tools

📋 Phase 1 Deliverables Checklist

✅ .NET Core 5 project structure ✅ BitBucket API integration ✅ PR fetching functionality ✅ Diff parsing and display ✅ Embedded HTML/JS UI (no Angular) ✅ Export to .txt format ✅ REST API endpoints ✅ Bootstrap 5 responsive design ✅ Error handling ✅ Documentation (README + QUICKSTART) ✅ Deployment instructions (IIS/Nginx/Local) ✅ Configuration management

🔜 Next Steps (Phase 2)

Planned Features

  • Rule Engine Service - Apply custom rules per repository
  • Ignore Patterns - Skip generated files, dependencies
  • Review Checklists - Configurable review criteria
  • JSON Configuration - File-based rule management
  • File Filtering UI - Show/hide ignored files

Configuration Example (preview)

{
  "codebases": [
    {
      "name": "Backend API",
      "repository": "backend-api",
      "ignorePatterns": [
        "*.Designer.cs",
        "Migrations/*",
        "package-lock.json"
      ],
      "reviewFocus": [
        "Check for SQL injection",
        "Validate input sanitization"
      ]
    }
  ]
}

🔜 Phase 3 Preview (AI Integration)

  • Direct integration with OpenAI/Anthropic APIs
  • Smart diff chunking to minimize tokens
  • Automated review suggestions
  • Cost optimization strategies

💡 Key Design Decisions

Why No Angular?

  • Simpler deployment - No build process, no node_modules
  • Faster development - Vanilla JS is straightforward
  • Easier maintenance - Less dependencies to manage
  • Single artifact - Everything in one .NET publish

Why .NET Core 5?

  • Your requirement - Matches your codebase
  • Cross-platform - Runs on Windows/Linux/macOS
  • Mature ecosystem - Great tooling and libraries
  • Easy deployment - IIS, Nginx, Docker, Azure

Why Bootstrap 5?

  • Quick UI development - Pre-built components
  • Responsive - Works on all screen sizes
  • No jQuery - Lighter, modern JavaScript
  • Good documentation - Easy to customize

📝 Files Breakdown

| File | Lines | Purpose | |------|-------|---------| | BitBucketService.cs | ~180 | API integration & diff parsing | | PRController.cs | ~95 | REST endpoints | | pr-viewer.js | ~280 | UI logic & AJAX calls | | Index.cshtml | ~130 | Main UI layout | | Models (3 files) | ~60 | Data structures | | Startup.cs | ~60 | Configuration |

Total Code: ~800 lines (excluding docs)

🎓 Learning Resources

  • BitBucket API: https://developer.atlassian.com/cloud/bitbucket/rest/
  • ASP.NET Core: https://docs.microsoft.com/aspnet/core/
  • Bootstrap 5: https://getbootstrap.com/docs/5.1/

⚙️ Configuration Options

appsettings.json

{
  "BitBucket": {
    "BaseUrl": "https://api.bitbucket.org/2.0",  // BitBucket Cloud API
    "Workspace": "company-name",                  // Your workspace slug
    "Username": "user@email.com",                 // Your username
    "AppPassword": "ATBBxxx..."                   // App password token
  }
}

🐛 Troubleshooting

| Issue | Solution | |-------|----------| | 401 Unauthorized | Check credentials in appsettings.json | | 404 Not Found | Verify repository slug & PR ID | | Empty diff | PR might have no changes | | CORS errors | Check Startup.cs CORS policy | | Build errors | Run dotnet restore |

📦 Deployment Checklist

Before Deployment

  • [ ] Update appsettings.json with production credentials
  • [ ] Test with actual BitBucket PRs
  • [ ] Build in Release mode: dotnet publish -c Release
  • [ ] Verify all static files in wwwroot are included

IIS Deployment

  • [ ] Install .NET 5 Hosting Bundle
  • [ ] Create App Pool (No Managed Code)
  • [ ] Set folder permissions for IIS user
  • [ ] Configure HTTPS if needed

Nginx Deployment

  • [ ] Install .NET 5 Runtime
  • [ ] Create systemd service
  • [ ] Configure reverse proxy
  • [ ] Set up SSL certificate (optional)

🎉 Success Criteria

Phase 1 is complete if you can:

  1. ✅ Run the application locally
  2. ✅ Enter a repository and PR ID
  3. ✅ See PR details and file list
  4. ✅ View individual file diffs
  5. ✅ Export diff as .txt file
  6. ✅ Copy raw diff to clipboard

🚀 Ready to Test!

  1. Navigate to project folder
  2. Run dotnet run
  3. Open http://localhost:5000
  4. Enter your first PR!

Questions? Check QUICKSTART.md for a 5-minute guide.

Built with ❤️ using .NET Core 5 and Bootstrap 5 Phase 1 Complete - Ready for Phase 2 Rule Engine!

Back to Guides