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