Cyber Security

Unmasking Cybercrime, One Clue at a Time.

Comment

Inspiration

This project was inspired by a real incident I personally experienced. For several months, I kept receiving scam calls within minutes after booking a cab on Ola. It was always from the same number, trying to extract OTPs or payments. After learning that this number had over 768+ scam reports, I deleted the app — but it stuck with me.

It made me realize how easily people fall for digital traps — phishing links, fake calls, or malicious downloads — and how unaware the average user still is.

What it does

I created Cyber Detective — an interactive web app that gamifies real scam cases. The user becomes a digital detective, exploring cases like:

Phishing messages in games Influencer Instagram hacks Malicious APK scams My own Ola scam story and many more

How I built it

1.I built the entire application using React.js, managing state and screen transitions through useState.

2.Designed a multi-stage case system, where each case is stored as structured JSON with interactive clues (click / type / select).

3.Implemented a typewriter animation for immersive storytelling and a step-by-step clue reveal system that responds to user input.

4.Created a final cyber awareness report generator that summarizes what the user has learned.

5.Added modular components for cases, clues, safety tips, and navigation to keep the code clean and extendable.

Hosted the project live using Vercel for fast deployment and smooth UX.

Challenges I ran into

1.Designing a system that allows clues to be unlocked only after solving previous ones — ensuring it feels like an investigation.

2.Preventing auto-selection bugs in clue interactions and managing validation for user input (like strong password checks).

3.Handling screen size differences — the layout looked fine locally but broke visually on Vercel due to scaling issues.

4.Balancing simplicity with interactivity — it was challenging to make the project both beginner-friendly and meaningful.

5.Structuring complex clue flows in a way that remained readable and maintainable as more cases were added.

Accomplishments that I am proud of

1.Transformed a real-life scam experience into an educational, interactive web game.

2.Created a fully working React app without relying on any UI library or framework. Implemented different types of clues (clickable analysis, user input validation, multi-select) for engaging gameplay.

3.The final cyber report generation with user name, total clues solved, and actionable safety tips really brings the learning full circle.

4.The project successfully makes cyber awareness fun, digestible, and memorable — which was the ultimate goal.

What I learned

React Component architecture from scratch

How to manage state-based navigation

Dynamically rendering multiple-stage content

Typewriter animations, responsive layout, interactive input handling

How to design UX that is educational yet engaging

What make it unique

Cyber scams often feel too technical or boring to learn. I wanted to flip that — by building something:

Visually engaging

Story-based

Educational without being preachy

Built With

Share this project:

Updates