Automated developer intelligence dashboard tracking Programming Languages, Frameworks, Databases, Linux Distros, AI Systems, and Cybersecurity Tools.
DevSec Status is an open-source developer intelligence dashboard designed to monitor the growth, developer adoption, repository volume, and velocity of major programming languages, modern frameworks, database engines, Linux distributions, AI systems, and cybersecurity toolkits.
Combining GitHub Search API metrics with a finance-terminal-inspired UI, DevSec Status visualizes technology popularity through interactive segmented metric bars, blueprint-styled architectural showcase heroes, dynamic community contributor stacks, and instant search filtering.
| Layer | Technology | Description |
|---|---|---|
| Framework | React 19 | Core UI rendering with concurrent React features |
| Bundler & Tooling | Vite 6 & TypeScript 5 | Next-generation frontend tooling and strict type checking |
| Styling | Tailwind CSS 3 | Modern utility-first styling with custom glassmorphism and animations |
| Routing | React Router 7 | Client-side routing between Software and Security pages |
| Localization (i18n) | i18next & react-i18next | 9 languages (English, Turkish, German, French, Spanish, Italian, Portuguese, Russian, Chinese) with automatic browser detection |
| Icons & Media | Lucide React & WebP | Crisp scalable vector icons and lightweight WebP graphics |
| Security & Sanitization | DOMPurify | DOMPurify sanitization for externally sourced data |
| Testing | Vitest & Testing Library | Unit, component, and dataset schema test suite |
| Automation | GitHub Actions & tsx |
Automated scheduled GitHub API fetch workflow every 6 hours |
- Terminal & Fintech-Inspired UI: Technology metrics visualized through 20-segment capsule progress bars with adaptive color tiers (Cobalt Blue, Emerald, Amber, Rose).
- Blueprint Architecture Showcase: High-impact hero container featuring SVG blueprint vectors, interactive sparkline charts, growth ratios, and a central orbital tech hub.
- Granular Category Tables: Full developer and security ecosystem organized across 8 dedicated tables (127 curated technologies total — 100% actively metric-tracked GitHub repositories):
- Software Ecosystem (Software Page):
- Programming Languages (28 core languages: Python, Rust, TypeScript, Go, C++, etc.)
- Frameworks & Libraries (19 modern stacks: React, Next.js, FastAPI, Vue, etc.)
- Database Technologies (15 relational, NoSQL, and vector engines: PostgreSQL, Redis, Supabase, MongoDB, SQLite, etc.)
- Linux Distributions (12 container, immutable, gaming, and cloud OS distributions: Talos Linux, NixOS, Bottlerocket, Bazzite, DietPi, k3OS, Void Linux, Batocera.linux, Gentoo Linux, ChimeraOS, Flatcar, Linux Kernel)
- AI Tools & Agentic Frameworks (12 application stacks: Ollama, LangChain, AutoGPT, ComfyUI, Open WebUI, CrewAI, etc.)
- AI Infrastructure & Runtimes (12 deep learning & inference engines: PyTorch, TensorFlow, Transformers, llama.cpp, vLLM, JAX, etc.)
- Security & SecOps Ecosystem (Security Page):
- Cybersecurity Tools (21 SAST/DAST, scanners, and exploit frameworks: Ghidra, Metasploit, Nmap, Trivy, Nuclei, ZAP, etc.)
- Security Operating Systems & Lab Platforms (8 penetration testing, threat hunting, and forensic OS distributions: Commando VM, Metasploitable 3, Security Onion, The HELK, BlackArch, Exegol, SANS SIFT, Athena OS)
- Software Ecosystem (Software Page):
- Expandable Community Drawer:
- Notable project contributors & maintainers with interactive avatar cards and direct profile links
- Top starred new repository of the month
- Total ecosystem repository count and official release dates
- Direct external repository navigation
- Instant Search & Tag Filtering (
⌘K/Ctrl+K): Global search modal supporting fuzzy name search, categories, creators, and hashtag syntax (e.g.#framework,#systems). - Multilingual Support (9 Languages - EN / TR / DE / FR / ES / IT / PT / RU / ZH): Instant switching across 9 global languages with CDN-optimized WebP flag preloading. (Translations are AI-assisted; improvements from native speakers are warmly welcomed).
- Dark & Light Mode: Seamless theme switching with persistent storage and system preference detection.
- Zero Runtime API Latency & No Rate Limits: Metrics are pre-fetched via automated GitHub Actions and served as static JSON from Vercel's Edge CDN, eliminating browser rate limits (403 errors) and third-party query latency.
- AI Agentic & Search Engine Ready: Built-in
sitemap.xml,robots.txt,llms.txt, andai-catalog.jsonfor autonomous AI agents and web crawlers. - Responsive Standard: Tested and optimized across Mobile (
390 x 844 px), Tablet (768 x 1024 px), Laptop (1366 x 768 px), and Desktop (1920 x 1080 px).
devsec-status/
├── .github/
│ ├── ISSUE_TEMPLATE/
│ │ └── suggest_technology.yml # Template for suggesting new tools & tech
│ ├── workflows/
│ │ ├── ci.yml # CI PR verification (tests, schema integrity, build)
│ │ └── update-data.yml # Automated 6-hour cron workflow for GitHub API sync
│ └── pull_request_template.md # Standard pull request checklist
├── public/
│ ├── icons/ # High-fidelity official distro logos, brand assets, and country flags
│ ├── ai-catalog.json # Structured manifest for autonomous AI agents
│ ├── llms.txt # Semantic dataset documentation for LLM ingestion
│ ├── robots.txt # Crawler directives
│ └── sitemap.xml # SEO URL index
├── scripts/
│ ├── curated-lists/ # Source metadata manifests for initial catalog bootstrapping
│ └── fetch-all.ts # Unified metric synchronization for all 8 datasets (with transaction buffering)
├── src/
│ ├── components/
│ │ ├── HeaderShowcase.tsx # 3-column blueprint hero showcase card
│ │ ├── TechTable.tsx # Modern fintech table with search, sort & drawers
│ │ ├── SegmentedProgressBar.tsx # 20-capsule segmented metric bar
│ │ ├── TechBar.tsx # Standalone tech card component
│ │ ├── Navbar.tsx # Navigation bar with search shortcut & theme toggle
│ │ ├── Footer.tsx # Dynamic last-updated footer with GitHub star CTA
│ │ ├── SearchModal.tsx # Keyboard-navigable quick search modal (Ctrl+K)
│ │ ├── LanguageSwitcher.tsx # Instant language switcher with preloaded WebP flags
│ │ ├── ProximitySidebar.tsx # Quick section anchor sidebar
│ │ ├── ScrollToTopButton.tsx # Smooth scroll-to-top floating button
│ │ ├── InitialViewportVignette.tsx # First-visit session depth atmospheric vignette
│ │ ├── Skeleton.tsx # Sunken well skeleton loader with metallic sheen
│ │ ├── ui/
│ │ │ └── skeleton.tsx # Primitive Skeleton components (Block, Text, Circle, Swap)
│ │ └── CardSkeleton.tsx # High-fidelity card shimmer loading skeleton
│ ├── data/ # Master synced datasets (languages, frameworks, etc.)
│ ├── hooks/
│ │ ├── useGitHubContributors.ts # Contributor avatar resolver with fallback cache
│ │ └── useTheme.ts # Dark/light theme state manager
│ ├── i18n/ # 9 localization dictionaries (en, tr, de, fr, es, it, pt, ru, zh)
│ ├── lib/
│ │ ├── formatNumber.ts # Locale-aware number and percent formatter
│ │ └── sanitize.ts # DOMPurify text and URL sanitization helpers
│ ├── pages/
│ │ ├── SoftwarePage.tsx # Main software ecosystem page (6 category tables)
│ │ └── SecurityPage.tsx # Cybersecurity tools & SecOps page (2 category tables)
│ ├── types/
│ │ └── tech.ts # Core TypeScript interfaces for technologies & metrics
│ ├── App.tsx # Application root and route configuration
│ ├── main.tsx # React DOM entry point
│ └── index.css # Tailwind CSS directives and custom styling tokens
├── tests/
│ ├── dataIntegrity.test.ts # Dataset schema, unique IDs, and HTTPS security checks
│ ├── TechTable.test.tsx # Unit tests for fintech table filtering and expansion
│ ├── TechBar.test.tsx # Unit tests for technology row rendering
│ ├── Skeleton.test.tsx # Unit tests for skeleton loaders and fallback states
│ └── setup.ts # Jest DOM test environment setup
├── CONTRIBUTING.md # Comprehensive contribution and data guidelines
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
DevSec Status avoids client-side GitHub API rate limits (60 requests/hour unauthenticated) by employing a Static Build Data Sync pattern:
flowchart LR
A[GitHub Actions Cron<br/>Every 6 Hours] -->|Executes| B[Fetch Pipeline<br/>tsx scripts/fetch-all.ts]
B -->|Authenticated Request| C[GitHub Search API]
C -->|Stars, Repos, 30d Velocity| B
B -->|Saves & Commits| D[Static Datasets<br/>src/data/*.json]
D -->|Static Build Import| E[React Frontend<br/>Production Client]
- Scheduled Sync: A GitHub Actions workflow triggers every 6 hours (
0 */6 * * *) executingpnpm run fetch:dataviascripts/fetch-all.ts. - API Query: All 8 datasets are traversed. For GitHub-hosted entries, repository metrics (stars, search volume, and 30-day velocity) are fetched using
GITHUB_TOKEN. - Commit & Push: Updated metrics are verified and committed back to
src/data/*.json. - Edge CDN Delivery: Data is bundled as static assets and served globally via Vercel's Edge CDN, eliminating browser rate limits and third-party query latency.
- 100% GitHub-Native Metric Tracking: All 127 curated technologies (including all 12 Linux distributions and 8 security platforms) point to active, official public repositories hosted on GitHub. This guarantees consistent, real-time-comparable metrics (stars, total ecosystem volume, 30-day velocity) with zero
N/Agaps across all 8 tables. - Authentic Brand & Distro Asset Pipeline: To eliminate generic identicons (pixelated placeholders), fallback octocats, or author personal photos, distribution and specialized toolkit logos are hosted as verified SVG/PNG/WebP assets locally in
public/icons/. Every asset is tested and guaranteed to return200 OKwith zero external CDN latency. - Strict URL & Asset Policy: All external icon URLs and repository links must strictly adhere to the security allowlist defined in
src/lib/urlPolicy.tsand pass automated schema verification (tests/dataIntegrity.test.ts). - Contributor Stack: Displayed contributors represent notable maintainers and project contributors from pre-rendered datasets, avoiding client-side runtime API rate limits.
-
Clone the repository:
git clone https://github.com/sercanvr/devsec-status.git cd devsec-status -
Install dependencies:
pnpm install
-
Configure Environment Variables (Optional for local data fetching): Create a
.envfile in the project root if you wish to run the data collection scripts locally:GITHUB_TOKEN=ghp_your_personal_access_token_here
(Note: The web application itself runs entirely without environment variables as it reads from the pre-populated datasets).
-
Start the development server:
pnpm dev
Open http://localhost:5173 in your browser.
| Command | Description |
|---|---|
pnpm dev |
Starts the Vite local development server with hot module replacement (HMR) |
pnpm build |
Type-checks with tsc and builds production bundle to dist/ |
pnpm preview |
Serves the production build locally for verification |
pnpm lint |
Runs strict TypeScript type checks across all files (tsc --noEmit) |
pnpm test |
Runs the Vitest test suite once |
pnpm run fetch:data |
Executes scripts/fetch-all.ts to refresh static JSON metrics across all 8 datasets |
The project uses Vitest with React Testing Library for unit, component, and dataset schema validation.
To execute tests:
pnpm testThe test suite validates:
- Dataset Schema Integrity (
tests/dataIntegrity.test.ts): Verifies that all 8 static JSON files exist, contain valid arrays, have unique IDs across all datasets, and include all required fields. - Component & UI State Rendering (
tests/Skeleton.test.tsx,tests/TechTable.test.tsx): Validates skeleton placeholders, accessibility labels, and table views. - Popularity & Progress Bars (
tests/TechBar.test.tsx): Tests 20-segment popularity progress calculations and secure external navigation links.
Contributions make the open-source community an amazing place to learn, inspire, and create. Any contributions to DevSec Status are greatly appreciated!
For detailed guidelines, please read our CONTRIBUTING.md.
- Suggest a Technology: Know a fast-growing open-source framework, database, AI system, or cybersecurity tool? Open an issue using the Suggest a Technology Issue Template without needing to write code!
- Add a Technology via Pull Request: Add an entry directly to
src/data/<category>.jsonfollowing the schema below. - Translations (i18n): Review or refine translations in
src/i18n/to ensure natural technical phrasing across all 9 supported languages. (Translations are AI-assisted; native speaker contributions are warmly welcomed). - UI / UX & Performance: Propose design improvements, mobile responsiveness enhancements, or accessibility fixes.
In DevSec Status, technology metrics are refreshed automatically every 6 hours via GitHub Actions for projects hosted on github.com. When adding a new entry to src/data/<category>.json:
- Ensure the technology is open-source. For GitHub-hosted projects, link the active public repository (
https://github.com/owner/repo). Projects hosted elsewhere (e.g. GitLab, custom domains) or maintained as package distributions/orgs link to their respective upstream profile, and their popularity metrics remain at zero (rendered asN/A). - Provide only the essential metadata. You do not need to manually compute stars, repository totals, or 30-day velocity — initialize them with zeroes, and the automated cron workflow will populate them for GitHub repositories:
{ "id": "tool-slug", "name": "Tool Name", "category": "security-tool", "subCategory": "Vulnerability Scanner", "iconUrl": "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/python/python-original.svg", "githubUrl": "https://github.com/org/repo", "creator": { "name": "Author or Organization", "avatarUrl": "https://github.com/org.png", "type": "organization", "releaseDate": "2024", "latestVersion": "v1.0.0" }, "popularity": { "totalRepos": 0, "totalStars": 0 }, "momentum": { "newReposLast30Days": 0, "topStarredNewRepo": null }, "lastUpdated": "2026-10-13T00:00:00.000Z" } - Icons & Asset Placement:
- For technologies with official brand icons on CDNs, use Devicon (
https://cdn.jsdelivr.net/gh/devicons/devicon/icons/...) or SimpleIcons (https://cdn.simpleicons.org/...). - For standalone tools, Linux distros, or platforms without CDN icons, place verified vector/high-res assets into
public/icons/<name>.<svg|png|webp>and set"iconUrl": "/icons/<name>.<ext>". - All icon URLs must pass
isAllowedIconUrlvalidation according tosrc/lib/urlPolicy.ts. - If an icon fails to load, the UI gracefully renders a clean fallback GitHub SVG icon.
- For technologies with official brand icons on CDNs, use Devicon (
- Creator Avatars:
- For organizations or authors with active GitHub profiles, use
https://github.com/<username-or-org>.png.
- For organizations or authors with active GitHub profiles, use
- Run test verification:
This ensures your entry meets the schema requirements and has a unique ID.
pnpm test
- Fork the repository and create your branch (
git checkout -b feat/add-new-tool). - Make your additions adhering to project conventions.
- Run tests (
pnpm test) to verify schema integrity. - Commit your changes following Conventional Commits (
git commit -m "feat(data): add new technology entry"). - Push and open a Pull Request targeting
main.
Thank you to everyone who helps improve DevSec Status! Contributions of all kinds are credited directly in GitHub's official Contributors graph.
This project is licensed under the MIT License — see the LICENSE file for details.
Copyright (c) 2026 Sercan Var.