1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
|
{
"project": "Network Classroom - systemd-networkd Web UI",
"version": "0.3",
"goal": "Educational web interface for teaching network fundamentals through practical router configuration with systemd-networkd",
"target_audience": "High school students learning basic networking concepts",
"core_principles": [
"Progressive disclosure - show simple concepts first, advanced options later",
"Visual learning - use diagrams and color coding",
"Safe experimentation - easy undo/redo and validation",
"Real-world relevance - connect concepts to actual network behavior"
],
"requirements": {
"functional": [
{
"id": "F-001",
"description": "The system shall provide an educational dashboard showing network topology with visual representation of interfaces (WAN, LAN, wireless) and their connections."
},
{
"id": "F-002",
"description": "The system shall parse `networkctl status --json=short` and present interfaces in an educational panel showing: name, type (WAN/LAN), MAC, state (color-coded), IP addresses, routes, DNS with tooltips explaining each concept."
},
{
"id": "F-003",
"description": "The system shall provide guided configuration wizards for common scenarios: Home Router, School Lab, Internet Cafe, with explanations of each setup choice."
},
{
"id": "F-004",
"description": "The system shall allow browsing of configuration files with educational annotations explaining what each section does in simple terms."
},
{
"id": "F-005",
"description": "The system shall provide inline configuration editing with two modes: Simple (form-based with explanations) and Advanced (raw file editing with syntax highlighting)."
},
{
"id": "F-006",
"description": "The system shall include network simulation mode showing how configuration changes would affect packet flow before applying changes."
},
{
"id": "F-007",
"description": "The system shall maintain version history with educational notes about what each change accomplished (e.g., 'Added DHCP server for student devices')."
},
{
"id": "F-008",
"description": "The system shall include built-in tutorials: IP addressing, subnetting, NAT, firewall basics, DNS configuration."
},
{
"id": "F-009",
"description": "The system shall provide safe testing environment with pre-commit validation and the ability to quickly revert to known working configuration."
},
{
"id": "F-010",
"description": "The system shall include network diagnostics tools with educational explanations: ping, traceroute, port testing with visual results."
}
],
"technical": [
{
"id": "T-001",
"description": "The backend shall be implemented in Go with RESTful API designed for educational use cases."
},
{
"id": "T-002",
"description": "The frontend shall use vanilla HTML/CSS/JS with custom educational-focused styling - avoid heavy frameworks for better learning and performance."
},
{
"id": "T-003",
"description": "The system shall include configuration templates for educational scenarios with inline documentation."
},
{
"id": "T-004",
"description": "Configuration validation shall include both technical checks (`systemd-analyze verify`) and educational warnings (e.g., 'This will make the device unreachable from network - are you sure?')."
},
{
"id": "T-005",
"description": "The system shall implement atomic operations with automatic backups and easy rollback functionality."
},
{
"id": "T-006",
"description": "The frontend shall include interactive network diagrams that update based on configuration changes."
},
{
"id": "T-007",
"description": "The system shall provide REST API endpoints for educational workflows: template application, simulation mode, diagnostic tests."
},
{
"id": "T-008",
"description": "All operations shall be logged with educational context for review and learning."
}
],
"educational": [
{
"id": "E-001",
"description": "Each configuration option shall have beginner-friendly explanation with examples of when to use it."
},
{
"id": "E-002",
"description": "The interface shall include learning progression from basic (IP addresses) to advanced (firewall rules, VLANs)."
},
{
"id": "E-003",
"description": "The system shall provide immediate feedback showing how configuration changes affect network behavior."
},
{
"id": "E-004",
"description": "Complex concepts shall be broken down with analogies (e.g., 'IP addresses are like street addresses for computers')."
}
]
},
"ui_recommendation": {
"styling_approach": "Use custom CSS with minimal, education-focused design",
"rationale": "Fluent UI is enterprise-focused and may be overwhelming for students. A simpler, custom design will be more approachable and educational.",
"design_principles": [
"Clean, uncluttered interface with ample whitespace",
"Color coding for different interface types and states",
"Progressive disclosure - show advanced options only when needed",
"Consistent, predictable navigation",
"Mobile-responsive for tablet use in classrooms"
]
}
}
|
