PhishGuard

"Spot the scam. Save the heart. Secure the web."

Comment

Inspiration

The inspiration for PhishGuard came from observing the growing digital divide in our community. As essential services move online, seniors are increasingly targeted by sophisticated scams—from fake bank KYC updates to "Hi Mum" family impersonations. We realized that while technical security exists, there was a massive lack of interactive, "learn-by-doing" tools designed to build digital resilience without being intimidating.

What it does

PhishGuard is a gamified mission that turns security awareness into an engaging challenge.

1.Real-World Simulations: Users analyze messages curated from both global and regional Indian contexts.

2.Tactile Gamification: Players start with 3 Hearts. Correct identifications provide a "success glow," while mistakes trigger a "Screen Shake" animation.

3.Progressive Mastery: A dynamic level-badge system upgrades the user's status from "Beginner" to "Cyber Expert."

4.Social Impact: Using the WhatsApp Sharing API, users can instantly warn their peers about the scams they’ve learned to spot, turning personal learning into community protection.

How we built it

We prioritized a lightweight, "Vanilla" tech stack to ensure the app runs flawlessly on any device:

Frontend: Semantic HTML5 and CSS3 for a high-contrast, large-font UI tailored for senior accessibility.

Logic Engine: Vanilla JavaScript powers the mission engine, managing randomized scenario shuffling and real-time state tracking.

Persistence: We utilized the Web Storage API (localStorage) to maintain a "Global Wall of Fame" leaderboard.

Deployment: Version control was managed via Git on macOS, with live global hosting successfully deployed through Vercel.

Challenges we ran into

The primary technical hurdle was a complex Git synchronization conflict. After a major UI overhaul, we encountered a "rejected ref" error during a push. This required a deep dive into Git's internal history to implement a strategic force-push and rebase to align the local and remote repositories. Additionally, balancing the difficulty of the 11 scenarios required multiple iterations to ensure the learning curve was encouraging for non-tech-savvy users.

Accomplishments that we're proud of

1.Rapid Deployment: Moving from a blank directory to a fully functional, globally hosted application in just a few days.

2.Accessible UX: Creating a UI that feels modern while remaining strictly accessible for users with visual or motor impairments.

3.Engine Versatility: Building a modular scenario engine that can be easily updated with new scam types as they emerge.

What we learned

This project taught us the power of Inclusive Design. We also learned to quantify user learning through a Security Quotient (SQ) model. We analyzed user resilience based on the success rate across n total scenarios:$$\text{SQ} = \left( \frac{\sum_{i=1}^{n} \text{Correct}_i}{n} \right) \times 100$$This mathematical approach allowed us to calibrate the game's difficulty and ensure the educational impact was measurable.

What's next for PhishGuard

Now that we are successfully live on Vercel, our roadmap includes:

AI-Threat Level: Adding scenarios involving AI-generated voice clones and deepfake video awareness.

Regional Localization: Support for Hindi and Assamese to reach a wider demographic across India.

Analytics Dashboard: Building a backend to track aggregate anonymous SQ scores to see which scams are the most deceptive globally.

Built With

Share this project:

Updates