The Volume.
Currently — shipping Tokenix v0.1
EN

A Personal Volume of UI Engineering Work

Osama
Hassouna.

A personal volume of work in UI engineering, design systems, and UI tooling. Now in its 0 year of practice across government and public-sector platforms in Saudi Arabia and Egypt.

Open to senior UI engineering roles and consulting engagements. Edited from Egypt · UTC+02

Year of practice

0

Production platforms

0

Open work

0

Web platforms

0

The UI is where the contract is signed. Bilingual layouts, reusable controls, and design tokens are promises that must hold under change. Most of what I do is making sure those promises hold across features, locales, compliance rules, and developers I will never meet.

I optimize for durability, not output. A pattern that survives three migrations is worth more than a feature that ships next sprint. The longer I work, the smaller my diffs become, and the larger their downstream reach.

I mentor by code review, not by lecture. The good notes outlast the meeting. Junior and mid-level engineers I have worked with over the past nine years are senior or principal at their current companies. That is the work I am proudest of.

AI is a daily tool for catching what I would miss on a bad day. It is not a substitute for taste, and taste is not a substitute for it. The best UI work stays invisible. Users do their job. Developers reuse the pattern. Nobody talks about it. That is the goal.

— O.H., Egypt.

Feature · Production Work

02.

Feature Selected Production Work.

0 platforms · Government · Enterprise · SaaS

Government · Saudi MoH Multi-tenant · Bilingual

HETP — Health Employees Transfer Platform

A multi-tenant Saudi MoH platform supporting cluster-based health-sector workflows.

Built the Angular UI for a multi-tenant government system supporting cluster-based workflows across the kingdom. Owned the full employee transfer lifecycle — upload, validation, scoring, approvals, offers — as a single coherent UI flow.

  • Modular UI architecture on PrimeNG with reusable components shared across modules.
  • Real-time dashboards for reporting, audit tracking, and live monitoring of long-running processes.
  • Bilingual contract held end-to-end across an interface with hundreds of form controls.
Angular PrimeNG RxJS RTL / LTR Real-time UI

SaaS · Multi-product

Rassd Cloud Platform

SaaS ecosystem · Cross-product UI

Scalable Angular UI architecture across multiple interconnected products. Shared component patterns and bilingual UI consistency held at the ecosystem level.

Angular Shared lib Bilingual

Financial · ZATCA

Rassd Fawtara

E-invoicing · Compliance-aware UI

UI for a ZATCA-compliant e-invoicing platform — issuance, validation, archival, audit. Bilingual contract held end-to-end.

Angular PrimeNG ZATCA

HR · Workforce

Rassd Twajd

Attendance · Reporting · Multi-role shell

UI flows for attendance tracking, reporting, and employee operations. Built around two audiences sharing one shell: manager dashboards and employee daily-use surfaces.

Angular Charts Multi-role

EdTech · Multi-role

Tallam Platform

Student · Teacher · Admin

Student, teacher, and admin UI systems sharing one design language. Three audiences. One product. Multi-role interfaces holding under role-switching.

Angular CMS Multi-role

Workshop · Open Work

03.

Workshop Open and Personal Work.

0 builds · OSS · Tooling · Reference

CLI + npm

Angular Deep Intelligence →

AST-based code intelligence engine

Angular code-intelligence engine. 0 tests, detects architectural smells, dependency cycles, and Angular anti-patterns directly from the file system. MIT.

Angular ts-morph MIT

VS Code + CLI

Tokenix

Preview-first design-token migration

CSS and SCSS to design-token migration engine with a preview-first UX. Routes output to PrimeNG, Bootstrap, or a custom vocabulary via a library target spec.

TypeScript SCSS AST VS Code v0.1

CSS Architecture

Design System Infrastructure →

Framework-agnostic CSS build pipeline

Six-layer CSS architecture (tokens, base, utilities, components, themes, page modules) under a strict --ds- namespace.

SCSS PostCSS OKLCH

Backend · CQRS

1moneyAI →

Personal-finance ledger backend

ASP.NET Core 8 with Clean Architecture and CQRS. EF Core for writes, Dapper for reads. Integer minor units, append-only audit trail, derived balances.

.NET 8 CQRS PostgreSQL MIT

Web app · Vercel

Interview Prep →

Senior FE interview self-quiz

Single-file interview-prep tool with a 0 question bank, spaced repetition, XP and mastery, two-track Mock Interview (UI / Angular), and a leveled Forms + API guided path with practical scenarios.

Vanilla JS Spaced Rep MIT

Reference · Astro + Starlight

Docs Hub →

Engineering reference hub

Multi-guide engineering reference under one editorial system. First guide: HTML Email Playbook — 22 pages on structure, components, compatibility (Outlook, RTL, responsive), and production patterns, with downloadable templates.

Astro Starlight MDX
Game · AI Pipeline · Live Cultivation RPG · Course-to-Game

Ascendium — Forge Your Path to Mastery →

A cultivation RPG that converts educational courses into playable skill paths.

AI pipeline extracts course subtitles, generates 0 challenges across 0 levels, and QC-reviews every question against source transcripts. One persistent game world with guilds, skill trees, boss fights, and cultivation-style progression.

  • Academy Hub with guild system (Frontend, Backend, Fullstack, UI/Design) and skill paths within each guild.
  • Four challenge types: MCQ, true/false, code fill, and practical scenarios with boss fights gating each level.
  • Character progression with XP, realms (Apprentice to Master), unlockable titles, and Teacher NPC for help.
Vanilla JS Claude API Game Design Python NLP Pipeline

Directory · Web Platforms

04.

Directory Public-facing sites.

0 platforms delivered

World of Systems & Softwares →

Corporate website · WSS

2020 — present

SMARTWARE LTD →

Enterprise solutions

2023 — 2024

Al Ahsa Chamber (HCCI) →

Government platform

Saudi Arabia

Najahi Events

Campaign landing system

Saudi Arabia

Quareb →

Healthcare platform

Saudi Arabia

Romoz →

Bilingual agency website · Live

romoz.vercel.app

Trology Residences →

Real estate · Arabic-first · Live

truelogy.vercel.app