werkzeuge/teamleader_test/frontend

Network Scanner Frontend

A modern, React-based frontend for the Network Scanner visualization tool.

Features

• 🗺️ Interactive Network Map - Visualize network topology with react-flow
• 📊 Real-time Updates - WebSocket integration for live scan progress
• 🖥️ Host Management - Browse, search, and view detailed host information
• 🔍 Scan Control - Start, monitor, and manage network scans
• 📱 Responsive Design - Works on desktop and mobile devices
• 🎨 Modern UI - Built with TailwindCSS and Lucide icons

Tech Stack

• React 18 - UI framework
• TypeScript - Type safety
• Vite - Build tool
• React Flow - Network diagram visualization
• React Router - Navigation
• Axios - HTTP client
• TailwindCSS - Styling
• Lucide React - Icons

Quick Start

Install Dependencies

npm install

Development Server

npm run dev

The application will be available at http://localhost:3000

Build for Production

npm run build

Preview Production Build

npm run preview

Configuration

Create a .env file in the root directory:

VITE_API_URL=http://localhost:8000
VITE_WS_URL=ws://localhost:8000

Project Structure

frontend/
├── src/
│   ├── components/         # React components
│   │   ├── Layout.tsx      # Main layout with navigation
│   │   ├── ScanForm.tsx    # Scan configuration form
│   │   ├── NetworkMap.tsx  # Network topology visualization
│   │   ├── HostNode.tsx    # Custom node for network map
│   │   └── HostDetails.tsx # Host detail modal
│   ├── pages/              # Page components
│   │   ├── Dashboard.tsx   # Main dashboard
│   │   ├── NetworkPage.tsx # Network map view
│   │   ├── HostsPage.tsx   # Hosts table view
│   │   └── ScansPage.tsx   # Scans list view
│   ├── hooks/              # Custom React hooks
│   │   ├── useScans.ts     # Scan data management
│   │   ├── useHosts.ts     # Host data management
│   │   ├── useTopology.ts  # Topology data management
│   │   └── useWebSocket.ts # WebSocket connection
│   ├── services/           # API services
│   │   ├── api.ts          # REST API client
│   │   └── websocket.ts    # WebSocket client
│   ├── types/              # TypeScript types
│   │   └── api.ts          # API type definitions
│   ├── utils/              # Utility functions
│   │   └── helpers.ts      # Helper functions
│   ├── App.tsx             # Main app component
│   ├── main.tsx            # Entry point
│   └── index.css           # Global styles
├── public/                 # Static assets
├── index.html              # HTML template
├── package.json            # Dependencies
├── tsconfig.json           # TypeScript config
├── vite.config.ts          # Vite config
├── tailwind.config.js      # Tailwind config
└── README.md               # This file

Usage

Dashboard

The dashboard provides an overview of your network:

• Statistics cards showing total hosts, active hosts, services, and scans
• Quick scan form to start new scans
• Recent scans list with progress indicators
• Common services overview

Network Map

Interactive network topology visualization:

• Pan and zoom the diagram
• Click nodes to view host details
• Color-coded by host type (gateway, server, workstation, device)
• Real-time updates as scans discover new hosts
• Export diagram (PNG/SVG)

Hosts

Browse all discovered hosts:

• Searchable table view
• Filter by status
• Click any host to view details
• View services running on each host

Scans

Manage network scans:

• View all scans with status and progress
• Cancel running scans
• View scan results and errors

API Integration

The frontend communicates with the backend API at http://localhost:8000:

• REST API: /api/* endpoints for data operations
• WebSocket: /api/ws for real-time updates

Development

Code Style

• ESLint for linting
• TypeScript for type checking
• Prettier recommended for formatting

Building

npm run build

Output will be in the dist/ directory.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT

Author

DevAgent - Full-stack Development AI