Privacy-Focused-Web-Analytics-Dashboard

Code Quality Scanning Guide

← Back to README Documentation Index GitHub Pages Deployment Backend Setup

This document outlines all available options for code scanning, quality checks, and security analysis for the Privacy-Focused Web Analytics Dashboard.

1. Local Code Quality Checks (Already Configured)

Quick Quality Check

Run all quality checks locally before pushing:

npm run quality-check

This command runs in sequence:

  1. Type checking (npm run typecheck) - TypeScript validation
  2. Linting (npm run lint) - Code style and best practices
  3. Testing (npm run test) - Unit tests with Vitest
  4. Code formatting (npm run format.fix) - Auto-format code

Individual Commands

Linting (ESLint):

npm run lint              # Check for issues
npm run lint:fix          # Auto-fix issues

Type Checking:

npm run typecheck         # TypeScript validation

Testing:

npm run test              # Run unit tests

Code Formatting:

npm run format.fix        # Auto-format with Prettier

ESLint Configuration

Best for: Comprehensive code quality, security, and maintainability.

Features

Setup Steps

  1. Visit SonarCloud
  2. Add Your Repository
    • Click “Import an organization”
    • Select Maneesh-Relanto organization
    • Select Privacy-Focused-Web-Analytics-Dashboard repository
  3. Configure GitHub Action
    • SonarCloud will provide a GitHub Action workflow
    • Create .github/workflows/sonarcloud.yml:
name: SonarCloud
on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened]
jobs:
  sonarcloud:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0
      - uses: SonarSource/sonarcloud-github-action@master
        env:
          GITHUB_TOKEN: $
          SONARCLOUD_TOKEN: $
  1. Add SONARCLOUD_TOKEN Secret
    • Go to GitHub repo > Settings > Secrets > New repository secret
    • Name: SONARCLOUD_TOKEN
    • Value: Your SonarCloud token (from SonarCloud dashboard)
  2. Configure sonar-project.properties
    • Create file: sonar-project.properties
sonar.projectKey=Maneesh-Relanto_Privacy-Focused-Web-Analytics-Dashboard
sonar.organization=maneesh-relanto
sonar.sources=client,server
sonar.tests=
sonar.test.inclusions=**/*.test.ts,**/*.test.tsx,**/*.spec.ts,**/*.spec.tsx
sonar.exclusions=node_modules/**,dist/**,coverage/**,.confidential/**
sonar.typescript.lcov.reportPaths=coverage/lcov.info

Dashboard & Reports

3. GitHub CodeQL (Free & Built-in)

Best for: Security vulnerability detection only.

Features

Setup Steps

  1. Enable Code Scanning
    • Go to GitHub repo > Security > Code scanning > Set up code scanning
    • Click “Set up with this workflow” for CodeQL
  2. GitHub Automatically Creates Workflow
    • File: .github/workflows/github-code-scanning.yml
    • Runs automatically on push and PRs
  3. View Results
    • Go to repo > Security > Code scanning alerts
    • Review and dismiss alerts as needed

4. OWASP Dependency Check (Security)

Best for: Detecting vulnerable dependencies in package.json.

Features

Local Usage

npm audit                 # Shows vulnerable dependencies
npm audit fix             # Attempts to auto-fix

GitHub Action Setup

Create .github/workflows/dependency-check.yml:

name: Dependency Check
on:
  push:
    branches: [main]
  pull_request:

jobs:
  dependency-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: dependency-check/Dependency-Check_Action@main
        with:
          path: "."
          format: "JSON"

5. DeepSource (All-in-One Alternative)

Best for: Code quality + security + performance.

Features

Setup

  1. Go to deepsource.io
  2. Sign in with GitHub
  3. Activate your repository
  4. DeepSource automatically creates workflow

6. Snyk (Dependency + Code Security)

Best for: Finding vulnerabilities in dependencies and code.

Features

Setup

  1. Go to snyk.io
  2. Sign in with GitHub
  3. Authorize and import repositories
  4. Automatic scans on every push

For comprehensive coverage without paying anything, use this combination:

Local (Run Before Pushing)

npm run quality-check    # Type check + Lint + Test + Format

GitHub Automated Scanning

  1. SonarCloud - General code quality + security
  2. CodeQL - Security vulnerabilities (if public)
  3. npm audit - Dependency vulnerabilities

CI/CD Pipeline (GitHub Actions)

File Structure

.
├── .eslintrc.json                 # ESLint configuration
├── .eslintignore                  # ESLint ignore patterns
├── sonar-project.properties       # SonarCloud configuration
├── .github/
│   └── workflows/
│       ├── sonarcloud.yml         # SonarCloud action
│       ├── github-code-scanning.yml # CodeQL action
│       └── quality-check.yml      # Local checks action
└── package.json                   # Scripts added

Next Steps

Immediate (Today):

  1. ✅ ESLint installed and configured
  2. Run npm run quality-check locally
  3. Fix any linting/type issues found

Short-term (This Week):

  1. Setup SonarCloud for comprehensive analysis
  2. Enable GitHub CodeQL for security
  3. Add npm audit to CI/CD pipeline

Long-term:

  1. Monitor SonarCloud dashboard for trends
  2. Maintain >80% code coverage
  3. Keep all vulnerabilities at 0

Troubleshooting

ESLint Not Working?

npm install --save-dev eslint @typescript-eslint/eslint-plugin \
  @typescript-eslint/parser eslint-config-prettier eslint-plugin-react \
  eslint-plugin-react-hooks

TypeScript Issues?

npm run typecheck  # More detailed error messages

Dependencies Outdated?

npm audit fix      # Auto-fix known vulnerabilities
npm outdated       # See what can be updated

References