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