Enterprise-grade cybersecurity training platform powered by Claude AI. CyberShield combines an Adaptive Difficulty Engine, real-time AI Coaching Chat, and vulnerability profiling to deliver personalized security awareness training that evolves with each user. Built as a production-ready SaaS application with 14,800+ lines of TypeScript across 8 training modules and 60+ scenarios.
This project demonstrates principal-level software engineering across several disciplines:
Architecture & State Management โ Seven persisted Zustand stores managing independent domains (modules, sessions, progress, settings, vulnerability profiles, daily challenges, coaching history) with zero prop-drilling and clean separation of concerns.
AI Systems Design โ Two distinct AI integration patterns: a Socratic coaching engine with structured JSON response contracts, fuzzy red-flag matching, and depth-based scoring; plus a scenario generation pipeline with system prompt engineering and server-side API proxying with rate limiting.
Adaptive Learning Algorithm โ A custom machine learningโinspired engine that classifies red flags into 10 canonical threat categories using keyword-weighted matching, builds per-user vulnerability profiles through calibration phases, and dynamically weights scenario selection toward identified weaknesses (60/40 weakness-to-random split).
Data Visualization โ Hand-built SVG radar chart (no chart library dependency) with Framer Motion animations, color-coded vertices, hover tooltips, and responsive scaling. The skill tree uses computed SVG path connections between tier nodes with unlock-state tracking.
Testing & Quality โ 1,600+ lines of test coverage across Jest + React Testing Library, covering stores, API routes, components, and utility functions. Type-safe throughout with 30+ TypeScript interfaces and strict type definitions.
- ๐ง Adaptive Difficulty Engine โ Tracks which threat types you miss and dynamically weights future scenarios toward your weak spots
- ๐ฌ Real-Time AI Coaching Chat โ Socratic dialogue during scenarios where the AI guides you to discover red flags yourself, with depth-based scoring and grade breakdowns (v2.2)
- ๐ Vulnerability Radar โ Interactive SVG radar chart showing detection rates across 10 threat categories with color-coded vertices and expandable breakdown panels
- ๐ฏ Security IQ Score โ Weighted composite score (0โ100) reflecting overall threat detection ability across all tested categories
- ๐ 8 Training Modules โ Phishing, social engineering, incident response, password security, data protection, malware awareness, secure browsing, threat hunting
- ๐ฅ Daily Challenge โ Duolingo-style daily scenarios with streak tracking, 60-second time pressure, and "Daily Defender" badges (v2.1)
- ๐ณ Skill Tree โ Visual progression system with tiered module unlocks, SVG path connections, and bonus challenge nodes (v2.1)
- ๐ฎ Gamification System โ XP, levels, 12+ badges, and streaks with confetti celebrations on milestones
- ๐ Leaderboard โ Competitive rankings with filtering and team stats
- ๐ Admin Dashboard โ Login-protected admin panel with user analytics, module completion rates, and activity feeds
- โ๏ธ Settings Panel โ Dark/light themes, sound effects, difficulty preferences, coaching toggle, accessibility options
- ๐ Progress Analytics โ Per-module completion tracking, time-spent metrics, historical performance trends
The core intelligence that makes CyberShield a personalized training platform rather than a static quiz.
Session 1-2 (Calibrating) Session 3+ (Adaptive)
โโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ Random scenarios โ โ 60% weakness-targeted โ
โ Every answer tracked โ โโโบ โ 40% random for variety โ
โ Building profile โ โ Avoids recent repeats โ
โโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโ
- Red Flag Taxonomy โ Every scenario's red flags are classified into 10 canonical vulnerability categories using keyword-weighted matching
- Vulnerability Profiling โ Each answer records whether you caught or missed threats in each category, building a per-category detection rate
- Calibration Phase โ The first 3 sessions collect baseline data with random scenarios while silently profiling your weaknesses
- Adaptive Selection โ After calibration, 60% of scenarios are weighted toward your weakest categories while 40% stay random for coverage
- Security IQ โ A weighted composite score (0โ100) reflecting detection ability across all tested categories
| Category | What It Measures |
|---|---|
| ๐ Domain Spoofing | Spotting fake sender domains and URL structures |
| โฐ Urgency & Pressure | Recognizing artificial deadlines and fear tactics |
| ๐ Authority Impersonation | Detecting fake CEOs, IT staff, and officials |
| ๐ Suspicious Links | Identifying deceptive URLs and redirects |
| ๐ Attachment Threats | Catching dangerous files, double extensions, malware |
| ๐ Generic Communication | Recognizing impersonal greetings and vague content |
| ๐ Credential Harvesting | Detecting password and personal data theft attempts |
| ๐ญ Emotional Manipulation | Spotting fear, greed, and curiosity exploitation |
| ๐ง Process Bypass | Catching requests to skip procedures or maintain secrecy |
| ๐ท๏ธ Brand Impersonation | Detecting professional-looking but fake brand mimicry |
Replaces passive multiple-choice with active critical thinking. During any scenario, the AI coach engages in Socratic dialogue:
โโ Scenario Panel โโโโโโโโโโโ โโ Coaching Chat โโโโโโโโโโโโโโโ
โ โ โ ๐ก๏ธ CyberShield Coach ๐ข โ
โ [Phishing email renders โ โ โโโโโโโโโโ 3/5 flags found โ
โ with full headers, โ โ โ
โ sender info, body, โ โ Coach: What catches your โ
โ and suspicious links] โ โ eye first about this email? โ
โ โ โ โ
โ โ โ You: The domain doesn't โ
โ โ โ match โ it says microsoft โ
โ โ โ but the actual domain is โ
โ โ โ microsoft365-alerts.com โ
โ โ โ โ
โ โ โ โ
+1 red flag identified! โ
โ โ โ โ
โ โ โ Coach: Sharp catch! That's โ
โ โ โ a subdomain trick. What else โ
โ โ โ seems off? โ
โ โ โ โ
โ โ โ [Type your observation...] โ
โ โ โ [๐ฏ Submit Verdict] โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
| Component | Max Points | How It's Earned |
|---|---|---|
| Flags You Found | 50 | Red flags identified independently through conversation |
| Flags (with hints) | 20 | Red flags found after coach nudges |
| Analysis Depth | 20 | Message count, reasoning quality, detail level |
| Speed Bonus | 10 | Identifying 60%+ of flags within 2 minutes |
Grades range from S (90+ with correct verdict) through F, with each session recorded to the coaching history store for longitudinal tracking.
src/lib/coaching/
โโโ engine.ts # Socratic prompt builder, fuzzy flag matching, scoring
โโโ index.ts # Barrel exports
src/lib/adaptive/
โโโ red-flag-taxonomy.ts # 10 categories + keyword classifier
โโโ engine.ts # Vulnerability profiling + adaptive selection
โโโ index.ts # Barrel exports
src/components/
โโโ CoachingChat.tsx # Chat UI, typing indicator, verdict flow, score breakdown
โโโ CoachingSettings.tsx # Toggle panel with persistent preferences
โโโ VulnerabilityRadar.tsx # SVG radar chart + insights panel
โโโ SkillTree.tsx # Tiered progression with SVG connections
src/store/
โโโ index.ts # 6 persisted Zustand stores
โโโ coaching-store.ts # Coaching session history (last 100)
src/app/api/coaching/
โโโ route.ts # Server-side Claude proxy with rate limiting
| Module | Difficulty | Duration | Description |
|---|---|---|---|
| Phishing Detection Lab | Beginner | 15 min | Identify malicious emails, texts, and suspicious links |
| Social Engineering Defense | Beginner | 20 min | Recognize manipulation tactics and protect sensitive info |
| Password & Authentication | Beginner | 12 min | Master password best practices and MFA |
| Secure Browsing Practices | Beginner | 15 min | Navigate the web safely |
| Incident Response Simulator | Intermediate | 30 min | Handle simulated security incidents |
| Data Protection Fundamentals | Intermediate | 25 min | Classify, handle, and protect sensitive data |
| Malware Awareness | Intermediate | 20 min | Understand malware types and prevention |
| Threat Hunting Basics | Advanced | 45 min | Analyze logs and identify security threats |
- Node.js 18+
- npm or yarn
- Anthropic API key
# Clone the repository
git clone https://github.com/mpalmer79/cyber-shield.git
cd cyber-shield
# Install dependencies
npm install
# Set up environment variables
cp .env.example .envCreate a .env file in the root directory:
ANTHROPIC_API_KEY=your_anthropic_api_key_here# Start development server
npm run dev
# Run tests
npm test
# Run tests with coverage
npm run test:coverage
# Build for production
npm run build
# Start production server
npm startcyber-shield/
โโโ src/
โ โโโ app/ # Next.js App Router pages
โ โ โโโ admin/ # Admin dashboard (login-protected)
โ โ โโโ api/ # API routes
โ โ โ โโโ ai/ # Claude AI integration
โ โ โ โโโ coaching/ # Coaching chat proxy + rate limiting
โ โ โ โโโ scenarios/ # Training scenarios
โ โ โโโ daily/ # Daily challenge (streak + timer)
โ โ โโโ leaderboard/ # Leaderboard page
โ โ โโโ progress/ # Progress + vulnerability radar
โ โ โโโ settings/ # User settings
โ โ โโโ training/ # Training modules
โ โ โโโ [id]/ # Dynamic module pages (adaptive)
โ โโโ components/ # 13 React components
โ โ โโโ ui/ # 6 reusable UI components
โ โ โโโ CoachingChat.tsx # AI coaching chat interface
โ โ โโโ CoachingSettings.tsx # Coaching preference toggles
โ โ โโโ SkillTree.tsx # Visual progression tree
โ โ โโโ VulnerabilityRadar.tsx # SVG radar chart + insights
โ โ โโโ ...
โ โโโ hooks/ # Custom React hooks
โ โโโ lib/ # Core business logic
โ โ โโโ adaptive/ # Adaptive Difficulty Engine
โ โ โโโ coaching/ # Coaching engine + scoring
โ โ โโโ scenarios/ # 60+ training scenarios (8 modules)
โ โ โโโ utils.ts # Shared utilities
โ โโโ store/ # Zustand state management (7 stores)
โ โโโ types/ # TypeScript definitions (30+ interfaces)
โโโ __tests__/ # 1,600+ lines of test coverage
โโโ ...config files
| Category | Technology |
|---|---|
| Framework | Next.js 14 (App Router) |
| Language | TypeScript (strict) |
| UI Library | React 18 |
| Styling | Tailwind CSS |
| State Management | Zustand (7 persisted stores) |
| Animations | Framer Motion |
| Icons | Lucide React |
| AI Integration | Anthropic Claude API (server-side proxy) |
| Testing | Jest + React Testing Library |
| Utilities | clsx + tailwind-merge |
All user data is stored locally via Zustand's persist middleware with localStorage:
| Store | Key | What It Stores |
|---|---|---|
| Progress | cybershield-progress |
Module completion, XP, level, badges, streaks |
| Settings | cybershield-settings |
Dark mode, sound, difficulty, accessibility |
| Vulnerability | cybershield-vulnerability |
Adaptive profile, category stats, session history (last 200 results) |
| Coaching | cybershield-coaching |
Coaching session history, average scores, best grades (last 100 sessions) |
| Daily Challenge | cybershield-daily |
Streak counter, daily completion status, challenge history |
| Script | Description |
|---|---|
npm run dev |
Start development server on port 3000 |
npm run build |
Build for production |
npm start |
Start production server |
npm run lint |
Run ESLint |
npm test |
Run test suite |
npm run test:watch |
Run tests in watch mode |
npm run test:coverage |
Run tests with coverage report |
- Select a Module โ Choose from 8 training modules or tackle the Daily Challenge
- Adaptive Scenarios โ The engine selects scenarios targeting your weakest threat categories (after 3 calibration sessions)
- Analyze with AI Coach โ Chat in real-time with the coaching AI to discuss what you notice, get Socratic hints, and build deeper threat awareness
- Make Decisions โ Identify threats, respond to incidents, or spot social engineering
- Get Scored โ Receive a grade breakdown (SโF) based on flags found, analysis depth, and speed
- Build Your Profile โ Every answer updates your vulnerability profile across 10 threat categories
- Track Your Radar โ Watch your detection rates improve on the interactive vulnerability radar chart
- Progress Through the Skill Tree โ Unlock advanced modules as you demonstrate mastery
- Earn Rewards โ Gain XP, unlock badges, maintain streaks, and climb the leaderboard
| Version | Release | What Shipped |
|---|---|---|
| 2.2.0 | Current | Real-Time AI Coaching Chat โ Socratic dialogue engine, fuzzy red-flag matching, depth-based scoring (SโF grades), coaching history store, server-side Claude proxy with rate limiting, coaching settings panel |
| 2.1.0 | โ | Daily Challenge system, Skill Tree component, Onboarding flow, MicroInteractions library, ThreatTerminal animated hero, UI component library (EmptyState, Skeleton, Toast, ThemeToggle) |
| 2.0.0 | โ | Adaptive Difficulty Engine โ red-flag taxonomy (10 categories), vulnerability profiling, calibration phases, adaptive scenario selection, Vulnerability Radar SVG chart, Security IQ composite scoring |
| 1.0.0 | โ | Initial platform โ 8 training modules, 60+ scenarios, gamification (XP/badges/streaks), leaderboard, admin dashboard, Claude AI scenario generation, dark/light themes |
This platform is designed for educational purposes only. All phishing emails, social engineering tactics, and attack scenarios are simulated for training. No actual malicious content is generated or distributed.
This project is licensed under the MIT License - see the LICENSE file for details.
โญ Star this repo if you find it useful! โญ