# Lead Engineer - Front End (React)
**Company:** [Xero](https://scaleengineer.com/companies/xero)
Lead Engineer - Front End at Xero: Design and build modern React, Next.js, and TypeScript customer-facing web experiences that power Xero's public presence and ecosystem. Lead one of two engineering pods while architecting a scalable multi-site platform integrating React and Salesforce Experience Cloud surfaces. You'll drive performance optimization, accessibility standards, and AI-powered solutions while coaching engineering teams through rapid upskilling in modern frontend technologies and emerging AI capabilities.
**Role:** Lead Engineer
**Seniority:** Lead
**Locations:** NZ: Wellington: Xero One (19-23 Taranaki St)
**Salary:** 140000–180000 NZD
[Apply](https://jobs.ashbyhq.com/xero/469b8b78-141e-43c2-8773-99cf8a56d51f)
Canonical: https://scaleengineer.com/jobs/xero/lead-engineer-front-end-react
---
## Responsibilities

- Architecture Design and Implementation: Design and build modern React and Next.js experiences connecting Xero's core ecosystem with public web presence. Set the target architecture for a multi-site platform integrating React and Salesforce Experience Cloud surfaces, establishing patterns for API-driven content layers, headless CMS integration, and composable architecture.
- Engineering Pod Leadership: Lead one of two engineering pods as the Customer Platforms team grows. Drive agile ceremonies including planning, retrospectives, and demos. Foster psychological safety and open dialogue while managing team dynamics across closely connected pods working on interconnected customer-facing systems.
- Performance and Accessibility Excellence: Make performance and accessibility the default across all customer experiences. Establish and maintain Core Web Vitals optimization standards and WCAG compliance guidelines. Design high-performance, content-rich multi-site platforms that deliver exceptional customer experiences globally.
- Migration and Platform Evolution: Plan and execute careful, low-risk migrations of live, high-traffic sites without disruption. Shape the transition from legacy systems while managing hybrid React and Salesforce Experience Cloud estates. Drive the modernization of Xero Central to deliver frictionless customer experiences.
- AI and Innovation Exploration: Lead proofs of concept for agentic AI solutions and AI-powered features in customer experiences. Explore innovative approaches to customer support, discovery, and learning through emerging technologies while maintaining backward compatibility and customer trust.
- Team Coaching and Skill Development: Coach and mentor engineers through upskilling in React, Next.js, TypeScript, and emerging AI technologies. Lead by influence and foster collaborative problem-solving. Support team members in building architectural thinking and best practices in modern frontend development.
- Cross-functional Collaboration: Partner with Product, Marketing, and Support teams to translate business requirements into scalable technical solutions. Lead constructively through influence, pushing back when necessary to ensure customer-centric outcomes. Connect technical decisions with broader business impact.

## Requirements

### education

- {"name":"Computer Science or Related Field","description":"Bachelor's degree in Computer Science, Software Engineering, or related field, or equivalent professional experience demonstrating computer science fundamentals and self-directed learning."}

### technical

- {"name":"React Architecture at Scale","description":"Deep expertise with React at the architecture level, including component design patterns, state management, performance optimization, and building scalable multi-site platforms. Experience with advanced React patterns and optimization techniques for high-traffic applications."}
- {"name":"Next.js and Modern Frontend Tooling","description":"Advanced proficiency with Next.js for server-side rendering, static generation, and API routes. Strong understanding of modern frontend build tools, module federation, and deployment strategies for performance-optimized applications."}
- {"name":"TypeScript Mastery","description":"Strong TypeScript skills including advanced type systems, generics, utility types, and using TypeScript for architectural decisions. Ability to design type-safe systems that scale with team growth and complexity."}
- {"name":"Performance Optimization Expertise","description":"Demonstrated experience optimizing Core Web Vitals (LCP, FID/INP, CLS), bundle size optimization, code splitting, lazy loading, and performance profiling. Understanding of how frontend performance impacts user experience and business metrics."}
- {"name":"Web Accessibility (WCAG)","description":"Working knowledge of WCAG 2.1 standards at AA or AAA level. Experience implementing accessible components, semantic HTML, ARIA attributes, and automated accessibility testing. Understanding of accessibility as a core user experience requirement."}
- {"name":"Headless CMS and API-First Architecture","description":"Experience working with headless CMS platforms and API-driven content delivery architectures. Understanding of composable architecture patterns and integration of multiple content sources into unified frontend experiences."}
- {"name":"AWS Cloud Infrastructure Knowledge","description":"Familiarity with AWS services relevant to frontend deployment and backend integration, including CloudFront, Lambda, API Gateway, and S3. Understanding of cloud-native deployment patterns and serverless architectures."}

### experience

- {"name":"Lead-Level Frontend Engineering Experience","description":"5+ years of professional frontend development with 2+ years in lead, senior, or principal engineering roles. Demonstrated impact through architectural decisions, mentorship, and technical leadership that scaled team capabilities."}
- {"name":"High-Traffic Production Experience","description":"Experience building and maintaining production systems serving millions of users. Track record of shipping high-performance, reliable applications at scale with minimal downtime. Understanding of production operations, monitoring, and incident response."}
- {"name":"Migration and Platform Modernization","description":"Proven experience migrating live, high-traffic systems to modern architectures without customer-facing disruption. Experience planning and executing long-term platform evolution strategies while maintaining backward compatibility."}
- {"name":"E-commerce, Media, Agency, or SaaS Background","description":"Experience in performance-sensitive environments such as e-commerce platforms, media companies, digital agencies, or SaaS products. This background provides valuable perspective on performance requirements and customer experience optimization."}
- {"name":"Team Leadership and Coaching","description":"Experience leading through influence in matrix organizations. Track record of successfully mentoring engineers, establishing engineering best practices, and building psychological safety within teams. Comfort with both directive and collaborative leadership approaches."}

## Skills

### required

- {"name":"React Framework Expertise","description":"Advanced React knowledge including hooks, context, performance optimization, and architectural patterns for large-scale applications"}
- {"name":"Next.js Development","description":"Production experience with Next.js including SSR, static generation, API routes, and deployment optimization"}
- {"name":"TypeScript","description":"Strong TypeScript skills for building scalable, type-safe frontend applications with complex type systems"}
- {"name":"Web Performance Optimization","description":"Expertise in Core Web Vitals, bundle optimization, code splitting, and performance profiling tools"}
- {"name":"Web Accessibility Standards","description":"Working knowledge of WCAG 2.1 standards and ability to implement accessible web experiences"}
- {"name":"Technical Leadership","description":"Ability to lead teams through influence, establish architectural vision, and mentor engineers in modern practices"}
- {"name":"API-Driven Architecture","description":"Experience with headless CMS, API-first design patterns, and composable architecture approaches"}

### preferred

- {"name":"Salesforce Experience Cloud","description":"Experience integrating with or managing Salesforce Experience Cloud platforms in hybrid environments"}
- {"name":"Agentic AI and LLM Integration","description":"Exploration or implementation of AI-powered features, agentic systems, or LLM integration in customer-facing applications"}
- {"name":"AWS Cloud Services","description":"Hands-on experience with AWS services including CloudFront, Lambda, API Gateway, and S3 deployment patterns"}
- {"name":"E-commerce or SaaS Platform Experience","description":"Background in high-traffic e-commerce, media, agency, or SaaS environments with emphasis on performance and user experience"}
- {"name":"Monolith Decoupling and Migration","description":"Experience breaking apart monolithic systems into microservices or decoupled frontend architectures"}
- {"name":"Monitoring and Observability","description":"Familiarity with frontend monitoring, error tracking, performance analytics, and observability practices"}
- {"name":"Agile and Distributed Team Experience","description":"Comfortable working in agile environments with distributed teams and async communication patterns"}

## Tech stack

### tools

- {"name":"Git Version Control","description":"Source code management and collaboration with branching strategies for large teams"}
- {"name":"Testing Frameworks (Jest, React Testing Library)","description":"Unit and component testing tools for ensuring code quality and preventing regressions"}
- {"name":"Web Performance Tools","description":"Lighthouse, Chrome DevTools, Web Vitals monitoring, and performance profiling tools"}
- {"name":"Accessibility Testing Tools","description":"Automated testing tools like axe, Lighthouse audits, and screen reader testing capabilities"}
- {"name":"CI/CD Pipelines","description":"Continuous integration and deployment automation using modern DevOps practices"}

### others

- {"name":"AWS Backend Infrastructure","description":"Integration with AWS services including CloudFront, Lambda, API Gateway for backend services"}
- {"name":"Salesforce Experience Cloud","description":"Integration and management of hybrid React and Salesforce Experience Cloud platforms"}
- {"name":"Core Web Vitals (CWV)","description":"Google's performance metrics: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), Cumulative Layout Shift (CLS)"}
- {"name":"WCAG Accessibility Standards","description":"Web Content Accessibility Guidelines for building inclusive web experiences at AA or AAA conformance levels"}

### databases

- {"name":"Headless CMS (Composable)","description":"API-driven content delivery layer integrating multiple content sources into unified frontend experiences"}

### languages

- {"name":"TypeScript","description":"Primary development language for building type-safe, scalable frontend applications with advanced type system usage"}
- {"name":"JavaScript (ES6+)","description":"Modern JavaScript for React component development, utilities, and compatibility with existing systems"}

### frameworks

- {"name":"React","description":"Core frontend framework for building component-based user interfaces with hooks, context, and performance optimization"}
- {"name":"Next.js","description":"React metaframework for server-side rendering, static generation, API routes, and optimized production deployments"}

## Benefits

### benefits

- {"name":"Flexible Work Arrangements","description":"Hybrid work model requiring approximately one day per week in-office in Wellington or Auckland office, allowing remote work flexibility for the majority of the week"}
- {"name":"Agile Team Environment","description":"Collaborative team structure with regular planning sessions, retrospectives, and demos promoting psychological safety and open dialogue"}
- {"name":"Modern Technology Stack","description":"Opportunity to work with cutting-edge technologies including React, Next.js, TypeScript, and emerging AI solutions rather than maintaining legacy systems"}
- {"name":"Leadership and Growth Opportunities","description":"Lead engineering pod within growing Customer Platforms team with opportunities to mentor engineers and shape architectural direction"}
- {"name":"Innovation and Emerging Technology","description":"Exploration of AI-powered features and agentic solutions in customer experiences with ability to run proofs of concept"}
- {"name":"Global Impact","description":"Influence on customer experiences for Xero's global user base across discovery, learning, and support journeys"}
- {"name":"Cross-functional Collaboration","description":"Regular partnership with Product, Marketing, and Support teams to bring new ideas to life and translate business needs into technical solutions"}

## Compensation

- **max:** 180000
- **min:** 140000
- **currency:** NZD
- **stockOptions:** false

## Interview process

### steps

- {"name":"Initial Screening Call","description":"Conversation with recruiter to discuss background, motivation for the role, and alignment with Xero's culture and values including 'Go Bold' and 'Go Further' principles"}
- {"name":"Technical Interview - Architecture Discussion","description":"In-depth conversation with lead engineers or architects about your approach to system design, React architecture patterns, performance optimization, and how you've handled complex technical decisions in previous roles"}
- {"name":"Technical Interview - Frontend Deep Dive","description":"Discussion of your hands-on expertise with React, Next.js, TypeScript, accessibility, and performance optimization. May include code review discussion or live coding exercise focused on real-world problems"}
- {"name":"Leadership and Mentoring Assessment","description":"Conversation with hiring manager or senior leadership about your leadership style, coaching approach, experience leading through influence, and how you build psychological safety within teams"}
- {"name":"Team Collaboration Interview","description":"Meeting with members of the Customer Platforms team to discuss collaboration style, problem-solving approaches, and cultural fit within agile, psychologically safe team environment"}
- {"name":"Executive Interview (Conditional)","description":"Potential conversation with director or VP level stakeholder to discuss strategic vision, long-term architecture direction, and organizational impact for candidates advancing through initial rounds"}

## Full description
**The role and its impact**

Xero’s customers discover, learn about and get support through our customer-facing web experiences, and you’ll help shape them.

As our Lead Engineer, you’ll design and build modern React + next.js and TypeScript experiences that connect Xero’s core ecosystem with our public web presence, from the first visit to getting help. You’ll set the architecture for a multi-site platform that brings together React and Salesforce Experience Cloud surfaces, and lead one of our two engineering pods as the platform grows.

This is a chance to build something modern rather than maintain a monolith. You’ll make performance and accessibility the default, explore AI and agentic solutions in customer experiences, and partner with Product, Marketing and Support to bring new ideas to life. You will _Go Bold_ by challenging the status quo, and _Go Further_ by making the experience better for customers around the world.

**The team and how they connect**

Our Customer Platforms team build the experiences customers use to learn, get support and find what they need. You’ll work across two closely connected pods, we work in an agile way, with regular planning, retros and demos, and we value open dialogue and psychological safety.

**The team is currently working on**

* Tech stack: TypeScript, React and Next.js, with API-driven content layers, a headless CMS, a composable architecture and AWS backend infrastructure.
* Reimagining parts of Xero Central to deliver greater value through a modern, frictionless customer expereince.
* Running a hybrid React and Salesforce Experience Cloud estate while bringing in new AI-powered features.
* Shaping the target architecture for Xero’s customer experiences, including agentic AI proofs of concept.

**Where and how you can work**

This role can be based in Wellington or Auckland. Our hybrid approach asks for around one day per week in the office as a minimum, so you can connect with your pod and stakeholders in person.

**Here are some of the things we’re looking for, for this role:**

* You bring deep experience with TypeScript, React and Next.js at architecture level, including designing high-performance, content-rich multi-site platforms.
* Migrating live, high-traffic sites without disruption is familiar territory, and you can plan a careful, low-risk path to get there.
* Performance and accessibility are second nature to you, with a working knowledge of Core Web Vitals and WCAG.
* Coaching engineers is part of how you lead, and you’ll _Go Together_ with teams as they build new skills in React and AI.
* You’re comfortable leading through influence, and you _Go Bold_ by pushing back constructively when something isn’t right for customers.
* Experience across e-commerce, media, agency or other high-traffic web environments gives you fresh views on performance and customer experience.

Apply even if your experience isn’t a perfect match! At Xero, we hire based on your skills, passion, and the unique perspective you can bring to enhance our culture and team.