A Tinder Love Story: How we created our WordPress blog in React...not PHP
summary
Tinder migrates its Swipe Life blog to a headless WordPress backend and builds a React static site with Gatsby source WordPress, GraphQL and gatsby build to prefetch all posts into HTML/JS — no PHP at runtime. Hosting sits on S3 + CloudFront with Lambda@Edge; initial builds hit three hours and drop to ~15 minutes after parallel builds, cache reuse and image optimization. Gatsby Image and Gatsby Link drive the 90+ performance scores, and the site survives a WordPress outage and powered a viral Represent Love landing page and a Webby win.
AI-written summary · about
chapters (20)
- 0:00Introduction and speaker intro
- 1:48Tinder as a progressive web app
- 3:14First project: Swipe Life blog
- 5:19Headless CMS with Gatsby
- 6:25Setting up Gatsby
- 8:51How Gatsby build works
- 10:15React components with GraphQL
- 12:07Static site generation
- 13:13Swipe Life content examples
- 15:22Lighthouse audit results
- 16:24Gatsby Image and Gatsby Link
- 18:34Swipe Life success and impact
- 19:39Succulent apocalypse and resilience
- 22:50Gatsby challenges and pro tips
- 26:22Updating and rebuilding process
- 28:26No preview button workaround
- 29:34Represent Love emoji campaign
- 33:08Serverless and scalability
- 36:04Unicode emoji acceptance
- 37:09Call to join Tinder web team
related talks
54mA Tinder Love Story: Create a Wordpress Blog with React, instead of PHP
18mUsing GraphQL on WordPress
17mThe Client-Side Revolution, Brought to You by React
07mBuilding React frontends for WordPress
29mProduction Ready React with GatsbyJS
27mBeyond Static: Dynamic Web Applications with Gatsby
34mWhat is new with Gatsby.js
10mRebuilding a 1,000-page website with only one developer