# facett-app — the application-framework — for idiots
> **Class:** `idiot`. Every step, nothing assumed. Goal: **get the facett-demo app-shell
> running on your own screen, then in a real web browser**, from a cold shell. If you already
> know Rust and just want the commands, read [`app-guide.md`](app-guide.md) instead.
## What you need first
- A terminal (the black window where you type commands).
- The facett repo on disk. In the terminal, type this and press **Enter**:
```
cd /run/media/rickard/T9/git/facett
```
- Rust installed (`cargo --version` should print something, not "command not found"). If it
prints "command not found", stop and install Rust first (https://rustup.rs) before continuing.
## Part A — see the app on your own desktop
### Step 1 — build and run it
Type and press **Enter**:
```
cargo run -p facett-demo
```
The first run downloads and compiles a lot of code — it can take several minutes. Wait until
a window titled **"facett-demo — every component, every palette"** opens.
### Step 2 — find the app-framework tabs
Along the top of the window is a row of tab names. Click through them (or scroll the row) and
find these four — they are the ones this document is about:
- **`nav`** — a sidebar on the left with sections you can click to expand ("Data", "Visualise"),
and leaf items ("Grid", "Table", "Settings") that change the text on the right when clicked.
Back (←) and forward (→) buttons sit above the content; clicking a breadcrumb word also jumps.
- **`shell`** — same idea, but clicking a sidebar item swaps in a real spinning 3D model instead
of plain text. Click "3D Models" to expand it, then click "Avocado", "Skull", and "Compare"
(which shows both side by side). Press **Ctrl+K** while this tab is active — a search box pops
up in the middle; type a few letters of "avocado" and press Enter to jump there.
- **`overlay`** — click "Open dialog" to see a confirm/cancel popup; click the other buttons
("Info", "Success", "Warn", "Error") to see coloured notification cards stack up in the
top-right corner and disappear on their own after a few seconds (except the sticky red one —
click its ✕ to dismiss it).
- **`widgets`** — a small tab strip at the top of this tab switches between: a stepper (+/− a
number) and a paged list of 95 rows; a file-tree you can expand/collapse and click; a month
calendar you can click a date on; a colour picker with preset swatches.
### Step 3 — close it
Close the window like any other window, or go back to the terminal and press **Ctrl+C**.
## Part B — see it running in a real web browser (the live demo)
This builds the same app to WebAssembly and serves it locally, exactly like the real
published site does.
### Step 4 — build the web version
Type and press **Enter**:
```
cargo xtask demo-wasm
```
This is slower than Step 1 the first time (it also installs a small helper tool called
`wasm-bindgen` if you don't have it). Wait for it to finish without a red error message. When
it's done, a new folder called `dist` exists inside the facett repo.
### Step 5 — serve it locally
Type and press **Enter**:
```
cd dist
python3 -m http.server 8080
```
(If `python3` isn't found, try `python` instead.) Leave this window running — it's now acting
as a tiny web server.
### Step 6 — open it in your browser
Open a web browser and go to:
```
http://localhost:8080
```
You should see the exact same app as Step 1, now running inside the browser tab. Click around
the `nav`, `shell`, `overlay`, and `widgets` tabs the same way as Part A — they behave
identically. Two things are intentionally different in the browser:
- the **🌍 Region** picker (a separate, unrelated feature) shows a message saying it's
desktop-only instead of doing anything — that's expected;
- 3D/map rendering uses a slightly different (but visually equivalent) drawing path under the
hood; you won't notice a difference.
You can jump straight to one tab by adding `#` and its name to the URL, for example:
```
http://localhost:8080/#shell
```
### Step 7 — stop the local server
Go back to the terminal from Step 5 and press **Ctrl+C**.
## Part C — the real published site
The same build Steps 4 gets pushed to a public URL by whoever maintains the repo, using:
```
cargo xtask deploy-pages
```
(This pushes to a git branch that a hosting service auto-serves — you don't need to run this
yourself just to look at the app; Parts A and B above are enough to see it working.) The
published site is linked from the project's README under a **"⚡ Live Web Demo"** button.
That's the whole tour: one command for a native window (Step 1), three commands for a local
browser copy (Steps 4-6), and clicking through four tabs (`nav`, `shell`, `overlay`,
`widgets`) to see the whole app-framework in action.