Frontend Overview
Introduction
This document provides a comprehensive overview of the Ravenxcope frontend service. The frontend is a React single-page application built for the RavenXcope defense center platform. It provides authentication, organization onboarding, sensor management, user and role management, dashboard monitoring, and security analytics.
The application is built as a Vite-powered static web app and served through Nginx in production. Runtime configuration is injected into window.__APP_CONFIG__, allowing the same built artifact to point to different backend environments.
Technology Stack
| Category | Technology | Version | Purpose |
|---|---|---|---|
| Runtime UI | React | 19.2.0 | Component model and rendering |
| Language | TypeScript | 5.9.x | Type-safe application code |
| Build Tool | Vite | 7.2.x | Dev server and production bundling |
| Routing | react-router-dom | 7.11.x | Client-side routes and nested layout |
| HTTP Client | Axios | 1.13.x | REST API calls and interceptors |
| Auth Storage | js-cookie | 3.0.x | Token and session persistence |
| I18n | react-i18next | 16.x | Multi-language support |
| UI Base | Radix UI | 2.x | Accessible primitive components |
| UI System | Tailwind CSS | 4.x | Utility-first styling |
| Charts | Recharts | 3.6.x | Data visualization |
| PDF Export | jsPDF | 4.x | Analytics report generation |
Application Responsibilities
The frontend service is responsible for:
- Authentication: Managing user login/logout and session persistence.
- Access Control: Protecting private dashboard routes and enforcing UI-level permissions.
- Shell Orchestration: Providing a responsive layout with sidebars, mobile drawers, and user menus.
- Data Integration: Calling the backend API via a centralized client with interceptors.
- Management: Handling organizations, sensors, users, and roles.
- Monitoring: Visualizing sensor health, heartbeats, and metrics.
- Analytics: Displaying security alerts, trends, and exporting PDF reports.
- AI Chat: Integrating with the analytics AI chat when enabled.
Current Route Surface
| Route | Access | Purpose |
|---|---|---|
/ | Public | Login entry point |
/register | Public | Organization registration |
/user-form | Public | Admin user onboarding |
/dashboard | Private | Health overview dashboard |
/dashboard/all-sensor | Private | Sensor management |
/dashboard/sensor/:id | Private | Sensor details and virtual sensors |
/dashboard/organization | Private | Organization profile |
/dashboard/profile | Private | User profile settings |
/dashboard/user | Private | User management |
/dashboard/role | Private | Role and permission management |
/dashboard/analytics | Private | Security dashboard and AI chat |
Runtime Configuration
Runtime configuration is loaded from src/config/appConfig.ts with the following precedence:
- Injected Global:
window.__APP_CONFIG__(production injection). - Local Environment: Vite environment variables (
import.meta.env). - Fallbacks: Hardcoded defaults in the API layer.
Core Config Keys:
VITE_API_BASE_URL: Backend origin.VITE_ANALYTICS_AI_CHAT_ENABLED: Chat feature flag.