Tutorials › Metals UI

Metals Simple Deploy · Metals UI

The Metals UI: Roles, Routing, and Running It

metals_ui/ is a framework-free, client-side JavaScript app for the Metals API — plain ES modules, hash-based routing, and no build step. Every visitor can see the landing page, but the catalog itself — elements, alloys, and coins — is only visible once you're logged in. Creating, editing, or deleting any of that data is restricted further still, to accounts with the Admin role. Codey will cover how the app decides who sees what, then how to actually run it.

Codey the Sr Developer, standing with a pointer, ready to walk through the guide
Folder → metals_ui/ Framework → none — vanilla JS, ES modules Routing → hash-based (#/elements, #/admin/coins, …) Auth storage → sessionStorage (JWT Bearer token) Roles → Admin, Customer Served by → Nginx, in a container

Two sections start here

First, how the app decides what a visitor is allowed to see and do — the routing and guard logic that sits between every page and the data behind it. Then, how to actually serve this folder and point it at a running API.

Codey typing on a laptop
two sections, one app

Section 1

How the UI Is Put Together

App startup, hash-based routing, the login/admin guards that protect each route, and the shared form for the admin create/edit/delete screens.

RouterRoute guardsSession

Section 2

Running It Locally

Serving metals_ui/ with a plain static server, pointing it at the API through runtime-config.js, and the order to start everything in.

DockerNginxAPI_UPSTREAM

Who can see what the big picture

Three levels of access, each one strictly a superset of the one before it. The UI is what steers a visitor toward the right page, but it isn't what actually enforces any of this — that's still the API's job, exactly as covered in the Metals API tutorial.

Codey pointing to the right
view, then browse, then change
VisitorCan seeCan change
UnauthenticatedThe landing page, log in, registerNothing — the catalog isn't shown at all
CustomerElements, alloys, and coinsNothing — browsing only
AdminEverything a Customer sees, plus the admin sectionElements, alloys, coins, and other users' Admin permission

Registering through the UI always creates a Customer account — there's no self-service way to become an Admin. The seed database ships one ready-made Admin login for local development; see the database tutorial for its credentials.

Every route, and who's allowed on it reference

Routes live after the # in the URL, so the browser never sends them to a server — the router in js/router.js reads window.location.hash and renders a view entirely on the client.

RouteAudiencePurpose
#/EveryoneLanding page introducing the catalog.
#/loginEveryoneLog in with an existing account.
#/registerEveryoneCreate a new Customer account.
#/elementsLogged inBrowse and filter elements.
#/alloysLogged inBrowse alloys and their compositions.
#/coinsLogged inBrowse coins and the alloy each was minted from.
#/adminAdminAdministration landing page.
#/admin/elementsAdminCreate, edit, and delete elements.
#/admin/alloysAdminCreate, edit, and delete alloys.
#/admin/coinsAdminCreate, edit, and delete coins.
#/admin/usersAdminView users and grant or revoke the Admin role.

Pick a section to start go deeper

Section 1 of 2

How the UI Is Put Together

Startup, routing, guards, and the admin CRUD screens.

 Section 2 of 2

Running It Locally

docker compose, the Nginx proxy, and retargeting the API.
Codey giving a thumbs up

New here? Start with how the UI is put together, then see it running — or head to the tutorials home for how every piece of this project fits together.