ThinkTwice

Landing page introducing ThinkTwice with scam awareness and interactive learning.
Three-step overview of reading, deciding, and learning from scam scenarios.
Educational modules covering different types of online scams and safety tips.
Interactive scam simulation where users choose the safest response.
Feedback explaining why the selected response successfully avoided the scam.
Delivery scam simulation with explanation of phishing red flags.
Permission-based loan scam teaching users to reject suspicious access requests.
Safe app permission scenario showing when granting access is appropriate.
Performance summary displaying score, accuracy, and learning progress.
Earned badges, strengths, improvement areas, and options to retry or share results.

Inspiration

In an increasingly digital world, online scams have become highly sophisticated, often targeting the most vulnerable individuals—especially senior citizens and first-time internet users. While automated security software catches some threats, the ultimate line of defense is human awareness. We wanted to move away from boring, text-heavy cybersecurity guides and build a hands-on, safe sandbox. ThinkTwice was inspired by the idea that the best way to learn how to spot a scam is to experience it risk-free, receive immediate feedback, and build the critical habit of pausing to think twice before clicking.

What it does

ThinkTwice is an interactive, gamified scam awareness simulator containing 15 real-world digital scenarios.

Diverse Scenarios: Users are confronted with simulated SMS phishing alerts, fake cryptocurrency transfers, predatory instant loan apps, government impersonators, and fraudulent tech support alerts.
Legitimate Prompts: To teach contextual judgment, the simulator includes legitimate scenarios (like official multi-factor authentication or app permission requests) so users learn when it is safe to proceed.
Instant Inline Feedback: Upon selecting an option, the screen dynamically highlights the correct and incorrect answers and displays an explanation card with red flags or safety indicators on the spot.
Gamified Progress & Reports: Users earn specific milestone badges as they build their streak and accuracy, and can download a clean, print-friendly PDF report summarizing their performance.

How we built it

We built ThinkTwice using a modern web development stack:

React 18 & Vite: For a lightning-fast single-page application structure and quick hot-module reloading during development.
Framer Motion: Integrated to power micro-animations, slide-ins, and button state transitions.
Vanilla CSS Custom Tokens: Formulated a tailored design system using custom CSS variables, glassmorphic card layouts, responsive grids, and vibrant dark-mode color palettes.
jsPDF: Integrated to compile and build client-side PDF reports dynamically from user state variables.

Challenges we ran into

Avoiding "Answer Predictability": Initially, correct options tended to cluster on the same button choice. We refactored the simulations data layer to ensure dynamic option ordering and mixed answer placements.
Smooth UX Navigation: Jumping between a challenge screen and an explanation page created jarring transitions. We redesigned the logic to render explanations and interactive button feedback inline on the challenge card, creating a seamless single-screen flow.
PDF Font Rendering & Unicode Bugs: Standard PDF builders often crash or display broken characters when rendering Unicode symbols like checkmarks (✓, ✗) under default fonts. We worked around this by building a clean, ASCII-compatible report format.

Accomplishments that we're proud of

Premium Visual Design: Built a stunning dark-theme interface with sleek neon highlights, responsive badge grids, and interactive mockup previews (SMS, UPI, Browser screens) that feel like real applications.
Zero Friction Flow: Succeeded in implementing a side-by-side challenge UI that displays real-time inline evaluation without shifting the layout or requiring excessive scrolling.
Performance: Optimized the build to bundle in under 1.5 seconds, ensuring instant loading speeds for the end-user.

What we learned

State Batching: Learned how to batch state updates inside custom hooks to prevent race conditions when checking and awarding multiple achievements simultaneously.
Accessibility-First Design: Learned the importance of typography scaling and touch-target sizes, ensuring buttons are easy to click and text remains comfortably readable at a 16px base size.

What's next for ThinkTwice

Crowdsourced Scam Database: Allow users to upload screenshots of suspicious messages they receive, which can be automatically converted into new mockups for the community to solve.
Localization: Adding audio-narrated scenarios and multiple regional languages to expand accessibility to rural and less tech-literate populations.
AI-Powered Scenarios: Integrating LLM agents to dynamically generate customized dialogue scripts based on trending scam techniques.