Webpage Quality Analyzer - React Dashboard

A powerful, browser-based web application for analyzing webpage quality using 86 HTML-based metrics. Built with React, Vite, and WebAssembly for blazing-fast performance.

🌟 Features

✅ Phase 1-5 Complete

• WASM Integration: Browser-powered analysis with Rust WASM backend
• Profile-Based Analysis: 8 pre-configured profiles (news, blog, e-commerce, etc.)
• Real-Time Analysis: Analyze URLs or paste HTML directly
• Metric Customization: Toggle 86 individual metrics on/off
• Weight Adjustment: Fine-tune metric importance (0.1x - 5.0x)
• Visual Results: Category breakdowns, recommendations, detailed metric tables
• Export/Import: Save and share custom configurations

🎨 UI Components

• Responsive design (mobile, tablet, desktop)
• Dark/light mode support (via shadcn/ui)
• Interactive charts and visualizations
• Real-time metric previews
• Comprehensive tooltips and help text

📊 Metrics Coverage

86 HTML-Based Metrics across 16 categories:

Category	Metrics	Description
Content	14	Text quality, readability, structure
Structure	5	Heading hierarchy, document organization
Media	8	Images, videos, alt text
SEO	12	Title, meta tags, open graph
Links	4	Internal/external links, broken links
Technical	6	HTML validation, performance hints
Accessibility	7	WCAG compliance, ARIA attributes
Mobile	3	Responsive design, viewport
Authority	3	Authorship, credibility signals
Language	2	Language detection, i18n
Forms	2	Form elements, validation
Structured Data	3	Schema.org, microdata
Branding	3	Brand consistency
User Experience	7	Navigation, CTAs, usability
Business	4	E-commerce features
Internationalization	2	Multi-language support

Note: Network-based metrics (Performance, Security, Analytics, Error Handling) require server-side analysis and are not available in the browser version.

🚀 Quick Start

Prerequisites

• Node.js 16+ and npm
• Modern browser with WASM support

Installation

# Clone repository
git clone https://github.com/NotGyashu/webpage-quality-analyser.git
cd webpage-quality-analyser/WQA

# Install dependencies
npm install

# Start development server
npm run dev

Open http://localhost:5173 in your browser.

Production Build

# Build for production
npm run build

# Preview production build
npm run preview

📖 Usage Guide

1. Basic Analysis

1. Select Profile: Choose from 8 pre-configured profiles

   • General (all-purpose)
   • News Article (journalism)
   • Blog Post (personal blogs)
   • E-commerce (product pages)
   • Content Article (long-form)
   • Product/Documentation
   • Portfolio (personal sites)
   • Homepage (landing pages)

2. Input Method: Choose one:

   • URL Mode: Enter webpage URL
   • HTML Paste: Paste HTML directly

3. Analyze: Click "Analyze" button

4. View Results:

   • Overall quality score (0-100)
   • Quality verdict (Excellent/Good/Average/Poor/Very Poor)
   • Category breakdowns (16 categories)
   • Detailed metric scores
   • Actionable recommendations

2. Customization (Configure Tab)

Enable/Disable Metrics

• Browse metrics by category
• Toggle individual metrics on/off
• Use "Enable All" / "Disable All" per category
• See live count of active metrics

Adjust Weights

• Slide to adjust importance (0.1x - 5.0x)
• Type precise values
• Color-coded priority levels:
  • 🟠 Low Priority (0.1-0.9)
  • ⚫ Normal (1.0-1.4)
  • 🟢 Important (1.5-1.9)
  • 🔵 High (2.0-2.9)
  • 🟣 Critical (3.0+)

Import/Export Configuration

• Export: Download current settings as JSON
• Import: Upload previously saved configuration
• Reset: Restore all default settings

3. Understanding Results

Overall Score

• 90-100: Excellent - Industry-leading quality
• 70-89: Good - Solid quality with minor improvements
• 50-69: Average - Meets basic standards
• 30-49: Poor - Significant issues present
• 0-29: Very Poor - Major problems require attention

Category Scores

Each category is scored independently:

• Content: Text quality and organization
• SEO: Search engine optimization
• Technical: HTML standards and performance
• Accessibility: Inclusive design compliance

Recommendations

Prioritized suggestions for improvement:

• High Priority: Critical issues affecting core functionality
• Medium Priority: Important optimizations
• Low Priority: Nice-to-have enhancements

🏗️ Architecture

Technology Stack

• Frontend: React 19.1.1
• Build Tool: Vite 7.1.9
• State Management: Zustand
• UI Components: shadcn/ui + Tailwind CSS
• WASM Package: webpage_quality_analyzer@1.0.2
• Icons: Lucide React
• Charts: Recharts

Project Structure

WQA/
├── src/
│   ├── components/
│   │   ├── analyzer/       # Input components
│   │   ├── configuration/  # Customization UI
│   │   ├── results/        # Results display
│   │   ├── layout/         # Header, navigation
│   │   ├── common/         # Error boundaries, loaders
│   │   └── ui/             # shadcn/ui components
│   ├── hooks/
│   │   └── useWasmAnalyzer.js  # WASM integration
│   ├── store/
│   │   ├── analysisStore.js    # Analysis state
│   │   └── configStore.js      # Configuration state
│   ├── utils/
│   │   ├── wasmLoader.js       # WASM initialization
│   │   └── configBuilder.js    # Config formatting
│   ├── constants/
│   │   └── metrics.js          # Metric definitions
│   └── App.jsx                 # Main application
├── public/                # Static assets
└── package.json

🔧 Configuration

Custom Profiles

Create custom analyzer profiles by adjusting:

1. Enabled metrics
2. Metric weights
3. Custom thresholds
4. Penalties and bonuses

Export as JSON for reuse:

{
  "enabledMetrics": {
    "word_count": true,
    "readability_fk": true
  },
  "metricWeights": {
    "seo_title_quality": 2.0,
    "heading_depth": 1.5
  },
  "exportedAt": "2025-10-10T...",
  "version": "1.0"
}

🧪 Testing

Manual Testing Checklist

• URL analysis works
• HTML paste mode works
• Profile selection changes results
• All 8 profiles functional
• Metric toggles apply to analysis
• Weight adjustments affect scores
• Export configuration downloads JSON
• Import configuration restores settings
• Reset to defaults works
• Responsive on mobile/tablet/desktop
• Error handling displays correctly
• Loading states show properly

Browser Compatibility

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

📝 Development

Available Scripts

# Development
npm run dev          # Start dev server
npm run build        # Production build
npm run preview      # Preview production build
npm run lint         # Run ESLint

# Maintenance
npm run clean        # Clean build artifacts
npm run update       # Update dependencies

Adding New Components

# Add shadcn/ui component
npx shadcn@latest add [component-name]

# Example
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menu

🐛 Troubleshooting

Common Issues

WASM not loading

• Clear browser cache
• Check console for CORS errors
• Ensure WASM file size ~2.1MB

Scores always 0

• Verify WASM init() called
• Check browser WASM support
• Try different browser

Network metrics showing N/A

• Expected behavior (browser security sandbox)
• Use native builds for full metrics

Custom config not applying

• Check console for method name errors
• Verify camelCase method calls
• Re-export and re-import config

📦 Deployment

Vercel (Recommended)

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel deploy

Netlify

# Build command
npm run build

# Publish directory
dist

Docker

FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]

🤝 Contributing

Contributions welcome! Please:

1. Fork the repository
2. Create feature branch (git checkout -b feature/AmazingFeature)
3. Commit changes (git commit -m 'Add AmazingFeature')
4. Push to branch (git push origin feature/AmazingFeature)
5. Open Pull Request

📄 License

This project is licensed under the MIT License - see LICENSE file for details.

🙏 Acknowledgments

• Built with Rust and wasm-pack
• UI components from shadcn/ui
• Icons from Lucide

📧 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: support@example.com

🗺️ Roadmap

• Phase 1: Project Setup
• Phase 2: WASM Integration
• Phase 3: Basic UI
• Phase 4: Results Display
• Phase 5: Metric Customization
• Phase 6: Import/Export
• Phase 7: Error Handling & Polish
• Phase 8: Batch Analysis
• Phase 9: Analysis History
• Phase 10: Collaboration Features

---

Version: 1.0.0
Last Updated: October 2025
Status: Production Ready ✅