Featured case studyHSBC Corporate
HSBC Corporate
Banking
Lead UI development for a set of HSBC digital transformation projects, including a React, TypeScript, Node.js, and AEM rebuild of commercial banking applications.
Senior Software Engineer & Technical Lead
Hands‑on technical leadership across complex Next.js and React platforms, digital transformations, technical SEO, performance, migrations and platform architecture.
I'm John, an award‑winning software engineering specialist based in sunny rainy Brighton, UK.
I am a friendly and enthusiastic senior engineer and technical leader backed by over twenty‑three years of hands‑on experience.
I help teams and clients design, build and improve websites, applications and web platforms, pairing architecture, delivery judgement and hands‑on TypeScript, React, HTML and CSS.
My portfolio is diverse; I work with global clients, solving real-world problems, including:
- leading the headless replatforming of a much loved chain of restaurants, modernising its UK & Ireland web estate;
- helping prospective car buyers find just the right configuration for their next sports car;
- leading the modernisation of the online portfolio of one of Britain's largest airlines;
- ... and bringing a local rock band closer to their fans online during lockdown.
Featured Case Studies
- Featured case study
The World Economic
ForumSenior JavaScript developer heavily involved in delivering a React‑based rebuild of the World Economic Forum online platforms, including leading the introduction of new user features.
- Featured case study
LEGO
Senior developer producing an all‑new e‑commerce platform with React. Designed to handle high traffic volumes and support multi‑language and multiple currencies.
How I Usually Help
Building a New Website or Application
For teams building a Next.js website, web application, headless CMS front end, or product platform from scratch, often inside wider digital transformation work.
Planning a Move to Next.js
For teams replacing a React SPA, Gatsby build, CMS front end, or older Next.js architecture without putting routes, content, or search visibility at risk.
Something Broke After Launch
For teams recovering from a launch, redesign, or migration that damaged traffic, crawlability, indexing, or technical SEO stability.
The Live Stack is Unstable
For Next.js performance regressions, cache bugs, build failures, headless CMS issues, hydration errors, and Vercel debugging.
Previous Clients
John Lewis logo 
The BBC logo 
Gov.uk logo 
HSBC logo 
British Airways logo 
eBay logo 
Condé Nast Britain logo 
Nintendo logo 
Lotus Cars logo 
Team GB logo 
Marvel Comics logo 
London Philharmonic Orchestra logo 
Bosch (BSH Group) logo 
Volkswagen logo 
Cisco logo 
Activision logo 
London 2012 Olympics and Paralympics logo 
Microsoft logo 
Apple logo 
Gatsby logo 
Plex TV logo 
LEGO logo 
Selfridges logo 
The World Economic Forum logo 
Made by Many logo 
AND Digital logo 
IMG Licensing logo 
Disney logo 
Boohoo Group logo 
Debenhams.com logo 
The Rolling Stones logo 
Wreel Agency logo 
Polestar logo 
MOSCOT logo 
Virgin Atlantic logo 
American Express logo 
The Guide Dogs for the Blind Association logo 
Style.com logo 
Macmillan Education logo 
Zara logo 
Boeing logo 
Valtech logo 
McCann Manchester logo 
Warwick Acoustics logo 
Nando’s logo 
Virgin Active logo
Latest Articles
What is Artificial Superintelligence (ASI)? What is Artificial Superintelligence (ASI)?
Artificial superintelligence means AI that broadly outperforms humans, not just a better chatbot. What ASI means, why it matters, and what remains uncertain.
What is a Timing Attack? Side Channels, Examples, and Safer Comparisons. What is a Timing Attack? Side Channels, Examples, and Safer Comparisons
Timing attacks explained for web developers, including side channels, string comparisons, real examples, and practical defences in JavaScript.
State Management in Vue: Vuex vs. Pinia. State Management in Vue: Vuex vs. Pinia
Vuex vs. Pinia explained with real trade‑offs, including API design, TypeScript ergonomics, migration paths, and when each choice still makes sense.
Content Security Policy in Next.js: Static Pages, Nonces, and Real‑World Trade‑Offs. Content Security Policy in Next.js: Static Pages, Nonces, and Real‑World Trade‑Offs
Plan Content Security Policy in Next.js with static pages, nonces, third‑party scripts, headers, frames, previews, and incremental deployment safely.
What AEO is, and How It Fits with SEO and GEO. What AEO is, and How It Fits with SEO and GEO
AEO explained alongside SEO and GEO, covering answer engines, featured snippets, AI answers, content structure, measurement, and practical workflow.
Solving the LeetCode N‑Queens Problem. Solving the LeetCode N‑Queens Problem
Solve the N‑Queens problem with TypeScript. This article explains the backtracking method and provides a step‑by‑step code solution. Ideal for web developers.
The AI Layoff Trap: When Local Efficiency Becomes Systemic Fragility. The AI Layoff Trap: When Local Efficiency Becomes Systemic Fragility
AI automation improves productivity, but unmanaged labour displacement risks weaker demand, brittle organisations, concentrated gains, and a race to the bottom.
How to Vet a Senior Next.js Developer for a Replatform or Recovery Project. How to Vet a Senior Next.js Developer for a Replatform or Recovery Project
How to vet a senior Next.js developer for replatforming, recovery, SEO, performance, CMS, Vercel, and production debugging work.
Using Angular Signals for Performance Optimisation. Using Angular Signals for Performance Optimisation
Use Angular signals for performance optimisation with derived state, computed values, OnPush, effects, RxJS interop, and measuring whether work improved.
LeetCode: The 'Kth Smallest Element in a BST' Problem. LeetCode: The 'Kth Smallest Element in a BST' Problem
How to solve Kth Smallest Element in a BST by leaning on in‑order traversal instead of extra sorting the tree already makes unnecessary in interviews.
Using RxJS for State Management in Angular. Using RxJS for State Management in Angular
RxJS offers a powerful, reactive approach to managing state in Angular apps. Here, I clearly explain practical patterns and show how to use them effectively.
React Developer vs. Next.js Developer: What Actually Changes in Production. React Developer vs. Next.js Developer: What Actually Changes in Production
React developer vs. Next.js developer explained through production concerns: rendering, routing, caching, SEO, deployment, CMS data, and debugging.