Phish Defender

Phish Defender: a gamified training app that challenges users to spot legitimate vs phishing emails, customisable rounds, accessibility-focused design, and instant feedback for lasting security skills

Comment

Inspiration

In a growingly technologically advancing world, more and more people are getting their first devices, be it phones, tablets, laptops, you name it. Vulnerable groups, like seniors, are easy victims for scammers due to the average senior not being as experienced with technology. While this is merely a simple webapp for now, I hope that something like my project will help educate less technologically familiar people through a more hands-on learning experience.

What it does

Phish Defender presents a series of AI-generated emails, some of which are simulations of trustworthy emails, and the others simulations of phishing emails. Users identify each as "phishing" or "safe", receive instant feedback, and get a summary report at the end of the session.

How I built it

I used React TS alongside SCSS for styling, along with Gemini to generate emails as opposed to using hardcoded ones.

Challenges I ran into

I ran into numerous issues. Gemini used to keep generating emails with the sender address giving away the answer to whether it's safe or phishing implicitly. For example, "scam@phishing.com" as an email address makes it obvious to the user that it's a phishing email. While looking at the sender address is good for getting a good idea on whether the email is legitimate (for example "noreply@quickcart.com" as opposed to "quickcart@verify-now.com"), I do not want to make the answer blatantly obvious to the user as it is unrealistic. I also had an issue with the colourblind and high-contrast modes being lost on refresh and the colourblind and high-contrast options sometimes not working, especially on the starting screen. By making use of localStorage, as long as the localStorage information is still there, the user can refresh the page as many times as they would like and their settings will be saved automatically.

Accomplishments that I'm proud of

  • Simple UX to make it easier to navigate
  • Working out how to use AI to generate emails so I do not have to rely on hardcoded ones
  • Customisability with how many rounds in a game and how many emails in a round, along with the accessibility features of colourblind and high-contrast modes.

What I learned

  • How to set up Gemini to generate emails
  • How to use localStorage
  • How to have colourblind and high-contrast modes to apply instantly and throughout the project
  • How to create popups to provide feedback
  • How to use Vercel to deploy my webapp

What's next for Phish Defender

  • Allow the user to create accounts, whether it's through email and password, their Google account, or Apple account. This way, instead of having to worry about data in localStorage not carrying over devices, I can use a database instead to store data
  • Make the emails generated be generated while taking into account the mistakes the user has made along with what they've done well. If for example they are really good at spotting phishing emails through the sender address, less emails like these will appear, allowing the user to focus on improvement
  • Add a leaderboard for the user to compete with other people
Share this project:

Updates