Network Visualizer 🌐

An interactive educational platform for learning and visualizing computer networking concepts. This web-based tool helps students and educators understand various networking protocols, encoding techniques, and network calculations through interactive visualizations.

🎓 Educational Purpose

This project is designed to serve as an educational resource for:

• Computer networking students
• IT beginners learning about protocols
• Educators teaching networking concepts
• Anyone interested in understanding network visualization

🔗 Live Demo

Check out the live demo here

🚀 Features

📊 Line Coding Visualizer

• Input binary data for visualization
• Multiple encoding techniques supported:
  • NRZ-L
  • NRZ-I
  • RZ
  • Manchester
  • Differential Manchester
  • AMI
  • Pseudoternary
• Error detection methods:
  • Hamming Code
  • CRC-8
• Interactive line chart visualization
• Error simulation and correction demonstration

🔄 TCP/UDP Traffic Analysis

• Protocol selection (TCP/UDP)
• Application-specific simulations
• Packet transmission visualization
• Loss and retransmission simulation
• Interactive learning explanations
• Real-time traffic visualization

🌐 DNS/HTTP Protocol Visualizer

• Domain name input functionality
• Support for multiple HTTP methods:
  • GET
  • POST
  • PUT
  • DELETE
• Step-by-step DNS resolution simulation
• HTTP request/response visualization
• Detailed process explanations
• Interactive bar chart displays

🧮 Subnet Calculator

• IP address and CIDR input
• Comprehensive subnet calculations:
  • Network address
  • Broadcast address
  • Subnet mask
  • First/last usable hosts
  • Total and usable host counts
• Input validation
• Clear results display

🗺️ Subnet Mapper

• Network and subnet visualization
• Real-time traffic simulation
• Advanced filtering and search capabilities
• Drag-and-drop subnet management
• Detailed subnet information:
  • Connected devices
  • Bandwidth usage
  • Active services
  • User statistics
  • Security incidents
  • Vulnerability reports

🛠️ Technologies Used

• React.js
• React Router DOM
• Tailwind CSS
• JavaScript (ES6+)

📋 Prerequisites

• Node.js (version 14.x or higher)
• npm or yarn package manager

⚙️ Installation

1. Clone the repository

git clone https://github.com/yourusername/network-visualizer.git

2. Navigate to the project directory

cd network-visualizer

3. Install dependencies

npm install

4. Start the development server

npm start

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

💡 Usage

1. Access the application through your web browser
2. Use the navigation bar to switch between different tools
3. Each tool provides interactive elements and real-time visualizations
4. Hover over elements to see detailed explanations
5. Use the input fields to test different scenarios
6. Observe the visualizations to understand networking concepts

🎯 Target Audience

• Computer Science students
• Networking beginners
• IT educators
• Self-learners interested in networking

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. Here's how you can contribute:

1. Fork the project
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.

👥 Authors

• Shripad Khandare

🙏 Acknowledgments

• Thanks to the React and networking community for inspiration
• Special thanks to all contributors and testers

---

Made with ❤️ for the networking education community