Case study

devtools2025

Security Trainer

Interactive cybersecurity training platform with hands-on exercises, vulnerability simulations, and progress tracking for developers.

Building the tools that build the tools

Field notes

Role

Creator

Read order

Evidence first, then constraint → build → proof. Use the chapter rail to jump sections; orbit to adjacent work from the bottom of the case study.

DevTools Arsenal✦II-Class Star

●LIVE

View Live Site

Evidence

System surface

No public screenshot on file, generative preview stands in for the visual layer.

Signature viewsecurity-trainer.vercel.app

Open Live Site

security-trainer.vercel.app

Story arc

How this shipped

Building the tools that build the toolsThree beats: what pressed against the work, how the stack answered, and what changed once it was live.

I · Constraint

The brief

Security training is often theoretical and boring. Developers learn best by doing, but vulnerability labs are complex to set up.

II · Build

The craft

Built sandboxed vulnerability simulations developers can exploit safely. Hands-on exercises teach OWASP Top 10 through practice.

III · Proof

What moved after launch

Hands-on exercises increase retention 3x vs reading. Sandboxed environments eliminate setup friction. Progress tracking identifies knowledge gaps.

Inventory

Stack & signals

SecurityNext.js

Tell me what you're building

If you need someone who can own UI, systems, and AI integration without losing the plot, I'm listening. Contract, advisory, or full-time: we'll find the right shape.

Start a Conversation See More Projects

Related work

Signal = how many tags a project shares with this one.

Same clustersignal 2

Signal: Low

Next.js

Trace

Paste a screenshot, get a real runnable React component. Google Gemini recreates the layout grounded in a shadcn-style catalog, renders it live in an editable Sandpack sandbox, and shows which pixels became which component with honest confidence tags. Won the DEV.to GitHub Finish-Up-A-Thon.

Same clustersignal 2

Signal: Low

Next.js

Consent Compass

GDPR and CCPA compliant cookie consent solution. Drop-in banner with preference management, granular consent categories, and compliance audit trail.

Same clustersignal 2

Signal: Low

Next.js

Rocket Vitals

Scan-first website QA tool that crawls up to 500 pages and runs 200+ checks across SEO, accessibility, performance, security, links, content, and AI readiness. Delivers prioritized reports with severity scoring, department routing, regression monitoring, and client-ready exports.

Keep exploring

Previous Project

Encryption Visualizer

Interactive educational platform for learning cryptographic algorithms through real-time step-by-step visualizations.

Next Project

Ally A11y CLI

The only accessibility CLI with real-time auto-fix and impact scoring. Published on npm as ally-a11y with MIT license, GitHub Actions CI/CD, and codecov integration.