Qantas
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 -> 1frso 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 addedrole="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

