This application provides a real-time network visualization tool that scans for devices on your local network and visualizes them in an interactive graph. It also supports device-to-device connections with different connection types (P2P, LAN, WAN).
- Real-time network scanning to detect connected devices
- Interactive network graph visualization using Vis.js
- Device-to-device connection functionality
- Educational content about networking concepts
- Dark/light mode toggle
- Responsive design for all device sizes
- Node.js (v16+)
- npm (v7+)
- Clone the repository
- Install dependencies:
npm install- Start the frontend development server:
npm run dev- Start the backend server (in a separate terminal):
npm run server/src- Frontend React application/components- React components/context- React context providers/services- API and socket services/types- TypeScript type definitions/utils- Utility functions and mock data
/server- Backend Express server
The application includes educational content about various networking concepts:
- Peer-to-Peer (P2P) connections
- Local Area Network (LAN)
- Wireless Local Area Network (WAN)
- Network routers and infrastructure
- Device connections and network topology
-
Frontend:
- React with TypeScript
- Tailwind CSS for styling
- Vis.js for network visualization
- Socket.IO client for real-time updates
- Lucide React for icons
-
Backend:
- Node.js with Express
- Socket.IO for WebSocket communication
- Network scanning utilities (simulation only in this version)
This project is licensed under the MIT License.