AI-Powered Website Analyzer

## Inspiration

I built AI-Powered Website Analyzer to bridge the gap between complex web performance analysis and actionable insights. While tools like Lighthouse provide excellent technical metrics, they often leave developers and designers wondering: "What do I actually fix first?"

I wanted to create an intelligent analyzer that not only measures performance and accessibility but also provides prioritized, human-readable recommendations powered by AI.

## What It Does

AI-Powered Website Analyzer is a full-stack web application that:

📊 Analyzes performance metrics (FCP, LCP, CLS, load times)
♿ Audits accessibility (WCAG compliance, contrast ratios)
🎨 Evaluates UI/UX design across desktop, tablet, and mobile
🤖 Provides AI-powered insights using Claude 3.5 Sonnet
📸 Captures multi-device screenshots for visual review
📋 Delivers prioritized action items with impact and effort estimates

## How I Built It

### Tech Stack

Frontend: Next.js 16, React 19, TypeScript, Tailwind CSS, Radix UI Backend: FastAPI (Python), PostgreSQL, SQLAlchemy Automation: Playwright for headless browser capture AI: OpenRouter API (Claude 3.5 Sonnet)

### Architecture

The application uses a client-server architecture with async job processing:

User submits a URL → Backend creates an analysis job
Background task uses Playwright to capture screenshots and run Lighthouse audits
Three specialized AI agents analyze the data in parallel:
- Code Analyst: Technical metrics and HTML structure
- Vision Analyst: UI/UX design evaluation from screenshots
- Synthesizer: Combines findings into an executive summary
Frontend polls for job completion and displays results

## Challenges I Faced

### 1. AI Response Consistency Getting LLMs to return structured JSON reliably was tricky. I implemented a robust fallback parser that handles multiple response formats (direct JSON, code blocks, embedded JSON).

### 2. Screenshot API Limits Vision models have strict input size limits. I had to implement aggressive image optimization—resizing screenshots to max 512px dimensions while maintaining quality.

### 3. Async Job Management Coordinating Playwright automation, AI API calls, and database updates required careful async/await orchestration. Using FastAPI's BackgroundTasks provided a clean solution for development.

### 4. Frontend-Backend Integration Setting up the API proxy in Next.js to handle CORS during development, then planning for production deployment, required careful configuration.

## What I Learned