Overview - Pixwel Platform

The Pixwel UI is the browser front end to the Pixwel API, for both end users and administrators. It lives under ui/ and is split into two apps:

App	Path	Stack	Status
3.x	`ui/3x/` (package `pixwel-ui`)	React, Webpack 5, SCSS, Ant Design, Zustand	Current — where new work happens.
2.x	`ui/2x/`	AngularJS, Gulp, Karma	Legacy — still runs alongside 3.x, but not where new features go.

New development targets ui/3x. The rest of this page describes it.

Setup

Work in ui/3x with pnpm — its engines field says npm, but npm install fails there. Install with pnpm install. Node 22 (ui/3x/package.json engines).

cd ui/3x
pnpm install
pnpm start        # Webpack dev server on port 9000 (https://development.pixwel.com:9000)
pnpm start:dev    # dev server with DEV=true, opens a browser

For the full command list and how the bundle is built, see Webpack.

Structure

Everything below is under ui/3x/:

Path	Description
`index.js` / `app.js`	App entry and root component.
`pages/`	One directory per route (for example `project/`, `asset/`, `shares/`, `work-requests/`).
`layouts/`	Page shells the routes render into.
`modules/`	Shared application code (see below).
`stores/`	Zustand state stores, named `use-*-store.js`.
`scss/` & `theme/`	Styles (SCSS) and theme tokens.
`config/` & `constants/`	Build/runtime configuration and shared constants.
`utils/`	Plain helper functions.
`cypress/` & `tests/`	Cypress E2E and Jest unit tests — see UI testing.
`stories/`	Storybook stories (`pnpm storybook`).
`dist/`	Build output (generated by the Webpack build).

Inside `modules/`

Path	Description
`components/`	Reusable React components.
`services/`	API calls and integrations (REST/GraphQL).
`hooks/`	Custom React hooks.
`contexts/` & `providers/`	React context and provider wrappers.
`hoc/`	Higher-order components.
`navigation/`	Routing and nav structure (`router.js`).

Tooling

Build/serve — Webpack 5 (webpack.config.js); see Webpack.
Tests — Jest (jsdom) for unit tests and Cypress for E2E; see UI testing.
Linting — ESLint flat config (eslint.config.mjs) + Stylelint for SCSS, via pnpm lint. Husky runs lint-staged on commit.
Deploy — Vercel (ui/3x/vercel.json, ui/create-vercel-output.js).

More UI docs

Webpack — how the front end is built, served, and bundled.
UI testing — running and writing tests.
Video player — the in-app preview player.

​Setup

​Structure

​Inside modules/

​Tooling

​More UI docs

Setup

Structure

Inside `modules/`

Tooling

More UI docs