Initial Commit

README.md

@@ -0,0 +1,159 @@
+# Datacenter Modeler
+
+Datacenter Modeler is a React-based web application for designing datacenter rack and cabinet layouts with drag-and-drop equipment placement. Users can build rack diagrams, edit component metadata, export reports, and save/load layouts as JSON.
+
+## Features
+
+- Drag racks and cabinets onto the workspace
+- Limit each diagram to 10 racks/cabinets
+- Choose rack/cabinet height from 2U to 42U
+- Drag equipment into racks with U-position snapping
+- Prevent overlapping equipment placements
+- Edit rack/cabinet properties:
+  - Name
+  - Type
+  - Rack units
+  - Manufacturer
+  - Model
+  - Location
+  - Notes
+- Edit equipment properties:
+  - Name
+  - Size in rack units
+  - Start U position
+  - Manufacturer
+  - Model
+  - Serial number
+  - Asset tag
+  - Power watts
+  - Notes
+- Save diagrams as JSON
+- Load previously saved JSON diagrams
+- Browser autosave with `localStorage`
+- Export rack layouts as PNG or JPG
+- Export a PDF report with the diagram and rack inventory
+- Dark/light theme selector
+- Material UI-based interface
+
+## Component Library
+
+The left-side palette includes:
+
+- Rack
+- Cabinet
+- Switch
+- Router
+- Firewall
+- Server (Rack)
+- Blade Chassis
+- Storage Array
+- Storage Switch
+- Patch Panel
+- Cable Management
+- KVM
+- KVM (Console)
+
+## Tech Stack
+
+- Node.js
+- React
+- TypeScript
+- Vite
+- Material UI
+- html2canvas
+- jsPDF
+
+## Getting Started
+
+Install dependencies:
+
+```bash
+npm install
+```
+
+Start the development server:
+
+```bash
+npm run dev
+```
+
+Vite will print the local URL, usually:
+
+```text
+http://localhost:5173/
+```
+
+If that port is already in use, run:
+
+```bash
+npm run dev -- --port 5174
+```
+
+## Build
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+Preview the production build:
+
+```bash
+npm run preview
+```
+
+## Usage
+
+1. Drag a Rack or Cabinet from the component library into the workspace.
+2. Choose the rack/cabinet size in the dialog.
+3. Drag equipment from the library into a rack/cabinet.
+4. Select racks or equipment to edit properties in the right panel.
+5. Use Save JSON to download the diagram data.
+6. Use Load JSON to continue editing a previously saved diagram.
+7. Use Export to generate a PDF report, PNG, or JPG.
+
+## Data Model
+
+Diagram data is stored as JSON with this top-level shape:
+
+```json
+{
+  "appName": "Datacenter Modeler",
+  "schemaVersion": 1,
+  "name": "Untitled Datacenter Layout",
+  "createdAt": "2026-05-14T00:00:00.000Z",
+  "updatedAt": "2026-05-14T00:00:00.000Z",
+  "racks": []
+}
+```
+
+Each rack/cabinet contains its own metadata and an array of installed equipment. Equipment records include type, name, size, U position, manufacturer/model details, asset information, power, notes, and display color.
+
+## Project Structure
+
+```text
+.
+├── index.html
+├── package.json
+├── src
+│   ├── App.tsx
+│   ├── data
+│   │   └── componentLibrary.ts
+│   ├── main.tsx
+│   ├── styles.css
+│   ├── types.ts
+│   └── utils
+│       └── model.ts
+├── tsconfig.json
+├── tsconfig.node.json
+└── vite.config.ts
+```
+
+## Notes
+
+- Layouts are automatically persisted in the browser using `localStorage`.
+- JSON export is the portable save format for moving diagrams between browsers or computers.
+- PDF and image exports are generated from the rendered workspace.
+- The current implementation is client-side only; no backend server or database is required.
+