PhishTrainer

• 

  Starting Screen

• 

  Main Inbox Screen

• 

  Help Screen

• 

  Feedback Example

• 

  Final Assessment Screen

Inspiration

As a Computer Science student pursuing a future career in cybersecurity, my goal is to eventually work in the federal government and help protect people and organizations from evolving digital threats. One of the most important lessons I have learned throughout my studies is that cybersecurity is a field of lifelong learning. New threats emerge constantly, and staying effective requires continuous education and awareness.

While technical security controls are important, most successful attacks still rely on human error. Phishing remains one of the most common attack methods because it targets people rather than systems. This inspired me to create PhishTrainer, an educational platform designed to help users develop stronger digital literacy skills by learning how to recognize phishing attempts in a safe and engaging environment.

What It Does

PhishTrainer simulates a realistic email environment inspired by platforms such as Outlook and Gmail. Users work through a series of ten emails and determine whether each message is legitimate or a phishing attempt.

After every decision, users receive immediate feedback from Vader, a cybersecurity training cat inspired by my very own black cat. Vader explains exactly why an email was safe or malicious and highlights the indicators that users should have noticed. This transforms the experience from a simple quiz into an interactive learning tool.

At the end of the training session, users receive a final score along with personalized recommendations to help strengthen their cybersecurity awareness.

How I Built It

PhishTrainer was built as a React and TypeScript web application using Vite and Tailwind CSS. The application follows a guided educational workflow:

• Select a difficulty level.
• Analyze realistic email scenarios.
• Classify emails as Real or Fake.
• Receive educational feedback after each decision.
• Complete all ten scenarios.
• Receive a final assessment and recommendations.

Challenges I Faced

One of the biggest challenges was balancing realism with accessibility. The emails needed to feel authentic enough to teach meaningful phishing indicators while remaining understandable for users with varying levels of cybersecurity knowledge.

Another challenge was preventing feature creep. During development, there were many opportunities to add additional functionality and tools, but I think maintaining a focused educational experience was more important than creating unnecessary complexity. Prioritizing the learning experience helped keep the application simple, intuitive, and approachable.

What I learned

This project reinforced the importance of user-focused design in cybersecurity education. Security awareness training is most effective when users actively engage with realistic scenarios rather than passively consuming information.

I also learned how AI-assisted development tools can dramatically accelerate prototyping and application development. While AI helped streamline the implementation process, translating an idea into a polished educational experience still required planning, iteration, testing, and problem solving.

Most importantly, I learned that cybersecurity education does not have to be intimidating. By combining realistic phishing simulations and a memorable guide character like Vader, learning can become more engaging and accessible for users of all experience levels.

Built With

• api
• beginner
• copilot
• css
• gemini
• react
• tailwind
• typescript
• vite