ScamShield

Here is a draft for your Devpost submission based on your project's architecture, target audience, and goals. You can tweak it to match your exact experience!

Inspiration Online scams are becoming increasingly sophisticated, and vulnerable populations—particularly seniors—are disproportionately targeted. We noticed a lack of interactive, safe environments where people could actually practice identifying these threats. We were inspired to build ScamShield to bridge this gap, creating a platform where users can learn to spot red flags in a risk-free, engaging way before they encounter them in the real world.

What it does ScamShield is an educational web application that gamifies the experience of identifying online scams. Users are presented with a variety of pre-seeded, real-world scenarios, such as phishing emails, fake SMS delivery alerts, and suspicious investment offers.

When a user makes a decision on how to respond, the app uses an underlying AI engine to provide a detailed, context-aware explanation of why their choice was safe or risky, highlighting specific red flags in the scenario. To encourage continued learning, users earn points for correct identifications and can track their progress on a global leaderboard.

How we built it We adopted a modern full-stack architecture to ensure scalability and a smooth user experience:

Frontend: Built with Next.js, React, and Tailwind CSS, focusing heavily on creating a clean, highly accessible, senior-friendly user interface. It is hosted on Vercel for fast edge delivery. Backend: Powered by Node.js and Express, dockerized and deployed on a Google Cloud Platform (GCP) Virtual Machine. Database: We utilized PostgreSQL (Neon DB) to securely store user accounts (using JWT/bcrypt authentication), leaderboard scores, and our database of scam scenarios. AI Integration: We integrated the OpenAI API into our Node backend to dynamically generate educational, easy-to-understand explanations for every scenario. Challenges we ran into One of our primary technical hurdles was bridging our deployment environments. Establishing secure, stable communication between a serverless Vercel frontend and a dedicated GCP backend required careful configuration of CORS boundaries, Next.js proxies, and SSL certificates.

From a product perspective, tuning the AI-powered explanations to consistently output helpful, non-technical advice suitable for an older demographic took several iterations. We also had to thoughtfully design the UI to ensure it was intuitive and not overwhelming.

Accomplishments that we're proud of We are incredibly proud of successfully orchestrating a robust full-stack deployment across Vercel and GCP during the time constraints of a hackathon.

Seeing the AI explanation engine seamlessly provide immediate, educational value to users is highly rewarding. Furthermore, building a functional, secure authentication system and live leaderboard from scratch to gamify the learning process was a major win for the team.

What we learned We gained significant hands-on experience in cloud infrastructure, particularly in configuring GCP firewall rules, Docker containers, and database connections with Neon. We also deepened our understanding of prompting and integrating LLM APIs in real-time educational contexts, and we learned valuable lessons in prioritizing accessibility and user-centric design.

What's next for ScamShield In the future, we plan to expand our scenario database to include emerging threats, such as AI voice-cloning scams and cryptocurrency fraud. We also aim to introduce a "Real-World Scanner" feature, allowing users to safely paste suspicious links or text messages they receive in their daily lives to get an instant AI analysis of potential red flags.

Built With

• css
• docker
• express.js
• google-cloud
• html
• javascript
• neon
• next.js
• node.js
• openai-api
• postgresql
• react
• tailwind-css
• typescript
• vercel