You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Web client for REMS-desk, a system for tracking office-equipment repair &
maintenance requests. It is a dependency-free, no-bundler vanilla
JavaScript (ES modules) + HTML + CSS application. The same static files power
the marketing landing page and the role-based dashboard (owner / employee /
solo). In production the files are served by the backend
itself (Express express.static), so there is no separate frontend host.
REMS-desk helps an organization run its equipment-repair workflow end to end:
Sign up / sign in with email (SMS is built but disabled by a feature flag),
a 6-digit verification code, a password and a 6-digit PIN (re-asked on return).
Three roles, auto-detected from your account:
Owner — manages the organization, employees, equipment catalog, partner
contracts and sees all requests.
Employee — handles requests, sees the equipment catalog and colleagues.
Solo — a user without an organization; can create a personal home,
request membership or accept an invitation.
Requests — create, take, progress and close repair requests with
priorities, two-clock SLA (response + resolution), a road-map of statuses,
and photo/document attachments.
Catalog — register equipment with photos, categories, warranty progress.
Partners / contracts — owners set up inter-organization contracts with
their own SLA matrix and contract documents.
Notifications — in-app feed, corner toasts, sound, and (optional)
native OS/browser notifications when the tab is in the background.
Languages — full Russian / English UI, switchable at any time.
Privacy — no tracking cookies; only localStorage is used (session token,
language, UI flags). A one-time notice says so on the landing page.
For developers
Stack: plain ES modules (no build step, no framework), CSS custom
properties, fetch, WebSocket via Socket.IO client, Intl for i18n.
How it is served & cache-busted. Every page is plain HTML. The backend
serves these files and, in dev, rewrites local src/href with a per-boot
?v=BOOT_ID cache-buster and injects a service-worker killer. HTML partials are
assembled server-side via <!--#include "..."> directives (see pages/partials).
pages/dashboard.html — the single-page dashboard shell;
tab panels + chrome (navbar, sidebar→bottom-nav on mobile, modals).
JS architecture. Entry points per page (js/pages/*.js). The dashboard
boots from js/pages/dashboard/index.js, which wires
chrome modules and delegates to a role router that mounts the right
dashboard (owner / employee / solo). Shared concerns live in small,
single-purpose modules injected by dependency (e.g. switchTab is passed into
chrome modules rather than imported globally).
Networking.js/api.js is the typed REST wrapper, js/auth.js
handles the session token / logout, js/socket.js the realtime
channel. All API URLs are relative, so the client works on any origin.
i18n.js/i18n.js loads locales/ru.json /
locales/en.json, translates data-i18n* attributes, and
exposes t(), setLang(), onLangChange(). Backend error keys mirror the
locale JSON structure 1:1, so t(error_key) resolves directly.
Responsive model. Fluid, breakpoint-light chrome (see css/chrome.css
and css/responsive.css): the navbar/content margins shrink
symmetrically; below 768px the dashboard sidebar becomes a bottom nav, the header
matches the landing header, and notifications move into a modal.
For the administrator (me)
Hosting: one Railway service for the whole repo — the backend builds and
runs, and serves this frontend/ folder as static files. There is no
separate static host. See the backend README for the Railway setup.
The only deploy-time switch that touches the client is the public URL
(FRONTEND_URL on the backend) — point it at https://rems-desk.ru. The
client itself needs no edits because all of its API/asset URLs are relative.
Capability flags (js/config.js) come from the backend
(GET /api/config). sms:false hides phone UI everywhere; email:true
enables real email. Safe defaults hide unfinished channels even if the config
fetch fails.
Brand / email-deliverability assets that you configured externally:
bimi/logo-bimi.svg (BIMI logo shown next to emails) and
assets/og-image.png (social preview).
Engineering principles
No build, no dependencies. Ship the source as-is; the browser runs ES
modules directly. This keeps the client auditable and host-agnostic.
Modular / atomic. Many small files with one responsibility each;
composition over inheritance; dependencies passed in (DI) rather than reached
for globally.
CSS manifest.style.css is a thin manifest that @imports the
files in css/; design tokens live in css/tokens.css
(CSS custom properties) — no hard-coded colors/spacing in components.
Server-side HTML includes. Pages are composed from partials via
<!--#include-->, expanded by the backend — one assembled document, no client
templating engine.
Capability flags, not environment checks. Feature availability is driven by
explicit flags from the backend, never by dev/prod sniffing.
RLS-friendly, stateless client. The client holds only a JWT; all
authorization is enforced server-side (PostgreSQL Row-Level Security).
Everything is self-hosted — the app runs with no external CDN.
Running & testing
The client is served by the backend, so the normal way to run it is to start
the backend (it serves ../frontend). See the backend README for npm run dev.
There is no separate build or test command for the client (no bundler, no
framework). To preview just the static files you may serve this folder with any
static server, but API calls will fail without the backend.
SEO note: the code makes the site indexable. To actually appear in
results, register the domain once in Google Search Console, Yandex Webmaster
and Bing Webmaster Tools and submit sitemap.xml.
Web client for REMS-desk, a system for tracking office-equipment repair & maintenance requests. It is a dependency-free, no-bundler vanilla JavaScript (ES modules) + HTML + CSS application.
