Bioscape

The challenge

The client analyses how sites perform on sustainability themes such as climate and greenery. Much of that analysis depends on spatial calculations in an external 3D urban-planning simulation platform. Before those calculations can run, a project has to be set up there with the right location and analysis settings, and afterwards the results have to be collected. Doing that by hand for every site was never going to hold up as the number of sites grew.

What they needed was a web platform where their customers could mark a site themselves, by drawing it on a map or uploading a GeoJSON file, with the calculation work handled behind the scenes. That meant a multi-tenant application with customers, organisations, users and roles, a map-based way to capture geometry, and an integration with a third-party API that works through stateful, multi-step workflows. My two teammates handled that integration and the reporting side. My focus was the application foundation, the front end and the map.

I worked on it as a freelancer, subcontracted through a small development agency that put together a team of three developers. Over roughly two months we built the foundation of the first version, and the platform went live for the client later that year.

What I built

• The Laravel application foundation: the initial data model for customers, organisations, projects, users and addresses, and the Action class pattern used across the API, with a PaginateAction base class for page, filter and sort input and a small make:action command to scaffold new actions.
• The Vue 3 single-page app: routing, Pinia state, vue-i18n with Dutch translations for most screens and the groundwork for English, and reusable layout, table and form components built with Tailwind CSS and Tailwind UI patterns.
• The admin screens for users, customers, organisations and projects, including their API endpoints, form requests and API resources.
• Authentication for the SPA using Laravel Sanctum's cookie-based sessions: username login with a remember-me option, forgot-password and reset-password endpoints with an emailed reset link, and a profile page where users update their details and preferred language.
• The project map screen on Google Maps: drawn site polygons saved through the areas API and redrawn on the map, plus a GeoJSON upload wired to a teammate's import logic, which I moved into its own endpoint.
• Together with a teammate: the role and permission data model with four predefined roles, returned with the signed-in account so the SPA could read a user's permissions.