An advanced Computer Networks simulation tool that visualizes how routing algorithms work in real time. Built with a modern UI and smooth animations, NetSim allows users to design network topologies, simulate routing protocols, and observe packet transmission interactively.
- ➕ Dynamically add routers (nodes)
- 🔗 Create custom links between routers
- ⚖️ Assign user-defined weights (costs) to edges
- ❌ Delete routers and connections easily
- 🔄 Reset topology anytime
- 📍 Distance Vector Routing (Bellman-Ford)
- 📍 Link State Routing (Dijkstra)
- 🔁 Step-by-step execution (conceptual simulation)
- ⚡ Full convergence simulation
- 🔄 Real-time updates on topology changes
- 🔍 Simulates the Count-to-Infinity problem in Distance Vector Routing
- 📈 Visualizes gradual cost increase when a link fails
- ⏳ Step-by-step propagation of incorrect routing info
- 🎯 Helps understand routing loops and slow convergence
- 📋 Automatic routing table generation for each router
- 🔍 Displays:
- Destination
- Cost
- Next Hop
- 🔄 Updates instantly when network changes
- 🎯 Highlight routes involved in current path
- 🎯 Select source and destination routers
- 🚀 Compute shortest path
- 📦 Simulate packet transmission
- 📈 Display:
- Total cost
- Number of hops
- Route taken
- ✨ Animated packet traversal
- 🎯 Interactive graph-based topology
- 🔵 Circular layout for clarity
- 🎨 Color-coded routers
- 🏷️ Edge weight labels
- 💡 Clean, modern UI design
- ⚡ Smooth animations and transitions
| Layer | Technology |
|---|---|
| Frontend | Next.js, React |
| Language | TypeScript |
| Styling | CSS Modules |
| Visualization | Custom Canvas Rendering |
| Algorithms | Dijkstra (Link State), Bellman-Ford (Distance Vector) |
│
├── dist/ # Production build output
├── node_modules/ # Dependencies
│
├── src/
│ ├── lib/
│ │ ├── defaultTopology.ts # Initial graph state
│ │ ├── routing.ts # Dijkstra + Bellman-Ford
│ │
│ ├── App.tsx # Main UI component
│ ├── main.tsx # Entry point
│ ├── index.css # Global styles
│
├── index.html # Root HTML file
├── package.json
├── package-lock.json
├── tsconfig.json
├── vite.config.ts
├── .env.example
├── .gitignore
├── metadata.json
└── README.md
Dijkstra Algorithm
- Computes shortest paths from a source node
- Used in Link State Routing
Bellman-Ford Algorithm
- Iteratively relaxes edges
- Used in Distance Vector Routing
- User creates network topology
- Selects source & destination
- Algorithm computes shortest path
- Path is highlighted visually
- Packet animation runs along path
- Routing tables update in real-time
- Trigger Count-to-Infinity scenario (optional)
# Clone repository
git clone https://github.com/your-username/NetSim.git
# Navigate to project
cd NetSim
# Install dependencies
npm install
# Run development server
npm run devThen open: http://localhost:3000
npm run build
npm run preview
| Action | How To |
|---|---|
| ➕ Add Router | Click anywhere on canvas |
| 🔗 Add Connection | Switch to "Add Edge" mode → Click source → destination |
| ⚖️ Change Weight | Click on edge label |
| ❌ Delete | Switch to delete mode → Click node or edge |
| 🚀 Simulate Path | Select source & destination → Click Simulate |
| 📋 View Routing Table | Select router from bottom panel |
| ♾️ Count-to-Infinity | Trigger failure scenario |
- Real-time algorithm visualization
- Fully interactive topology editing
- Smooth packet animation
- Clean and intuitive UI
- Educational + practical learning tool
- Count-to-Infinity simulation
- 📡 Support for additional protocols (OSPF, RIP)
- 💾 Save/load network topologies
- 🌍 Large-scale network simulation
- 📊 Performance metrics visualization
- Rishika Thatipamula
- Sisira Asapu
- Sri Vaishnavi
- Vennapureddy Mahathi