AI Cyber Detective 2.0

Inspiration

Living in Hong Kong, where cyber fraud hits close to home, I kept seeing friends, family, and news stories about people losing life savings to phishing emails, fake investment schemes on WhatsApp/Telegram, romance scams, and increasingly AI-generated deepfakes or forged documents. In 2025 alone, Hong Kong Police recorded over 43,000 deception cases with losses around HK$8.1 billion — online investment fraud alone caused $3.58 billion in damage, and e-shopping scams surged after events like concert ticket fraud at Kai Tak Sports Park. Globally, crypto scams stole an estimated $17 billion in 2025, with AI enabling more convincing impersonations.

Most cybersecurity advice is passive: "be careful" or scary headlines. I wanted something active — a fun, immersive way to train people to spot red flags in real time. That's why I built AI Cyber Detective 2.0: a cyberpunk-themed educational platform that turns users into "detectives" who investigate scams, analyze suspicious links/text/images, and build practical skills through stories and games. It combines Education (hands-on learning) and Social Impact (reducing fraud harm) tracks perfectly for this hackathon.What it does

AI Cyber Detective 2.0 is an interactive web app that teaches cybersecurity awareness and digital forensics in an engaging, gamified way.

• Dashboard — Shows simulated global threat intelligence: top scam types (phishing leading, followed by investment/romance), yearly trends, fraud heatmap, and stats like 1.28M+ scams reported worldwide (demo data).
• Story Mode — Follow "Alex the Cyber Detective" through chapters uncovering real tactics (urgency, impersonation, homoglyph domains, social engineering) in a thrilling BEC-to-ransomware narrative. Ends with the "Cyber Detective Code" — five practical rules.
• Training Game — 5 difficulty tiers, 15+ scenarios (emails, texts, posts). Choose scam/legit, get explanations + tips, earn scores/streaks/badges, compete on leaderboard.
• URL Threat Scanner — Paste suspicious links → parses domain/IP/SSL, detects phishing patterns (typosquatting, new registrations), gives risk score + findings.
• Text Verifier — Paste messages/articles → scores misinformation risk, credibility, sentiment; flags emotional triggers, long sentences (AI hints), word patterns.
• Image Inspector — Upload photos → reads EXIF (camera/date/GPS), checks compression artifacts/noise, detects likely AI-generation or edits (e.g., fake profile pics in romance scams).

All bilingual (EN/中文), responsive, with matrix-rain background and glowing cyberpunk UI for immersion.How we built it

Solo full-stack prototype using lightweight, accessible tech:

• Frontend — HTML/CSS (customized Bootstrap 5 + cyberpunk theme), vanilla JavaScript
• Libraries — Chart.js (charts), Leaflet.js (heatmap), exifr (EXIF), sentiment (text polarity)
• Backend — Node.js + Express.js server
  • API endpoints for leaderboard (in-memory), URL/text/image analysis (rule-based)
  • Multer for safe image uploads (memory storage, 20MB limit)
• Features — Matrix rain canvas, scroll-triggered animations, typewriter headers, drag-and-drop, smooth SVG progress arcs, i18n toggle
• No heavy ML/cloud APIs — focused on educational simulation with real-looking results

Built locally, deployable to Vercel/Netlify/free VPS.Challenges we ran into

• Scope vs. time — Planned six tools; cut two to deliver polished core five + story/game.
• Performance — Matrix rain + multiple charts + animations slowed mobile; optimized canvas drops, throttled resizes, lazy-loaded elements.
• Realistic scam examples — Wrote convincing phishing/romance texts without usable malicious payloads or live links — tricky balance.
• Analysis depth — Limited to rule-based heuristics (no big models) for URL patterns, text signals, image metadata/compression → good for teaching, but not production forensic level.
• Bilingual UI — Dynamic chart labels, emoji, long strings needed careful i18n handling to avoid layout breaks.
• Polish under pressure — Wanted deeper features (real threat feeds, on-device AI) but prioritized UX, accessibility basics, loading states.

Accomplishments that we're proud of

• Full cyberpunk aesthetic with immersive matrix rain, glowing arcs, typewriter effects — looks professional yet fun.
• Gamification works: scenarios feel real, explanations educational, leaderboard motivates replay.
• Three forensic tools give "detective workstation" feel — users paste/analyze like pros.
• Bilingual (EN/中文) support — important for Hong Kong audience.
• Lightweight stack — runs locally/offline-ish, no giant dependencies.
• Complete flow: dashboard → learning modes → tools → practical skills.

What we learned

• Rule-based detection catches most common scams surprisingly well — no need for huge AI to teach basics.
• Gamification + story beats dry training: people remember red flags when they're "investigating."
• Small UI details (hover tips, enter-key triggers, drag-drop) hugely improve experience.
• Performance tuning is critical in animated UIs — especially on lower-end devices.
• Writing safe but believable scam content is an art — must educate without enabling.
• Solo hackathon projects teach ruthless prioritization and finishing over perfecting.

What's next

• Integrate real open-source threat feeds (phishing domains, scam reports) for live data.
• Add community-submitted scenarios (moderated) to grow the game.
• Upgrade image/text analysis with lightweight on-device ML (e.g., TensorFlow.js models).
• School/community versions — white-label for libraries/elder centers in Hong Kong.
• Open-source fully and invite contributions for new tools/scenarios.
• Long-term: mobile app version + partnerships with Hong Kong Police CyberDefender platform.

Built With

• bootstrap5
• chart.js4
• css3
• exifr
• express.js
• html5
• in-memory-data(leaderboard)
• javascript(es6+)
• leaflet.js
• multer(image-upload-handling)
• node.js-runtime
• rule-based-logic-for-threat-scoring
• sentiment(nlp-polarity-scoring)