tr3 running

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

: 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 docs aren't great. Had to do a trial-and-error to figure some things out. Also doesn't play well with TypeScript.
• Performance: initially misunderstood that JAMStack is not enough to guarantee performance. Solutions 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.