Skip to content

mpalmer79/cyber-shield

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

204 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

CyberShield ๐Ÿ›ก๏ธ

LinkedIn Next.js TypeScript React Tailwind CSS Version

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.

CyberShield Hero

๐Ÿ—๏ธ Engineering Highlights

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.

โœจ Feature Set

Core Platform

  • ๐Ÿง  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

Training & Gamification

  • ๐Ÿ“š 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

Enterprise Features

  • ๐Ÿ” 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

๐Ÿง  Adaptive Difficulty Engine

The core intelligence that makes CyberShield a personalized training platform rather than a static quiz.

How It Works

Session 1-2 (Calibrating)          Session 3+ (Adaptive)
โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”          โ”Œโ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”
โ”‚  Random scenarios     โ”‚          โ”‚  60% weakness-targeted   โ”‚
โ”‚  Every answer tracked โ”‚   โ”€โ”€โ–บ    โ”‚  40% random for variety  โ”‚
โ”‚  Building profile     โ”‚          โ”‚  Avoids recent repeats   โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜          โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜
  1. Red Flag Taxonomy โ€” Every scenario's red flags are classified into 10 canonical vulnerability categories using keyword-weighted matching
  2. Vulnerability Profiling โ€” Each answer records whether you caught or missed threats in each category, building a per-category detection rate
  3. Calibration Phase โ€” The first 3 sessions collect baseline data with random scenarios while silently profiling your weaknesses
  4. Adaptive Selection โ€” After calibration, 60% of scenarios are weighted toward your weakest categories while 40% stay random for coverage
  5. Security IQ โ€” A weighted composite score (0โ€“100) reflecting detection ability across all tested categories

10 Threat Categories Tracked

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

๐Ÿ’ฌ AI Coaching Chat (v2.2)

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]          โ”‚
โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜  โ””โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”˜

Scoring Breakdown

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.

Architecture

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

๐ŸŽฏ Training Modules

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

๐Ÿš€ Quick Start

Prerequisites

  • Node.js 18+
  • npm or yarn
  • Anthropic API key

Installation

# 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 .env

Environment Variables

Create a .env file in the root directory:

ANTHROPIC_API_KEY=your_anthropic_api_key_here

Development

# 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 start

๐Ÿ“ Project Structure

cyber-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

๐Ÿ› ๏ธ Tech Stack

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

๐Ÿ“Š Data Persistence

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

๐Ÿ“œ Available Scripts

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

๐ŸŽฎ How It Works

  1. Select a Module โ€” Choose from 8 training modules or tackle the Daily Challenge
  2. Adaptive Scenarios โ€” The engine selects scenarios targeting your weakest threat categories (after 3 calibration sessions)
  3. 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
  4. Make Decisions โ€” Identify threats, respond to incidents, or spot social engineering
  5. Get Scored โ€” Receive a grade breakdown (Sโ€“F) based on flags found, analysis depth, and speed
  6. Build Your Profile โ€” Every answer updates your vulnerability profile across 10 threat categories
  7. Track Your Radar โ€” Watch your detection rates improve on the interactive vulnerability radar chart
  8. Progress Through the Skill Tree โ€” Unlock advanced modules as you demonstrate mastery
  9. Earn Rewards โ€” Gain XP, unlock badges, maintain streaks, and climb the leaderboard

๐Ÿ“‹ Version History

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

๐Ÿ”’ Security Note

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.

๐Ÿ“„ License

This project is licensed under the MIT License - see the LICENSE file for details.


LinkedIn - Michael Palmer

โญ Star this repo if you find it useful! โญ

About

AI-powered cybersecurity training platform built with Next.js 14, React 18, and TypeScript. Features interactive phishing detection, social engineering simulations, and incident response training with Claude AI. Includes gamification (XP, levels, badges), leaderboard, dark/light themes, and comprehensive test suite.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors