GUI Overview

🖥️ GUI Overview

📌 About the GUI Component

The GUI is the central interface of the Hermes fullstack project, designed to streamline security testing and vulnerability assessment. It combines modern web technologies with a user-friendly experience tailored for both educational and professional use in cybersecurity.

🧰 Technology Stack

• Frontend Framework: Ionic + React
• Language: TypeScript
• Styling: CSS with Ionic Components
• Testing: Cypress (E2E), Jest (Unit tests)
• Build Tool: Vite
• Package Manager: npm

🚀 Key Features

• Unified Security Dashboard: Launch and monitor vulnerability scans from a single interface.
• Modular Integration: Seamless connectivity with the WebScanner and Weak Website modules.
• Interactive Learning: Tools and modules that support hands-on cybersecurity education.
• Built-in References: Integrated OWASP documentation and contextual help.

---

⚙️ Quick Start

🧪 Development Mode

cd gui
npm install
npm run dev

📦 Production Build

cd gui
npm run build

---

🔗 Integration with Other Modules

🌐 WebScanner Integration

• Launch Scans: Directly initiate scans via the GUI.
• Live Feedback: View scan progress and results in real-time.

🧪 Weak Website Integration

• Target Setup: Easily configure the Weak Website as a test target.
• Results Visualization: Graphically display detected vulnerabilities.
• Learning Support: Link scan findings to related OWASP and educational resources.

🔍 Scanner Interface

• Target Discovery: Fetch target data using the provided URL.

---

📅 Coming Soon

This section is a work in progress. Planned enhancements include:

• Automated report generation
• Advanced configuration and scan customization
• Component-level development guidelines
• End-to-end security testing workflows

---

👥 Authors

• Swann Lagoute