🌌 TechScope AI — Web Technology & Security Exposure Detector

Analyze · Detect · Compare · Visualize

Cyber Intelligence Dashboard for Web Technology & Risk Exposure Analysis

---

🚀 Overview

TechScope AI is an advanced, cyberpunk-themed Web Technology Detector designed to analyze, visualize, and compare the technology stack and security exposure of any website in real-time.

It performs deep analysis of:

• Frontend frameworks (React, Vue, Next.js)
• Backend technologies (Node, PHP, Python)
• CMS platforms (WordPress, Shopify)
• Security headers & exposure risks
• Comparative intelligence between two targets

⚡ Built with a Zero-Database Architecture for maximum privacy and Git-friendly deployment.

---

✨ Core Features

🕵️ Deep Technology Detection

• Detects frameworks, libraries, CMS, CDN, and analytics tools
• Uses DOM parsing + headers + script fingerprinting

🛡️ AI Risk Exposure Analysis

• AI Risk Score (0–100)
• Security Grade (A+ to F)
• Exposure Mapping (Radar Chart)
• Header weakness detection (CSP, HSTS, etc.)

⚖️ Compare Intelligence (Premium Module)

• Side-by-side comparison of two URLs
• Risk difference calculation
• Safer target identification
• Tech stack inconsistencies detection
• Header discrepancy analysis

📊 Advanced Visualizations

• Donut Charts (Stack Composition)
• Radar Charts (Exposure Mapping)
• Risk Meters & Grade Badges

💾 Zero Database Architecture (Git-Friendly)

• No MongoDB / Supabase / Firebase
• Local JSON file storage
• Fully offline compatible
• Privacy-first design

📄 Export PDF Reports

• Cyber-themed security intelligence reports
• Includes Risk Score, Grade, Tech Stack & Headers

---

🏗️ Complete Project Architecture

TechScopeAI/
│
├── client/                    # Frontend (React + Vite)
│   ├── src/
│   │   ├── components/        # UI Components (Cards, Charts, Risk Panels)
│   │   ├── pages/             # Dashboard, Compare, Logs
│   │   ├── store/             # Zustand State Management
│   │   ├── utils/             # PDF Exporter, Validators
│   │   ├── services/          # API Communication Layer
│   │   └── styles/            # Tailwind + Global CSS
│   └── public/                # Static Assets & Icons
│
├── server/                    # Backend (Node + Express + TypeScript)
│   ├── controllers/           # API Controllers
│   ├── routes/                # API Route Definitions
│   ├── services/              # Detection Engine & Risk Engine
│   ├── utils/                 # Parser, Scanner, Comparators
│   └── data/
│       └── scan-history.json  # Local Storage (No Database)
│
├── package.json               # Root Workspace Scripts
└── README.md

---

🧠 System Working — Block Diagram

flowchart TD
    A[User Inputs Target URL] --> B[React + Vite Cyber Dashboard]
    B --> C[Client Validation & Preprocessing]
    C --> D[REST API Request /scan]
    
    D --> E[Express.js Backend Server]
    E --> F[Request Sanitization & Rate Control]
    
    F --> G[Core Analysis Orchestrator]
    
    G --> H[Technology Detection Engine]
    G --> I[Security Exposure Analyzer]
    G --> J[Header & Metadata Analyzer]
    G --> K[Script & Framework Fingerprinting]
    
    H --> L[Tech Signature Library]
    I --> M[Vulnerability Heuristics]
    J --> N[HTTP Headers Inspection]
    K --> O[JS Pattern & DOM Analysis]
    
    L --> P[Confidence Scoring Engine]
    M --> P
    N --> P
    O --> P
    
    P --> Q[Structured Analysis Report]
    Q --> R[Prisma ORM Layer]
    R --> S[(Database - Scan Metadata)]
    
    Q --> T[JSON Response to Frontend]
    
    T --> U[Cyber UI Visualization Layer]
    U --> V[Technology Stack Panels]
    U --> W[Security Risk Charts & Gauges]
    U --> X[Detailed Exposure Breakdown]

Loading

---

⚙️ Tech Stack

Frontend

• React 18 + Vite
• TypeScript (Strict Mode)
• Tailwind CSS v4
• Framer Motion (Animations)
• Recharts (Data Visualization)
• Zustand (State Management)
• React Router DOM

Backend

• Node.js + Express
• TypeScript
• Puppeteer (Headless Scraping)
• Axios (HTTP Requests)
• Cheerio (HTML Parsing)
• Native FS (Local Storage)

---

📦 Installation & Setup

🔹 Prerequisites

• Node.js v18+
• npm or yarn

---

🖥️ Run Client & Server (Recommended for Full Functionality)

⚠️ IMPORTANT: Run client and server separately for the fully-functional project.

1️⃣ Clone the Repository

git clone https://github.com/LoganthP/TechScopeAI-Web-Technology-Detector.git
cd TechScopeAI-Web-Technology-Detector

2️⃣ Install Dependencies

Install Server Dependencies

cd server
npm install

Install Client Dependencies

cd ../client
npm install

---

▶️ Running the Project (Development Mode)

🚀 Start Backend Server

cd server
npm run dev

Backend runs on:

http://localhost:3000

🎨 Start Frontend Client

cd client
npm run dev

Frontend runs on:

http://localhost:5173

---

📡 API Endpoints

POST /api/scan

Scans a single target URL

{ "url": "https://example.com" }

POST /api/compare

Compare two websites intelligence

{
  "url1": "https://siteA.com",
  "url2": "https://siteB.com"
}

GET /api/history

Fetch scan telemetry logs from local JSON storage

---

📊 Compare Intelligence Workflow

1. Enter Target A & Target B URLs
2. Dual parallel scanning engine executes
3. Risk engine calculates score & grade
4. Comparison engine detects:
   • Risk Difference
   • Tech Stack Gaps
   • Header Discrepancies
5. AI determines the Safer Target
6. Visual comparison dashboard rendered

---

🛡️ Security & Privacy

• No external databases used
• No cloud tracking
• Local JSON storage only
• Safe read-only analysis (no intrusive attacks)
• Fully offline compatible

---

🧪 Build for Production

# From root
npm run build

This will:

• Compile TypeScript backend
• Build optimized Vite frontend

---

TechScope AI — Establish Absolute Visibility Over The Modern Web 🌐