SignalSafe

• 

  App in motion

Inspiration

Scams increasingly look like official messages from benefits offices, employers, landlords, banks, debt collectors, or government agencies. For older adults, immigrants, job seekers, renters, and people with lower digital literacy, these messages can create panic. We wanted to build something that helps users slow down, understand the warning signs, and verify safely before they click, pay, or share personal information.

What it does

SignalSafe lets users paste suspicious text or upload a screenshot of an official-looking message. The app returns a plain-language safety report with:

• a Low / Medium / High risk level
• warning signs in the message
• what not to do
• safe next steps
• a verification script
• trusted verification advice

It also includes accessibility-focused features like Spanish support, simple-language mode, larger text, high contrast, dark/light/system appearance, read-aloud support, and locally saved results for spotty connectivity.

How we built it

We built SignalSafe with React, TypeScript, Vite, Tailwind CSS, Google Gemini, Google AI Studio, and Vercel. The frontend sends text or image analysis requests to a Vercel serverless API endpoint, which keeps the Gemini API key server-side. We used structured AI output so the app returns consistent safety reports instead of vague chatbot responses.

We also used localStorage to save user settings and previous results, and the Web Speech API for read-aloud support.

Challenges we ran into

The biggest challenge was safely moving from a Google AI Studio prototype to a public Vercel deployment. Early versions called Gemini directly from the browser, which caused missing-key errors and would not be safe for a public repo. We migrated the Gemini logic to a server-side API route so the key stays hidden.

We also ran into accessibility edge cases, including text scaling not affecting nested Tailwind classes and Spanish UI strings needing proper localization. Another challenge was making the app cautious: SignalSafe should not claim it can prove something is fake. It should help users identify warning signs and verify through official channels.

Accomplishments that we're proud of

We’re proud that SignalSafe is more than a generic scam checker. It is designed around vulnerable users receiving scary, official-looking messages on their phones.

We’re also proud of:

• secure server-side Gemini integration
• structured risk reports
• screenshot and text analysis
• Spanish support
• simple-language mode
• read-aloud support
• high contrast and text scaling
• saved results for spotty connectivity
• a clear demo flow from scary message to safe action plan

What we learned

We learned that the product is not just about identifying scams. The real value is helping people understand what a message is asking them to do, why that might be risky, and how to verify safely.

We also learned that accessibility cannot be treated as polish. Language, reading level, text size, contrast, and audio support directly affect whether the people we are building for can use the product.

Technically, we learned how important it is to separate prototype convenience from production safety, especially around API keys and client-side AI calls.

What's next for SignalSafe

Next, we would improve screenshot reliability, expand language support beyond English and Spanish, and add more trusted verification guidance for common categories like benefits, housing, jobs, banking, and debt collection.

Longer term, SignalSafe could partner with libraries, senior centers, workforce programs, benefits navigators, banks, municipalities, and digital-literacy nonprofits. The goal is to keep the app free for individuals while sustaining it through institutional partnerships and measurable impact, such as helping users avoid unsafe links, verify through official channels, and build digital confidence.

Built With

• google-ai-studio
• google-gemini
• react
• tailwind-css
• typescript
• vercel
• vite
• webspeechapi