Skip to content

Vitality Architecture Overview

Jump to bottom
Héla Ben Khalfallah edited this page Mar 3, 2025 · 15 revisions

Vitality is a modular system designed for scalability, maintainability, and seamless code auditing. It ensures a single source of truth for all code quality, performance, and security assessments.

🧠 Architecture Diagram

Architecture Diagram

📂 Directory Structure

v6y-apps
├── front                # Main user interface (IHM)
├── front-bo             # Back-office interface (BO)
├── bff                  # Backend for Frontend (GraphQL, Node.js)
├── bfb-main-analyzer    # Central code analysis orchestrator
├── bfb-static-auditor   # Static code analysis module
├── bfb-devops-auditor   # DevOps metrics analyzer
├── bfb-url-dynamic-auditor # URL-based dynamic analysis (e.g., Lighthouse)

v6y-libs
├── core-logic           # Reusable backend logic
└── ui-kit               # Common UI components and hooks

ui-guide                 # Storybook documentation for ui-kit

persistence              # Database layer (PostgreSQL)

🧮 Component Descriptions

📌 Frontend (IHM)

  • Purpose: User-facing interface for audit visualization, project tracking, and reporting.
  • Technologies: React, Next.js, GraphQL
  • Guidelines:
    • Use only components from ui-kit.
    • No direct usage of UI libraries—contribute missing components to ui-kit.
    • No direct usage of CSS, inline styles, or any other type of style should be used. All needed styles should be implemented inside components exposed by ui-kit.
    • All new components must include tests and Storybook documentation (ui-guide).

📌 Frontend (BO)

  • Purpose: Admin and configuration interface for managing applications and audit settings.
  • Technologies: React, Next.js, Refine, GraphQL
  • Guidelines:
    • Use only components from ui-kit.
    • No direct usage of UI libraries—contribute missing components to ui-kit.
    • No direct usage of CSS, inline styles, or any other type of style should be used. All needed styles should be implemented inside components exposed by ui-kit.
    • All new components must include tests and Storybook documentation (ui-guide).

📌 Backend for Frontend (BFF)

  • Role: Orchestrates frontend-backend communication via GraphQL.
  • Technologies: Node.js, GraphQL
  • Responsibilities:
    • Data aggregation and transformation.
    • Authentication and authorization.
    • Rate limiting and caching.

📌 BFB Main Analyzer

  • Role: Single source of truth—orchestrates auditing processes.
  • Functionality:
    • Fetches applications configured in BO.
    • Manages scheduled execution (every midnight).
    • Determines which BFB Auditors to trigger.

📌 BFB Auditors

  • Purpose: Specialized analysis modules using various tools.
  • Existing Auditors:
    • bfb-static-code-auditor:
      • Code complexity, duplication, modularity.
      • Security vulnerabilities, dependency analysis.
    • bfb-devops-auditor:
      • DevOps DORA metrics, CI/CD health.
    • bfb-url-dynamic-auditor:
      • Lighthouse audits (Performance, SEO, Accessibility).

📌 Persistence Layer

  • Database: PostgreSQL
  • Responsibilities:
    • Stores audit results and historical data.
    • Ensures data consistency and integrity.

🚦 Auditing Workflow

Scheduled Scan (Triggered at Midnight)
│
└──▶ BFB Main Analyzer (Scheduler)
    │
    ├── Fetches Applications List (from BO Configuration)
    │   ├── Each application is linked to:
    │   │   ├── Git Repository (GitHub/GitLab)
    │   │   └── Production URL
    │
    ├── Ensures Single Source of Truth:
    │   ├── Avoids multiple redundant checks on the same source code
    │   ├── Centralized orchestration of auditing tasks
    │
    ├── Triggers BFB Auditors (Child Analyzers)
    │   ├── Verifies if each child auditor is available before execution
    │   ├── Dispatches application analysis tasks
    │
    ├── Child Auditors Execution
    │   ├── Static Code Analysis:
    │   │   ├── Linting & Style Checks
    │   │   ├── Code Quality & Security
    │   │   ├── Dependencies Vulnerability Analysis
    │   │
    │   ├── Dynamic Analysis:
    │   │   ├── Lighthouse → Performance, SEO, Accessibility
    │   │   ├── API Security Audit → OWASP Compliance
    │   │
    │   ├── DevOps Metrics:
    │   │   ├── DORA Metrics → Deployment Frequency, Lead Time, etc.
    │   │   ├── CI/CD Pipeline Health Monitoring
    │
    ├── Reporting & Data Persistence
    │   ├── Aggregates results from all auditors
    │   ├── Generates structured reports
    │   ├── Stores analysis data in PostgreSQL (Historical Tracking)
    │
    └──▶ Frontend Display (IHM & BO)
        │
        ├── IHM (Developer Insights)
        │   ├── Displays audit results per application
        │   ├── Provides interactive filtering & search
        │   ├── Allows issue tracking & resolution workflows
        │
        ├── BO (Admin & Configuration)
        │   ├── Manages applications & linked repositories
        │   ├── Configures audit rules & thresholds
        │   ├── Monitors scheduled execution & overall system health
        │
        └──▶ Users can view reports, export data, and track historical trends

✅ Best Practices

Avoid Duplication

  • Shared logic goes to core-logic (backend) or ui-kit (frontend).

Component Development

  • All UI components should be documented in ui-guide using Storybook.
  • Contributions should follow the design system principles established in ui-kit.

Testing

  • Each module requires unit and integration tests.
  • Use Storybook for visual testing of UI components.

Vitality is designed to provide scalable, efficient, and automated code auditing. By ensuring a clean, modular architecture, we maintain audit integrity, structured reporting, and developer-friendly visualization.

This system guarantees that code quality, security, and performance insights are accessible, actionable, and reliable. 🎯

image

Clone this wiki locally