CyberGuardAI

• 

  Secure authentication gate

• 

• 

• 

• 

• 

• 

• 

Inspiration

Social engineering and phishing remain the deadliest entry points for cyberattacks worldwide. While large enterprises deploy million-dollar defensive walls, everyday users and small teams are left exposed, often unable to spot heavily obfuscated text or subtle domain spoofing.

As a 2nd-year web and mobile development student, I wanted to build more than just a conceptual app. I was inspired to create an intelligent, zero-friction security hub that acts as a real-time advisor, demystifying complex cyber threats and empowering anyone to evaluate their risk before clicking. That is how CyberGuard AI was born.

What it does

CyberGuard AI is a comprehensive, multi-layered Software-as-a-Service (SaaS) security platform built around an intuitive cyber-neon ecosystem. Protected by a secure user login wall, it features a personalized dashboard that monitors a user's Global Threat Score, dynamically calculated using the average risk of their past queries.

The platform operates on 4 key defense pillars:

1. Email Detection (Deep Analysis): A double-layered inspection system. It first localizes and strips advanced obfuscation techniques (like leetspeak or hidden character bypasses). It then performs deep semantic analysis alongside technical protocol simulations, checking for critical authentication failures like SPF, DKIM, and DMARC.
2. URL Analysis: Scans links to detect malicious patterns, deceptive subdomains, and structures commonly used in phishing campaigns.
3. Password Assessment: Measures credential strength using entropy-based metrics to guarantee resistance against brute-force attacks.
4. Cyber Education: A dedicated training center designed to build a proactive security culture among users.

How we built it

The core architecture of CyberGuard AI was engineered leveraging the rapid iterative capabilities of the MeDo development platform, paired with modern responsive styling.

• Frontend & Architecture: Built with a highly responsive, fluid component structure optimized for both desktop and mobile layouts. Tailwind CSS was utilized to craft the sleek, dark-mode cyberpunk UI.
• State Management & Privacy: Configured an isolated session tracking system using browser LocalStorage. User credentials and security histories are strictly partitioned; a newly registered user starts with a completely blank history, and the system filters data dynamically based on the active session ID.
• Analysis Engine: Designed an algorithmic scoring matrix. For instance, the threat weight combines technical vectors (such as protocol simulation flags) and linguistic triggers to generate an exact dynamic risk percentage.

Challenges we ran into

Building a complex multi-module security SaaS within a tight hackathon timeline brought tough hurdles:

• UI State and Component Focus: During the implementation of the authentication forms, we hit a frustrating React rendering bug where text inputs lost focus after every single character typed. Resolving this required stabilizing the component tree architecture to prevent structural re-mounting during live state updates.
• Data Isolation and Synchronization: Transitioning from a static tool to a personalized app meant refactoring how scores were calculated. Ensuring the Global Threat Score gauge on the main dashboard instantly recalculated a dynamic average of filtered LocalStorage records without requiring a manual page refresh was a major structural puzzle.
• Bilingual Integration: Synchronizing the initial app state to load in English by default for international judges while ensuring the FR/EN toggle remained fully operational and visible right on the login screen required strict state handling.

Accomplishments that we're proud of

• A Complete SaaS Feel: Successfully integrating full user authentication, automated session routing, and a strict, user-isolated security history ledger in a short hackathon window.
• The Dual-Layer Email Analyzer: Engineering a defensive pipeline that doesn't just scan raw text, but actively de-obfuscates text modifications before running semantic security checks.
• True Responsive Design: The entire cyber-neon ecosystem adjusts natively. A user can run deep protocol simulations smoothly from a 6-inch smartphone screen just as easily as on a desktop monitor.

What we learned

This hackathon has been an incredible accelerator for my journey as a developer. I deeply mastered how to design stable, persistent front-end states and handle user data safely without reliance on heavy backend database overhead during prototyping phases.

Furthermore, I learned that building an impactful app isn't just about writing functional code; it's about nailing user experience (UX) barriers, like ensuring proper language defaults and delivering complex technical data (like SPF/DKIM records) in a way that is immediately understandable to a non-technical end-user.

What's next for CyberGuard AI

• Live API Integrations: Transitioning from simulated network protocols to active, live lookups for SPF/DKIM/DMARC and true URL reputation domain scoring.
• Browser Extension: Porting the core 4 pillars into a lightweight Chrome/Firefox extension to analyze emails directly inside Gmail or Outlook.
• Advanced Machine Learning: Fine-tuning specialized local NLP models to catch evolving zero-day social engineering patterns even more precisely.

Built With

• axios
• biome
• class-variance-authority
• clsx
• container-queries
• css3
• date-fns
• edge-functions
• embla-carousel-react
• framer-motion
• html5
• ky
• localstorage
• lucide-react
• next-themes
• pnpm
• postgresql
• qrcode
• radix-ui
• react-18
• react-context-api
• react-dropzone
• react-hook-form
• react-router-v7
• recharts
• shadcn-ui
• sonner
• supabase
• tailwind-css
• tailwindcss-animate
• tailwindcss-intersect
• typescript
• vite
• zod