Inspiration
We've all seen it: a confusing email from an unknown sender urging "immediate action," or a family member struggling to understand the dense fine print of a contract. In a world where financial and legal documents are deliberately complex, the most vulnerable among us are often the primary targets for scams.
Our inspiration for ScamShield AI came from a desire to level the playing field. We wanted to build a digital guardian that could instantly translate confusing jargon and shine a bright light on the red flags hidden in complex text. For Bay2BayHacks, we weren't just building an app; we were building an accessible, privacy-first tool for empowerment, designed to protect people's savings, peace of mind, and dignity.
What it Does
ScamShield AI is a powerful, hybrid-intelligence web application that serves as a safety net for any text-based document. It operates in two distinct modes to offer both immediate protection and advanced analysis:
Local Analysis (Default Mode): Out-of-the-box, the app uses a fast, local pattern-based engine to scan for common scam keywords, suspicious phrasing, and known red flags. This provides an instant baseline of protection for all users, without requiring any setup.
AI-Enhanced Analysis (Advanced Mode): Users can unlock the full power of the application by adding their own free Google AI API key. When activated, the app sends the text to Google's Gemini 1.5 Flash model for a deep, contextual analysis that understands nuance far beyond simple patterns. This mode provides a comprehensive breakdown:
- A Detailed Summary: Translates complex jargon into simple, plain English.
- Contextual Red Flag Detection: Identifies sophisticated tactics, emotional manipulation, and subtle inconsistencies.
- An Intelligent Risk Score: Generates a highly accurate risk rating with a clear explanation for its reasoning.
The interface always makes it clear which mode is active, ensuring the user is in full control of their data and the level of analysis they receive.
How We Built It
Our architecture was designed around a core philosophy: privacy, power, and accessibility.
Project Management & AI-Powered Workflow with Taskade: Before writing a single line of code, we established Taskade as our central nervous system. We used its mind maps to outline our hybrid AI logic, a Kanban board to manage our two-week sprint, and its AI Agents to accelerate research on fraud detection patterns and draft user-facing instructions.
A Hybrid AI Engine:
- Local Engine: The default analysis is powered by a lightweight, client-side engine built with JavaScript. It uses a curated list of regular expressions and patterns to provide instant, offline-capable analysis.
- Google AI Integration: For enhanced analysis, we integrated the Google Gemini 1.5 Flash API. We used Google AI Studio to engineer a sophisticated, structured prompt that forces the model to return a reliable JSON object, and configured the safety settings to allow for the analysis of deceptive content.
- Graceful Fallback: The system is robust. If the API call fails for any reason, the application seamlessly and automatically falls back to the local analysis engine, ensuring the user always gets a result.
Privacy-First API Key Management: User trust is paramount. The user's Google AI API key is stored exclusively in the browser's
localStorage. It is never sent to our servers, ensuring complete user privacy and control.Full-Stack Architecture:
- Frontend: A dynamic and responsive single-page application built with React.js and styled with Tailwind CSS. The UI includes a clear settings panel for API key management and visual indicators, like purple "AI Enhanced" badges, to show the current analysis mode. All initial UI/UX flows were prototyped in Figma.
- Deployment: The application is deployed on Vercel for continuous integration and seamless hosting.
Challenges We Ran Into
Balancing Accessibility and Power: Our biggest challenge was deciding how to offer a state-of-the-art AI tool without incurring massive server costs or forcing users into a subscription. The solution was our hybrid, "bring-your-own-key" model. This provides a free, useful baseline for everyone, while empowering advanced users to leverage the free tier of Google's powerful API at no cost to us or them.
Creating a Seamless UX for a Dual-Mode System: It was critical to ensure the user always understands what's happening. We spent significant time designing clear visual cues—from the "AI Analyzing..." loading state to the persistent "AI Enhanced" badges—to make the transition between local and cloud analysis feel intuitive and transparent.
Accomplishments that We're Proud Of
We are incredibly proud of the thoughtful, user-centric architecture we designed. The hybrid model is a significant accomplishment, offering a robust, private, and scalable solution. We successfully built an application that feels like a premium product while remaining completely free and accessible. The privacy-first API key management system is a feature we believe should be standard in modern web applications.
What We Learned
This project was a deep dive into building responsible AI applications. We learned that the best technical solution is often one that prioritizes the user's privacy and autonomy. We moved beyond simple API calls to implement a resilient, dual-mode system, gaining valuable experience in error handling, state management, and creating an intuitive user experience for complex technical features.
What's Next for ScamShield AI
The hybrid architecture opens up exciting possibilities for the future:
- Browser Extension: Develop a browser extension that uses the same local storage for the API key, allowing for one-click analysis of emails and web pages directly in the browser.
- Community-Sourced Patterns: Allow users to submit new patterns for the local analysis engine, creating a crowdsourced, ever-improving baseline of protection.
- OCR Integration: Incorporate an image-to-text module so users can simply take a photo of a physical document to have it instantly analyzed by their preferred engine.
Built With
- browser-localstorage
- css3
- express.js
- figma
- google-ai-studio
- google-gemini-1.5-flash-api
- javascript
- node.js
- pdf.js
- react.js
- tailwind-css
- taskade.com
- taskadehosting
Log in or sign up for Devpost to join the conversation.