A network simulation application that allows users to create and visualize a network of students and their connections. Built with React, D3.js, and Material-UI.
- Create and manage a network of students
- Add connections between students
- Interactive network graph visualization
- Find shortest paths between students
- Drag and drop nodes to rearrange the network
- Modern, responsive UI
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/yourusername/node-sim-app.git
cd node-sim-app- Install dependencies:
npm install
# or
yarn install- Start the development server:
npm run dev
# or
yarn dev- Open http://localhost:5173 in your browser.
- Add students using the "Add New Student" form
- Create connections between students using the "Add New Connection" form
- Use the interactive graph to visualize the network
- Find paths between students using the "Find Path" feature
- Drag nodes to rearrange the network layout
- Remove students or connections using the delete buttons in the lists
node-sim-app/
├── public/
│ ├── index.html
│ ├── favicon.ico
│ └── manifest.json
├── src/
│ ├── components/
│ │ ├── NetworkGraph.jsx # D3.js network visualization
│ │ ├── StudentForm.jsx # Form for adding students
│ │ ├── ConnectionForm.jsx # Form for adding connections
│ │ ├── PathFinder.jsx # Path finding interface
│ │ ├── StudentList.jsx # List of students
│ │ └── ConnectionList.jsx # List of connections
│ ├── hooks/
│ │ ├── useNetworkGraph.js # Network state management
│ │ └── useDraggable.js # Drag and drop functionality
│ ├── utils/
│ │ └── pathFinding.js # Path finding algorithm
│ ├── App.jsx # Main application component
│ ├── index.jsx # Application entry point
│ └── styles.css # Global styles
├── package.json
└── README.md
- React 18
- D3.js for network visualization
- Material-UI for components and styling
- Vite for build tooling
This project is licensed under the MIT License - see the LICENSE file for details.