Web applications built with different technology stacks
WWF Carbon Footprint Calculator rebuilt with Laravel, Vue and Anime.js
Delivered the 2018 relaunch of WWF’s Carbon Footprint Calculator, rebuilding the interface in Vue.js powered by a Laravel backend and MySQL database.
The questionnaire guided users through lifestyle questions and returned tailored recommendations to reduce their impact. Close collaboration with WWF stakeholders ensured the platform aligned with their goals and has since supported thousands in making more sustainable choices.
Animations, reusable components and custom illustrations
A number of custom components were designed and built in Vue.js to be resused throughout the application. Animated with Anime.js to elevate the impactful design this made the user experience more engaging.
We also provided several high impact screens with animations for the home screen and with the results pages implementing functionality at the end to share the results across social media.
A video showing the introduction page animation and the starting question
Different states of title content when starting or continuing the questionnaire
Managing content - building for change
The core application needed to be adaptable to change, not only did we need to make updating the content as simple as possible, we also had to ensure that new questions could be added easily and old ones could be removed without breaking anything.
With a limited number of templates we managed to ensure that alongside the inital question screens each questionnaire section would feature a custom illustration with a headline and a “Did you know?” section of text that also needed to be “content managed”.
Deploying changes were done through a deployment service that could be rolled back if needed but it was vital that the application didn’t go down during deployment, so we ensured we used a service that could deliver these requirements, something like Cloud66 if I recall correctly.
With four sections and a variable number of questions for each, the application design needed to be adabtable
Sita Aero Logistics Calculator built with JavaScript, Angular, Express and Firebase
Developed a web-based logistics calculator designed to simplify the complex process of estimating aircraft shipping costs. Built with AngularJS, this single-page application enabled users to configure calculations based on weight, dimensions, destination, and service levels, with results shown through real-time updates and ChartJS visualisations. Authentication and user management were included, while data was securely managed in Firebase to support scalability.
Applying complex calculations
The project required close collaboration with SITA’s logistics team to ensure accuracy and usability. Dynamic forms and a clear interface made it practical for teams to use, and I produced detailed technical documentation and user guides to help adoption and training. The finished system provided a reliable and user-friendly tool that improved efficiency in a highly specialised area of logistics.
Using Angular alongside NoSQL Firebase database made for some DevX joy
