Zaid Al-Dabbagh Logo
ZaidAl-Dabbagh

👨🏻‍💻 Software Engineer · ✨ UI/UX Designer · 🧩 Problem Solver · 🧪 Experimenter · ✍️ Author

I bridge design and engineering — with the wisdom of living in both worlds. Building platforms that are modern, performant, polished, and accessible is 100% achievable. Having fun doing it and bringing people along for the ride? That's the real goal!

Zaid Al-Dabbagh profile photo

My Story

Data visualisation, API integrations, educational platforms, CMS integrations, document management systems, UX/UI research & design & Accessibility Compliance

🔹 About

👨🏻‍💻 I’m a Full-Stack Designer & Engineer 👨🏻‍🎨 I’m a passionate about Design just as much as I’m a Problem-Solver ✨ I generally find myself spending a lot of time polishing UI’s and artwork, and lately have been investing more time into UX research to delve deeper into the WHY.

🔹 Journey

  • 🇮🇶 Born in Iraq
  • 🇳🇿 Landed in NZ — 2nd home
  • 🎓 Comp Sci & E-Commerce
  • 💼 Career Launch → UI+UX Consultancy
  • 🏛️ Mahuki Innovation Hub — Te Papa
  • 🇦🇺 Landed in Aus — 3rd home
  • 🚀 Grow & Go Masterclass — StartNorth × La Trobe
  • 📍 [ I'm here ]

🔹 Motivation

  • 💡 Beauty in simplicity: Solve complex problems by making intuitive design decision, backed by smart tech.
  • ✨ Value in Aesthetics: Producing polished experiences ensuring that solutions are not only visually appealing but also accessible, intuitive and provides real value.
  • 🙌🏻 Empowerment: Empowering other engineers in the process through knowledge sharing and acting as a sounding board for ideas.

🔹 Values

  1. Build with an MVP mindset — Ship the 80%, refine the 20%, learn fast, then iterate.
  2. Be a knowledge sharer — It's a responsibility, not a choice.
  3. Don't leave anyone behind — You're not alone in the learning journey.
  4. Every person you meet has something to teach you — and something they can learn from you.
  5. Never stop learning — We're constantly in a continuous development phase.
  6. Be prepared — Always ask: Can my peers continue on without me?
  7. Be empathetic — Build with the end user in mind.
  8. Be trustworthy — Be truthful, honest, and transparent.
  9. Be humble — We are all humans navigating a beautiful, complex world.
  10. Work on yourself — Failure is not due to a lack of process, but due to ignorance.

🔹 Career

  • 10+ years leading full-stack delivery across NZ's government and education sectors — Ministry of Education, Regional Councils, etc.
  • Now Melbourne-based and looking for my next challenge where I can contribute to product direction, and keep building things that matter.

🔹 Leadership

  1. Product Management & Ownership - Managed numerous product deliverables throughout my career from inception to production. Liaised with product owners and stakeholders in managing and prioritising the product backlog, defined sprints, and release management.
  2. UX Workshop — Help workshops with stakeholders that helped shape the product backlog.
  3. R&D — Attended multiple business incubation programs.

🔹 Expertise

Full-stack engineering across React, Next.js, TypeScript, Angular, PHP, and AWS — with deep experience in accessibility, headless CMS architectures, and government-scale platforms.

React & Frontend Development

I've worked on the following React projects:

Other React projects:

JavaScript, TypeScript, Modern CSS & Component-Based Design

JavaScript/TypeScript:

The following projects were built with JS/TypeScript:

Additionally:

  • ES6+ JavaScript — built a reusable JavaScript component library used across multiple Ministry of Education projects
  • State management patterns
  • TypeScript in headless CMS architectures (SilverStripe/Drupal + React/Angular)

Modern CSS:

  • Tailwind CSS
  • Styled Components / CSS-in-JS approaches
  • Material UI
  • CSS3 with accessibility-first styling (WCAG 2.1 compliant)
  • Responsive, mobile-first design

Component-based design:

  • Contributed to and helped formalise the Ministry of Education Design System with a shared component library
  • Documented Vue.js components in Storybook
  • Standardised reusable UI components across NCEA Online
  • Component-based architecture in React/Next.js for Ako Panuku (headless CMS pattern)

REST APIs & GraphQL

GraphQL APIs:

  • Ako Panuku platform: React/Next.js frontend consuming a headless SilverStripe CMS via GraphQL for content delivery

RESTful APIs:

  • Built and consumed REST APIs across multiple Ministry of Education projects (NCEA Online, Kauwhata Reo Hub) in addition to the Environmental Data Dashboard
  • Algolia Search API integration for search functionality

API-driven headless CMS architectures:

  • Decoupled front-end/back-end communication across government platforms and the Environmental Data Dashboard

Data-Driven Platforms & Regulated Environments

Most of my career has been in New Zealand government — Ministry of Education, Regional Council, NZQA — where strict data governance, privacy legislation, and accessibility mandates were enforced.

Project showcase:

Data-driven platforms:

  • Environmental Data Dashboard (Greater Wellington Regional Council) — live data platform monitoring air quality, land, freshwater, and coastal data. Used by scientists, policy makers, and emergency response teams.
  • Ako Panuku — analytics-driven education platform tracking teacher engagement, resource usage, and learning outcomes across a national user base.

Highly regulated environments:

  • Government sector across the board — all of my Ministry of Education and Regional Council work operated under New Zealand public sector security, privacy, and procurement standards.
  • WCAG 2.1 accessibility compliance — mandated by government policy, not optional. I led audits and remediation.
  • NCEA Online — national assessment platform where data integrity and security are critical (student assessment data, standardised delivery of qualifications).
  • Multi-tenancy and data isolation — working with sensitive education data requiring strict access controls and privacy compliance.

State Management

  • React Context API — Ako Panuku and other React/Next.js projects for theme, auth, and shared state
  • React Hooks (useState, useReducer, useEffect) — core state patterns across all of my React work
  • GraphQL client-side caching — Used Apollo for managing server state on Ako Panuku
  • LaunchDarkly — feature flag state management for controlled rollouts
  • URL/query state — for shareable, bookmarkable filter states in data-heavy platforms like the Environmental Data Dashboard

Cloud Platforms & CI/CD Pipelines

Cloud-hosted platforms:

  • AWS — Collaborated with DevOps on infrastructure defined via AWS CDK (Infrastructure as Code), including VPC networking, RDS MySQL, Elastic Beanstalk, S3 + CloudFront CDN, ACM certificates, and secrets management via AWS Systems Manager Parameter Store. Environments provisioned across preview and production.
  • Vercel — Frontend deployments across preview, staging, and production environments with branch-based deployment strategies and monorepo support for multiple applications.
  • Headless CMS — Decoupled architectures with cloud-hosted SilverStripe (AWS) and Sanity (managed cloud) backends serving Next.js frontends via GraphQL APIs.

CI/CD Pipelines:

  • GitHub Actions — Automated build and deployment pipelines to both AWS Elastic Beanstalk (CMS) and Vercel (frontend), triggered by environment-specific branch workflows.
  • Git branching strategies — Feature/fix/hotfix conventions with PR validation, gated merges, and environment promotion (preview → staging → production).
  • Automated testing in CI — For the Environmental Data Dashboard, I integrated end-to-end Cypress tests into the CI/CD pipeline, triggered on feature branch deployments to catch regressions before merging. For NCEA Online, I implemented Cypress E2E tests alongside axe-core integration, ensuring accessibility benchmarks (WCAG 2.1 AA) were validated automatically on every pull request and deployment — catching regressions before they reached production rather than relying on periodic audits.
  • Monitoring — Sentry for error tracking and performance metrics, Vercel Analytics for real-user web vitals.
  • Platform experience — Deployed applications across Vercel, DigitalOcean App Platform, Heroku, and Render for personal and client projects.

Accessibility & Performance Optimisation

Accessibility:

Performance Optimisation:

  • Next.js caching strategies — tag-based cache revalidation for granular invalidation across GraphQL-driven content, with static and dynamic rendering strategies selected per route based on content freshness requirements.
  • Image optimisation — server-side processing for resizing and format conversion, combined with Next.js Image component for automatic responsive images and lazy loading.
  • Third-party script management — deferred loading of analytics and tracking scripts to minimise impact on core web vitals.

🔹 Approach

  • Design empowered by tech — I enjoy designing UI’s as much as I enjoy building it. Having this wisdom of both worlds means better decisions that balance aesthetics, function, and usability.
  • Cross-functional collaboration — Great results come when every voice shapes what you're building.
  • Systemised design — A strong design system helps users learn faster and engineers refine rather than reinvent.
  • UX as a multi-disciplinary craft — Clean design, intuitive interactions, and performant code, with accessibility, SEO, and progressive enhancement at the core.
  • Engineering Practice — Unit and E2E testing, CI/CD, containerisation, automated accessibility checks, proactive maintenance, and sprints that balance features, bug fixes, tech debt, and experimentation.

🔹 Spotlight

  • 🌦️ Environmental Data Dashboard — Started as a proof of concept that evolved into a critical tool for environmental scientist with thousands of active sessions per month.
  • 🎓 National Certificate of Educational Achievement — A project that spanned two years of development, in which I was task ed to lead the full-stack development effort interacting with a cross-functional team at the ministry and also mentoring junior and intermediate developers in the process.
  • 👨🏻‍🏫 Ako Panuku Educational Platform — Bridged the gap between biz objectives, and the continious development of the educational platform. Headed the remediation work for the C&A security audit, and liased with the Principal Consultant and stakeholders.

🔹 Delivery

✨ Recent Projects
🗃️ Archived Projects