OJ Smith - React / Next.js Headless Wordpress Application
OJ Smith
OJSmith.net - Personal Portfolio & Advanced Web Application Showcase
Live Site: https://ojsmith.net
Overview:
OJSmith.net serves as my personal portfolio and a living demonstration of modern web development practices. It's architected as a high-performance, scalable React single-page application (SPA) utilizing a headless WordPress backend. This project showcases a strategic approach to building dynamic, content-rich websites with an emphasis on cutting-edge technology, custom solutions, and efficient cloud infrastructure.
The design was chosen to provide an exceptionally flexible and easy-to-update content management experience via WordPress, while leveraging the power and speed of Next.js for the front-end presentation layer.
Key Technical Highlights & Features:
Headless Architecture:
Front-End: Built with React and Next.js, enabling server-side rendering (SSR), static site generation (SSG), and a fast, interactive user experience.
Back-End: Utilizes WordPress as a decoupled content management system.
API Layer: Leverages WPGraphQL for efficient and precise data fetching between the Next.js front-end and the WordPress backend.
Custom WordPress Plugin Development:
To ensure true visual fidelity with the Gutenberg editor and enable its full range of block-based content creation capabilities in the headless environment, I developed a bespoke plugin: "WPGraphQL Dynamic Styles Exporter."
This plugin programmatically extracts the dynamic CSS generated by WordPress for global styles and post-specific block supports, making these styles available to the Next.js front-end via WPGraphQL.
Plugin GitHub: https://github.com/odotjdot/WP-GraphQL-Dynamic-Styles
Cloud Infrastructure & DevOps:
Hosting & Deployment: The Next.js application is served via AWS Amplify.
Automated CI/CD Pipeline: Integrated with AWS Amplify, this pipeline automatically triggers a fresh build and deployment of the Next.js application whenever content is updated in WordPress (e.g., new pages, posts, or modifications). This ensures the live site is always synchronized without manual intervention.
Content Delivery Network (CDN): AWS CloudFront is utilized for optimized global content delivery and performance.
WordPress Hosting: The WordPress backend is hosted on an AWS EC2 instance.
DNS Management: AWS Route 53 meticulously manages all domain routing for both the React application and the WordPress backend API URLs.
What This Project Demonstrates:
Expertise in full-stack development with a focus on modern JavaScript frameworks (React, Next.js).
Proficiency in architecting and implementing headless CMS solutions.
Advanced WordPress development skills, including custom plugin creation and API integration (WPGraphQL).
Strong capabilities in cloud infrastructure management and DevOps practices (AWS suite, CI/CD).
Strategic problem-solving to overcome common challenges in headless environments, such as dynamic styling.
Commitment to building high-performance, scalable, and maintainable web applications.
This project is a practical example of how to combine the content management strengths of WordPress with the performance and flexibility of a modern JavaScript front-end, supported by a robust cloud architecture.
Like this project
Posted May 30, 2025
OJSmith.net: Portfolio site built as a headless WordPress app, featuring a custom plugin for dynamic CSS export. Showcasing innovative web solutions.
