mySecurity Scam Defender

Inspiration

Online scams are everywhere — from fake WhatsApp messages to phishing emails. I wanted to build a simple tool to help people instantly recognize scam messages and warn them with a clear audio alert, protecting them before they lose money or sensitive info.

How we built it

-Frontend: Built in React + TypeScript with Tailwind CSS for a beautiful, responsive UI. The Lucide React icon set was used for crisp, modern visuals.

-Backend: Used Supabase Edge Functions to create an /api/alert endpoint. This endpoint integrates with the ElevenLabs Text-to-Speech API to generate realistic voice warnings.

-Detection Logic: Implemented a basic scam heuristic on the frontend — any message over 20 characters triggers an alert, with plans to expand into NLP-based analysis.

-Audio: If no ElevenLabs key is present, the backend generates a fallback beep pattern to ensure the audio warning always works.

Challenges

• Handling the ElevenLabs integration to gracefully fallback if the API is unavailable.
• Managing audio object URLs to prevent memory leaks.
• Designing a UI that’s both friendly and conveys urgency when a scam is detected.

What we learned

• How to rapidly prototype secure serverless functions with Supabase.
• Dealing with audio streams and cross-origin responses.
• The power of simple heuristics in scam detection (and where they fail, motivating future improvements).

Built With

• bolt
• elevenlabs
• lucide
• react
• supabase
• tailwind
• typescript
• vite