Logivance

Problemet

Transporter av temperatur- och fuktkänsliga varor kräver att leveransstatus, leveransinformation och aktuella klimatvärden kan följas genom logistikkedjan. Olika användargrupper behöver samtidigt tillgång till olika delar av informationen.

Lösningen

Vi utvecklade tre rollanpassade frontendapplikationer för administratörer, kunder och förare. Plattformen gör det möjligt att följa leveranser, visa aktuell temperatur och luftfuktighet, se leveranshistorik, skanna QR-koder och uppdatera paketstatus genom logistikflödet.

Mitt ansvar

• Utvecklade funktionalitet i React-applikationerna för administratörer, kunder och förare.
• Arbetade med autentisering, JWT-hantering, skyddade routes och rollbaserade användarflöden.
• Byggde vyer för paketöversikter, leveranser, leveransdetaljer, historik och tilldelade transporter.
• Integrerade frontendapplikationerna med backend-API:er för användare, leveranser, klimatvärden och statusuppdateringar.
• Implementerade funktionalitet för QR-koder och QR-skanning i kund- och förarflöden.
• Arbetade med automatiserade tester med Vitest och React Testing Library.
• Bidrog till GitHub Actions-workflows för linting, typkontroll, testning och build.
• Bidrog till ett gemensamt Azure Static Web Apps-workflow för distribution av samtliga frontendapplikationer.
• Samarbetade med backend-, embedded- och UX-kompetenser för att koppla samman användargränssnittet med resten av systemet.

Teknisk lösning

• Tre separata React- och TypeScript-applikationer för administratörer, kunder och förare.
• Rollbaserad routing och skyddade routes med React Router.
• Responsiva gränssnitt byggda med Tailwind CSS.
• Visning av aktuell temperatur och luftfuktighet med kontroll mot tillåtna gränsvärden.
• Leveransstatusar för bland annat skapad, tilldelad, pågående, levererad och avbruten leverans.
• QR-koder och QR-skanning för identifiering och statusuppdatering av försändelser.
• Automatiserade komponent- och användartester med Vitest och React Testing Library.
• Ett gemensamt GitHub Actions-workflow med matrix-strategi för samtliga frontendapplikationer.
• Automatiserad distribution till staging-, produktions- och förhandsgranskningsmiljöer i Azure Static Web Apps.
• Automatisk stängning av förhandsgranskningsmiljöer när en pull request avslutades.

Gemensam leveransprocess för tre frontendapplikationer

Admin-, kund- och förargränssnittet behövde byggas och distribueras separat. Flera fristående workflowfiler hade skapat duplicerad kod och ökat risken för att apparna hanterades olika.

Lösning

Vi skapade ett gemensamt GitHub Actions-workflow med en matrix-strategi där varje frontend byggdes och distribuerades i en isolerad körning. Workflowet stödde staging, produktion och pull request-baserade förhandsgranskningar samt stängde preview-miljöer automatiskt när en pull request avslutades.

Olika användarroller och arbetsflöden

Administratörer, kunder och förare behövde olika vyer, behörigheter och funktioner inom samma logistikkedja.

Lösning

Vi använde gemensam autentiseringslogik och rollbaserade skyddade routes, samtidigt som varje frontend fick egna vyer och användarflöden anpassade efter sin roll.

Resultat

Resultatet blev tre rollanpassade frontendapplikationer som stödjer olika delar av logistikflödet, från paketöversikter och leveranshistorik till tilldelade transporter, QR-skanning och statusuppdateringar. Den gemensamma CI/CD-strukturen gjorde distributionen mer enhetlig och enklare att underhålla.

Lärdomar

• Att strukturera och vidareutveckla flera sammanhängande React-applikationer.
• Att bygga rollbaserade användarflöden med autentisering och skyddade routes.
• Att integrera frontend med API:er för leverans-, status- och klimatdata.
• Att implementera QR-baserade flöden för identifiering av försändelser.
• Att skriva tester med Vitest och React Testing Library.
• Att automatisera build och distribution med GitHub Actions och Azure Static Web Apps.
• Att samarbeta i ett tvärfunktionellt system med frontend, backend, embedded och UX.

Teknik

• React
• TypeScript
• React Router
• Tailwind CSS
• Vite
• Vitest
• React Testing Library
• GitHub Actions
• Azure Static Web Apps