case study

tr3 running

UX/UI

Frontend

DevOps

Figma

Astro

React

JAMStack

CI/CD

SEO

tr3 running is a running publication that aims to deliver high-quality, science-backed content for serious runners.

What: tr3 is a lightweight, performant JAMstack content network using Contentful as a headless CMS, an Astro and React SSG frontend, and deployed with Vercel and GitHub Actions.

Why: to combine my passion for running with hands-on experience in modern web development.

Goal: a sleek, clean and premium website delivering trustworthy running content that can scale as needed. This can be achieved through:

Non-technical content management.
Performance, even at scale.
Setup for vast content (articles, authors, categories, etc) from the get-go.

Motivation

Why build the platform from scratch instead of a pre-built solution, such as WordPress? Several reasons:

Long-term cadence: it's more upfront work, but less long-term work. WordPress gets you off the ground quickly, but can be painful to work with — and it's not fun.
Performance: easier to create a light-weight site without bloat.
Ownership and UX: full control of the end-to-end user experience.

Design and UX

Objective: minimal, premium design that inspires confidence. Designed mobile first with accessibility and UX as a priority.

Figma mockup.

Tech Architecture and Stack

Opted for JAMStack:

Astro (with React), Tailwind.
Contentful CMS, Analytics, etc.
Vercel for static deployments.

Why JAMstack?

Such as WordPress, hard-coded markdown templates or monoliths:

Easier to achieve performance goals.
Easier to scale (vs. hard-coded templates and monoliths).
Can integrate with non-technical CMS without associated bloat.

Features

Fully-responsive user interface: built with Tailwind, Astro pages and React components.
Infinite scrolling: dynamically loaded content on scroll to improve performance and UX simultaneously.
Dynamic content via Contentful integration: CMS can support new categories, authors and so on without any additional config.
SEO: robust technical SEO optimisation.
CI/CD pipeline: integrated with GitHub actions to automate Vercel deployments.

tr3 running article mockup.

Challenges + Solutions

Contentful integration: the Contentful docs aren't great. I had to do a trial-and-error to figure some things out. Contentful also doesn't play well with TypeScript.
Performance: I initially misunderstood that JAMStack is not enough to guarantee performance. Extra steps included implementing delayed content load by partially loading on the server, and loading the rest of the content on the client.

Impact + Reflection

I'm happy with the end product. I've created a basic platform that is:

Performant: high scores with Google Lighthouse.
Scalable: is setup to support small content but can easily scale
Fun and easy to work with

And the project gave me an opportunity to deliver an end-to-end JAMStack website.

VT1 Calculator

What's missing?

Contentful changes don't trigger a Vercel deployment. They are currently triggered manually or via a commit to main.
Performance tests when the site delivers vast volumes of content.
Scalable navigation on mobile.