🌐 Network SOT - Obsidian Network IPAM

Network Source of Truth (SOT) - A lightweight, markdown-native IPAM tool for CCNA students to practice network design with version control.

✨ Features

🎯 Core Features

• Port-Level IP Management - Assign IPs per interface, not per device
• Editable Table Interface - Inline editing for all network parameters
• Automatic Validation - 8 validation rules with real-time feedback
• Cascading Changes (🔥 Killer Feature) - Change one IP, see all dependencies
• CLI Generator - One-click Cisco IOS config generation
• Markdown Native - All data stored as YAML frontmatter in .md files
• Git-Ready - Perfect for GitHub collaboration and version control
• Network Topology Graph - Visual representation of your network
• Zero Dependencies - Offline-first, no database required

🚀 Student Benefits

1. Less Busywork - Auto-calculate subnets, masks, wildcards
2. Better Learning - See network dependencies in real-time
3. Git Workflow - Learn version control while building networks
4. Portable - Take your lab anywhere (just GitHub repo)
5. Free - Open-source, forever free

---

📊 Competitive Advantage

Feature	NetBox	Ansible	Packet Tracer	GNS3	Network SOT
Port-level IP management	✅	❌	❌	✅	✅
Editable inline table	Partial	❌	❌	❌	✅
Cascading confirmation	❌	❌	❌	❌	✅
CLI generator	❌	✅	❌	✅	✅
Lightweight/Offline	❌	❌	✅	❌	✅
Git-native format	❌	✅	❌	❌	✅
Learning-focused	❌	❌	✅	✅	✅
Free	✅	✅	Partial	✅	✅

---

🎓 Perfect For

• 📚 CCNA Students (200-301) learning IPv4 addressing
• 🏫 Networking Classes (competitive advantage)
• 💼 Lab Documentation (instead of manual notes)
• 🤝 Peer Learning (GitHub collaboration)
• 🏢 Small Lab Environments (lightweight alternative to NetBox)

---

🚀 Quick Start

Installation

# Clone repo
git clone https://github.com/pakcli/Webapp-Learn-Network-Enginner.git
cd Webapp-Learn-Network-Enginner

# Install dependencies
npm install

# Start dev server
npm run dev
# → Opens http://localhost:5173

First Lab (5 minutes)

1. Open app
2. Click "+ Add Device"
3. Create devices: R1 (router), SW1 (switch), PC1 (client)
4. Edit table:
   • R1.Gi0/0: 192.168.1.1/24
   • SW1.Gi0/0: connected to R1.Gi0/0
   • PC1.Gi0/0: 192.168.1.10/24 (gateway: 192.168.1.1)
5. Click "Generate CLI" → Copy to Packet Tracer
6. Click "Export Vault" → Commit to GitHub

---

📁 Project Structure

.
├── src/
│   ├── types/               # TypeScript interfaces
│   ├── components/          # React components
│   ├── services/            # Business logic (engines)
│   ├── hooks/               # Custom React hooks
│   ├── utils/               # Utilities
│   ├── constants/           # Constants
│   ├── styles/              # Global CSS
│   ├── App.tsx              # Root component
│   └── index.tsx            # Entry point
├── docs/                    # Documentation
├── examples/                # Example vaults
├── tests/                   # Test files
└── public/                  # Static assets

---

🧠 How It Works

The Data Model

Each device = one .md file with YAML frontmatter:

---
hostname: R1
role: router
ports:
  Gi0/0:
    ip: 192.168.1.1
    cidr: 24
    subnet: 192.168.1.0
    wildcard: 0.0.0.255
    connected_to: SW1.Fa0/1
    ospf_area: 0
  Gi0/1:
    ip: 10.0.0.1
    cidr: 30
    connected_to: R2.Gi0/0
---

# Router Configuration

Core router for CCNA Lab 01

The Validation Rules (8 Rules)

1. ✅ Port-level IPs - Every interface gets its own IP
2. ✅ Same segment = same subnet - Connected ports must match
3. ✅ Gateway exists - Client gateways must be real devices
4. ✅ Router-to-router /30 - P2P links are point-to-point
5. ✅ No overlap - IPs must be unique
6. ✅ OSPF match - Wildcards must match CIDR
7. ✅ Cascading confirm - See dependencies before applying
8. ✅ CLI valid - Only generate if all rules pass

The Killer Feature: Cascading Changes

User changes:  R1.Gi0/0: 192.168.1.1 → 192.168.2.1

System detects:
- PC1 gateway (192.168.1.1) no longer exists
- PC1 must move to 192.168.2.0/24

System asks:
"Update PC1 gateway to 192.168.2.1 and IP to 192.168.2.10? YES/NO"

User clicks YES → All 4 files updated
User clicks NO → Change reverted

---

📚 Documentation

• Data Model Spec
• Validation Rules
• User Guide
• Developer Guide

---

🔧 Tech Stack

• Frontend: React 18 + TypeScript
• State: Zustand
• Styling: CSS Modules
• Build: Vite
• Testing: Vitest + Testing Library
• Graph: Cytoscape.js
• Data: YAML + Markdown

---

🎯 Roadmap

Phase 1 (MVP) ✅

• React + TypeScript setup
• Type definitions
• Markdown parser
• Device table component
• Validation engine
• CLI generator

Phase 2

• Cascading detector
• Graph visualization
• File upload/export
• Obsidian plugin wrapper

Phase 3

• GNS3 integration
• Packet Tracer export
• Multi-vault management
• Collaborative editing

---

🤝 Contributing

Contributions welcome! See CONTRIBUTING.md for guidelines.

# Fork, create feature branch
git checkout -b feature/your-feature
commit changes
git push origin feature/your-feature
# Open PR

---

📝 License

MIT License - See LICENSE file

---

🎓 Made for CCNA Students

Specifically designed to help students like you:

• ✅ Stop spending time on manual data entry
• ✅ Focus on network design concepts
• ✅ Learn Git workflow alongside networking
• ✅ Build a portfolio on GitHub
• ✅ Collaborate with peers

One Liner:

"Enter IP once, validate automatically, see dependencies, generate CLI — focus on learning the logic, not busywork." 🎯

---

📞 Support

• 💬 GitHub Discussions: Ask questions
• 🐛 GitHub Issues: Report bugs
• 📧 Email: [your email]

---

Happy learning! 🚀