PhishTrainer AI

Inspiration

Phishing attacks are one of the most common and dangerous cybersecurity threats, costing billions annually and affecting millions of users worldwide. Traditional security awareness training is often boring, static, and ineffective - users memorize specific examples rather than learning to identify the underlying patterns of phishing.

I was inspired by Duolingo's approach to language learning - making education engaging through gamification, adaptive difficulty, and bite-sized lessons. I wondered: what if we could apply the same principles to cybersecurity education? What if learning to detect phishing could be as addictive as playing a game?

The challenge was to create an educational tool that leverages AI to transform how people learn cybersecurity, making it personalized, adaptive, and genuinely engaging.

What I Learned

Building PhishTrainer AI taught me several valuable lessons:

AI Integration: I learned how to effectively integrate AI APIs (Groq) into a web application for dynamic content generation. The AI generates unique phishing scenarios tailored to each user's skill level, making every training session fresh and challenging.

Adaptive Algorithms: I developed algorithms that adjust difficulty based on user performance, tracking skill levels across different phishing categories (credential harvesting, malware, social engineering, business email compromise).

Gamification Design: I learned how to design effective gamification systems with XP, levels, streaks, and skill progression that truly motivate users to continue learning.

State Management: I gained experience managing complex application state with React Hooks and LocalStorage persistence, ensuring user progress is saved and accessible.

Next.js 16: I worked with the latest Next.js version and its App Router, learning about breaking changes like the new params Promise handling in route handlers.

How I Built It

Tech Stack:

• Frontend: Next.js 16 with App Router, React, TypeScript, Tailwind CSS
• AI/ML: Groq API for dynamic scenario generation and personalized feedback
• State Management: React Hooks with LocalStorage for progress persistence
• Authentication: Custom auth system for user accounts

Architecture: The project follows a professional folder structure:

• src/components/ui/ - Reusable UI components (Sidebar)
• src/components/features/ - Feature-specific components (Dashboard, TrainingInterface, Leaderboard)
• src/lib/ai/ - AI prompt generation and integration
• src/lib/data/ - Static scenario database as fallback
• src/lib/progress/ - User progress and gamification logic
• src/lib/auth/ - Authentication system
• src/types/ - Centralized TypeScript interfaces

Key Features:

1. AI Scenario Generation: The /api/generate-scenario endpoint sends user progress data to Groq API, which generates unique phishing or legitimate scenarios based on type, difficulty, category, and user skill levels.

2. Adaptive Difficulty: The progress manager tracks performance across categories and adjusts difficulty (beginner/intermediate/advanced) based on accuracy and skill levels.

3. Personalized Feedback: The /api/generate-feedback endpoint generates AI-powered explanations, scores, and improvement tips based on user answers and selected suspicious parts.

4. Gamification: Users earn XP based on difficulty and speed, level up through XP milestones, maintain daily streaks, and track skill progression across categories.

Challenges I Faced

Next.js 16 Breaking Changes: The biggest challenge was adapting to Next.js 16's breaking changes, particularly the new params handling in route handlers where params is now a Promise that must be awaited. I had to update all API routes to handle this correctly.

AI API Integration: Integrating Groq API required careful prompt engineering to ensure the AI generates realistic, educational scenarios that are challenging but solvable. I had to iterate on prompts multiple times to get the right balance of difficulty.

Fallback System: Since AI APIs can be unreliable or rate-limited, I implemented a robust fallback system with static scenarios. This ensures the app remains functional even when AI generation fails.

Type Safety: Centralizing TypeScript interfaces in a dedicated types folder and ensuring all imports were correct after reorganizing the folder structure was challenging but resulted in a much cleaner codebase.

State Persistence: Managing user progress with LocalStorage while ensuring the app works on both client and server sides required careful handling of window checks and proper state management.

Future Improvements

• Add more AI providers (OpenAI, Hugging Face) as options
• Implement multiplayer leaderboard with real backend
• Add more phishing categories and scenario types
• Create mobile app version
• Add achievement system and badges
• Implement spaced repetition for long-term learning

Built With

• artificial-intelligence
• cybersecurity
• education
• gamification
• groq
• machine-learning
• nextjs
• react
• tailwindcss
• typescript
• web-app