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.
| Name | Role | Status |
|---|---|---|
| Sara Ali | Administrator | Active |
| Omar Hassan | Assessor | Locked |
| Lina Saleh | Viewer | Active |
| الاسم | الدور | الحالة |
|---|---|---|
| سارة علي | مسؤول | نشط |
| عمر حسن | مُقيّم | مقفل |
| لينا صالح | مُشاهد | نشط |
- 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