Next.js + Drupal (PHP) + Pantheon

Created a website with a dark theme for News realated to Space and Tech.

Visti website:
https://franciscojavierguardado101-book-1-f.vercel.app

GitHub Repo:
https://github.com/franciscojavierguardado101/franciscojavierguardado101-book-1-frontend

 

Frontend — Next.js                                                                                                                         
                                                                                                                                             
  - Next.js 15 — React framework using the App Router                                                                                        
  - TypeScript — Full type safety across the entire frontend                                                                                 
  - React 19                              
  - Tailwind CSS — Utility-first styling
  - Vercel — Deployment and hosting with automatic GitHub deploys                                                                            
                                              
  ---                                                                                                                                        
  Frontend Architecture
                                                                                                                                             
  - Server Components: Pages and data fetching are server-rendered for performance and SEO
  - Client Components: Used selectively for interactive UI (carousel, lightbox, search modal, mobile nav)                                   
  - Drupal JSON:API integration: Custom data layer (drupal-landing-page.ts, drupal-articles.ts, drupal-menu.ts, drupal-search.ts)
  - Two-pass fetch strategy: Custom pattern to safely resolve nested Drupal paragraph includes without API errors

 ---                                                                                                                                        
  Backend — Drupal 11                                                                                                                        
                                                                                                                                             
  - Drupal 11: Content management system running on PHP 8.3                                                                                 
  - Composer: Dependency management for all Drupal modules
  - Pantheon: Cloud hosting platform (Dev environment)                                                                                      
  - MySQL 10.6: Database                     
  - Drush 13: CLI for database operations and cache management                                                                              
  - JSON:API: RESTful API layer used to expose all content to the frontend
  - Paragraphs module: Component-based content architecture                                                                                 
  - Paragraphs Editor Enhancements (EE): Advanced paragraph editing UI
  - Custom Drupal modules (2 built from scratch):                                                                                            
  - francisco_components: Defines custom paragraph types (RichText, CarouselHero, MosaicPhotos, FeatureSpot)                              
  - francisco_view_reference: Custom field type, widget, and formatter plugin for embedding Drupal Views inside paragraphs 

 ---
Key Features                                                                                                                               
                                                                                                                                             
  - Global search: Cmd/Ctrl+K modal with debounced live search, keyboard navigation (arrow keys + Enter)
  - Dynamic navigation: Header and footer menus pulled live from Drupal, zero hardcoding                                                     
  - Article system: List and detail pages with media support (images, video, remote video)                                                   
  - Responsive design: Mobile-first with a custom CSS design system (CSS variables, custom fonts)                                            
  - Image optimization: Next.js Image with remote pattern allowlisting                                                                       
                                                                                                                                             
  DevOps & Workflow                                                                                                                          
                                                                                                                                             
  - DDEV: Local development environment
  - Terminus: Pantheon CLI for deployments, database imports, and remote Drush
  - Git: Two separate repositories: Drupal backend on Pantheon Git, Next.js frontend on GitHub
  - Rsync over SSH: Used to sync Drupal media files to Pantheon