# 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)

```bash
# 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

```bash
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 |