Interactive Network Simulation Platform

Build, configure, and simulate network topologies with an intuitive drag-and-drop interface. Master networking concepts through hands-on experience with our Cisco Packet Tracer-inspired web application.

✨ Features

🎯 Interactive Network Design

• Drag & Drop Interface - Intuitive device placement and connection creation
• Professional Device Library - Routers, switches, PCs, servers, firewalls, and more
• Visual Connection Management - Double-click to connect devices with animated feedback
• Real-time Configuration - Live device settings and network parameter adjustments

⚡ Live Network Simulation

• Packet Flow Visualization - Watch data packets travel through your network in real-time
• Network Statistics - Monitor traffic, errors, and performance metrics
• Speed Control - Adjust simulation speed from 0.1x to 5x for detailed analysis
• Connection Quality Indicators - Visual bandwidth and latency representations

🛠️ Advanced Configuration

• Device-Specific Settings - Configure IP addresses, routing tables, and MAC tables
• Network Protocols - Support for various networking protocols and standards
• Topology Management - Save and load network configurations
• Test Scenarios - Built-in ping tests, broadcast simulations, and failure scenarios

🎨 Modern User Experience

• Responsive Design - Works seamlessly on desktop and tablet devices
• Dark/Light Mode - Adaptive theme support for comfortable viewing
• Smooth Animations - Professional transitions and interactive feedback
• Accessibility - Built with accessibility best practices

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn
• Modern web browser with ES6+ support

Installation

1. Clone the repository

   git clone https://github.com/yourusername/routecraft.git
   cd routecraft

2. Install dependencies

   # Install client dependencies
   cd client
   npm install
   
   # Install server dependencies (if applicable)
   cd ../server
   npm install

3. Start development server

   # Start client
   cd client
   npm run dev
   
   # Start server (if applicable)
   cd ../server
   npm run dev

4. Open your browser Navigate to http://localhost:5173 to start using RouteCraft

🎮 How to Use

Getting Started

1. Launch RouteCraft - Open the application in your browser
2. Choose a Template - Start with a pre-built network or create from scratch
3. Design Your Network - Drag devices from the library to the canvas
4. Create Connections - Double-click a device, then click another to connect
5. Configure Devices - Select devices to set IP addresses and network settings
6. Run Simulation - Click "Start Simulation" to see your network in action

Demo Networks

• Basic LAN - Perfect for beginners (Router + Switch + PCs)
• Enterprise Network - Advanced setup with firewall and multiple subnets

🏗️ Architecture

Frontend (React + Vite)

• React 18 with modern hooks and context
• Tailwind CSS for responsive styling
• Lucide React for consistent iconography
• Custom Canvas Rendering for network visualization
• GSAP for smooth animations

Key Components

• NetworkCanvas - Main simulation canvas with drag-and-drop
• DevicePanel - Device library and selection interface
• ConfigPanel - Device configuration and settings
• SimulationControls - Network testing and monitoring tools

State Management

• Custom useNetworkSimulation hook for network state
• React Context for global application state
• Local storage for saving/loading topologies

🛠️ Development

Project Structure

routecraft/
├── client/                 # Frontend React application
│   ├── src/
│   │   ├── components/     # Reusable UI components
│   │   │   ├── network/    # Network-specific components
│   │   │   └── ui/         # General UI components
│   │   ├── hooks/          # Custom React hooks
│   │   ├── pages/          # Application pages
│   │   ├── lib/            # Utility functions
│   │   └── data/           # Sample data and configurations
│   └── public/             # Static assets
└── server/                 # Backend API (optional)

Available Scripts

# Development
npm run dev          # Start development server
npm run build        # Build for production
npm run preview      # Preview production build

# Code Quality
npm run lint         # Run ESLint
npm run format       # Format code with Prettier

🎯 Roadmap

Phase 1: Core Features ✅

• Basic network device library
• Drag-and-drop interface
• Device connections and configuration
• Real-time packet simulation
• Save/load functionality

Phase 2: Advanced Features 🚧

• Advanced routing protocols (OSPF, BGP)
• VLAN configuration and management
• Network security simulations
• Performance analytics and reporting
• Collaborative editing features

Phase 3: Enterprise Features 📋

• Cloud integration and sharing
• Educational curriculum integration
• Advanced network troubleshooting tools
• Custom device creation
• API for external integrations

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Development Setup

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Make your changes
4. Run tests and linting
5. Commit your changes (git commit -m 'Add amazing feature')
6. Push to the branch (git push origin feature/amazing-feature)
7. Open a Pull Request

📄 License

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

🙏 Acknowledgments

• Cisco Packet Tracer - Inspiration for network simulation interface
• React Community - Amazing ecosystem and tools
• Tailwind CSS - Beautiful, utility-first CSS framework
• Lucide - Consistent and beautiful icon library

📞 Support

• Documentation: docs.routecraft.dev
• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: support@routecraft.dev

---

Built with ❤️ for the networking community

RouteCraft - Where Networks Come to Life 🚀