Human Firewall — The 60-Second Decision Game

💡 Inspiration

Traditional cybersecurity training is often broken: it usually consists of boring annual slide presentations and abstract multiple-choice quizzes that people quickly rush through. Yet, in real life, cybercriminals don't test your textbook knowledge—they manipulate human psychology using urgency, panic, and authority.

Everyday people—students, parents, and remote workers—face aggressive smishing texts, lookalike package redelivery notifications, fake banking fraud alerts, and voice clone scams.

Human Firewall, created and developed by Adarsh Panicker, was inspired by a single core belief: "Every click is a choice. Every choice teaches you something." Rather than preaching theory, we built a fast-paced, high-stakes 60-second decision simulator that develops genuine muscle memory against real-world social engineering traps.

⚡ What It Does

Human Firewall turns defense training into an engaging, gamified experience:

60-Second Real-World Decision Game: Players are placed into authentic dilemmas—such as urgent USPS delivery SMS messages, fake Netflix subscription cancellations, executive impersonation emails, and panic phone calls. Every second counts. Interactive Clue Inspector ("Inspect Red Flags"): Players can investigate realistic UI elements—inspecting simulated phone numbers, deceptive domains, artificial urgency countdowns, and carrier warnings before choosing an action. Dynamic Branching Outcomes: If a player makes a risky choice, the narrative dynamically branches (e.g., denying an MFA push leads to an incident response investigation where you coordinate with threat analysts). Offline Website & Link Trust Scanner: A built-in security tool where users can paste any real or suspicious web link. It provides: Anatomical URL Dissector: Visually isolates the true second-level owner domain from deceptive subdomains. Typosquatting & Unicode Homoglyph Detection: Flags character substitutions like paypa1.com or chase-security-login.net. Tiered Scoring System: Awards authentic verified brand domains (Chase, Apple, USPS, Google, Netflix) 100/100 while identifying dangerous phishing traps and warning about unverified sites. 6-Axis Cyber Competency Radar Chart: Tracks mastery across 6 core disciplines (Phishing & Smishing, Credential Defense, Social Engineering, Incident Response, Network & Cloud, and Threat Forensic Analysis). Verifiable Clearance Certificate: Generates a personalized completion certificate with a tamper-evident cryptographic hash ID and dynamic PDF/print export.

🛠️ How We Built It

Frontend & UI: Built with React 19, TypeScript, and Vite with Tailwind CSS for a dark-mode, command-center aesthetic. Iconography & Effects: Lucide React for cyber telemetry icons and Canvas-Confetti for achievement celebrations. Audio & Haptics: Custom synthesizers powered by the native browser Web Audio API (subtle Geiger counter ticks, tension hums, success chimes) and Web Speech API for realistic audio dispatches. Offline Link Scanner: Built an offline URL analysis engine with a verified institutional brand registry, RFC-compliant domain parser, and risk-weighting heuristic rules. Zero-Dependency Architecture: Designed to run 100% locally and offline without requiring external API keys, accounts, or cloud databases, ensuring maximum privacy and instant evaluation. Quality Assurance: Covered by a full automated test suite with Vitest (30 unit tests across 8 test suites validating scoring, branching logic, scenarios, and URL heuristics).

🧗 Challenges We Ran Into

Making Scenarios Relatable to Everyday Users: Balancing technical accuracy with threats regular people face at home (e.g., shifting from complex server CVEs to realistic USPS tracking smishing and bank fraud calls). Accurate URL Dissection Without a Live Server: Dissecting malicious URLs purely in the browser required robust regex parsing to correctly separate subdomains, TLDs, and path query strings without being tricked by obfuscation tricks. Calibrating the Link Trust Score: Ensuring that legitimate, verified institutional portals receive a full 100/100 score, while standard unvetted domains receive a safe 75/100 rating with clear disclaimers, and deceptive traps drop below 25.

🏆 Accomplishments That We're Proud Of

Zero-Setup Accessibility: Anyone can jump in and test their cyber reflexes in under 5 seconds with zero logins or installations. 100% Privacy-Preserving: All link analysis and game progression occur completely client-side in the player's browser—no URLs or sensitive data leave the machine. Rich Visual URL Dissector: Visualizing the anatomy of a URL helps demystify phishing tricks for non-technical users in a way words cannot. 30/30 Unit Tests Passing: Robust engineering with complete test coverage across adaptive difficulty, scoring calculations, and scenario safety.

📚 What We Learned

Defensive security is most effective when communicated through immediate feedback and experiential learning rather than fear or slide decks. How attackers exploit human cognitive biases—specifically time-urgency and fear of loss—to bypass logical thinking. How to design clean client-side security heuristics that teach users the golden rules of URL verification.

🚀 What's Next for Human Firewall

Community Scenario Builder: Allow educators and organizations to submit custom scam scenarios. Multiplayer Team Breach Drills: Real-time cooperative drills where families or small business teams coordinate responses to simultaneous alerts. Browser Extension: Port the Link Trust Scanner into a lightweight Chrome/Firefox extension that highlights deceptive subdomains in real time.

Built With

• canvas-confetti
• css3
• html5
• javascript
• lucide-react
• pwa
• react
• tailwindcss
• typescript
• vite
• vitest
• web-audio-api
• web-speech-api