Phish Heist

• 

  Phish Heist homepage where users begin their mission to identify phishing attempts and protect the digital vault.

Inspiration

Phishing attacks are one of the most common cybersecurity threats, but learning how to recognize them can sometimes feel repetitive or overly technical. We wanted to create something that would make cybersecurity awareness more interactive and engaging. That idea became Phish Heist, a heist-themed phishing awareness game where players act as cybersecurity agents protecting a digital vault. Players review different messages, determine whether they are legitimate or phishing attempts, and receive immediate feedback explaining the warning signs they should look for. Our goal was to turn phishing education into something that feels more like a game than a lesson.

What it does

Phish Heist presents users with a series of phishing-awareness scenarios. For each scenario, players review details such as the sender, subject line, message, and links before deciding whether the message is Phishing or Legitimate. The game tracks the player's progress and provides feedback after each decision so users can understand why a message may be suspicious. Players must successfully work through all six messages while protecting the digital vault.

How we built it

We built Phish Heist using HTML, CSS, and JavaScript. Our team divided the project based on our strengths while still helping each other throughout development. One team member focused primarily on the front-end design, including the homepage, game interface, buttons, layout, and overall visual experience. Another team member worked heavily on the JavaScript functionality and game logic. I contributed through JavaScript development, testing, debugging, CSS adjustments, and integrating different parts of the project together. A large part of my role involved continuously testing the game, identifying problems, helping troubleshoot them, and making sure the front-end and JavaScript worked correctly once everything was combined. Altogether, we spent roughly 20 hours building, testing, debugging, and integrating the project.

Challenges we ran into

Surprisingly, one of our biggest challenges was not the game itself — it was learning how to collaborate effectively using Git and GitHub. At the beginning, we tried using Live Share so that everyone could work together, but we quickly realized that it was not the best solution for how we wanted to manage the project. We needed all three team members to have their own copy of the project while still being able to contribute to the same codebase.

We spent close to seven hours learning how to properly clone the repository, pull changes, commit our work, push updates, and make sure everyone stayed on the same version of the project. There were moments where files did not match, changes were missing, or we were unsure whose version should be used. Eventually, through a lot of trial and error, we developed a workflow where everyone could pull the newest version before working, make their changes, push them to GitHub, and keep the repository synchronized. Once we figured that out, our development process became significantly smoother.

Accomplishments that we're proud of

One of our biggest accomplishments was simply seeing the entire project come together after spending so much time troubleshooting both the code and our collaboration process. We successfully created a working game with multiple phishing scenarios, interactive buttons, score tracking, feedback, and a complete heist-themed interface.

We are also proud that we did not give up when our original collaboration method was not working. Learning Git and GitHub while simultaneously trying to finish a hackathon project was frustrating at times, but by the end of the project, all three of us were able to contribute to the same repository and understand the basic workflow much better.

What we learned

This project taught us that building software is about much more than writing code. Technically, we gained more experience with HTML, CSS, JavaScript, debugging, event handling, and connecting front-end elements to game logic. However, one of the biggest things we learned was how important version control and team communication are when multiple developers are working on the same project. Before this project, pushing and pulling code seemed like a small part of development. After spending hours figuring it out, we now understand why Git and GitHub are such important tools for development teams.

We also learned how valuable testing is. A feature may appear complete, but once everything is integrated, unexpected issues can appear. Constant testing helped us identify problems such as screens not appearing correctly, buttons behaving incorrectly, and game logic needing adjustments.

What's next for Phish Heist

In the future, we would like to expand Phish Heist with more phishing scenarios, different difficulty levels, additional cybersecurity challenges, and a larger variety of attacks beyond email phishing.

We could also add features such as a leaderboard, timed missions, randomized scenarios, achievements, and different heist levels. Ultimately, we would like Phish Heist to grow into a larger cybersecurity awareness game that teaches users practical security skills while still being fun to play.

Built With

• css
• html
• javascript