Skip to main content
Build

El Brujo Online: headless Drupal 11 with Next.js

Summary: a solo, end-to-end build of a production headless Drupal 11 CMS with a Next.js, React and TypeScript front end. Related brochure sites share the same Drupal codebase. elbrujo.online · built through Echo Flow.

RoleStackScope
Sole developerDrupal 11, JSON:API, Next.js, React, TypeScriptCMS, front end, multilingual content, shared codebase

What I built

  • A production headless Drupal 11 CMS.
  • A Next.js, React and TypeScript front end with reusable templates and components.
  • Multilingual content.
  • Related brochure sites that share one Drupal codebase.

Details editors and visitors touch

Architecture

How the stack fits togetherContent editors publish in Drupal 10/11. Drupal sends content to Next.js through JSON:API or REST. Figma designs become Storybook components that ship in Next.js. Visitors use the Next.js site. Cypress, Playwright, Jest, and CI check that site.JSON:API / RESTContent editorsDrupal 10/11Figma designsStorybookCypress / Playwright / JestCI/CD, e.g. CircleCINext.js + React + TypeScriptVisitors
Need something similar? Book a 20-minute call All case studies

Back to development

El Brujo Online homepage hero
Homepage hero.
Content cards on the El Brujo Online homepage
Reusable content cards.
Age verification modal on El Brujo Online
Age-verification modal.
Open FAQ accordion on El Brujo Online
Accessible FAQ accordion.
Inner guide page on El Brujo Online
Inner guide page template.