Drupal + React + Next.js + TailwindCSS

Come check out my Drupal + React + Next.js + TailwindCSS project and details.

 

Link:

https://francisco-universe-dkanfrontend.vercel.app


Github:
https://github.com/franciscojavierguardado101/Francisco-universe-dkanfrontend

 

What the Project Is

A full-stack open data portal built with Drupal 11 + DKAN 4.1.2 as the CMS/API backend, and a Next.js 16 frontend that consumes it. Designed to demonstrate government/civic tech skills, the kind of stack used at agencies like USDA, cities, and organizations running open data catalogs.

Backend, Drupal 11

  • Drupal 11.3.3, content types; taxonomy; roles & permissions; config management; hook system

  • DKAN 4.1.2, open data catalog: metastore; datastore; search indexing; data dictionaries; distributions

  • JSON:API, headless CMS API consumed by Next.js frontend

  • REST API / DKAN Metastore API, custom dataset endpoints

  • Simple OAuth 6.1.1, OAuth 2.0 client credentials flow with RSA key pairs for API authentication

  • OpenID Connect 3.x, Google OAuth 2.0 SSO login for Drupal admin users

  • Content Moderation / Workflows, custom editorial workflow (Draft; In Review; Needs Revision; Approved; Published; Archived) with 3 editorial roles (content_creator; editor; publisher)

  • Search API + Search API DB, DKAN dataset indexing and catalog search

  • Composer, Drupal dependency management

Custom Drupal Modules (30+)

  • help_guide, injects contextual ? help icons on admin forms via hook_form_alter; opens off-canvas dialogs; supports content entities; config entities; and config forms

  • api_explorer, API exploration interface

  • image_ratio, image aspect ratio toolbar control

  • inventory_manager, dataset/content inventory management

  • site_health_monitor, site health monitoring with Playwright integration

  • datagrid, data grid display component

  • dimension, custom content type/dimension management

  • medical_billing; medical_bills; travel_reimbursement, form-based civic app modules for billing and reimbursement workflows

  • pet_management, CRUD form module

  • interactive_facts, dynamic facts display

  • hero_overlay; focus_block; headline; content_grid, layout and display blocks

  • flow_slider; continuum_carousel; thumbnail_carousel, custom slider/carousel components

  • workshop_series_display, content series display

  • project_showcase, portfolio showcase block

  • galaxy_admin_styling, admin UI theming overrides

  • francisco_components, shared component library

  • clc_focal_point; phpunit_resolve; phpunit_tester; playwright_tester; francisco_tests, testing and QA infrastructure

Custom module skills demonstrated: hook_form_alter; hook_theme; hook_preprocess; off-canvas dialogs; custom entities; config entities; admin forms; JS integration; Drush commands

Custom Theme, Galaxy

  • Fully custom Drupal theme with Twig templates (node--data.html.twig for DKAN dataset nodes); custom preprocess hooks decoding field_json_metadata for dataset display; custom CSS; admin styling overrides

Frontend, Next.js 16

  • Next.js 16 with App Router; React 19; TypeScript 5; Tailwind CSS 4

  • Server Components, dataset pages are fully server-rendered

  • Client Components, paginated data preview table (DatastoreTable)

  • DKAN API client (src/lib/dkan.ts), getDataset; getDatasets; queryDatastore; getDataDictionary

  • Drupal JSON:API client (src/lib/drupal.ts)

  • API Proxy Route, Next.js route handler proxying DKAN datastore queries to avoid CORS/TLS issues

  • Dataset catalog page, category sidebar + search

  • Dataset detail page, mirrors the Drupal Twig template: hero; distribution cards; data preview; data dictionary; metadata table

Infrastructure & DevOps

  • DDEV, local Docker-based Drupal dev environment with custom PHP/MySQL config

  • Pantheon, cloud hosting for Drupal; handled Pantheon-specific constraints (no LOAD DATA LOCAL INFILE; filesystem restrictions)

  • Terminus, Pantheon CLI for remote Drush; deployment; and database management

  • Git, multi-remote setup (Pantheon SSH remote + Drupal.org remote); branch strategy (drupal-main → master on Pantheon)

  • Drush, Drupal CLI for config imports; cache rebuilds; DKAN datastore management; queue processing

Testing

  • Playwright, 16 end-to-end test specs covering navigation; authentication; accessibility (a11y); custom module UI; Drupal content; responsive layout; form field validation (medical billing; pet management; travel reimbursement); and civic app workflows

  • PHPUnit, PHP unit testing infrastructure for custom modules

  • Custom test modules, phpunit_resolve; phpunit_tester; playwright_tester; site_health_monitor_playwright

Key Skills to Highlight for Recruiters

  1. Headless/decoupled Drupal, JSON:API + Next.js App Router

  2. Open data standards, DKAN; metastore; datastore; data dictionaries; DCAT-compliant datasets

  3. OAuth 2.0 / OpenID Connect, both machine-to-machine (client credentials) and user SSO (Google)

  4. Custom Drupal module development at scale, hooks; entities; config entities; admin UX

  5. Custom Twig theming with preprocess hooks

  6. Editorial workflow design, multi-role content moderation

  7. Full-stack TypeScript, typed API clients; Server/Client component boundary management

  8. End-to-end testing with Playwright and PHPUnit

  9. Cloud hosting and DevOps, Pantheon; DDEV; Terminus; multi-remote Git

  10. Civic/government tech domain, the exact stack used in real open data portals at city and federal agencies