Ships with 3 sites, 18 machines and 60 days of seeded telemetry data, and runs locally without a database server
ViteReactAdmin dashboard
sitesignal — Vite Admin dashboard Template
By albertoguinda
SiteSignal is an industrial asset monitoring dashboard template with 3 sites, 18 machines and 60 days of seeded telemetry data, offering an interactive 3D floor plan, multi-asset analysis, authentication and multi-tenancy.
Explore the design
Compare the page layouts and mobile experience. Open any screenshot for a closer look.
Desktop homepage1 / 2
Desktop captureTop of page
Actual screenshot captured by the server browser.
All pages & views 2
Screenshots show visual appearance; interactive behavior may differ.
Recorded 2026-10-15View source
What stands out
A quick read of the recorded project description.
Interactive 3D floor plan where hotspots pulse by severity and clicking one shows live sensor data in a side panel
Multi-asset analysis supports comparing the same metric across up to six assets over windows from 24 hours to 60 days
Includes 193 Vitest tests covering utility functions, components and API routes
Supports multi-tenancy and role-based access (admin/member/viewer), using Magic Link passwordless login
Provides a /design-system route that renders all design tokens and component variants live
Template Details
SiteSignal is an industrial asset monitoring dashboard template, with the repository at albertoguinda/sitesignal. The README states that it ships with realistic telemetry data: 3 industrial sites, 18 machines, 60 days of readings, and includes an interactive 3D floor plan, multi-asset analysis, authentication, multi-tenancy, a design system and 193 tests.
The template's main interfaces include: a live overview dashboard (KPI cards, mini trend indicators, equipment distribution, a sortable asset table, site weather and a live alert stream), a react-three-fiber-based 3D floor plan (hotspots pulse by severity, and clicking one loads sensor data in a side panel), multi-asset analysis (compare the same metric across up to six assets over 24-hour / 7-day / 30-day / 60-day windows), asset detail pages, and a /design-system route that renders all design tokens live.
On the tech stack side, the README lists React 19, Vite 8, Tailwind v4, react-three-fiber, TanStack Query, React Router v8, Recharts, Express 5, Drizzle ORM, PostgreSQL (embedded PGlite for local development), Zod, Vitest and TypeScript. Architecturally, shared/types.ts is the type contract shared between client and server.
Deployment options include Vercel (with vercel.json serverless function routing), Docker (multi-stage build, with compose including PostgreSQL) and a generic approach (npm run build followed by npm start, binding to port 5000). Environment variables include NODE_ENV, PORT, DATABASE_URL, PGLITE_DIR and BASE_URL.
The README does not provide information on production performance, concurrency capacity or security audits, nor does it describe implementation details for connecting real data beyond the seed data.
ViteReactBackend
Is it right for your project?
Use Cases
- Teams that need to quickly build a prototype or internal tool for industrial equipment monitoring dashboards
- Projects that want to replace the seed data with their own IoT telemetry pipeline to build a monitoring platform
- Interface scenarios that need to demonstrate interaction between a 3D floor plan and sensor data
- Evaluating how multi-tenancy, role permissions and passwordless authentication are implemented in monitoring applications
Suitable For
- Full-stack developers in the industrial IoT or facility management field
- Frontend or full-stack teams that need a customizable monitoring dashboard template
- Projects looking for reference practices combining React 19, Express 5, Drizzle ORM and PGlite
Getting started & customization
Use these recorded setup notes alongside the repository instructions for your chosen version.
- 1
Requires Node 24; run git clone, npm install, npm run dev, then visit http://localhost:5000
- 2
Local development uses embedded PGlite by default, with no database server required, and seed data is already loaded
- 3
You can connect to an external PostgreSQL via DATABASE_URL, or set PGLITE_DIR to specify the PGlite data directory
- 4
Vercel deployment uses npx vercel --prod; Docker deployment uses docker compose up
- 5
For generic deployment, run npm run build followed by npm start; the service binds to port 5000
License & source material
Usage conditions & limitations
Free to use · keep license noticeThis listing covers the free version under the MIT license in the public repository; the free scope is the code of that version and does not mean external services or third-party assets are free.
Must comply with when using
- You may use, modify, commercialize and distribute the code of this version for free.
- When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
- The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.
Additional costs & items to verify
- Demo images, fonts, icons and other third-party assets must be checked against their respective licenses and cannot be judged solely by the code's MIT license.
- External services such as domains, hosting, databases, payments or AI may incur separate charges.
View Original Text Basis
https://github.com/albertoguinda/sitesignal/blob/main/LICENSEhttps://github.com/albertoguinda/sitesignal/blob/main/README.mdPermission is hereby granted, free of charge
Original License Text
Compiled by DeepSeek based on repository license and README ·2026-10-15. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.
Project checks & description sources
Template Information
- Source platforms
- GitHub
- Documentation and maintenance reference score
- More documented · 85 / 100
- Technologies
- Vite · React
- Website type
- Admin dashboard
How this score is calculated
Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.
What to verify for this project
- Repository update recorded
- 2026-08-13
- Screenshot last checked
- 2026-10-15
A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.
The catalog identifies Vite as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.
Use a selection guide →How this description was prepared
AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.
Review declaration: codex-user-requested-batch-review-20261017 · 2026-10-16
Inspect the recorded source material
SHA-256: 71e53f58c42483d8510125fe1ce2065bb9264af99ca2a4726d1ddfbb3a0608ac
2026-10-15T10:41:37.140Z
Source file / repository# SiteSignal
[](https://github.com/albertoguinda/sitesignal/actions/workflows/ci.yml)
[](#testing)
[](#deploy)
[](#tech-stack)
**Live demo: [https://sitesignalui.vercel.app](https://sitesignalui.vercel.app)**
SiteSignal is an industrial asset monitoring dashboard. It ships with real telemetry data — 3 industrial sites, 18 machines, 60 days of readings — an interactive 3D floor plan, multi-asset analytics, authentication, multi-tenancy, a documented design system, and a 193-test suite. Replace the seed data with your own IoT pipeline and you have a production-ready monitoring platform.
---
## Key Features
- **Interactive 3D Floor Plan** — Built with react-three-fiber. Clickable hotspots pulse by severity, orbit controls let you navigate the space, and selecting a hotspot loads real-time sensor data into a side panel.
- **Multi-Asset Analytics** — Compare the same metric across up to six assets over 24 h / 7 d / 30 d / 60 d windows, with aggregated stats and per-series summaries. Charts render from real bucketed readings, not mock data.
- **Live Overview Dashboard** — KPI cards, sparkline-style metric highlights, fleet distribution, sortable asset table with sticky headers, per-site weather forecasts, and a live alert feed.
- **Design System** — A living `/design-system` route renders every color token, type scale, spacing unit, and component variant live.
- **Production Architecture** — React 19, Vite 8, Express 5, Drizzle ORM, PostgreSQL (PGlite for zero-config local dev). The same code runs locally, in Docker, and on Vercel serverless functions.
- **193 Tests** — Full Vitest suite covering utilities, components, and API routes, with coverage reporting built in.
- **Multi-tenancy** — Organizations, role-based access (admin/member/viewer), and data isolation. Ready for SaaS deployment.
- **Magic Link Auth** — Passwordless login with secure session cookies, rate limiting, and security headers.
---
## Quick Start
```bash
git clone https://github.com/albertoguinda/sitesignal.git
cd sitesignal
npm install
npm run dev
```
Open [http://localhost:5000](http://localhost:5000). PGlite runs embedded — no database server required. The seed data (3 sites, 18 machines, 60 days of telemetry) is already loaded.
Requires Node 24.
---
## Deploy
### Vercel (recommended)
```bash
npx vercel --prod
```
The project includes a `vercel.json` with serverless function routing — the Express API and the static client deploy as one project. The production build (`tsc -b && vite build`) runs in CI-grade checks on every deployment.
### Docker
```bash
docker compose up
```
Multi-stage Dockerfile produces a minimal production image; the compose file includes PostgreSQL. One command, full stack.
### Anywhere Else
```bash
npm run build
npm start
```
Binds to port 5000. Set `DATABASE_URL` for external PostgreSQL, or leave it unset for embedded PGlite.
---
## How to Make It Yours
**1. Connect your own sensors**
Replace the seed data in `server/db/seed.ts` with your IoT telemetry pipeline. The schema in `server/db/schema.ts` defines `readings` and `alerts` — insert rows from MQTT, HTTP webhooks, or any ingestion path.
**2. Change the floor plan**
Edit the 3D scene in `src/components/asset-scene.tsx`. The `Hotspot` component accepts severity levels and triggers the panel update. Swap the geometry for your own facility layout.
**3. Adjust the data model**
Add new asset types in `shared/types.ts`, extend the schema in `server/db/schema.ts`, run `npm run db:generate`, and the API + UI follow the shared contract.
---
## Architecture
```
PRESENTATION React 19 + Vite 8 + Tailwind v4 + react-three-fiber
|
APPLICATION TanStack Query + React Router v8 + Auth context
|
DOMAIN shared/types.ts (TypeScript contract between client/server)
|
INFRASTRUCTURE Express 5 + Drizzle ORM + PostgreSQL (PGlite or external)
```
The type contract in `shared/types.ts` is the single source of truth. Server and client both import from it — no drift, no `any`.
| Layer | Tech | Purpose |
|-------|------|---------|
| Frontend | React 19, Vite 8, Tailwind v4 | UI, 3D rendering, styling |
| State | TanStack Query | Server state, caching, refetching |
| Routing | React Router v8 | Client routes, nested layouts |
| 3D | react-three-fiber + drei | Interactive floor plan |
| Charts | Recharts | Analytics time series |
| API | Express 5, Zod validation | REST endpoints, input validation |
| ORM | Drizzle ORM | Type-safe SQL, migrations |
| Database | PostgreSQL (PGlite embedded) | Zero-config local, production-ready |
| Auth | Magic links + HTTP-only cookies | Passwordless, secure sessions |
---
## Tech Stack
| Category | Technology | Version |
|----------|-----------|---------|
| Runtime | Node.js | 24.x |
| Frontend | React | 19.2 |
| Build | Vite | 8.2 |
| Styling | Tailwind CSS | v4 |
| 3D | react-three-fiber | 9.7 |
| Charts | Recharts | 3.10 |
| API | Express | 5.2 |
| ORM | Drizzle | 0.45 |
| Database | PostgreSQL / PGlite | embedded |
| Validation | Zod | 4.4 |
| Testing | Vitest | 4.1 |
| TypeScript | TypeScript | 7.0 |
| Containers | Docker | multi-stage |
---
## Screenshots
| View | Description |
|------|-------------|
|  | **Dashboard** — KPI cards, per-site ambient conditions, sortable asset table, live alert feed |
|  | **3D Floor Plan** — Click a pulsing hotspot, sensor panel updates in real time |
|  | **Asset Detail** — Full telemetry view for a single machine with 3D context |
|  | **Analytics** — Multi-asset metric comparison with aggregated stats and series summary |
|  | **Design System** — Every token, type scale, and component rendered live at `/design-system` |
---
## Testing
```bash
# Run all 193 tests
npm test
# Single run (CI mode)
npm run test:run
# Coverage report
npm run test:coverage
# Type checking (strict, zero any)
npm run typecheck
```
Tests live in `src/lib/__tests__/` and `server/__tests__/` and use Vitest with Testing Library.
---
## Environment Variables
| Variable | Default | Description |
|----------|---------|-------------|
| `NODE_ENV` | `development` | Environment mode |
| `PORT` | `5000` | Server port |
| `DATABASE_URL` | *(none)* | PostgreSQL connection string (omit for PGlite) |
| `PGLITE_DIR` | `./data/sitesignal` | PGlite data directory |
| `BASE_URL` | `http://localhost:5000` | Base URL for magic links |
---
## Credits
- Ambient conditions by [Open-Meteo](https://open-meteo.com)
- Embedded Postgres by [PGlite](https://pglite.dev)
- UI components by [Radix UI](https://www.radix-ui.com/)
- Icons by [Lucide](https://lucide.dev/)
- 3D rendering by [react-three-fiber](https://github.com/pmndrs/react-three-fiber)
---
MIT — see [LICENSE](./LICENSE)
Explore similar templates
Compare previews and descriptions within the same stack and category.
kiaalap
Kiaalap is a free, open-source admin template from Colorlib for education, online courses, and school management.
Vite · Admin dashboard
react-vite-admin
A backend management starter built on Vite and React, integrating Recoil, React Query, TypeScript, and Axios, with Ant Design-style interface screenshots. Suitable as a starting point for management-side projects, licensed under MIT, with Chinese documentation and common scripts.
Vite · Admin dashboard
admin-antd-react
A Vite + React 18 admin template using Ant Design and Recoil, with login, logout, and registration flows; page, button, and permission configuration verification; internationalization; dynamic sidebar and breadcrumbs; Svg Sprite icons; Mock data; and list, form, and detail page examples.
Vite · Admin dashboard
arco-admin-template
A Vite + React mid-to-back-office template using Arco Design, react-router-dom v6, mockjs, and less, with internationalization, theme customization, and light/dark switching. Includes login, dashboard, resource, component examples, settings, and 404 pages.
Vite · Admin dashboard
super-admin
A React, Vite, and Antd admin template that implements multi-tab route caching similar to Vue keepalive and route-based permission control.
Vite · Admin dashboard
react-vite-tailwind-typescript-firebase-auth-template
A starter template for backend applications using Vite, React, TypeScript, TailwindCSS, and Firebase Auth, featuring login and dashboard interfaces. Requires your own Firebase project and credentials in .env; no backend logic included.
Vite · Admin dashboard