> ## Documentation Index
> Fetch the complete documentation index at: https://help.pixwel.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> The Pixwel front end — how ui/3x (React) is structured, set up, and run, and how it relates to the legacy ui/2x.

The Pixwel UI is the browser front end to the [Pixwel API](/api/overview), 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

<Note>
  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`).
</Note>

```bash theme={null}
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](/ui/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](https://github.com/pmndrs/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](/ui/testing).                         |
| `stories/`               | Storybook stories (`pnpm storybook`).                                                    |
| `dist/`                  | Build output (generated by the [Webpack build](/ui/webpack)).                            |

### Inside `modules/`

| Path                       | Description                                                 |
| -------------------------- | ----------------------------------------------------------- |
| `components/`              | Reusable React components.                                  |
| `services/`                | API calls and integrations (REST/[GraphQL](/api/overview)). |
| `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](/ui/webpack).
* **Tests** — Jest (jsdom) for unit tests and Cypress for E2E; see [UI testing](/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](/ui/webpack) — how the front end is built, served, and bundled.
* [UI testing](/ui/testing) — running and writing tests.
* [Video player](/ui/videoplayer) — the in-app preview player.