Drupal + Next.js + React + TailwindCSS
Come check out my website using Drupal + Next.js + React + TailwindCSS
Website:
https://francisco-world-frontend.vercel.app
Github:
https://github.com/franciscojavierguardado101/francisco-world-frontend
Backend / CMS
Drupal 10/11; PHP (object-oriented); Composer; Drush; Pantheon (cloud hosting with Integrated
Composer builds); DDEV (local development environment)
Drupal APIs & Concepts Used
JSON:API; Decoupled Router; REST API (custom endpoint); Paragraphs (component-based content
modeling); Hook system (hook_ENTITY_TYPE_insert); Custom entity types; Access control
handlers; Validation constraint plugins; Routing (*.routing.yml); Twig templating; Libraries
API (*.libraries.yml); Contextual links; Menu link extensions; Field API; Form API
Contrib Modules Integrated
Paragraphs; Paragraphs EE; Paragraphs Features; Entity Reference Revisions; JSON:API Extras;
JSON:API Menu Items; Decoupled Router; PathaAuto; Token; CTools; Admin Toolbar; Gin (admin
theme)
Custom Drupal Modules (authored from scratch)
fg_components — auto-provisions a Paragraphs Components field on every new content type via
Drupal hooks; fg_megamenu — extends menu links with megamenu fields and exposes a custom REST
controller serving structured navigation JSON to Next.js; help_guide — full custom entity with
access control, validation constraint plugin, form class, contextual links, modal JS
behavior, and Twig templates for editorial help guides
Frontend
Next.js 15 (App Router); React 19; TypeScript; Tailwind CSS v4; shadcn/ui; Radix UI
primitives; Lucide React; next/font (Google Fonts); class-variance-authority; clsx;
tailwind-merge; tw-animate-css
Frontend Architecture & Patterns
Headless / decoupled CMS architecture; dynamic catch-all routing ([...slug]) resolved against
Drupal via Decoupled Router; JSON:API data fetching with nested include chains for Paragraph
relationships; static paragraph-to-component registry for O(1) resolution; custom paragraph
components: FeatureStack; ArtisticCarousel; SimpleMedia; DescriptiveMedia; FAQs; Fact;
megamenu resolver pattern (gallery vs. columns layouts)