PhishPhantom

• 

  dummy logos

• 

  dummy logos

• 

  dummy logos

Inspiration

The inspiration behind this project came from witnessing the increasing number of online scams and phishing attacks targeting users of all ages and backgrounds. With cyber threats becoming more sophisticated, I wanted to create an accessible tool that empowers everyone to check the safety of links and emails before interacting with them. By combining intuitive design, real-time analysis, and educational features, my goal is to help users build confidence in their digital decisions and foster a safer online community.

What it does

This application serves as a comprehensive anti-phishing and cybersecurity toolkit, providing users with a seamless and visually appealing interface. It features a modern glassmorphism design, supports both dark and light modes, and offers easy navigation through a responsive navbar and footer. Users can scan links for phishing threats, review their scan history with timestamps, access privacy information, contact support, and explore additional tools like password checking, email scam detection, and cybersecurity quizzes. The app ensures a user-friendly experience with real-time notifications and adapts its appearance based on the selected theme, making online safety accessible and engaging for everyone.

How we built it

I built this application using React for a fast, interactive, and component-driven user experience. Routing is handled with React Router, enabling smooth navigation between features like phishing scans, scan history, password checking, and more. We implemented dark and light themes with persistent user preferences using localStorage and dynamic CSS. For a modern look, we used a glassmorphism-inspired background and responsive layouts with utility-first CSS. User notifications are managed with React Toastify, and all text is internationalized with i18next for accessibility. The app’s modular structure allows for easy expansion, and all scan data is securely stored in the browser, ensuring privacy and performance without a backend. This approach enabled us to deliver a secure, user-friendly, and visually appealing cybersecurity toolkit.

Challenges we ran into

During development, we encountered several challenges. Integrating real-time phishing detection while maintaining user privacy required careful handling of scan data and local storage. Ensuring a seamless user experience across both dark and light modes involved fine-tuning styles and testing on different devices. Implementing internationalization with i18next introduced complexities in managing translations and dynamic content. We also faced hurdles in designing a visually appealing glassmorphism effect that didn’t impact performance. Debugging issues with data consistency—especially around scan history and time zones—required extra attention to detail. Despite these challenges, we iterated on our solutions to deliver a secure, responsive, and user-friendly application

Accomplishments that we're proud of

We’re proud to have built a user-friendly and visually appealing cybersecurity tool that makes phishing detection accessible to everyone. Successfully implementing seamless dark and light mode support, a modern glassmorphism interface, and real-time notifications enhanced the overall user experience. Integrating multiple features—such as scan history with timestamps, password and email scam checkers, and educational modules—within a single cohesive app was a significant achievement. We also ensured that user data remains private by handling all scan history locally. Overcoming challenges in internationalization and responsive design, we delivered a robust, intuitive, and secure platform that empowers users to stay safe online.

What we learned

Learned and implemented REACT concepts

What's next for PhishPhantom

To build a mobile app for the same To add more features regarding cyber-security and threat To make more appealing ui/ux for the website and many more

Built With

• css3
• i18n
• javascript
• react
• tailwind
• web