Logivance

The problem

Transporting temperature- and humidity-sensitive goods requires delivery status, delivery information and current climate data to be tracked throughout the logistics chain. Different user groups also need access to different parts of the information.

The solution

We developed three role-based frontend applications for administrators, customers and drivers. The platform makes it possible to track deliveries, view current temperature and humidity, review delivery history, scan QR codes and update package status throughout the logistics flow.

My responsibilities

• Developed functionality in the React applications for administrators, customers and drivers.
• Worked with authentication, JWT handling, protected routes and role-based user flows.
• Built views for package overviews, deliveries, delivery details, history and assigned transports.
• Integrated the frontend applications with backend APIs for users, deliveries, climate data and status updates.
• Implemented QR code and QR scanning functionality in customer and driver flows.
• Worked with automated testing using Vitest and React Testing Library.
• Contributed to GitHub Actions workflows for linting, type-checking, testing and builds.
• Contributed to a shared Azure Static Web Apps workflow for deploying all frontend applications.
• Collaborated with backend, embedded and UX specialists to connect the user interface with the rest of the system.

Technical implementation

• Three separate React and TypeScript applications for administrators, customers and drivers.
• Role-based routing and protected routes with React Router.
• Responsive interfaces built with Tailwind CSS.
• Display of current temperature and humidity with checks against permitted threshold values.
• Delivery statuses including created, assigned, in progress, delivered and cancelled.
• QR codes and QR scanning for identifying shipments and updating their status.
• Automated component and user tests with Vitest and React Testing Library.
• A shared GitHub Actions workflow with a matrix strategy for all frontend applications.
• Automated deployment to staging, production and preview environments in Azure Static Web Apps.
• Automatic closure of preview environments when a pull request was closed.

A shared delivery process for three frontend applications

The admin, customer and driver interfaces needed to be built and deployed separately. Several independent workflow files would have created duplicated code and increased the risk of handling the applications differently.

Solution

We created a shared GitHub Actions workflow with a matrix strategy where each frontend was built and deployed in an isolated run. The workflow supported staging, production and pull request-based previews, and automatically closed preview environments when a pull request was closed.

Different user roles and workflows

Administrators, customers and drivers needed different views, permissions and functionality within the same logistics chain.

Solution

We used shared authentication logic and role-based protected routes, while giving each frontend its own views and user flows tailored to its role.

Result

The result was three role-based frontend applications supporting different parts of the logistics flow, from package overviews and delivery history to assigned transports, QR scanning and status updates. The shared CI/CD structure made deployment more consistent and easier to maintain.

What I learned

• Structuring and further developing several interconnected React applications.
• Building role-based user flows with authentication and protected routes.
• Integrating frontend applications with APIs for delivery, status and climate data.
• Implementing QR-based flows for identifying shipments.
• Writing tests with Vitest and React Testing Library.
• Automating builds and deployment with GitHub Actions and Azure Static Web Apps.
• Collaborating in a cross-functional system involving frontend, backend, embedded and UX.

Technologies

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