🌐 NetFlow Lab — Visual Networking Practice Playground

Learn networking visually by building, configuring, and validating network topologies in your browser.

---

🧠 Problem Statement

Learning networking concepts (IP addressing, subnets, routing, connectivity) is hard because:

• Most tools like Cisco Packet Tracer are heavyweight and not beginner-friendly
• Learners struggle to visualize how nodes connect and communicate
• Platforms like TryHackMe give challenges but no visual builder to experiment freely

👉 There is a gap for a lightweight, browser-based, visual networking lab focused on practice and feedback.

---

🎯 Product Vision

Build a web-based interactive networking lab where users can:

• Visually construct network topologies
• Configure nodes (IP, subnet, routing)
• Attempt guided challenges
• Get real-time validation feedback

---

🎯 Target Users

• Beginner networking learners
• Frontend/backend developers exploring networking basics
• Bug bounty / security beginners
• Students preparing for CCNA basics

---

🧩 Core MVP Concept

The product is challenge-first.

Users will:

1. Pick a challenge
2. Build the network visually
3. Configure nodes
4. Click Validate
5. See pass/fail + hints

---

🧪 Example Challenges

🟢 Challenge 1 — Same Subnet Communication

Goal: Connect 2 PCs in the same subnet and enable communication.

Requirements:

• PC A and PC B connected via switch or direct link
• Both must have IPs in same subnet
• Subnet mask must match

---

🟡 Challenge 2 — Inter-Subnet Routing

Goal: Allow communication between two different subnets via a router.

Requirements:

• Two PCs in different subnets
• Router in between
• Correct interface IP configuration
• Default gateway setup

---

🔴 Challenge 3 — Fix Broken Network

Goal: Given a pre-built network, fix incorrect configuration.

Requirements:

• Detect wrong IP/subnet
• Correct routing issue

---

🧱 Core Features (MVP Scope)

1. 🖼️ Visual Canvas

• Built using React Flow
• Drag-and-drop network nodes
• Connect nodes using edges (cables)

---

2. 🧩 Node Types

Node Type	Description	Configurable
PC	End device	IP, subnet, gateway
Router	Routing device	Interfaces + IP
Switch	Layer 2 device	(no config in MVP)

---

3. ⚙️ Configuration Panel

On selecting a node:

PC Config

• IP Address
• Subnet Mask
• Default Gateway

Router Config

• Interface list (eth0, eth1…)
• IP address per interface

---

4. 🔗 Network Connections

• User connects nodes via edges
• Each edge represents a cable
• Direction is not important (undirected graph)

---

5. 🧠 Validation Engine (Core Logic)

User clicks Validate → system runs checks:

Validation Rules:

• ✔ All nodes are connected (no isolated nodes)
• ✔ IP format is valid
• ✔ Devices in same subnet can communicate
• ✔ Devices in different subnets require router
• ✔ Gateway is correctly configured
• ✔ Router interfaces belong to correct subnet

---

6. 🧪 Challenge Engine

Each challenge contains:

• Title
• Description
• Initial state (optional)
• Validation function

type Challenge = {
  id: string;
  title: string;
  description: string;
  initialGraph?: Graph;
  validate: (graph: Graph) => ValidationResult;
};

---

7. 💾 Local Persistence

• Save graph state in localStorage
• Resume last session

---

🧠 Technical Architecture

🔷 Data Models

type NodeType = "pc" | "router" | "switch";

type IPConfig = {
  ip: string;
  subnetMask: string;
  gateway?: string;
};

type RouterInterface = {
  name: string;
  ip: string;
  subnetMask: string;
};

type NetworkNode = {
  id: string;
  type: NodeType;
  config: IPConfig | RouterInterface[];
};

type NetworkEdge = {
  id: string;
  source: string;
  target: string;
};

type Graph = {
  nodes: NetworkNode[];
  edges: NetworkEdge[];
};

---

🧠 Validation Logic (High-Level)

1. Convert graph to adjacency list

2. Use BFS/DFS to:

   • Check connectivity
   • Find path between nodes

3. Compare:

   • subnet(ip1) === subnet(ip2)

4. If different subnet:

   • ensure router exists in path

5. Validate gateway routing

---

🖥️ UI/UX Structure

-----------------------------------------
| Sidebar |    Canvas (ReactFlow)       |
| Nodes   |                              |
|---------|------------------------------|
| Challenges Panel | Config Panel        |
-----------------------------------------

---

🎨 UI Components

• FlowCanvas
• SidebarNodes
• NodeConfigPanel
• ChallengeList
• ValidationResultPanel

---

⚙️ Tech Stack

Layer	Technology
Framework	React + TypeScript
Styling	Tailwind CSS
Graph UI	React Flow
State	Zustand
Storage	localStorage

---

🚀 Success Metrics (MVP)

• User can complete at least 3 challenges

• Validation system correctly detects:

  • wrong subnet
  • missing router
  • bad gateway

• UI remains responsive with 20+ nodes

---

🗺️ 20-Day Execution Plan

Week 1

• Canvas + nodes + connections
• Basic node config panel

Week 2

• Validation engine
• Subnet logic
• Routing logic

Week 3

• Challenge system
• UI polish
• persistence
• bug fixes

---

🔮 Future Enhancements (Post-MVP)

• Ping simulation animation
• Packet flow visualization
• Firewall rules
• VLAN support
• Multi-user collaboration
• Shareable challenge links

---

🧑‍💻 Why This Project Matters

This project demonstrates:

• Complex frontend architecture
• Graph-based UI systems
• Domain modeling (networking)
• Validation engines
• Product thinking

---

📌 Author

Built by a Frontend Engineer passionate about:

• Visual systems
• Networking
• Security learning tools

---

🚀 Goal: Make networking learning as intuitive as drawing a flowchart.