FiremeX

FiremeX is a web-based fire & security monitoring console for enterprise safety operations. It gives organizations a real-time dashboard to watch camera feeds, review AI-detected fire/smoke incidents, manage alerts, and administer the operator team that responds to them.

This repository is the admin web app — a single-page application built with Preact and Vite.

Features

• Authentication — Login, plus a registration gateway that supports two paths: registering a new Organization (which generates a unique org code) or requesting Operator access to an existing organization (approval-gated).
• Dashboard — Real-time situation overview with a live clock and recent incident summary.
• Live Feed — Grid of monitored cameras; add and manage devices.
• Incidents — Detection history log with search, camera/status filters, and a resolve/blocker workflow (mark incidents Unresolved / In Progress / Resolved with notes).
• Alerts — Notification history filterable by time range and channel.
• Users — Manage active users and approve/reject pending access requests.

Note: This is currently a UI mockup. There is no backend — data is seeded from in-file fixtures and persisted to the browser's localStorage. Authentication is not enforced (any login navigates to the dashboard).

Tech stack

Layer	Tech
Framework	Preact 10
Build tool	Vite 8
Language	TypeScript
Styling	Tailwind CSS v4 (@tailwindcss/vite)

Routing is handled by a small custom router in src/routes/index.tsx (using the History API), not a routing library.

Getting started

Requires Node.js (tested on v20).

npm install     # install dependencies
npm run dev     # start the dev server (http://localhost:3000)

Then open the printed local URL in your browser. The root path lands on the Login screen; sign in to reach the admin area.

Scripts

npm run dev       # start the Vite dev server with hot reload
npm run build     # type-check (tsc -b) and build for production into dist/
npm run preview   # serve the production build locally

Project structure

src/
  main.tsx              App entry point (renders <App/> into #app)
  app.tsx               Root component
  routes/index.tsx      Custom History-API router
  layouts/              Page shells (Auth, Admin, Operator)
  components/           Shared UI (sidebar, navbar, footer, button)
  pages/
    auth/               Login, RegisterGateway (+ password screens)
    admin/              Dashboard, Livefeed, AddDevice, Incidents,
                        Alerts, User, Profile
  index.css             Tailwind import + theme tokens and global styles
public/                 Static assets (logo, images)