Frontend Architecture

The web client that decodes, syncs and paints a session in your browser, and what it is built from.

Section
06 / 14
Read
2 min

The client is the part of Alluno you never install. It runs in the browser, so it is built with web tools chosen for speed, type safety and a small footprint.

Core technologies

Nuxt and Vueframework

Nuxt on Vue renders the marketing site, the dashboard and the stream client from one codebase, with server rendering where a page needs to be crawlable and client rendering where it needs to be interactive.

TypeScriptlanguage

Every wire shape the client speaks, from the API contract to the binary input codec, is typed. Mistakes surface at build time, not in a session.

Tailwind CSSstyling

Tailwind CSS with a single token file for colour, radius, motion and type, so every surface draws from the same values.

Vitebuild

Fast local development and optimised production bundles, with the heavy media code split so the marketing pages never pay for it.

In the stream client

WebCodecs

Hardware decode in the browser where the platform offers it, which is what lets a laptop keep up with a 165 Hz host.

One clock

Video, audio and input share a timebase, so lips match and a shot lands on the frame you saw it on.

Gamepad API

Controller state is read every frame and sent as real device input, with rumble returned to the pad.

Pointer lock

Raw mouse motion for games that read it, with the cursor shape synced from the host.

How it stays honest

Convention testsquality

The layering, the design tokens and the frozen protocol shapes are enforced by tests that read the source tree, not by review alone.

Generated contractsquality

API types are generated from the service's OpenAPI document and checked in, so the client cannot drift from the server unnoticed.

Self hosted fontsquality

Fonts ship with the site. The isolated stream pages block cross origin stylesheets on purpose, and a font request must never be the reason a session looks wrong.

The real time layer under the client