ThreatWise

Landing Page
Choosing Roles
First Question of the quiz
Clear note and correct answer to the question
Other question of the quiz
Other question of the quiz
Other question of the quiz
Brief explanation and immediate feedback after completing the quiz
Archive section of the website - Information about the past hacking events
Example event of the Archive Section
Example event of the Archive Section

Inspiration

In an era dominated by hyper-realistic phishing campaigns, DeepFakes, and rapid disinformation, traditional cybersecurity awareness training often feels dry, theoretical, and disconnected from reality. I was inspired to build ThreatWise to bridge the gap between technical threat intelligence and everyday digital safety. I aimed to give users hands-on experience evaluating realistic evidence—from fake browser popups and phishing DMs to sensationalized headlines—before they encounter them in the wild.

What it does

ThreatWise is an interactive digital threat literacy platform that transforms cybersecurity training into a gamified investigation experience: Classified Case-File Scenarios: Users step into the role of a threat analyst to review authentic, multi-channel evidence mockups—including suspicious emails, fake browser alerts, phishing DMs, incoming calls, and sensationalized news headlines. Targeted Persona Paths: Tailors threat scenarios to different demographic risk profiles (e.g., Students navigating academic portal scams vs. Older Adults facing tech support traps). Declassified Threat Archive: Features expandable historical case studies (such as WannaCry, NotPetya, and Stuxnet) complete with visual artifacts, real-world impact metrics, and official attribution status to educate users on high-profile cyber events. Instant Decision Debriefs: Provides immediate behavioral feedback explaining specific threat indicators (URL mismatches, urgency triggers, spoofed headers) whenever a choice is made.

How we built it

ThreatWise was built as a modern, responsive single-page web application focused on speed, modularity, and immersive design: Frontend Architecture: Developed using React and Vite for rapid state management, smooth transition effects, and instantaneous scenario loading. Investigative Visual System: Crafted a custom "declassified case-file" theme using dark charcoal contrast against vintage cream card layouts, accented with Lucide React icons to replicate real-world application UI elements. Data Engine: Designed a modular JSON architecture (scenarios.json and archive.json) to cleanly separate scenario logic, evidence metadata, media assets, and debrief copy from the core display components. Threat Evaluation Metric: Implemented a weighted scoring model to track user threat-detection performance across multi-step scenarios:$$\text{Final Score} = \sum_{i=1}^{n} w_i \cdot s_i$$ Where $n$ is the total number of scenarios evaluated, $w_i \in (0, 1]$ represents the severity weight factor assigned to scenario $i$, and $s_i \in [-10, 25]$ represents the raw score based on the action selected. NOTE: I have used AI tools in my project such as ChatGPT/Claude and a Gemini for prompting, and Claude/GLM5.2 for coding and debugging. Also, I didn’t use the sponsor credits or tokens because I essentially started working on the project today. I’ve been really busy and overwhelmed with school assignments, so I didn’t have much time to work on it properly and honestly forgot that I even had access to those credits. I ended up going with my usual approach to personal projects and built the thing using my own workflow.

What's next for ThreatWise

Community Case Creator: A lightweight editor allowing cybersecurity educators to submit and share custom scenario JSON files.

AI-Powered Threat Generator: Integrating dynamic threat synthesis to generate hyper-personalized phishing scenarios based on emerging real-time threat feeds.

Localized Scenario Packs: Expanding language support and regional scam variants tailored to specific geographic regions and localized digital services.

Interactive Global Threat Map: Developing an interactive, real-time map visualization tracking global cyber threats, attack vectors, and regional risk levels.

Expanded Historical Incident Archive: Enriching the declassified archive with detailed breakdowns of major historical cyber events, paired with interactive visual timelines, infrastructure diagrams, and step-by-step attack flowcharts.

Cyber Policy & Analysis Hub: Publishing research articles and deep-dive policy breakdowns examining emerging digital regulations, AI-driven threat vectors, and modern cybersecurity governance.