DetectStack — Web Technology Detector

Clone WhatCMS.org — детектор технологій для будь-якого сайту.

Стек

Шар	Технологія
Frontend	Next.js 14 (App Router)
Backend API	Next.js API Routes або PHP 8.x
Детекція	Власний движок (40+ технологій)
Стилі	CSS Variables + Google Fonts

Структура проекту

cmsdetect/
├── app/
│   ├── api/detect/
│   │   ├── route.ts        ← Next.js API endpoint
│   │   ├── engine.ts       ← Движок детекції (TypeScript)
│   │   └── signatures.ts   ← База сигнатур (40+ технологій)
│   ├── page.tsx            ← Головна сторінка
│   ├── layout.tsx
│   └── globals.css
├── php-backend/
│   └── detect.php          ← Альтернативний PHP бекенд
├── next.config.js
├── tsconfig.json
└── package.json

Запуск (Next.js — рекомендовано)

npm install
npm run dev
# Відкрити http://localhost:3000

Запуск (PHP бекенд)

cd php-backend
php -S localhost:8080
# API доступне на http://localhost:8080/detect.php

Перемкнути фронтенд на PHP бекенд

В app/page.tsx змінити URL:

// замість
const res = await fetch('/api/detect', { ... })

// використати
const res = await fetch('http://localhost:8080/detect.php', { ... })

API

POST /api/detect

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

GET /api/detect?url=github.com

Відповідь

{
  "url": "https://github.com",
  "finalUrl": "https://github.com/",
  "title": "GitHub",
  "status": 200,
  "responseTime": 412,
  "detected": [
    { "name": "React",      "category": "framework", "color": "#61dafb", "confidence": 60 },
    { "name": "Nginx",      "category": "server",    "color": "#009900", "confidence": 30 },
    { "name": "Ruby on Rails","category":"framework", "color": "#cc0000", "confidence": 30 }
  ],
  "headers": {
    "server": "GitHub.com",
    "x-powered-by": "",
    "content-type": "text/html; charset=utf-8",
    "cf-ray": ""
  }
}

Категорії технологій

• cms — WordPress, Drupal, Joomla, Ghost, Wix, Squarespace, Webflow, Bitrix, PrestaShop...
• ecommerce — Shopify, WooCommerce, Magento, OpenCart
• framework — Next.js, Nuxt.js, React, Vue.js, Angular, Laravel, Django, ASP.NET, Rails
• server — Nginx, Apache
• cdn — Cloudflare, Vercel, AWS
• language — PHP, Node.js
• analytics — Google Analytics, Hotjar

Deploy

Vercel (рекомендовано)

npm i -g vercel
vercel --prod

VPS / Docker

FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install && npm run build
EXPOSE 3000
CMD ["npm", "start"]

Додавання нових технологій

В app/api/detect/signatures.ts → масив SIGNATURES:

{
  name: 'MyTech',
  category: 'framework',
  color: '#ff0000',
  checks: {
    htmlPatterns: ['mytech-root', '__MYTECH__'],
    headers: { 'x-powered-by': /MyTech/i },
    cookies: [/mytech_session/i],
    metaTags: { generator: /MyTech/i },
  },
}

Roadmap

• Batch detection (CSV upload)
• WordPress theme detector
• Hosting provider detection
• API keys + rate limiting
• Detection history (localStorage / DB)
• Browser extension