Skip to content
BranchesTags

Repository files navigation

Network Simulator

Version Stack FOSS

A browser-based network simulator for learning switching, routing, wireless, IoT, CLI, and exam workflows.

Live app: network2026.vercel.app

Demo & Videos / Tanıtım Videoları

Quick Start

npm install && npm run dev

Recent Updates / Son Güncellemeler

  • Gelişmiş Paket Yakalama & Analizi (Packet Capture): Paket yakalama paneline canlı IP/protokol/içerik arama, sayfalama (pagination) ve virgül/boşluk ile çoklu dışlama filtresi (cdp, stp, arp vb.) eklendi.
  • Arka Plan Ağ Hareketliliği Kaydı: DHCP DORA akışı (Discover, Offer, Request, ACK), STP BPDU, CDP, OSPF Hello, RIP, EIGRP güncellemeleri ve WLAN Beacon paketleri canlı paket yakalama tablosuna otomatik olarak entegre edildi.
  • Version 2.5 Sürümü: Switch/router arayüz komutları ve PC CMD ARP yönetimi iyileştirildi; derleme ve tip kontrolleri temizlendi.

Stats / İstatistikler

Metric / Metrik Value / Değer
Source Files / Kaynak Dosya TypeScript/TSX kaynakları
Documentation Files / Dokümantasyon Dosya 23
Example Projects / Örnek Proje Uygulama içindeki örnek projeler
Guided Lessons / Rehberli Ders Uygulama içindeki rehberli dersler
Exams / Sınavlar Sınav modu desteği
CLI Commands / CLI Komutları CLI referansında listelenen komutlar

Documentation / Dokümantasyon

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

Keyboard Shortcuts / Klavye Kısayolları

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

Canvas / Tuval

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ç

Ping Packet Analysis / Ping Paket Analizi

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)

CLI / CMD

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

Architecture / Mimari

C4 Architecture Diagrams

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")
Loading

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")
Loading

Directory Structure

src/
├── app/                  # Next.js App Router — pages & layouts
│   ├── api/             # API routes (contact, rooms, certificates)
│   ├── [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
│   │   ├── parser/      # CLI command parsers and patterns
│   │   └── exampleProjects.ts # Example project definitions
│   ├── 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, accessibility and performance tests (Vitest)

Tech Stack / Teknoloji

Next.js 16.2, React 19, TypeScript 6.0, Tailwind CSS 4, Radix UI, Zustand 5.0

License / Lisans

Free and open source. See LICENSE.

Özgür ve açık kaynak. LICENSE dosyasına bakın.

About

Computer Network Learning Simulator Web Application

network2026.vercel.app

Topics

ccnaccna-packet-switchingccnalabscisconetacadnetworknetworkingpacket-tracerpacket-tracer-alternativesimulationsimulator

Resources

Readme
License
Activity

Stars

5 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages