PhishGuard

logo
log in page
about page
generated email page
incorrect answer page
profile page
leaderboard page
resources pages

Inspiration

With over 90% of data breaches starting from phishing emails, we wanted to build something that helps people recognize digital threats before they click. Traditional awareness training is often dull and forgettable, so we set out to make learning interactive, visual, and empowering, turning cybersecurity education into an engaging experience.

What it does

PhishGuard is a phishing awareness simulator where users examine realistic emails and decide if they’re legitimate or malicious. The app gives instant feedback, explains key warning signs, and offers recap videos and quizzes after repeated mistakes, helping users build real-world intuition through practice.

How we built it

We used Next.js 16, TypeScript, Supabase for authentication and database management, and Tailwind UI for design. We explored Azure AI Studio, OpenAI GPT API, and AWS Bedrock to dynamically classify and generate phishing examples. After testing performance and cost, we selected AWS Bedrock for its scalability and secure integration.

Challenges we ran into

The hardest engineering work wasn’t the UI, it was making the simulator feel real and reliable.

Training AWS Bedrock to generate credible phishing emails required an iterative pipeline of prompt engineering, curated examples, and safety filtering. We experimented with few-shot prompts, structured metadata (sender, subject, urgency level), and post-generation heuristics to filter hallucinations or unsafe outputs. That process taught us to treat the model like a collaborator, scaffold it with context, sample multiple generations, and apply lightweight classifiers before showing anything to users.

At the same time, maintaining consistent Supabase sessions across routes in Next.js was a major challenge. We had to reconcile server-side checks (supabase.auth.getUser() in server components and middleware) with client-side listeners (onAuthStateChange) to ensure authentication, consent gating, and leaderboard data stayed in sync. Debugging session race conditions led us to centralize auth logic through shared utilities and middleware guards, surface clear session-loading states in the UI, and handle disconnects gracefully.

Together, these efforts made PhishGuard both technically robust and pedagogically safe, delivering realistic phishing content without risk, and a seamless experience that never leaves users stranded between pages.

Accomplishments that we're proud of

We’re proud of how PhishGuard evolved from a simple concept into a fully functional, full-stack cybersecurity simulator. We built a responsive and elegant UI that not only looks professional but guides users through realistic phishing scenarios in a way that’s intuitive and engaging.

One of our biggest achievements was integrating Supabase authentication and database management seamlessly across pages, allowing secure logins, session persistence, and personalized progress tracking. The leaderboard system was another major milestone, it transforms learning into a friendly competition, motivating users to improve their phishing-detection accuracy over time.

Perhaps the most technically rewarding accomplishment was training AWS Bedrock to dynamically generate diverse phishing examples. By carefully designing prompts, metadata, and safety filters, we created a content engine capable of simulating convincing phishing attempts without compromising ethical or security standards.

We successfully built a platform that blends AI innovation, educational psychology, and thoughtful design, helping users become safer, more confident digital citizens.

What we learned

Beyond cloud integration and front-end engineering, we learned how deeply behavioral design shapes effective security education. Users retain knowledge best when learning feels safe, interactive, and rewarding, not punitive or fear-driven. Designing feedback that teaches rather than scolds made a huge difference in engagement. We also discovered how crucial user flow consistency and trustworthy visuals are when teaching security, a calm, intuitive interface reinforces confidence and focus. On the technical side, we gained valuable experience integrating Supabase authentication, managing state across protected routes, and leveraging AWS Bedrock for dynamic, responsible content generation.

What's next for PhishGuard

Next, we plan to expand PhishGuard into a collaborative training platform for schools and organizations. We’ll introduce team-based challenges, custom phishing campaigns, and AI-powered difficulty adjustment so users can continuously improve in realistic scenarios. We also aim to enhance accessibility and localization, making cybersecurity education engaging and effective for users worldwide.