Steve Harrison

Hey, I'm Steve.

I’m a Senior Front End Developer at Qantas and I’m building The Finances App in my spare time.

I've worked on UIs for booking & managing flights, staking crypto, viewing aerial imagery, and publishing tsunami warnings. I’ve also spoken at Web Directions and SydCSS What’s new in CSS in 2023, contributed fixes to Preact #2366 and Chrome DevTools Focus ring fix Dark mode fix, and answered questions on Stack Overflow 126.5Krep since 2008 (back when that was a thing).

Side Projects

Open Source

Articles

View All

Career

  1. 2024

    Qantas

    Contract: 2024 – Present

    Helped build a new Next.js UI for the Qantas.com booking engine that calls Amadeus APIs (previously, this was a white-label UI provided by Amadeus). In 2025, we released a new Cancel Booking UI, and in 2026, we launched a new Book Flights UI, starting with the Sydney > Tamworth route. We also created a new PandaCSS component library that imports tokens from Supernova. Tech Stack: Next.js App Router, React, TypeScript, CSS Modules, Adobe Analytics, Optimizely, DataDog, Tailwind, Zustand, Cypress, and Playwright.

    • Experimented with WebMCP.
    • Fixed a jumpy reveal animation on the Flight Search results page by reducing React re-renders (passing in less props that change), adjusting the easing, and using grid-template-rows: 0fr -> 1fr so no JS is needed to measure the height and the layout doesn't get re-calculated.
    • Worked with design system team to add subtle animations to make buttons and selects feel less static; added cross-fade transitions to make toggling views smoother. Ensured the user can disable all animations for accessibility with prefers-reduced-motion.
    • Added accessibility improvements: made sure select menus disappear when using swipe gestures in VoiceOver for iOS, fixed focus jumping issues (removed a Portal, ensured focused elements don't get unmounted during loading transitions, made sure hidden content is actually removed from the accessibility tree), made mobile toolbar have larger tap targets, styled focus rings to be on brand and only visible for keyboard users using focus-visible, and added role="status" region to the header so the new cart balance gets read when adding an item to cart.
    • Added local visual regression tests using Playwright.
    • Built a dev UI to view mock bookings and a CLI tool to generate them so we can test the app locally and in Playwright easily.
    • Integrated and themed a non-React Amadeus Outpayce SDK for taking payments on Change Flights.
    • Added localisation.
    • Next.js
    • React
    • TypeScript
    • Tailwind CSS
    • Cypress
    • Playwright
  2. 2022

    NSW Department of Customer Service

    Contract: 2022 – 2024

    Added new features to hazardwatch.gov.au, a public-facing tool to display SES flood/tsunami warnings. Also worked across Front End, Back End, and Infrastructure for an internal tool to publish the warnings. Tech stack: React, TypeScript, Mapbox, Google Address API, Next.js (Pages Router), Prisma, PostgreSQL, DynamoDB, Node.js, postgresql.js, Ant Design, React Material UI, Jest, Playwright.

    • Built user accounts for HazardWatch: custom React UI components using AWS Cognito SDK.
    • Built a notification history UI using DynamoDB.
    • Built an embeddable HazardWatch widget that can be embedded on news websites like ABC.
    • Added a Share button that uses short URLs and the native Web Share API; worked with design to provide custom link preview images.
    • Rewrote the social media post templates for every flood and tsunami warning in Handlebars, with snapshot tests for each.
    • Moved the Playwright end-to-end tests into each project, ran them inside Docker so the visual diffs matched between local and CI, and scheduled them in GitHub Actions.
    • React
    • TypeScript
    • Next.js
    • Mapbox
    • Prisma
    • PostgreSQL
    • DynamoDB
    • Node.js
    • Ant Design
    • MUI
    • Jest
    • Playwright
    • Docker
  3. Tulip Contract

    Worked on the Front End for a Solana-based cryptocurrency yield aggregator. Built stop-loss and take-profit triggers for leveraged farming positions, and an Overview dashboard that brings together a user's deposits across Vaults, Leveraged Farming, Lending and Staking. Also redesigned the app's navigation, with a new sidebar and a mobile tab bar, and shipped Close and Repay Debt, Instant Unstaking, APY history charts and the Exodus wallet integration. The tech stack included MobX, React, Sass, MUI, Reactstrap, Recharts, Anchor, and @solana/web3.

    ReactMobXSassMUIBootstrapSolana
  4. 2021
    Streamotion Contract

    Updated the Manage Account UI shared across Binge, Kayo Sports, and Flash News streaming apps. Also improved test automation and addressed tech debt. The tech stack included React, Bacon.js (similar to Rx.js), Parcel, React Storybook, and Styled Components.

    ReactStorybookstyled-components
  5. 2020
    QBE Contract

    Worked on a redesign of Home and Car insurance.

    TypeScriptstyled-componentsMUI
  6. 2015

    Qantas

    Contract: 2015 – 2016 • Perm 2016 – 2020

    I was a lead Front End Developer on several cross-functional teams improving the experience of different parts of qantas.com. I also organised guilds, mentored developers, and worked on tooling to simplify development. The tech stack included React, Preact, Sass, CSS Modules, Emotion, Cypress, Jest, ESLint, Babel, Webpack, and AEM.

    • Improved the load time of the qantas.com homepage by 2s by removing unnecessary code and adjusting the critical path.
    • Rebuilt a mega menu for QBR that can be hovered or navigated by keyboard at the same time. (Hover + keyboard nav interactions all update one central React state.)
    • Riffed with a designer to create a filtering and searching UI for the QBR Earn Points partners page.
    • Built an accessible and custom styled select menu component from scratch.
    • Replatformed the Qantas Business Rewards website to AEM with React/Preact. Implemented automated testing with Cypress, including visual regression testing.
    • Replatformed the Multi-city flights booking page.
    • Updated disclaimers on qantas.com to meet WCAG 2.0 accessibility guidelines.
    • Updated the logo and fonts across all AEM pages for the 2016 rebranding.
    • Replatformed the Manage Booking section on the qantas.com homepage.
    • Replatformed Flight Deals pages.
    • Built a standalone version of the qantas.com header and footer so Qantas sites outside AEM could use them.
    • Built shared React form components for qantas.com widgets: inputs, form validation, a loading indicator and translation helpers.
    • Built accessible AEM components, including tabs that can be linked to, a compactor, in-page anchor links, and focus outlines shown only to keyboard users.
    • Improved the widget boilerplate and CLI that teams used to start new qantas.com widgets, adding translations, test coverage reporting in Bamboo and Node version checks.
    • React
    • Preact
    • Sass
    • Cypress
    • Jest
    • ESLint
    • Babel
    • Webpack
  7. TRAFFIK Contract

    Built websites for Arnott's "Twisted Faves" and Dyson + Airbnb "Hidden House" promotions.

  8. 2014
    nearmap Contract
    • Added new Site Planner and Layers Manager tools to MapBrowser, the core web app for viewing aerial imagery.
    • Refactored the legacy codebase to a component-based architecture powered by AngularJS 1.3/ES6/Angular UI/Bootstrap.
    AngularJSBootstrap
  9. The Winterlake House Freelance

    Worked with a Canberra-based designer to build a marketing website to sell a lakeside house in Warners Bay, NSW.

  10. 2013
    White Label Personal Clouds Contract
    • Created a JavaScript SDK.
    • Developed a dashboard in AngularJS 1.3 that was shown at CeBIT 2014: a consumer-facing privacy dashboard showing customers the contact details and information a company knows about them.
    • Designed and built the first WLPC company website, and the landing page for the WelcomerID online verification product.
    AngularJS
  11. 2012
    Australian National University Bachelor of Information Technology (not completed)

Speaking

Videos

View All

Design

Behance

Favourite Books

Favourite Apps