Equipment monitoring and 3D digital twin for an induction welding department. Tracks 8 induction welders (Radyne TFD), 2 laser welders (AMADA WELD TECH Delta), and a central power supply with live sensor data and status visualization.

• Framework: Next.js 16 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS v4
• UI Components: shadcn/ui (base-nova style)
• State Management: TanStack Query (server state), React Context (client state)
• Tables: TanStack Table
• Charts: Recharts
• 3D Visualization: React Three Fiber + drei
• Icons: Lucide React
• Fonts: Rubik (sans), Ubuntu Mono (mono)
• Package Manager: pnpm

pnpm install
pnpm dev

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

The department layout (40 ft x 25 ft) contains:

Each unit has temperature and power sensors with configurable thresholds. Statuses: normal, warning, critical, offline.

├── app/
│   ├── api/assets/          # Asset API routes (list + detail)
│   ├── api/digital-twin/    # Digital twin layout + mappings API
│   ├── dashboard/           # Dashboard layout (assets, visualization)
│   └── page.tsx             # Redirects to /dashboard/assets
├── components/
│   ├── features/            # Page-specific components
│   │   ├── assets/          # Equipment list page
│   │   ├── asset-detail/    # Equipment detail page
│   │   └── digital-twin/    # 3D visualization page
│   ├── layouts/dashboard/   # Sidebar, header, nav
│   ├── shared/              # Reusable components + 3D system
│   │   └── data-center-3d/  # 3D renderer, room, equipment units
│   └── ui/                  # shadcn/ui base components
├── data/json/
│   ├── assets.json          # 11 equipment definitions with sensors
│   └── equipment-mappings.json  # Equipment-to-asset ID mappings
├── lib/
│   ├── api/                 # TanStack Query hooks (assets, digital-twin)
│   ├── services/            # Business logic (assets, digital-twin)
│   ├── formatters/          # Date, number, status formatters
│   └── utils/               # Grid utilities for 3D positioning
└── types/                   # TypeScript types (asset, sensor)

Download the Windows installer from https://nodejs.org (v20 LTS or later recommended).

After install, verify in PowerShell:

node --version
npm --version

npm install -g pnpm

Verify:

pnpm --version

If you get an execution policy error, run PowerShell as Administrator and execute:

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Download from https://git-scm.com/download/win. During installation, select "Git from the command line and also from 3rd-party software" when prompted about PATH.

Verify:

git --version

git clone <repository-url>
cd induction-welding-digital-twin

pnpm install

pnpm dev

Open http://localhost:3000 in your browser. The app redirects to /dashboard/assets by default.

Configure Git to handle line endings properly:

git config --global core.autocrlf input

If the repo already has CRLF issues after cloning, you can normalize:

git add --renormalize .
git commit -m "Normalize line endings"

Next.js projects with node_modules can hit the Windows 260-character path limit. Enable long paths:

1. Open Registry Editor (Win + R → regedit)
2. Navigate to HKLM\SYSTEM\CurrentControlSet\Control\FileSystem
3. Set LongPathsEnabled to 1
4. Restart your machine

Or via PowerShell (Admin):

New-ItemProperty -Path "HKLM:\SYSTEM\CurrentControlSet\Control\FileSystem" -Name "LongPathsEnabled" -Value 1 -PropertyType DWORD -Force

Also enable in Git:

git config --global core.longpaths true

If port 3000 is in use, find and kill the process:

netstat -ano | findstr :3000
taskkill /PID <PID> /F

Or start on a different port:

pnpm dev -- -p 3001

Windows is case-insensitive by default. Avoid creating files that differ only by case (e.g., Button.tsx vs button.tsx). The project's existing structure follows consistent casing — keep it that way.

Install VS Code with these extensions:

• ESLint — linting integration
• Tailwind CSS IntelliSense — autocomplete for Tailwind classes
• TypeScript + JavaScript — built-in, ensure it's enabled
• Prettier — code formatting (if the project uses it)

Create .vscode/settings.json in the project root if it doesn't exist:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.tsdk": "node_modules/typescript/lib",
  "files.eol": "\n"
}

pnpm: command not found — Close and reopen PowerShell after installing pnpm so the PATH updates.

EPERM or permission errors during install — Run PowerShell as Administrator, or check that your antivirus isn't blocking node_modules writes. Exclude the project directory from real-time scanning.

Three.js / WebGL issues — The 3D digital twin (React Three Fiber) requires WebGL support. Make sure your GPU drivers are up to date. If using Remote Desktop, WebGL may be unavailable — use a local session instead.

Module not found after pulling changes — Run pnpm install again to pick up any new or updated dependencies.

Build fails with heap out of memory — Increase Node.js memory:

$env:NODE_OPTIONS="--max-old-space-size=4096"
pnpm build