Interactive scam-awareness training that helps seniors spot fraud before it costs them. Practice on realistic simulations (emails, calls, texts, social DMs), learn the red flags, and get one-tap crisis help — all in the browser, no account, no data collection.
Live: scamsavvy.jacobj.io
Built to put a small dent in a real problem: older adults lose billions to scams every year, largely because the scams are designed to look legitimate. ScamSavvy builds the pattern-recognition that warnings alone can't.
ScamSavvy shows realistic scam scenarios rendered as the real thing — a Gmail inbox, an iPhone text, a WhatsApp message, a Facebook DM — and asks: scam, or real? After each answer it explains the red flags (or the legitimate trust signals), so users build instinct over time instead of memorizing rules.
| Feature | Description |
|---|---|
| 89 practice scenarios | Emails, phone calls, texts, and social DMs — phishing, AI deepfakes, crypto fraud, QR-code scams, and more |
| Realistic simulations | Pixel-faithful Gmail / Outlook / iPhone / Android / WhatsApp / Instagram / Facebook recreations |
| Adaptive difficulty | Starts easy; unlocks medium at 70% accuracy (3+ attempts), then hard |
| Progress tracking | Per-category accuracy, streaks, and personalized next steps |
| 10 lessons | Step-by-step guides on phishing, social engineering, urgency tactics, and more |
| Crisis help | One-tap hotline numbers and action plans for an active scam |
| Accessibility first | Large text, high contrast, reduced motion, read-aloud, screen-reader support — designed for the intended audience |
| Private by design | 100% client-side with localStorage. No server, no database, no login, no tracking. |
ScamSavvy was designed and built with heavy use of AI coding agents (Claude + Manus) — scenario drafting, UI scaffolding, and rapid iteration. That's deliberate: shipping real, accessible, well-structured software quickly with AI is core to how I work today. The judgment stayed human — the accessibility-first UX for seniors, the adaptive-difficulty model, the scenario red-flag design, and a review of what shipped. It's a small, honest example of using AI to go from idea to a live, useful product fast.
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build | Vite 7 (static output) |
| Styling | Tailwind CSS 4 |
| Routing | Wouter |
| Animation | Motion |
| Icons | Lucide React |
| Hosting | Cloudflare Pages (static CDN) |
No backend, no database — the whole app is a static dist/ folder.
pnpm install
pnpm dev # http://localhost:3000
pnpm build # outputs to dist/
pnpm preview # preview the production build
pnpm check # TypeScript type checkingCloudflare Pages auto-deploys on push to main:
- Build command:
pnpm install && pnpm build - Output directory:
dist - Node.js compatibility: 22
To host elsewhere, run pnpm build and upload dist/ to any static host (Netlify, Vercel, GitHub Pages, S3, nginx, …).
client/src/
├── components/
│ ├── screens/ # Welcome, PracticeMenu, Lesson, ProgressDashboard, HelperHotline, ...
│ ├── simulations/ # Gmail / Outlook / iPhone / Android / WhatsApp / Instagram / Facebook
│ └── ui/ # Button, Card, Dialog (shadcn/ui)
├── contexts/
│ ├── GameContext.tsx # State + localStorage persistence
│ ├── AccessibilityContext.tsx
│ └── ThemeContext.tsx
├── data/
│ └── scenarios.ts # 89 scenarios + adaptive-difficulty engine
└── main.tsx
Each scenario in client/src/data/scenarios.ts follows:
{
id: 'unique-id',
difficulty: 'easy' | 'medium' | 'hard',
verdict: 'scam' | 'real',
// type-specific fields (sender, subject, body, ...)
clues: ['Red flag 1', 'Red flag 2'],
explanation: 'Why this is a scam / why it is legitimate',
}Add to the matching array (emailScenarios, callScenarios, textScenarios, socialMediaScenarios), run pnpm check, and push.
MIT © 2026 Jacob A. I. Johnson. Educational content only — the app collects no personal data; all progress stays in your browser.