Network Dashboard

A modern, responsive network monitoring dashboard built with React, Tailwind CSS, and Recharts.

GitHub.io Preview

Network Dashboard UI Preview

Features

• Real-time bandwidth usage monitoring
• Device status tracking and management
• Bandwidth priority control for connected devices
• Dark/Light theme toggle
• Device filtering by status
• Interactive charts and visualizations
• Alert system for network issues

Prerequisites

Before you begin, ensure you have installed:

• Node.js (v14.0.0 or higher)
• npm (v6.0.0 or higher)

Installation

1. Clone the repository:

   git clone https://github.com/pangaribowo/network-dashboard-ui.git
   cd network-dashboard
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm start
   

Deployment

To deploy to GitHub Pages:

1. Update the homepage field in package.json with your GitHub username
2. Run the deployment command:

   npm run deploy
   

Built With

• React.js
• Tailwind CSS
• Recharts
• Lucide React Icons
• Radix UI Components

Project Structure

network-dashboard/
├── public/
│   └── index.html
├── src/
│   ├── components/
│   │   ├── ui/
│   │   │   ├── alert.jsx
│   │   │   ├── select.jsx
│   │   │   └── slider.jsx
│   │   └── NetworkDashboard.jsx
│   ├── lib/
│   │   └── utils.js
│   ├── App.js
│   ├── index.js
│   ├── index.css
│   └── reportWebVitals.js
├── .gitignore
├── LICENSE
├── package.json
├── postcss.config.js
├── tailwind.config.js
└── README.md

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Recharts for the charting library
• Tailwind CSS for styling
• Lucide React for icons
• Radix UI for accessible components