• 

  Landing Page

SurfSafe– Surf safely in the net

Inspiration

We were inspired by the alarming rise in phishing attacks and digital scams targeting young students, many of whom aren’t properly trained to recognize threats. Despite being digital natives, high school and university students are often unaware of basic cybersecurity practices. We wanted to make learning these skills both fun and impactful.

What it does

SurfSafe is a web-based platform that teaches young users how to stay safe online through:

• Phishing detection games (simulate an inbox and identify fake emails)
• Interactive quizzes on online safety best practices
• Mini-animated comic stories about common scams and how to avoid them
• A scoring system and personalized feedback to encourage progress

How we built it

• Frontend: React.js with TailwindCSS for responsive design
  
• Authentication: Django for users management
• Animations: Lottie and GSAP for interactive illustrations and fun transitions
  
• Data handling: LocalStorage to save progress
  
• Content: Custom-designed quizzes, realistic phishing simulations, and comic-style storytelling

Challenges we ran into

• Crafting fake emails that felt realistic but didn’t encourage dangerous behavior
  
• Making the UI both educational and enjoyable for a teenage audience
  
• Managing game logic, scoring, and quiz state in a simple and efficient way
  
• Balancing performance with animated content and responsiveness

Accomplishments that we're proud of

• Creating a safe, gamified environment for learning digital security
  
• Designing an intuitive and fun user experience for a younger demographic
  
• Combining technology and storytelling to address a real-world problem
  
• Seeing our test users improve their awareness and quiz scores over time

What we learned

• Cybersecurity education can be made engaging through games and visual storytelling
  
• User-centered design is key when targeting specific age groups
  
• Even simple tech stacks can have a powerful impact with the right message
  
• Collaboration across design, dev, and content creation yields better results

What's next for SurfSafe

• Expanding content to cover topics like password hygiene, privacy, and cyberbullying
  
• Adding a leaderboard and badge system for schools and classrooms
  
• Translating the platform into multiple languages for broader reach
  
• Partnering with educational institutions to integrate PhishGuard into curricula
  
• Integrate IA for personalizing the courses

Built With

• django
• github
• react
• render
• versel