← All work

Frontend · Security · 2024–25

Bilingual admin portal for an automated assessment platform

Sole frontend engineer in a multi-team public-sector programme, taking an Arabic/English admin portal from a six-day prototype to a working portal on the real gateway API.

Admin portal
UsersAdd user
NameRoleStatus
Sara AliAdministratorActive
Omar HassanAssessorLocked
Lina SalehViewerActive
بوابة الإدارة
المستخدمونإضافة مستخدم
الاسمالدورالحالة
سارة عليمسؤولنشط
عمر حسنمُقيّممقفل
لينا صالحمُشاهدنشط
The same user-administration screen in English and Arabic, mirrored right to left. Redrawn with sample data.
from prototype to the real gateway API
6 weeks
passing unit tests
385
statement coverage
84%

Context

A public-sector client was automating assessments. The portal needed self-registration and staff administration in two languages while backend contracts kept changing.

My role

Sole frontend engineer in a multi-team agile programme, delivering sprint by sprint alongside the AI, backend and DevOps teams: UI, UX, API integration and tests.

What I built

  • Architecture: Feature modules on Redux Toolkit, one HTTP layer for tokens and retries, and shared admin components that new screens reuse.
  • Frontend: A six-day clickable prototype of the assessment console, then the portal from Figma designs, with right-to-left switching.
  • Security: Locked-account handling, silent token renewal from an HttpOnly cookie, idle sign-out and role-gated routes.
  • Infrastructure & DevOps: Maintained the frontend's multi-stage, non-root nginx image on the DevOps team's platform.
  • Testing: Concurrent token refresh, expired reset keys and locked-account sign-in under test; 84% statement coverage.

Hard problems and decisions

  • A moving API contract. The backend's error format changed mid-project. I wrote one error service instead of patching screens: the server's message in the user's language first, then field errors, codes and HTTP status. Within two days it covered sign-in, registration, password reset, settings, user admin and token refresh.
  • One expired token, many requests. Parallel requests failed together when a token expired; now they queue behind a single refresh, and a logout flag clears the queue. Trade-off: shared state in the HTTP layer, covered by dedicated tests.

Outcome

In six weeks: from prototype to self-registration, password recovery and user and role administration on the real gateway API, with 385 passing unit tests.

Stack

TypeScript, React 18, Redux Toolkit, Bootstrap 5, Jest, Next.js and Zustand (prototype), JWT API gateway, Docker, nginx

Areas

Architecture, Frontend, Security, Infrastructure & DevOps, Testing

Period

Nov 2024 – Jul 2025

Next caseTime reporting and data pipeline