A real-time network monitoring dashboard built with React, WebSocket, and modern web technologies.
A powerful real-time network monitoring dashboard built with modern web technologies. Monitor your network devices, track bandwidth usage, and manage network activities all in one place.
- Real-time Monitoring: Track device status and network performance in real-time
- Bandwidth Management: Monitor and control bandwidth usage across devices
- Multi-language Support: Full internationalization with English and Indonesian languages
- Theme Customization: Toggle between dark and light themes
- Activity Logging: Comprehensive logging of all network activities
- Data Export: Export network data to CSV format for analysis
- Network Operations Centers: Monitor enterprise network infrastructure
- IT Administration: Track device connectivity and bandwidth usage
- System Administration: Log and analyze network activities
- Bandwidth Management: Implement and monitor bandwidth priorities
- Performance Analysis: Track and export network performance metrics
- React
- WebSocket
- i18next
- TailwindCSS
- Vite
- React-Toastify
project/
│
├── public/ # Static assets
│ ├── index.html # Entry point untuk React
│ ├── favicon.ico
│ └── assets/ # Image atau assets lainnya
│
├── src/ # Source code utama
│ ├── components/ # Semua komponen React
│ │ ├── ui/ # Komponen UI kecil
│ │ ├── BandwidthPriorityControl.jsx
│ │ ├── DeviceFilter.jsx
│ │ ├── BandwidthHistory.jsx
│ │ └── ActivityLogger.jsx
│ │
│ ├── context/ # Context untuk state management
│ │ └── ThemeContext.jsx
│ │
│ ├── hooks/ # Custom React hooks
│ │ └── useWebSocket.jsx
│ │
│ ├── i18n/ # File untuk internasionalisasi
│ │ ├── en.json
│ │ ├── id.json
│ │ └── i18next.js
│ │
│ ├── utils/ # Helper functions
│ │ ├── sanitize.js
│ │ └── csvExport.js
│ │
│ ├── App.jsx # Root komponen React
│ ├── index.js # Entry point React
│ └── styles.css # Global styles
│
├── backend/ # Server WebSocket
│ └── server.js
│
├── package.json
├── .gitignore
├── README.md
└── vite.config.js # Config untuk Vite (atau gunakan CRA jika perlu)
- Node.js v14 or higher
- npm or yarn
- Git (optional)
- Clone the repository:
git clone <repository-url>
cd network-dashboard- Install dependencies:
npm install- Create
.envfile:
PORT=8080
VITE_WS_URL=ws://localhost:8080- Start the WebSocket server:
npm run start:server- Start the development server:
npm run devVisit http://localhost:5173 to view the dashboard.
npm run dev: Start development servernpm run build: Build for productionnpm run preview: Preview production buildnpm run start:server: Start WebSocket servernpm run build:css: Rebuild Tailwind CSS
- Create new components in
src/components/ - Add translations to
src/i18n/en.jsonandsrc/i18n/id.json - Update WebSocket handlers in
NetworkDashboard.jsx - Add UI components to
src/components/ui/
- Follow React best practices and hooks guidelines
- Use meaningful component and variable names
- Add JSDoc comments for complex functions
- Follow the existing project structure
- Build the frontend:
npm run build- Configure production environment variables
- Deploy static files from the
distdirectory - Set up WebSocket server with proper security measures
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please read our Contributing Guidelines for details.
-
WebSocket Connection Fails:
- Verify backend server is running
- Check WebSocket URL configuration
- Ensure no firewall blocking
-
Styling Issues:
- Run
npm run build:css - Clear browser cache
- Check TailwindCSS configuration
- Run
This project is licensed under the MIT License - see the LICENSE file for details.
- React team for the amazing framework
- TailwindCSS team for the utility-first CSS framework
- All contributors who have helped this project grow
Made with ❤️ by the Network Dashboard Team