Scam Scanner

• 

  Home Page

Inspiration

💡 What inspired me

With the rapid rise of sophisticated phishing attacks, fake banking sites, and clever social engineering scams, traditional spam filters are no longer enough. I noticed that users are most vulnerable in two places: their email inbox and while randomly browsing the web. I was inspired to build Scam Scanner—a seamless, universal shield that protects users proactively exactly where they need it most, before they even click a malicious link.

⚙️ How I built it

The project is built as a complete security ecosystem:

• The Frontend: A highly interactive, glassmorphic web application built with React and Vite, featuring fluid animations powered by Framer Motion.
• The Backend (Serverless Edge): I engineered a globally distributed backend using Cloudflare Pages Functions. This ensures zero-latency API responses anywhere in the world. I integrated Cloudflare KV (Key-Value) to permanently and rapidly store scanning statistics.
• The Brains: The core detection engine combines the Google Safe Browsing API with custom heuristic pattern-matching algorithms to analyze suspicious domains and parse deceptive email bodies.
• The Browser Extension: A custom Chrome Extension (Manifest V3) that injects a "Hover Shield" directly into the DOM. It silently pre-scans links when the user hovers over them and scans email bodies in web clients (like Gmail/Outlook) in real-time.

🚧 Challenges I faced

1. Serverless Architecture Migration: Transitioning from a traditional stateful Node.js/Express server to a stateless Cloudflare Edge Functions environment required a complete architectural redesign. I had to learn how to properly bind and interact with Cloudflare KV to maintain state (like scan statistics).
2. Dynamic DOM Manipulation: Building the Chrome Extension to reliably detect and highlight phishing emails inside complex, dynamically loading web apps (like Gmail) without breaking the native UI was highly challenging. It required precise MutationObservers and careful event handling.
3. F12 / Source Protection: Securing the frontend source code from being easily inspected or reverse-engineered by malicious actors required advanced Vite configuration (disabling source maps) and custom anti-debugging scripts in the browser.

🧠 What I learned

• I gained deep expertise in Cloudflare's serverless ecosystem, learning how to write scalable Edge Functions and manage KV namespaces.
• I mastered the modern Chrome Extension Manifest V3 security policies, cross-origin resource sharing (CORS), and content script injection.
• I learned how to balance extreme performance with highly aesthetic UI design, ensuring the app feels both premium and lightning-fast.

What it does

How I built it

Challenges I ran into

Accomplishments that I'm proud of

What I learned

What's next for Scam Scanner

Built With

• chrome
• cloudflare-kv
• cloudflare-pages
• cloudflare-workers
• css3
• framer-motion
• google-safe-browsing-api
• javascript
• vite