Ampli de Québec | Headless pipeline between Airtable and DatoCMS

A directory of training courses and programs, around a hundred Airtable entries, a website. And above all: zero manual sync. Ampli de Québec — the reference organization for workforce skills development in the region — needed a digital ecosystem where business data flows without friction between their internal tools and their public showcase.

Bauhem designed and developed the complete platform: a modern Nuxt 3 frontend, a DatoCMS headless CMS for editorial content, and — the centerpiece of the project — an automation pipeline that continuously synchronizes training and program data from Airtable to DatoCMS, without human intervention.

A project born from a real operational constraint

Ampli de Québec managed its training courses and programs in Airtable — a tool the team masters and that serves as a reliable data source. But the website displayed a static version that degraded over time. Each update had to be done manually, introducing errors and delays.

The solution could not be to force the team to change tools. We needed to connect Airtable to DatoCMS transparently, automatically, and resiliently. That is exactly what Bauhem delivered: a pipeline where data travels on its own.

Nuxt 3: performance, flexibility, and augmented static generation

The frontend was built with Nuxt 3 (Vue 3 / TypeScript), a framework that combines the advantages of static generation with the flexibility of a server-side application. Each training page, program page, and editorial content page is pre-rendered at build time, then updated incrementally.

The site uses full dynamic routing: training courses, programs, CMS pages are all generated from DatoCMS data via GraphQL. Nuxt 3 pre-renders all these routes at build time, guaranteeing ultra-fast load times and maximum SEO scores.

Netlify prerender rules allow pages to be refreshed on the fly after each data update, combining the best of JAMstack and real-time editing.

Six Netlify Functions at the heart of the automation

The automation infrastructure relies on 6 Netlify Functions, each with a specific role in the data pipeline:

• formations-to-datocms-background: triggered manually or via webhook, it queries the Airtable API, fetches all training courses, compares them with DatoCMS, creates or updates records, compresses and uploads associated images, then purges the Netlify cache. A Slack notification confirms success or alerts on failure.
• programmes-to-datocms: same principle for programs — Airtable to DatoCMS sync with relationship updates between trainings and programs.
• upload-image-to-datocms: a smart image pipeline that downloads images from Airtable, resizes them (1200px max), compresses them (JPEG quality 60% via sharp), uploads them to DatoCMS, and cleans up temporary files. Result: optimized images without effort.
• invalidateCache: selective Netlify cache purge by tags, ensuring visitors always see the latest version after a sync.
• preview-links: generates DatoCMS preview URLs for 8 content types (trainings, programs, CMS pages, etc.), allowing the team to preview any modification before publication.
• utils.js: shared helper library: typed Airtable fetch, DatoCMS search and upsert, Markdown to HTML conversion.

An industrial-grade image pipeline

One of the lesser-known strengths of the project is automated image processing. When a training course is updated in Airtable with a new image, the Netlify Function downloads the image, resizes it to 1200px wide, compresses it to JPEG quality 60% via sharp (Node.js), uploads it to DatoCMS, and cleans up. Zero heavy images, zero wasted time.

This pipeline saves the Ampli de Québec team from having to manually optimize each image — a time-consuming task that is now fully automated.

Preview links and validation before publication

Each content type has a dedicated preview URL, dynamically generated by the preview-links function. The team can see exactly what a training course or page will look like before publishing it — an essential workflow for an organization that regularly publishes content and must guarantee its quality.

Tech stack

• Frontend: Nuxt 3, Vue 3, TypeScript — static generation with pre-rendering and incremental refresh.
• Headless CMS: DatoCMS — trainings, programs, CMS pages, editorial content.
• Operational data: Airtable — source of truth for trainings and programs, automatically synced.
• Pipeline: 6 Netlify Functions (Node.js, sharp for images, Slack for alerts).
• Performance: Netlify prerender, cache by tags, static pre-rendering of dynamic routes.
• Deployment: Netlify — atomic deployments, previews, selective cache purge.
• Image: sharp (resize 1200px, JPEG 60%) — automatic compression in the upload pipeline.

Results

• Complete operational pipeline from Airtable to DatoCMS to Netlify, without manual intervention.
• Image automation: compression, resizing, and upload in one click (or zero click).
• Preview for 8 content types before publication.
• Slack notifications on sync success or failure.
• Cache automatically purged after each update.
• Static performance Nuxt 3 with pre-rendering of all dynamic routes.