PROJECT OVERVIEW:
This project is to develop a Single Page Application (SPA) called 'Network Architect' (Turkish: Ağ Yöneticisi). The primary goal is to simplify the process of transforming a standard Linux system into a dedicated network device such as a router, switch, or Wi-Fi access point. It addresses the complexity and steep learning curve associated with command-line configuration of Linux for networking tasks. The core value proposition is to empower users, regardless of their deep technical expertise in Linux networking commands, to leverage their existing Linux hardware for robust network infrastructure. This tool will abstract away the intricate command-line operations, providing an intuitive graphical interface for configuration, monitoring, and management, thereby democratizing the creation of custom network appliances.
TECH STACK:
- Frontend Framework: React.js (using Vite for faster development)
- Styling: Tailwind CSS for rapid and utility-first styling.
- State Management: Zustand for efficient and simple global state management.
- Routing: React Router DOM for client-side routing.
- UI Components: Radix UI primitives for accessible and customizable UI components.
- Icons: Heroicons.
- Data Fetching/API: Mock Service Worker (MSW) for simulating API responses during development, and `fetch` API for potential future backend integration.
- Form Handling: React Hook Form for efficient form validation and management.
CORE FEATURES:
1. **Device Transformation Wizard:**
* **User Flow:** User selects the desired network device type (e.g., Router, Access Point, Switch) from a dashboard. The wizard guides them through a series of steps, asking for necessary information (e.g., network interface selection, IP range for DHCP). Based on the selections, the application generates and presents the required Linux commands or applies them directly if remote execution is enabled.
* **Details:** This involves identifying the correct kernel modules, system services (like `iptables`/`nftables`, `dnsmasq`, `hostapd`), and configuration file modifications. The wizard will abstract these.
2. **Network Configuration Interface:**
* **User Flow:** After device transformation, users can access a dedicated section to configure core networking parameters. This includes setting static IP addresses, DNS servers, DHCP scopes (IP range, lease time), firewall rules (simplified interface), and Wi-Fi settings (SSID, password, security protocols) if the device is an AP.
* **Details:** This interface will translate user inputs into appropriate commands (`ip addr`, `dhcpcd.conf`, `dnsmasq.conf`, `hostapd.conf`, `iptables` rules) and execute them on the target Linux system via a secure channel (initially simulated, potentially SSH/API in the future).
3. **Performance Monitoring Dashboard:**
* **User Flow:** A real-time dashboard displays key performance metrics of the Linux system acting as a network device. Users can see CPU usage, RAM utilization, network interface traffic (upload/download speeds), active connections, and system logs.
* **Details:** This will involve fetching data from the Linux system. Initially, this will be simulated with mock data. Future iterations could use `procfs` or dedicated monitoring agents.
4. **Command Executor & Log Viewer:**
* **User Flow:** A secure terminal-like interface where users can manually execute specific Linux commands on the target device and view the real-time output. This is for advanced users or troubleshooting.
* **Details:** Primarily for debugging and advanced control, allowing users to run commands not covered by the wizard or GUI.
5. **Configuration Templates:**
* **User Flow:** Users can save their current network configuration as a template or load pre-defined templates (e.g., 'Basic Home Router', 'Guest Wi-Fi AP').
* **Details:** Facilitates quick setup and standardization across multiple devices.
UI/UX DESIGN:
- **Layout:** A clean, modern, and responsive dashboard layout. A primary sidebar for navigation (Dashboard, Device Setup, Network Config, Monitoring, Command Executor, Templates) and a main content area. On smaller screens, the sidebar collapses into a hamburger menu.
- **Color Palette:** Primary: Dark charcoal (#1F2937), Secondary: Teal (#14B8A6), Accent: White (#FFFFFF) and Light Gray (#E5E7EB). Use the accent colors for interactive elements and data visualization.
- **Typography:** A clean sans-serif font like Inter or Roboto for body text and headings. Ensure good readability and hierarchy.
- **Responsive Design:** Mobile-first approach. Components should adapt gracefully to different screen sizes. Use Tailwind CSS's responsive prefixes (sm:, md:, lg:).
- **Interactions:** Subtle hover effects on buttons and links. Smooth transitions for expanding/collapsing elements. Clear loading indicators (spinners, skeleton screens) for data fetching.
COMPONENT BREAKDOWN:
- `App.jsx`: Main application component, sets up routing.
- `Layout.jsx`: Wrapper component with sidebar navigation and main content area.
- `Dashboard.jsx`: Displays overview, status widgets, quick actions.
- `StatusWidget.jsx` (Props: `title`, `value`, `unit`, `statusColor`): Displays a single metric.
- `DeviceWizard.jsx`: Stepper component for transforming the Linux box.
- `WizardStep.jsx` (Props: `stepNumber`, `title`, `description`, `children`)
- `InterfaceSelector.jsx` (Props: `interfaces`, `onSelect`)
- `DeviceTypeSelector.jsx` (Props: `onSelect`)
- `NetworkConfig.jsx`: Section for configuring IP, DHCP, DNS, Firewall, Wi-Fi.
- `ConfigForm.jsx` (Props: `initialValues`, `onSubmit`, `fields`)
- `DHCPConfig.jsx` (Extends `ConfigForm`)
- `WifiConfig.jsx` (Extends `ConfigForm`)
- `Monitoring.jsx`: Real-time performance dashboard.
- `Graph.jsx` (Props: `data`, `title`, `color`): Renders a chart for metrics.
- `ConnectionList.jsx` (Props: `connections`)
- `CommandExecutor.jsx`: Terminal-like interface.
- `TerminalWindow.jsx` (Props: `onCommand`)
- `Templates.jsx`: Manage saved configurations.
- `TemplateList.jsx` (Props: `templates`, `onLoad`, `onSave`)
DATA MODEL:
- **State Structure (Zustand Store):**
```javascript
{
deviceInfo: { model: string | null, os: string | null, kernel: string | null, interfaces: string[] | null },
currentConfig: { ipAddress: string, subnetMask: string, gateway: string, dnsServers: string[], dhcpEnabled: boolean, dhcpRange: string, ssid: string, wifiPassword: string /* ... more fields */ },
monitoringData: { cpuUsage: number, ramUsage: number, networkTx: number, networkRx: number, activeConnections: number },
commandHistory: { id: string, timestamp: number, command: string, output: string, error: string | null }[],
templates: { id: string, name: string, config: object }[],
isLoading: boolean,
error: string | null
}
```
- **Mock Data Format:** JSON objects adhering to the structure defined above. Network interface data might come as an array of objects: `[{ name: 'eth0', ip: '192.168.1.100', mac: '...' }]`.
ANIMATIONS & INTERACTIONS:
- **Hover Effects:** Subtle background color changes or slight scaling on buttons and clickable elements.
- **Transitions:** Smooth transitions for sidebar collapse/expand, modal pop-ups, and route changes (using `Framer Motion` or CSS transitions).
- **Loading States:** Use spinners (`react-spinners`) or skeleton loaders while data is being fetched. Disable buttons during submission. Display clear "Saving...", "Applying..." messages.
- **Micro-interactions:** Visual feedback when a configuration is successfully applied (e.g., a brief checkmark animation).
EDGE CASES:
- **No Network Interfaces Found:** Display a clear message in the wizard and configuration sections.
- **Command Execution Failure:** Show detailed error messages from the command output. Provide options to retry or revert.
- **Invalid User Input:** Implement robust form validation using `react-hook-form` and `yup` or Zod. Provide inline error messages.
- **Empty States:** For monitoring, command history, and templates, display informative messages when there is no data (e.g., "No network traffic recorded yet.").
- **Accessibility (a11y):** Ensure all interactive elements are keyboard navigable. Use ARIA attributes where necessary. Maintain sufficient color contrast. Use semantic HTML.
- **Connection Loss:** If a real connection were implemented, handle disconnections gracefully and inform the user.
SAMPLE DATA:
1. **Mock Linux Interfaces:**
```json
[
{ "name": "eth0", "ip": "192.168.1.100", "mac": "00:1A:2B:3C:4D:5E", "isUp": true },
{ "name": "wlan0", "ip": null, "mac": "6F:7E:8D:9C:0B:1A", "isUp": false },
{ "name": "eth1", "ip": null, "mac": "11:22:33:44:55:66", "isUp": true }
]
```
2. **Mock Monitoring Data:**
```json
{
"cpuUsage": 25.5,
"ramUsage": 40.2,
"networkTx": 512000,
"networkRx": 1024000,
"activeConnections": 55
}
```
3. **Mock Current Configuration (Router):**
```json
{
"deviceType": "router",
"lanInterface": "eth0",
"lanIpAddress": "192.168.1.1",
"lanSubnetMask": "255.255.255.0",
"dhcpEnabled": true,
"dhcpStartIp": "192.168.1.100",
"dhcpEndIp": "192.168.1.200",
"dhcpLeaseTime": "12h",
"wanInterface": "eth1",
"dnsServers": ["8.8.8.8", "1.1.1.1"]
}
```
4. **Mock Command History Entry:**
```json
{
"id": "cmd_abc123",
"timestamp": 1678886400000,
"command": "sudo iptables -L",
"output": "Chain INPUT (policy ACCEPT)\n... (firewall rules)",
"error": null
}
```
5. **Mock Template:**
```json
{
"id": "tpl_xyz789",
"name": "Basic Home Router",
"config": {
"deviceType": "router",
"lanInterface": "eth0",
"lanIpAddress": "192.168.1.1",
"lanSubnetMask": "255.255.255.0",
"dhcpEnabled": true,
"dhcpStartIp": "192.168.1.100",
"dhcpEndIp": "192.168.1.200"
}
}
```
6. **Mock Error Response:**
```json
{
"id": "cmd_def456",
"timestamp": 1678886500000,
"command": "sudo hostapd -B /etc/hostapd/hostapd.conf",
"output": "Configuration file: /etc/hostapd/hostapd.conf\n... (some output)",
"error": "nl80211: Could not configure driver interface 'wlan0': -95 (Operation not supported)"
}
```
7. **Mock Available Device Types:**
```json
["Router", "Wi-Fi Access Point", "Network Switch", "Firewall"]
```
DEPLOYMENT NOTES:
- **Build Command:** `npm run build` or `yarn build` (depending on package manager).
- **Environment Variables:** Use `.env` files (e.g., `.env.local`) for storing API endpoints or feature flags. `VITE_API_URL` could be used for the mock API endpoint.
- **Performance Optimizations:** Code splitting with React.lazy and Suspense. Image optimization if any are used. Memoization with `React.memo` and `useMemo`/`useCallback` where appropriate. Minimize re-renders.
- **Static Asset Handling:** Configure Vite/Webpack for optimal loading of static assets.
- **SPA Routing:** Ensure proper handling of deep linking and page refreshes using `BrowserRouter` and potentially server-side configuration for 404 fallbacks.
- **Initial State Loading:** Consider pre-loading essential configurations or device info on initial load to improve perceived performance.