NetworkView/README.md

NetworkView

A powerful, dark-themed network & homelab documentation application. Document sites, server rooms, racks and every device inside them — with a visual rack diagram, Markdown notes, port/connection tracking and full-text search.

Features

• Visual Rack Diagram — graphical U-by-U rack view with color-coded device types. Click any empty slot to add a device there.
• Hierarchical Structure — Sites → Rooms → Racks → Components
• 10 Component Types — Server, Switch, Router, Firewall, Patch Panel, UPS, PDU, KVM, Storage, Other
• Port Documentation — document each port on a device (RJ45, SFP, SFP+, LC, SC, etc.) with labels and patch-through connections
• Markdown Notes — every entity has a full Markdown editor with live split-pane preview (GFM: tables, checkboxes, code blocks)
• Auto-save Notes — notes save automatically as you type (1.5s debounce)
• Full-text Search — sidebar search across all sites, rooms, racks and components (name, model, IP, serial)
• Dark Theme — GitHub-style dark UI optimised for long documentation sessions

Tech Stack

Layer	Technology
Frontend	React 18 + TypeScript + Vite
Backend	Express.js (Node 20)
Database	SQLite via better-sqlite3 (single file, zero config)
Markdown	react-markdown + remark-gfm

Getting Started

Prerequisites

• Node.js 20+
• npm 10+

Install & Run (Development)

# From the project root
npm install

# Start both backend (port 3001) and frontend (port 5173) with hot-reload
npm run dev

Open http://localhost:5173 in your browser.

Production Build

npm run build    # builds frontend into frontend/dist/
npm start        # serves API + built frontend on port 3001

Open http://localhost:3001

Project Structure

NetworkView/
├── backend/
│   └── src/
│       ├── index.js          # Express server + search endpoint
│       ├── db.js             # SQLite init + schema
│       └── routes/
│           ├── sites.js
│           ├── rooms.js
│           ├── racks.js
│           └── components.js # includes ports sub-resource
├── frontend/
│   └── src/
│       ├── App.tsx           # Router
│       ├── api.ts            # Fetch wrapper for all endpoints
│       ├── types.ts          # TypeScript types + component metadata
│       ├── components/
│       │   ├── Sidebar.tsx       # Tree navigation + search
│       │   ├── RackVisual.tsx    # Graphical rack diagram
│       │   ├── MarkdownEditor.tsx
│       │   └── AddItemModal.tsx
│       └── pages/
│           ├── HomePage.tsx
│           ├── SitePage.tsx
│           ├── RoomPage.tsx
│           ├── RackPage.tsx
│           └── ComponentPage.tsx
└── data/
    └── networkview.db        # Created automatically on first run

Data Model

Site
 └── Room(s)
      └── Rack(s)
           └── Component(s)
                └── Port(s)

Every level has its own page with Markdown notes.

API Reference

Method	Path	Description
GET	/api/sites	List all sites
POST	/api/sites	Create site
GET/PUT/DELETE	/api/sites/:id	Site CRUD
GET	/api/rooms?siteId=	Rooms in a site
POST	/api/rooms	Create room
GET/PUT/DELETE	/api/rooms/:id	Room CRUD
GET	/api/racks?roomId=	Racks in a room
POST	/api/racks	Create rack
GET/PUT/DELETE	/api/racks/:id	Rack CRUD
GET	/api/components?rackId=	Components in rack
POST	/api/components	Create component
GET/PUT/DELETE	/api/components/:id	Component CRUD
GET	/api/components/:id/ports	Ports on component
POST	/api/components/:id/ports	Add port
PUT/DELETE	/api/components/:id/ports/:portId	Port CRUD
GET	/api/search?q=	Full-text search