Problem Statement

In today’s digital age, the lack of accessible, engaging, and up-to-date cybersecurity education puts countless individuals and organizations at risk. With cyber threats evolving constantly—from phishing scams to social engineering tactics—users often find themselves unprepared to identify and respond to these dangers. Traditional training methods can be static, overwhelming, or disconnected from real-life scenarios, leaving a critical gap in effective security awareness.

What is CyberVerse?

CyberVerse is a user-friendly, AI-enhanced cybersecurity education hub designed to empower individuals with the knowledge and tools needed to navigate today’s digital threats. By integrating advanced AI agents from agents.ai and leveraging a robust backend powered by Supabase, our solution delivers an engaging, interactive experience that makes learning about cybersecurity both accessible and collaborative. Developed within Cursor, the platform is thoughtfully designed to cater to users of all levels—from beginners to seasoned professionals—while fostering a community dedicated to mutual support and continuous learning.

Below are the key features of our platform:

• Cybersecurity Resources: Enables users to publicly share educational resources such as articles, tutorials, and infographics related to cybersecurity.
• Cyberverse Chatbot: An intelligent AI-driven chatbot that answers user queries about cyber threats, safe practices, and current cybersecurity trends in real time.
• CyberVerse Labs: Provides hands-on cybersecurity training labs that range from beginner challenges to advanced scenarios, enabling users to develop practical security skills in a controlled setting.
• Cyber News Updates: Displays the latest cybersecurity news articles, keeping users informed about emerging threats, industry developments, and best practices.
• Phishing Training Simulator: Offers a gamified, interactive environment where users can practice identifying and avoiding phishing attacks through realistic simulation scenarios.
• Event Calendar: Lists upcoming cybersecurity events, conferences, webinars, and training sessions, particularly those related to SANS.

By addressing the core challenge of insufficient cybersecurity education through these integrated features, CyberVerse not only raises awareness but also builds a resilient, informed community capable of mitigating cyber risks effectively.

How CyberVerse Works

Frontend Architecture

The frontend of CyberVerse is built using React.js and deployed on Vercel, ensuring high scalability and a smooth, responsive user experience. The homepage provides an intuitive interface with a clean, simple layout that guides users effortlessly through the platform's key features.

1. Homepage

• Intuitive Navigation:
  
  • Clean header and navigation menu for direct access to key features: Resources, Phishing Training Simulator, CyberVerse Labs, and About.
• Primary Call-to-Action Buttons:
  
  • Start Learning:
    
  • Directs users to a page showcasing all six key resources.
  • 
  • Join Now:
    
  • Google Sign-In integration for secure login and persistent data (lab progress, training scores) stored in Supabase.
  • 
• Dynamic Data Integration:
  
  • Real-time data fetching via API calls ensures the interface always reflects the latest updates.
• Additional Navigation:
  
  • Quick links to the “About” page, which provides project details and hackathon background.

2. Cybersecurity Resources

• Upload & Discovery:
  Users click the "Share Resource" button to submit a resource by entering its name, uploading a display image, and providing a content link. Submitted resources are added to a community library.

• Organized Display & Interaction:
  Resources are presented in an organized list with search and filtering options (e.g., Latest or Popular). Users can upvote, comment, and share resources, ensuring that the best content rises to the top.

3. Cyberverse Chatbot

• Real-Time Query Handling:
  In normal chat mode, the chatbot answers cybersecurity-related queries based on a carefully designed system prompt. -

• Contextual Integration:

  • When a user supplies a YouTube URL, the chatbot extracts the video’s transcript, summarizes it, and uses this summary as context to tailor its answers.
    
  • Similarly, if a website URL is provided, the site is scraped and the extracted content is used to enhance the response.

4. CyberVerse Labs

• Hands-On Training Environment:
  Labs are designed for all skill levels and are presented on a dedicated feature page showing the lab’s name, description, difficulty level, and estimated completion time.

• Lab Navigation & Challenge Flow:
  By clicking "Start Lab", users enter a series of internal challenges. Each challenge requires entering a flag to progress, with clear instructions and sometimes supplementary learning resources. -

• Solution Transparency:
  Users can access detailed solutions by clicking "View Solutions", which include the correct flag, an explanation of the technique, and real-world application insights. -

• Our Three Main Labs:

  • Lab 1: Beginner CTF Challenge
  • Challenges:
    • Digital Fingerprints: Uncover hidden data by examining webpage source code and metadata.
    • Caesar's Shadow: Decrypt a message encoded with a Caesar cipher (shift of 3) to reveal the flag.
    • The Digital Archaeologist: Extract a hidden flag from an image’s metadata.
    • Code Breaker: Reverse-engineer a JavaScript function to determine the flag.
  • Lab 2: Web Security Lab (Intermediate)
  • Challenges:
    • XSS Vulnerability Detection: Identify and exploit Cross-Site Scripting flaws by comparing vulnerable and secure code.
    • SQL Injection Basics: Learn to exploit and then prevent SQL injection attacks through practical examples.
    • CSRF Protection: Understand and implement safeguards against Cross-Site Request Forgery attacks.
  • Lab 3: Network Defense Lab (Advanced)
  • Challenges:
    • Network Traffic Analysis: Use tools like tcpdump and Wireshark to analyze packets and identify suspicious activity.
    • Intrusion Detection: Configure IDS systems using sample rules to detect SSH brute force and port scanning.
    • Firewall Configuration: Practice setting up firewalls with iptables and Cisco ASA to block unauthorized access.

5. Phishing Training Simulator

• Immersive Learning Environment:
  Users interact with realistic phishing scenarios via web interfaces that mimic real cyber attacks. They must identify a “safe” button amid deceptive options.

• Level-Based Challenges:

  • Level 1 – Social Media Deception: Identify red flags in fake social media interfaces.
    
  • Level 2 – Email Security Challenge: Evaluate deceptive email scenarios under time pressure.
    
  • Level 3 – Advanced Phishing Defense: Tackle sophisticated phishing attempts that resemble genuine security alerts. -

• User Feedback:
  Immediate feedback is provided, and a dynamic leaderboard displays performance, reinforcing the learning process.

6. Cyber News Updates

• Curated News Feed:
  The platform continuously displays the latest cybersecurity news, emerging threats, and industry trends in reverse chronological order.

• Interactive Features:
  Users can click “read” to view full articles, save interesting news, or share articles with their network.

• Cyber Alerts Subscription:
  Users may subscribe with their email to receive curated newsletters and real-time alerts directly in their inbox.

7. Event Calendar

• Comprehensive Event Listings:
  The calendar aggregates upcoming cybersecurity events (conferences, webinars, trainings) with a focus on SANS and other leading organizations.

• Detailed Event Information:
  Each event entry displays the name, type, timeline, days remaining, course count, tags, location, and includes a "View Event" button linking to the official event page.

• Organized Display:
  All event data is arranged in a clear, user-friendly layout that makes it easy for users to plan their professional development.

How We Built It

1. Cybersecurity Resources

• Upload & Discovery:
  Users click the "Share Resource" button and fill out a form with the resource name, a display image, and a content link. Once submitted, the resource becomes part of a community-curated library, and all data is saved into Supabase for secure storage and easy retrieval.

• Organized Display & Interaction:
  Resources are dynamically displayed, allowing users to search by keywords, filter by “Latest” or “Popular,” and interact via upvotes, comments, and sharing. Every resource and user interaction is stored in Supabase and continuously retrieved, ensuring that the platform always reflects the most up-to-date information.

2. Cyberverse Chatbot

• LLM Integration (GPT min 3 -o):
  We use a large language model (LLM), GPT min 3 -o, to power the chatbot. In normal chat mode, it processes cybersecurity queries based on a custom system prompt tailored to our needs.

• Contextual Enrichment Modules:

  • YouTube URL Handling:
    When a user provides a YouTube link, a dedicated module extracts the video transcript and generates a summary. This summary is then passed as context to the LLM, enabling it to answer queries that reference the video content.
  • Website URL Scraping:
    If a website URL is submitted, the system scrapes the page content (using tools like Cheerio or Puppeteer) to extract relevant data. The extracted content is used as context for the LLM’s response.

• Seamless System Integration:
  The chatbot smoothly communicates with our backend, ensuring that query processing, context extraction, and response generation work together seamlessly to deliver a fluid conversational experience.

3. CyberVerse Labs

• Modular Lab Architecture:
  Each lab is developed as a self-contained module using React for the front end and Node.js for backend logic. Lab metadata—such as the lab’s name, description, difficulty level is stored in Supabase.

• Challenge and Progress Management:
  User progress is continuously tracked and stored in Supabase, ensuring that completion data for each lab is persistent across sessions. Upon login, a user's progress—such as completed labs, pending challenges, and overall completion status—is retrieved and displayed.

  • Each challenge requires users to submit a flag, which is validated against a stored hash for security. Once a challenge is completed, the progress is immediately recorded in Supabase and reflected on the website, including real-time updates to progress bars.
    
  • 
  • If a lab is fully completed, the system visually indicates 100% completion and displays a completion message when the lab is accessed.
  • 

• Supplementary Learning:
  Detailed instructions, learning resources, and solution guides are provided via API endpoints. This ensures that users receive comprehensive information to understand and solve each challenge.

• User Guidance:
  The "View Solutions" feature retrieves in-depth explanations and insights into real-world applications, enabling users to learn from their successes and mistakes effectively.

4. Phishing Training Simulator

• Custom Scenario Development:
  Each phishing scenario is custom-built using HTML, CSS, and JavaScript to mimic real-world phishing attacks. Interactive elements are crafted to simulate the pressure and urgency of a genuine cyber attack.

• Timing and Scoring Logic:
  JavaScript timers and event listeners monitor user interactions, determining correct and incorrect actions in real time. A scoring algorithm provides immediate feedback based on user performance.

• Data Tracking with Supabase:
  All user actions, progress metrics, and performance data are logged in Supabase. This data supports the dynamic leaderboard and detailed analytics, offering insights into user behavior.
  Example: A click event is tracked and validated against a predefined “safe” button ID, updating the score and triggering feedback accordingly.

5. Cyber News Updates

• Content Aggregation and Storage:
  Articles are gathered and stored in our Supabase database with associated metadata like publication date and topic, ensuring they are well-organized and easy to query.

• Dynamic Display:
  Using React, the front end retrieves and displays articles in reverse chronological order. Each article features a “read” option for full details, along with interactive elements for saving and sharing.

• Email Subscription:
  A simple email subscription system is integrated, allowing users to register and receive curated newsletters and cyber alerts directly in their inbox.

6. Events Calendar

• Data Collection:
  Event details are scraped from the SANS website and other platforms, gathering information such as event name, type, timeline (including countdown), number of courses, tags, and location.

• Structured Management:
  This event data is organized and stored in our Supabase database, with a schema designed to handle all key attributes for each event.

• Dynamic Front-End Integration:
  The React-based front end fetches event data via APIs and presents it in an organized layout. Each event is displayed with its essential details and a “View Event” button that directs users to the official page.

• Real-Time Updates:
  Our system continuously updates the calendar as new event data is scraped and stored, ensuring users always have access to the latest opportunities.

---

Why CyberVerse Stands Out

CyberVerse offers a practical and user-friendly approach to cybersecurity education by combining real-world training, advanced AI, and community engagement. It stands out because:

• Practical, Hands-On Learning:
  Real labs and phishing simulations allow you to apply your skills in realistic scenarios, bridging the gap between theory and practice.

• Tailored, Instant Support:
  Our AI-powered chatbot delivers quick, context-aware answers, making it easier to grasp complex topics as you learn.

• For Everyone, From Beginners to Experts:
  CyberVerse is designed to cater to a wide audience—whether you're just starting out or looking to refine advanced skills, our platform adapts to your level.

---

Challenges We Ran Into

• Building CyberLabs was one of the biggest technical challenges we faced. Ensuring that each lab functioned correctly, tracked user progress in real-time, and provided a seamless learning experience required deep problem-solving and continuous refinement. Debugging and optimizing the system to handle user interactions smoothly took significant effort.

• Another major hurdle was user authentication. Implementing Google Sign-In seemed straightforward at first, but integrating it in a way that securely stored and retrieved user progress from Supabase was more complex than anticipated. Ensuring every user had a persistent identity across sessions was crucial for maintaining a personalized learning experience.

---

Accomplishments That We're Proud Of

• Seamless Google Authentication & Progress Tracking

  One of the biggest wins was successfully integrating Google authentication, allowing users to sign in effortlessly and ensuring their progress was securely stored. Now, every completed challenge is tracked, and users can pick up right where they left off, making the experience feel truly personalized.

• A Thriving Community-Driven Resource Hub

  We built a platform where users can share, discover, and discuss cybersecurity resources, making it easier to learn from each other. The ability to upload articles, videos, and tools—combined with upvotes, comments, and search functionality—makes CyberVerse an ever-growing knowledge base driven by the community.

• An AI-Powered Chatbot to Simplify Learning

  Our chatbot was a major milestone. By allowing users to input YouTube video URLs or website links, the bot can break down and summarize key cybersecurity concepts, making complex topics more digestible. This feature adds an entirely new dimension to learning by making resources interactive and easily accessible.

---

What's Next for CyberVerse

• SANS Platform Integration & Recognizing Top Contributors

  We plan to integrate with the SANS platform, where each user is given a unique SANS ID. This will help us track engagement levels—who's actively participating in labs, sharing resources, and contributing to discussions. With this data, we can reward top contributors, encouraging even more participation and knowledge-sharing.

• Building an Admin Dashboard for Deeper Insights

  Understanding user engagement at a macro level is just as important as individual progress tracking. We aim to build an admin panel that provides insights into user activity, lab participation, and platform growth trends. This will help us fine-tune the experience, identify inactive users, and make data-driven decisions for future improvements.

• Enhancing the Phishing Training Experience

• Enhancing our phishing training feature to make it more dynamic and immersive is a key future objective. By improving the user interface and tracking user behavior—such as movement patterns, number of clicks, and how users interact with phishing attempts—we can provide deeper insights into learning progress. We also plan to introduce more realistic, scenario-based phishing challenges that cater to a wider audience, mimicking real-world attack methods. This will ensure users gain practical, hands-on experience in identifying and avoiding phishing threats.

• Finally, we developed a leaderboard system using Supabase to track user performance in phishing simulations, but due to time constraints, we couldn't integrate it fully. Moving forward, we will implement this feature, allowing users to see their rankings and compete with others, further reinforcing engagement and motivation in learning.

---

Built With

• agent.ai
• nextjs
• sans
• supabase
• vercel