← Alla projekt

Frontend · Säkerhet · 2024–25

Tvåspråkig adminportal för en plattform för automatiserade bedömningar

Ensam frontendutvecklare i ett program inom offentlig sektor med flera team. Jag tog en adminportal på arabiska och engelska från en prototyp byggd på sex dagar till en fungerande portal mot det skarpa gateway-API:et.

Admin portal
UsersAdd user
NameRoleStatus
Sara AliAdministratorActive
Omar HassanAssessorLocked
Lina SalehViewerActive
بوابة الإدارة
المستخدمونإضافة مستخدم
الاسمالدورالحالة
سارة عليمسؤولنشط
عمر حسنمُقيّممقفل
لينا صالحمُشاهدنشط
Samma vy för användaradministration på engelska och arabiska, spegelvänd från höger till vänster. Bilden är återskapad med exempeldata.
från prototyp till det skarpa gateway-API:et
6 veckor
godkända enhetstester
385
satstäckning
84 %

Utgångsläge

En kund i offentlig sektor höll på att automatisera bedömningar. Portalen behövde självregistrering och administration för personalen på två språk, medan backendens kontrakt hela tiden ändrades.

Min roll

Ensam frontendutvecklare i ett agilt program med flera team. Jag levererade sprint för sprint tillsammans med AI-, backend- och DevOps-teamen: UI, UX, API-integration och tester.

Vad jag byggde

  • Arkitektur: Funktionsmoduler med Redux Toolkit, ett gemensamt HTTP-lager för tokens och omförsök, och delade admin-komponenter som nya vyer återanvänder.
  • Frontend: En klickbar prototyp av bedömningskonsolen på sex dagar, sedan portalen utifrån designen i Figma, med växling till höger-till-vänster.
  • Säkerhet: Hantering av låsta konton, tyst förnyelse av token från en HttpOnly-cookie, utloggning vid inaktivitet och rollstyrda routes.
  • Infrastruktur och DevOps: Förvaltade frontendens nginx-image, byggd i flera steg och utan root, på DevOps-teamets plattform.
  • Test: Tester för samtidig tokenförnyelse, utgångna återställningsnycklar och inloggning med låst konto; 84 % satstäckning.

Svåra problem och beslut

  • Ett API-kontrakt i rörelse. Backendens felformat ändrades mitt i projektet. I stället för att lappa vy för vy skrev jag en enda feltjänst: serverns meddelande på användarens språk först, sedan fältfel, felkoder och HTTP-status. Inom två dagar täckte den inloggning, registrering, lösenordsåterställning, inställningar, användaradministration och tokenförnyelse.
  • En utgången token, många anrop. Parallella anrop misslyckades samtidigt när en token gick ut; nu köar de bakom en enda förnyelse, och en utloggningsflagga tömmer kön. Avvägningen: delat tillstånd i HTTP-lagret, täckt av egna tester.

Resultat

På sex veckor: från prototyp till självregistrering, lösenordsåterställning och administration av användare och roller mot det skarpa gateway-API:et, med 385 godkända enhetstester.

Teknik

TypeScript, React 18, Redux Toolkit, Bootstrap 5, Jest, Next.js och Zustand (prototyp), API-gateway med JWT, Docker, nginx

Områden

Arkitektur, Frontend, Säkerhet, Infrastruktur och DevOps, Test

Period

november 2024 – juli 2025

Nästa projektTidrapportering och datapipeline