A modern, responsive cybersecurity vulnerability assessment platform designed to scan, analyze, and monitor network devices for security vulnerabilities. Built with React, featuring a sleek cybersecurity-themed UI inspired by popular security platforms.
- Network discovery and device enumeration
- Real-time scanning with progress tracking
- Multiple scan types (Quick, Standard, Deep)
- Configurable network ranges
- Export scan results
- Real-time security metrics and statistics
- Interactive charts and visualizations
- Recent activity monitoring
- Quick action buttons for common tasks
- Comprehensive device listing with filtering
- Search and sort capabilities
- Device type categorization
- Vulnerability level indicators
- Export device data to CSV
- Detailed vulnerability analysis
- CVSS scoring and CVE tracking
- Risk level categorization (High, Medium, Low)
- Remediation recommendations
- Export vulnerability reports
- Interactive network topology map
- Device relationship visualization
- Zoom and pan controls
- Security status indicators
- Export network maps
- Modern Cybersecurity Theme: Dark theme with neon accents
- Responsive Design: Works seamlessly on all devices
- Smooth Animations: Framer Motion powered interactions
- Interactive Charts: Recharts for data visualization
- Custom Icons: Lucide React icon library
- Professional Typography: Orbitron and Inter fonts
- Frontend: React 18
- Styling: Tailwind CSS
- Animations: Framer Motion
- Charts: Recharts
- Icons: Lucide React
- Build Tool: Create React App
-
Clone the repository
git clone <repository-url> cd iot-security-dashboard
-
Install dependencies
npm install
-
Start the development server
npm start
-
Open your browser Navigate to
http://localhost:3000
npm start- Start development servernpm build- Build for productionnpm test- Run testsnpm eject- Eject from Create React App
- Navigate to the Device Scanner section
- Configure your network range (default: 192.168.1.0/24)
- Select scan type and click Start Scan
- Monitor real-time progress and results
- View discovered devices and vulnerabilities
- Monitor overall security posture
- Track device counts and vulnerability statistics
- View recent network activity
- Access quick actions for common tasks
- Browse all discovered devices
- Filter by type, vulnerability level, or search terms
- Export device lists for external analysis
- View detailed device information
- Comprehensive vulnerability analysis
- Filter by severity level
- Detailed remediation guidance
- Export reports in JSON format
- Visual network topology representation
- Interactive device nodes
- Security status indicators
- Zoom and navigation controls
Edit the default network range in the Device Scanner component:
const [networkRange, setNetworkRange] = useState('192.168.1.0/24');Extend the device type icons in components:
const deviceTypeIcons = {
router: Router,
camera: Monitor,
'smart-tv': Tv,
iot: Smartphone,
computer: Server,
// Add new types here
printer: Printer,
};Modify vulnerability level definitions in CSS:
.vulnerability-high {
@apply bg-cyber-red text-white;
}
.vulnerability-medium {
@apply bg-cyber-yellow text-black;
}
.vulnerability-low {
@apply bg-cyber-green text-black;
}
.vulnerability-none {
@apply bg-cyber-gray text-cyber-blue border border-cyber-blue;
}The dashboard is fully responsive and optimized for:
- Desktop: Full feature set with sidebar navigation
- Tablet: Adaptive layout with collapsible sidebar
- Mobile: Mobile-first design with bottom navigation
The cybersecurity theme uses a custom color palette defined in tailwind.config.js:
- Primary: Cyber Blue (#00d4ff)
- Success: Cyber Green (#00ff88)
- Warning: Cyber Yellow (#ffa502)
- Danger: Cyber Red (#ff4757)
- Accent: Cyber Purple (#a55eea)
- Headings: Orbitron (cybersecurity feel)
- Body: Inter (readability)
- Smooth page transitions
- Hover effects and micro-interactions
- Loading states and progress indicators
- Staggered animations for lists
- Vulnerability Assessment: Comprehensive security scanning
- Risk Categorization: Clear risk level indicators
- Remediation Guidance: Actionable security recommendations
- CVE Tracking: Integration with vulnerability databases
- Export Capabilities: Secure data export for analysis
- Pie Charts: Vulnerability distribution
- Bar Charts: Device type statistics
- Progress Bars: Scan progress tracking
- Interactive Elements: Hover tooltips and click actions
- Lazy Loading: Components load on demand
- Memoization: Optimized re-renders
- Smooth Animations: 60fps animations
- Responsive Images: Optimized for all screen sizes
- Real-time Monitoring: Live network traffic analysis
- Threat Intelligence: Integration with security feeds
- Automated Remediation: Script execution capabilities
- API Integration: Connect with security tools
- Multi-tenant Support: Organization management
- Advanced Analytics: Machine learning insights
- Fork the repository
- Create a feature branch
- Make your changes
- Add tests if applicable
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- Design Inspiration: Shodan, Censys, and other cybersecurity platforms
- Icons: Lucide React icon library
- Charts: Recharts for data visualization
- Animations: Framer Motion for smooth interactions
For support and questions:
- Create an issue in the repository
- Check the documentation
- Review the code examples
Built with ❤️ for the cybersecurity community