A browser-based network simulator for learning switching, routing, wireless, IoT, CLI, and exam workflows.
Live app: network2026.vercel.app
npm install && npm run dev- Industry-Specific Scenarios / Sektörel Senaryolar: Hastane, E-Ticaret, Okul Kampüsü ve SOHO gibi gerçek dünya kullanım senaryoları eklendi.
- Advanced IPv6 Master Lab / Gelişmiş IPv6 Laboratuvarı: Dual-stack, OSPFv3 ve IPv6 ACL konularını içeren kapsamlı yeni eğitim modülü eklendi.
- "Bana Öğret" Rehberli Dersleri / Teach Me Guided Lessons: Sıfırdan öğretim için 3 yeni seviye (Temel, Orta, İleri) eklendi; ipconfig, enable, configure terminal, hostname, router IP yapılandırma, OSPF ve ACL adım adım öğretiliyor.
- PC Tabanlı Arıza Giderme / PC-based Troubleshooting: Arıza tanımları artık PC özelliklerini (IP, gateway, DNS) doğrulayabiliyor; otomatik komut yazdırma (
pc-auto-type) desteği eklendi.
| Metric / Metrik | Value / Değer |
|---|---|
| Total Lines / Toplam Satır (src/) | 117,032 |
| Source Files / Kaynak Dosya | 447 |
| Documentation Files / Dokümantasyon Dosya | 23 |
| Example Projects / Örnek Proje | 43 |
| Guided Lessons / Rehberli Ders | 19 |
| Exams / Sınavlar | 6 |
| CLI Commands / CLI Komutları | 386+ |
| Document / Doküman | Description / Açıklama |
|---|---|
| INSTALL.md | Installation & build instructions / Kurulum & derleme talimatları |
| USAGE.md | Usage guide & keyboard shortcuts (TR/EN) / Kullanım kılavuzu & klavye kısayolları |
| NETWORK_SIMULATOR_KITAPCIK.md | Comprehensive Turkish training booklet / Kapsamlı Türkçe eğitim kitapçığı |
| history.md | Full changelog newest-to-oldest / Yeniden eskiye tam değişiklik geçmişi |
| DOCUMENTATION_INDEX.md | Documentation index & reading map / Diğer tüm belgeler için indeks |
| ProjeOzellikleri.md | Full features inventory (TR/EN) / Tüm özellikler envanteri (TR/EN) |
| CONTRIBUTING.md | Dev agent conventions, version bump & rollback + contribution guide |
For a quick reference of simulator controls, expand the list below. For more details, see USAGE.md. Simülatör kontrollerine hızlıca göz atmak için aşağıdaki listeyi genişletin. Daha fazla detay için USAGE.md dosyasına bakın.
⌨️ Click to expand Keyboard Shortcuts / Klavye Kısayollarını görmek için tıklayın
| Shortcut / Kısayol | Action (EN) | İşlem (TR) |
|---|---|---|
| Ctrl + Z | Undo | Geri al |
| Ctrl + Y / Ctrl + Shift + Z | Redo | Yeniden yap |
| Ctrl + C | Copy selected device | Seçili cihazı kopyala |
| Ctrl + X | Cut selected device | Seçili cihazı kes |
| Ctrl + V | Paste | Yapıştır |
| Ctrl + A | Select all | Tümünü seç |
| Ctrl + S | Save project | Projeyi kaydet |
| Ctrl + O | Open project file | Proje dosyasını aç |
| Ctrl + N / Alt + N | New project | Yeni proje |
| Ctrl + P | Print topology | Topolojiyi yazdır |
| Ctrl + F | Toggle fullscreen | Tam ekrana geç / çık |
| Alt + R | Reset zoom/pan view | Görünümü sıfırla |
| Delete / Backspace | Delete selected | Seçili öğeyi sil |
| Escape | Cancel selection / Close mode | Seçimi iptal et / Modu kapat |
| Ctrl + Scroll | Zoom in / out | Yakınlaştır / Uzaklaştır |
| Space + Drag | Pan canvas | Canvas'ı kaydır |
| Arrow Keys | Move selected device(s) | Seçili cihaz(lar)ı taşı |
| Shift + Arrow Keys | Move selected device(s) faster | Seçili cihaz(lar)ı daha hızlı taşı |
| F1 | Open / close help panel | Yardım panelini aç / kapat |
| F5 | Refresh network topology | Ağ topolojisini yenile |
| Home | Reset topology view | Topoloji görünümünü sıfırla |
| End | Focus last element | Son öğeye odaklan |
| Page Up | Scroll canvas up | Canvas'ı yukarı kaydır |
| Page Down | Scroll canvas down | Canvas'ı aşağı kaydır |
| Double-click (Empty Space) | Reset topology view | Topoloji görünümünü sıfırla |
| Double-click (Device) | Open collapsible device panel | Daraltılabilir cihaz panelini aç |
| Shortcut / Kısayol | Action (EN) | İşlem (TR) |
|---|---|---|
| P | Play / Pause packet analysis | Paket analizi: Oynat / Duraklat |
| N | Next hop (when paused) | Sonraki Hop (duraklatıldığında) |
| Shortcut / Kısayol | Action (EN) | İşlem (TR) |
|---|---|---|
| Tab | Auto-complete command | Komut tamamlama |
| Arrow Up / Down | Command history | Komut geçmişi |
| Enter | Execute command | Komutu çalıştır |
| Ctrl + L | Clear terminal | Terminali temizle |
| ? | Show available commands | Kullanılabilir komutları göster |
| Ctrl + C | Cancel command (CLI) | Komutu iptal et |
1. System Context Diagram
C4Context
title System Context Diagram for Network Simulator
Person(user, "User", "Student, Instructor, or Network Enthusiast")
System(netsim, "Network Simulator", "Browser-based interactive network simulator for learning switching, routing, wireless, and IoT.")
Rel(user, netsim, "Uses", "Web Browser")
2. Container Diagram
C4Container
title Container Diagram for Network Simulator
Person(user, "User", "Student, Instructor, or Network Enthusiast")
System_Boundary(netsim_system, "Network Simulator") {
Container(web_app, "Web Application", "Next.js, React, Tailwind CSS", "Delivers the SPA, renders the interactive topology canvas, CLI panels, and UI modals.")
Container(sim_engine, "Simulation Engine", "TypeScript", "Core logic handling OSI layers, CLI parsing, packet forwarding, STP, ARP, and dynamic routing.")
Container(state_store, "State Management", "Zustand", "Centralized store holding global application state and topology configurations.")
ContainerDb(local_storage, "Local Storage", "Browser LocalStorage & IndexedDB", "Persists saved topologies, custom settings, and achievement records locally.")
}
Rel(user, web_app, "Interacts with", "Web Browser")
Rel(web_app, state_store, "Reads/Updates state", "Zustand hooks")
Rel(web_app, sim_engine, "Triggers network events", "Function calls")
Rel(sim_engine, state_store, "Calculates & mutates state", "Direct modifications")
Rel(state_store, local_storage, "Persists state", "Browser APIs")
src/
├── app/ # Next.js App Router — pages & layouts
│ ├── api/ # API routes (contact, etc.)
│ ├── [id]/ # Dynamic routes
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles & design tokens
├── components/ # React components
│ ├── ui/ # Reusable UI (cards, dialogs, panels, inputs)
│ └── network/ # Network-specific (Terminal, Topology, PCPanel)
├── contexts/ # React contexts (theme, mode, language)
├── hooks/ # Custom React hooks
├── lib/
│ ├── design-tokens/ # Design tokens (colors, typography, spacing, animations)
│ ├── store/ # Zustand state management (appStore.ts)
│ ├── network/ # Network simulation engine
│ │ ├── core/ # CLI command implementations
│ │ └── examples/ # Example project JSON files
│ ├── security/ # Security utilities (sanitization, rate limiting)
│ ├── performance/ # Performance optimization (spatial partitioning)
│ └── storage/ # Storage utilities (window position management)
├── utils/ # Utilities (achievement records tracking)
└── tests/ # Unit & integration tests (Vitest, 552 tests)
Next.js 16.2, React 19, TypeScript 6.0, Tailwind CSS 4, Radix UI, Zustand 5.0
Free and open source. See LICENSE.
Özgür ve açık kaynak. LICENSE dosyasına bakın.