WebSec Academy

An AI-orchestrated, dynamic learning platform that instantly curates video tutorials, comprehensive notes, and interactive quizzes to help developers combat web security vulnerabilities.

Comment

Inspiration

The escalating complexity of web vulnerabilities makes it difficult for new developers to find structured, up-to-date security education without getting overwhelmed by noise. Traditional courses are often static and quickly become outdated. The goal was to build a platform that adapts instantly to whatever security topic a user needs to understand—whether it's Cross-Site Scripting (XSS) or CSRF attacks—providing targeted, highly relevant content on demand.

What it does

WebSec Academy is a comprehensive, search-driven educational hub. A user simply enters a specific security topic they want to master. The platform immediately springs into action:

  • Video Curation: It fetches the most relevant and highly-rated tutorials using the YouTube Data API.
  • Dynamic Learning Materials: It generates structured, easy-to-digest study notes explaining the core concepts, mitigation strategies, and common pitfalls of the vulnerability.
  • Knowledge Testing: It creates custom, interactive quizzes allowing users to immediately test their understanding of the topic they just researched.

How we built it

The project was built with an emphasis on high-level orchestration and rapid architectural deployment, embracing a vibecoding philosophy to connect powerful tools seamlessly.

  • Frontend: Built using Vite and vanilla JavaScript for lightning-fast module replacement and highly optimized builds. The UI was crafted with custom CSS to feature a striking Dark Mode Glassmorphism aesthetic. The interface utilizes deep charcoal and midnight blue backgrounds, highlighted by vibrant cyan, purple, and orange accents to create a visually engaging, futuristic learning environment.
  • Backend & Routing: Powered by Node.js and PHP to securely handle API integrations and server-side logic.
  • Database & Auth: Integrated Firebase to manage secure user authentication, allowing users to track their learning progress and save specific modules.
  • The AI Engine: The dynamic notes and custom quizzes are generated by orchestrating Gemini 2.5 Pro via Google AI Studio. The AI processes the user's security topic and constructs highly accurate educational text payloads that pair alongside the YouTube video feeds.

Challenges we ran into

Ensuring that the dynamically generated quizzes were technically accurate and appropriately challenging required meticulous prompt engineering and iteration within Google AI Studio. Additionally, creating a seamless responsive layout where embedded YouTube iframes and text content perfectly aligned within the translucent glassmorphic UI components required precise CSS architectural planning.

Accomplishments that we're proud of

Successfully synchronizing the YouTube Data API with Gemini 2.5 Pro so that video content and generated text materials perfectly complement each other. We are also incredibly proud of the UI/UX; the dark mode glass design makes the educational experience feel modern, immersive, and visually distinct from standard e-learning platforms.

What we learned

Refined our architectural approach to integrating multiple asynchronous APIs. We also deepened our understanding of orchestrating LLMs to generate structured educational artifacts (like formatted quizzes and standardized notes) reliably on the fly.

What's next for WebSec Academy

The immediate next step is to introduce interactive, simulated environments where users can actually practice patching the vulnerabilities they just learned about. We also plan to implement a token-based access system for advanced, highly specialized security tracks.

Built With

Share this project:

Updates