Skip to content

sanmak/VaporScan

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

12 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

VaporScan - Open-Source SEO Auditing Tool

GitHub License GitHub Stars CI CodeQL Docker codecov Dependabot

Unit Tests Integration Tests

A fast, privacy-first, client-side SEO auditing tool that detects orphaned pages, broken links, and generates comprehensive site health reports.

🌐 Live Demo β€’ πŸ“– Documentation β€’ πŸš€ Getting Started β€’ 🀝 Contributing


✨ Features

  • πŸ” Comprehensive SEO Audit: Detect orphaned pages, broken links, empty pages, and more
  • πŸ€– Robots.txt Adherence: Fully respects robots.txt directives including crawl-delay
  • πŸ”’ 100% Privacy-First: All scanning happens in your browser - no data sent to servers
  • ⚑ Lightning-Fast: Concurrent crawling with configurable options
  • πŸ“Š Rich Reports: Interactive dashboards with charts and visualizations
  • πŸ“€ Export Options: Export results as JSON, CSV, or PDF
  • 🌐 Offline Support: Works offline with Progressive Web App capabilities
  • β™Ώ Accessible: WCAG 2.1 Level AA compliant
  • 🎨 Modern UI: Beautiful, intuitive interface with light and dark modes

οΏ½ Engineering Philosophy: Why Client-Side?

VaporScan is deliberately built as a client-side auditing tool rather than a traditional server-side crawler. This architectural choice is driven by a core thesis: modern browsers are now powerful enough to handle complex data audits, and users shouldn't have to sacrifice privacy or money for site health insights.

Core Rationale

  • The Modern Browser as an OS: Leveraging Service Workers, IndexedDB, and the Background Sync API, VaporScan performs multi-threaded crawling and data processing directly on your machine, eliminating the need for expensive server-side infrastructure.
  • Privacy-First (Zero Telemetry): All processing, link extraction, and data storage happen locally. No data ever leaves your machineβ€”no trackers, no telemetry, and zero server-side exposure.
  • Democratizing SEO Audits: By removing server costs, we provide a high-end auditing tool for free. It’s an ideal solution for users who want to avoid expensive monthly SaaS subscriptions and complex enterprise overhead.
  • Workflow-Focused: Designed for the "Weekly Audit" ritual. Plan your work, run the tool, keep the tab active, and download your report. Simple, effective, and local.

Navigating CORS Constraints

As a client-side application, VaporScan respects the browser's Cross-Origin Resource Sharing (CORS) security model. While essential for web safety, these guardrails can occasionally block requests to external domains.

  • Engineering Tip: If you encounter CORS blocks on your own domain, simply add an Access-Control-Allow-Origin header to your server and whitelist your VaporScan deployment URL. This allows the application to securely perform its audit while respecting modern security standards.

Flexible Deployment

Whether you want to use the hosted version or deploy it within your own private infrastructure, we've got you covered. You can host VaporScan via Docker or a raw installation following our quick setup guide.

We welcome technical discussions and feature requests! Feel free to start a discussion or open an issue.

🎯 Key Capabilities

Discovery Phase

  • Fetch and parse robots.txt with full directive support
  • Fetch and parse XML sitemaps (including sitemap indexes)
  • Extract all URLs from sitemaps
  • Validate crawlability before starting

Robots.txt Compliance

  • Standard Directives: User-agent, Disallow, Allow
  • Extended Directives: Crawl-delay, Sitemap, Host
  • Special Syntax: Wildcards (*), End-of-URL ($), Comments (#)
  • Automatic Enforcement: Crawl-delay automatically applied during crawling
  • Path Filtering: URLs blocked by robots.txt are excluded from queue

Crawling Phase

  • Service Worker-powered background crawling
  • Configurable concurrency (default: 5 simultaneous requests)
  • Respects crawl-delay directive (forces serial crawling when specified)
  • Extract internal and external links from each page
  • Track HTTP status codes
  • Detect empty/minimal content pages
  • Persistent state stored in IndexedDB

Analysis Phase

  • Orphaned Pages: Pages with no incoming internal links and not in sitemap
  • Sitemap-Only Pages: Pages in sitemap but with no navigation links
  • Broken Links: Pages returning 4xx/5xx errors
  • Link Analysis: Track which pages link to broken URLs

Reporting Phase

  • Executive summary with key metrics
  • Interactive visualizations (charts, graphs)
  • Filterable tables for detailed inspection
  • Link graph visualization
  • Robots.txt configuration display
  • Multiple export formats (JSON, CSV, PDF)
  • Shareable reports via URL

πŸš€ Quick Start

Prerequisites

  • Node.js 24+ and npm 10+
  • Modern web browser with Service Worker support

Installation

# Clone the repository
git clone https://github.com/sanmak/VaporScan.git
cd vaporscan

# Install dependencies
npm install

# Start development server
npm run dev

Visit http://localhost:3000 to access the application.

πŸ”§ Development

Available Scripts

# Development
npm run dev              # Start dev server with hot reload
npm run build            # Build for production (static export to out/)
npm start                # Serve production build locally

# Linting & Formatting
npm run lint             # Run ESLint
npm run lint:fix         # Fix linting issues
npm run format           # Format code with Prettier
npm run format:check     # Check formatting without changes

# Testing
npm run test                          # Run all tests in watch mode
npm run test:unit                     # Run unit tests
npm run test:integration              # Run integration tests
npm run test:integration:workflows    # Run workflow integration tests
npm run test:e2e                      # Run E2E tests with Playwright
npm run test:coverage                 # Generate coverage report
npm run test:ui                       # Open Vitest UI dashboard
npm run test:all                      # Run unit β†’ integration β†’ E2E

# Type Checking
npm run type-check       # Run TypeScript type checking

# Build Analysis
npm run analyze          # Analyze bundle size

See the Testing section for comprehensive testing documentation.

πŸ“ Project Structure

VaporScan/
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ app/              # Next.js app router pages
β”‚   β”œβ”€β”€ components/       # React components
β”‚   β”‚   β”œβ”€β”€ ui/          # shadcn/ui components
β”‚   β”‚   β”œβ”€β”€ features/    # Feature-specific components
β”‚   β”‚   └── layout/      # Layout components
β”‚   β”œβ”€β”€ lib/
β”‚   β”‚   β”œβ”€β”€ crawler/     # Core crawling logic
β”‚   β”‚   β”œβ”€β”€ storage/     # IndexedDB abstraction
β”‚   β”‚   β”œβ”€β”€ utils/       # Utility functions
β”‚   β”‚   └── hooks/       # Custom React hooks
β”‚   β”œβ”€β”€ types/           # TypeScript type definitions
β”‚   └── config/          # Configuration
β”œβ”€β”€ public/              # Static assets and service worker
β”œβ”€β”€ tests/               # Test files
β”œβ”€β”€ docs/                # Documentation
└── docker/              # Docker configuration

πŸ—οΈ Architecture

Core Components

Service Worker: Handles background crawling with Background Sync API support Zustand: Lightweight client state management IndexedDB: Persistent storage for crawl results Next.js: React framework for optimal performance

Data Flow

User Input
    ↓
Initialize Crawl β†’ Fetch robots.txt & Sitemap
    ↓
Queue URLs β†’ Service Worker
    ↓
Crawl Pages β†’ Extract Links
    ↓
Store in IndexedDB β†’ Update UI
    ↓
Analyze Results β†’ Generate Report
    ↓
Display Dashboard β†’ Export Options

πŸ”’ Security & Privacy

  • Client-Side Only: All processing happens in your browser
  • No Data Collection: We don't store or transmit your crawl data
  • OWASP Compliance: Implements security best practices
  • Content Security Policy: Strict CSP headers configured
  • Dependency Management: Automated security updates via Dependabot

Security Headers

X-Frame-Options: DENY
X-Content-Type-Options: nosniff
Referrer-Policy: strict-origin-when-cross-origin
Permissions-Policy: camera=(), microphone=(), geolocation=()

β™Ώ Accessibility

  • WCAG 2.1 Level AA compliant
  • Semantic HTML throughout
  • Keyboard navigation fully supported
  • Screen reader optimized
  • Tested with axe-core
  • Respects prefers-reduced-motion

πŸ“Š Performance

  • First Contentful Paint: < 1.0s
  • Largest Contentful Paint: < 2.0s
  • Time to Interactive: < 2.5s
  • Bundle Size: < 200KB initial
  • Lighthouse Score: 95+ across all metrics

πŸ§ͺ Testing

VaporScan follows industry-standard testing practices with a comprehensive test suite achieving 80%+ code coverage. We follow the Testing Pyramid approach:

  • 60% Unit Tests - Fast, isolated tests for individual functions and utilities
  • 40% Integration Tests - Tests for component interactions and data flows

Test Infrastructure

  • Unit Tests: Vitest with jsdom environment
  • Integration Tests: Vitest + Testing Library + MSW (Mock Service Worker)
  • E2E Tests: Playwright with multi-browser support
  • Accessibility Tests: axe-core for WCAG 2.1 AA compliance
  • Coverage: Vitest Coverage (v8 provider)

Current Test Coverage

πŸ“Š Test Results Summary:
β”œβ”€ Unit Tests: 144/145 passing (99.3%)
β”‚  β”œβ”€ Crawler Logic: 25 tests (orphan detection, broken links)
β”‚  β”œβ”€ Link Extraction: 16 tests (HTML parsing, URL normalization)
β”‚  β”œβ”€ Sitemap Parser: 40 tests (robots.txt, XML parsing)
β”‚  └─ Utilities: 64 tests (retry logic, formatters, helpers)
β”‚
└─ Integration Tests: 117 tests created
   β”œβ”€ Crawler Workflows: 13/13 passing βœ…
   β”œβ”€ State Management: 26 tests (Zustand + IndexedDB)
   β”œβ”€ Data Persistence: 25 tests (IndexedDB operations)
   └─ Component Interactions: 53 tests (forms, reports, UI)

Testing Commands

General Testing

npm run test                    # Run all tests in watch mode
npm run test:run                # Run all tests once
npm run test:watch              # Run tests in watch mode
npm run test:ui                 # Open Vitest UI dashboard
npm run test:coverage           # Generate coverage report
npm run test:coverage:all       # Run all tests with coverage
npm run test:all                # Run unit β†’ integration β†’ E2E

Unit Testing

npm run test:unit               # Run all unit tests
npm run test:unit:watch         # Watch mode for unit tests
npm run test:unit:coverage      # Unit tests with coverage report

What's tested:

  • βœ… Crawler logic (sitemap parsing, link extraction, orphan detection)
  • βœ… Utility functions (retry logic, URL handling, formatters)
  • βœ… Data validators and transformers
  • βœ… Business logic and algorithms

Integration Testing

npm run test:integration              # Run all integration tests
npm run test:integration:watch        # Watch mode for integration tests
npm run test:integration:coverage     # Integration tests with coverage

# Run specific integration test suites
npm run test:integration:workflows    # Crawler workflow tests βœ… 13/13 passing
npm run test:integration:state        # State management tests
npm run test:integration:storage      # IndexedDB persistence tests
npm run test:integration:components   # Component interaction tests

What's tested:

  • βœ… Crawler Workflows (13 tests passing)
    • robots.txt β†’ sitemap discovery flow
    • Page crawling β†’ link extraction
    • Orphan detection, broken link analysis
    • End-to-end crawl simulation
    • Error handling and edge cases
  • βš™οΈ State management (Zustand store + IndexedDB sync)
  • βš™οΈ Data persistence (Map/Set serialization, cross-session recovery)
  • βš™οΈ Component interactions (form validation, user flows)

End-to-End Testing

# General E2E Testing
npm run test:e2e                     # Run all E2E tests (all browsers)
npm run test:e2e:ui                  # Run E2E tests with Playwright UI
npm run test:e2e:debug               # Debug E2E tests
npm run test:e2e:headed              # Run E2E tests in headed mode (see browser)
npm run test:e2e:report              # Show test report in browser

# Browser-Specific Testing
npm run test:e2e:chromium            # Run E2E tests in Chromium only
npm run test:e2e:firefox             # Run E2E tests in Firefox only
npm run test:e2e:webkit              # Run E2E tests in WebKit/Safari only
npm run test:e2e:mobile              # Run E2E tests in Mobile Chrome emulator

# Test Suite-Specific
npm run test:e2e:critical            # Run critical path tests only
npm run test:e2e:accessibility       # Run accessibility/keyboard tests only
npm run test:e2e:features            # Run feature-specific tests
npm run test:e2e:errors              # Run error handling tests
npm run test:e2e:cross-browser       # Run cross-browser compatibility tests

What's tested:

  • βœ… Critical User Journeys

    • Complete crawl flow: URL input β†’ scan β†’ results β†’ report export
    • Quick audit with default settings
    • Custom audit with advanced options
    • Stop/cancel ongoing audits
    • Export reports as CSV, JSON, PDF
  • βœ… URL Input & Validation

    • Valid HTTP/HTTPS URL acceptance
    • Invalid URL rejection (malformed, missing protocol)
    • XSS and SQL injection prevention
    • Special characters and edge cases
    • Advanced options configuration
  • βœ… Keyboard Navigation & Accessibility

    • Full keyboard-only navigation
    • Tab order and focus management
    • ARIA compliance (labels, roles, live regions)
    • Heading hierarchy validation
    • Screen reader support
    • Modal focus trapping
  • βœ… Cross-Browser Compatibility

    • Core functionality across Chromium, Firefox, WebKit
    • LocalStorage and IndexedDB persistence
    • Service Worker registration
    • CSS rendering consistency
    • Responsive design breakpoints
  • βœ… Error Handling

    • Network errors (offline mode, slow networks)
    • API failures (404, 500, CORS)
    • Timeout scenarios
    • Malicious input sanitization
    • Edge cases (rapid submissions, browser navigation)

Accessibility Testing

npm run test:a11y               # Run axe-core accessibility tests

Test File Organization

tests/
β”œβ”€β”€ e2e/                                    # End-to-End Tests (Playwright)
β”‚   β”œβ”€β”€ specs/
β”‚   β”‚   β”œβ”€β”€ critical-paths/
β”‚   β”‚   β”‚   └── happy-path.spec.ts βœ…       # Complete user journey
β”‚   β”‚   β”œβ”€β”€ features/
β”‚   β”‚   β”‚   └── url-input.spec.ts βœ…        # URL input validation
β”‚   β”‚   β”œβ”€β”€ accessibility/
β”‚   β”‚   β”‚   └── keyboard-navigation.spec.ts βœ…  # A11y tests
β”‚   β”‚   β”œβ”€β”€ cross-browser/
β”‚   β”‚   β”‚   └── compatibility.spec.ts βœ…    # Browser compatibility
β”‚   β”‚   └── error-scenarios/
β”‚   β”‚       └── network-errors.spec.ts βœ…   # Error handling
β”‚   β”œβ”€β”€ pages/                              # Page Object Models
β”‚   β”‚   β”œβ”€β”€ home.page.ts
β”‚   β”‚   β”œβ”€β”€ scan.page.ts
β”‚   β”‚   └── report.page.ts
β”‚   β”œβ”€β”€ fixtures/
β”‚   β”‚   └── test-urls.ts                    # Test data
β”‚   └── helpers/
β”‚       β”œβ”€β”€ test-helpers.ts                 # Utility functions
β”‚       └── accessibility-helpers.ts        # A11y utilities
β”‚
β”œβ”€β”€ integration/                            # Integration Tests (Vitest)
β”‚   β”œβ”€β”€ helpers/
β”‚   β”‚   β”œβ”€β”€ render-with-providers.tsx       # React testing utilities
β”‚   β”‚   └── msw-handlers.ts                 # Mock Service Worker setup
β”‚   β”œβ”€β”€ fixtures/
β”‚   β”‚   └── mock-crawl-data.ts              # Test data factories
β”‚   β”œβ”€β”€ workflows/
β”‚   β”‚   └── crawler-flow.integration.test.ts βœ…
β”‚   β”œβ”€β”€ state/
β”‚   β”‚   └── crawl-store.integration.test.ts
β”‚   β”œβ”€β”€ storage/
β”‚   β”‚   └── persistence-flow.integration.test.ts
β”‚   └── components/
β”‚       β”œβ”€β”€ url-input.integration.test.tsx
β”‚       └── report-dashboard.integration.test.tsx
β”‚
src/
└── lib/                                    # Unit Tests (Vitest)
    β”œβ”€β”€ crawler/
    β”‚   β”œβ”€β”€ sitemap-parser.test.ts βœ…
    β”‚   β”œβ”€β”€ link-extractor.test.ts βœ…
    β”‚   └── orphan-detector.test.ts βœ…
    └── utils/
        └── index.test.ts βœ…

Testing Best Practices

We follow industry best practices outlined in our testing documentation:

Key Principles:

  • βœ… AAA Pattern (Arrange-Act-Assert) for test structure
  • βœ… FIRST Principles (Fast, Isolated, Repeatable, Self-validating, Timely)
  • βœ… Test Data Builders for maintainable fixtures
  • βœ… Mock Service Worker (MSW) for realistic API mocking
  • βœ… Page Object Model (POM) for maintainable E2E tests
  • βœ… Semantic Queries (getByRole, getByLabel) for robust selectors
  • βœ… Auto-waiting Assertions (no fixed timeouts in E2E tests)
  • βœ… 80%+ Code Coverage threshold enforced
  • βœ… Fail-Fast approach with strict type checking

Running Tests in CI/CD

Our GitHub Actions workflow automatically runs:

# On every PR and push to main
npm run test:unit           # Fast feedback
npm run test:integration    # Validate workflows
npm run test:coverage:all   # Enforce coverage threshold
npm run test:e2e           # Cross-browser validation

Debugging Tests

Unit & Integration Tests

# Run specific test file
npm run test -- src/lib/crawler/sitemap-parser.test.ts

# Run tests matching pattern
npm run test -- --grep="orphan"

# Debug with Vitest UI
npm run test:ui

# Verbose output
npm run test -- --reporter=verbose

E2E Tests

# Run in headed mode (see browser)
npm run test:e2e:headed

# Debug mode with Playwright Inspector
npm run test:e2e:debug

# Interactive UI mode
npm run test:e2e:ui

# Run specific test file
npx playwright test tests/e2e/specs/critical-paths/happy-path.spec.ts

# Run tests matching title
npx playwright test --grep "user can crawl"

# Show test report
npm run test:e2e:report

# Generate trace on failure
npx playwright test --trace on

# View trace file
npx playwright show-trace trace.zip

Coverage Reports

After running npm run test:coverage, open coverage/index.html to view:

  • Line coverage
  • Branch coverage
  • Function coverage
  • Statement coverage
  • Uncovered lines highlighted

Coverage Thresholds:

{
  "lines": 80,
  "functions": 80,
  "branches": 80,
  "statements": 80
}

πŸ“š Documentation

πŸ› οΈ Tech Stack

Frontend

  • Next.js 16 (React 19, TypeScript)
  • Tailwind CSS 4
  • shadcn/ui (Radix UI primitives)
  • Zustand (state management)
  • TanStack Query (server state)
  • Recharts, React Flow (visualizations)

Testing & Quality

  • Vitest (unit/integration)
  • Playwright (E2E)
  • Testing Library (React)
  • axe-core (accessibility)
  • ESLint, Prettier, Commitlint, Husky, lint-staged

Infrastructure & DevOps

  • IndexedDB (client storage)
  • Service Worker, PWA
  • Static Export (Next.js)
  • Docker & Nginx (multi-stage builds, dev & prod)
  • GitHub Actions (CI/CD, security, coverage)

Other

  • Modern browser APIs: Background Sync, Service Worker, IndexedDB
  • No server-side code required for core app

🌐 Deployment

VaporScan uses Next.js Static Export to generate a fully static website that can be deployed anywhere - no server required! The build output is a collection of HTML, CSS, and JavaScript files that can be served from any static hosting provider or CDN.

Static Hosting Platforms

Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

Netlify

# Install Netlify CLI
npm i -g netlify-cli

# Deploy
netlify deploy --prod

GitHub Pages

Automatic Deployment (Recommended):

The repository includes a GitHub Actions workflow that automatically deploys to GitHub Pages on every push to main:

  1. Enable GitHub Pages in your repository settings:
    • Go to Settings β†’ Pages
    • Source: Select "GitHub Actions"
  2. Push to main branch - deployment happens automatically
  3. Visit https://<username>.github.io/VaporScan

Manual Deployment:

# Build the application
npm run build

# Install GitHub Pages CLI
npm i -g gh-pages

# Deploy the 'out' folder to GitHub Pages
gh-pages -d out

Any Static Host

After running npm run build, deploy the out/ directory to any static hosting provider:

  • AWS S3 + CloudFront
  • Google Cloud Storage
  • Azure Static Web Apps
  • DigitalOcean App Platform
  • Render
  • Railway
  • Surge
  • Firebase Hosting

🐳 Docker & Docker Compose

VaporScan provides official Docker images published to GitHub Container Registry (ghcr.io).

Using Pre-built Images from GitHub Container Registry

Pull and run the latest release:

# Pull the latest image
docker pull ghcr.io/sanmak/vaporscan:latest

# Run the container
docker run -p 8080:8080 ghcr.io/sanmak/vaporscan:latest

Visit http://localhost:8080 to access the application.

Available tags:

ghcr.io/sanmak/vaporscan:latest          # Latest stable release

Docker images are automatically built and published when a GitHub release is created.

Build Locally

Production:

# Build and run production image
docker build -f docker/Dockerfile -t vaporscan .
docker run -p 8080:8080 vaporscan

Visit http://localhost:8080 to access the application.

Development (Hot Reload):

# Start dev container with hot reload (watches your local files)
docker compose -f docker/docker-compose.yml up dev

Useful Docker Compose Commands

# Start production container (default profile)
docker compose -f docker/docker-compose.yml up app

# Stop all containers
docker compose -f docker/docker-compose.yml down

# Rebuild images after code changes
docker compose -f docker/docker-compose.yml build

# View logs
docker compose -f docker/docker-compose.yml logs -f

Production Architecture:

The production Docker image uses a multi-stage build:

  • Stage 1 (Builder): Compiles the Next.js application and generates static export
  • Stage 2 (Runtime): Serves static files using Nginx with optimized caching and security headers

Notes:

  • The dev service mounts your local code for instant feedback and enables hot reload (port 3000)
  • The app service is optimized for production with Nginx serving static files (port 8080)
  • Production image includes security headers, gzip compression, and optimized caching
  • Environment variables can be set in a .env.local file or passed at runtime
  • Published Docker images are available at GitHub Container Registry

πŸ”„ CI/CD Pipeline

VaporScan uses GitHub Actions for comprehensive continuous integration and deployment. Our CI/CD pipeline ensures code quality, security, and reliability through automated testing and validation.

Workflows

1. CI Workflow (.github/workflows/ci.yml)

Runs on every push and pull request to main and develop branches:

Test Job (Matrix: Node.js 20.x, 24.x)

  • βœ… Code quality checks (ESLint, Prettier, TypeScript)
  • βœ… Unit tests (144 tests)
  • βœ… Integration tests (117 tests)
  • βœ… Coverage reporting (Codecov integration)
  • βœ… Production build verification
  • βœ… Security audit (npm audit)

Security Job

  • βœ… Trivy vulnerability scanning
  • βœ… SARIF report upload to GitHub Security

Build Job

  • βœ… Final production build (static export)
  • βœ… Build artifacts uploaded (out/ directory)
  • βœ… Artifact retention for 5 days

2. PR Quality Gate (.github/workflows/pr-quality-gate.yml)

Automated quality checks on every pull request:

  • πŸ” Comprehensive validation suite
  • πŸ’¬ Automated PR comments with check results
  • πŸ“Š Coverage diff reporting
  • πŸ“¦ Bundle size analysis
  • βœ…/❌ Clear pass/fail status for each check

Example PR Comment:

πŸ” PR Quality Gate Results

| Check | Status |
|-------|--------|
| Linting | βœ… success |
| Formatting | βœ… success |
| Type Checking | βœ… success |
| Unit Tests | βœ… success |
| Integration Tests | βœ… success |
| Build | βœ… success |

βœ… All checks passed! This PR is ready for review.

3. CodeQL Analysis (.github/workflows/codeql.yml)

Advanced security scanning:

  • πŸ”’ JavaScript/TypeScript code analysis
  • πŸ” Security vulnerability detection
  • πŸ“… Scheduled weekly scans (Mondays 3 AM UTC)
  • πŸ“ˆ Results in GitHub Security tab

4. Docker Release (.github/workflows/docker-release.yml)

Automated Docker image publishing on GitHub releases:

  • 🐳 Multi-arch Docker builds
  • 🏷️ Semantic versioning tags
  • πŸ“¦ GitHub Container Registry (ghcr.io)
  • πŸš€ Automated on release publish

5. GitHub Pages Deployment (.github/workflows/github-pages.yml)

Automated deployment to GitHub Pages:

  • 🌐 Automatic deployment on push to main branch
  • πŸ“¦ Static export optimized for GitHub Pages
  • πŸ”„ Manual deployment trigger available
  • πŸš€ Live at https://<username>.github.io/VaporScan

Test Coverage

Our comprehensive test suite ensures reliability:

   Integration Tests (40%)
  /                      \
 /      117 tests         \
/________________________  \
    Unit Tests (60%)
   144 tests across
   all components

Total: 261 tests across all levels Coverage Target: > 80% (tracked via Codecov)

Quality Gates

PRs must pass before merging:

  • βœ… All tests pass (unit, integration)
  • βœ… No ESLint errors
  • βœ… Code formatted with Prettier
  • βœ… No TypeScript errors
  • βœ… Production build succeeds
  • βœ… No critical security vulnerabilities
  • βœ… Coverage maintained or improved

Build Output

The build process generates a static export in the out/ directory:

out/
β”œβ”€β”€ _next/
β”‚   └── static/          # Static assets (JS, CSS, fonts)
β”œβ”€β”€ index.html           # Home page
β”œβ”€β”€ scan.html            # Scan page
β”œβ”€β”€ settings.html        # Settings page
β”œβ”€β”€ report.html          # Report page
β”œβ”€β”€ robots.txt           # Robots.txt
β”œβ”€β”€ sitemap.xml          # Sitemap
└── manifest.webmanifest # PWA manifest

Bundle Size: ~3.0MB total (optimized with code splitting and compression)

Continuous Deployment

Automated Docker Releases:

When a GitHub release is published, Docker images are automatically built and pushed with tags:

ghcr.io/sanmak/vaporscan:v1.2.3     # Exact version
ghcr.io/sanmak/vaporscan:1.2        # Major.minor
ghcr.io/sanmak/vaporscan:1          # Major
ghcr.io/sanmak/vaporscan:latest     # Latest release
ghcr.io/sanmak/vaporscan:sha-abc123 # Commit SHA

Pull Docker Images:

docker pull ghcr.io/sanmak/vaporscan:latest

Documentation

For detailed CI/CD information, see:

See Deployment Guide for more details.

πŸ“‹ Environment Variables

Create a .env.local file:

NEXT_PUBLIC_APP_URL=http://localhost:3000
NEXT_PUBLIC_GITHUB_REPO=https://github.com/sanmak/VaporScan
NEXT_PUBLIC_ENABLE_ANALYTICS=true

🀝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

Quick Start for Developers

# 1. Fork the repository
# 2. Create a feature branch
git checkout -b feature/my-feature

# 3. Make your changes and commit
git commit -m "feat: add my feature"

# 4. Run tests and linting
npm run test
npm run lint

# 5. Push and create a Pull Request
git push origin feature/my-feature

πŸ“ License

Licensed under the MIT License - see LICENSE file for details.

πŸ™ Acknowledgments

Built with attention to modern web development best practices:

πŸ“ž Support


Made with ❀️ by the VaporScan Community

⭐ Star on GitHub

About

An open-source, client-side SEO auditing tool that detects orphaned pages, broken links, and generates comprehensive site health reports.

Resources

License

MIT, Unknown licenses found

Licenses found

MIT
LICENSE
Unknown
LICENSE-HEADERS-SETUP.md

Contributing

Security policy

Stars

Watchers

Forks

Packages

 
 
 

Contributors