Building a WordPress plugin with modern architecture

The Motivation: Why Build Another Crypto Plugin?

When building a portfolio project, the “what” is often less important than the “how”. I decided building a WordPress plugin with modern architecture and I chose to build a Multi-Crypto Price Converter not because the market lacked one, but because it provided the perfect sandbox to demonstrate and include in my portfolio how WordPress engineering looks like. While the feature set is straightforward, the architecture behind it is designed for scale, stability, and maintainability.

The goal was simple: Create a lightweight, robust, and highly maintainable plugin using modern tools like TypeScript, React, and SOLID PHP principles.

1. A Decoupled Architecture

Most WordPress plugins suffer from “hook fatigue,” where logic is scattered and hard to test. I approached this project with a clear separation of concerns:

• The Backend (PHP): I implemented a Service Container and used Dependency Injection to manage my classes. The backend’s primary responsibility is data orchestration—fetching crypto prices from external APIs and managing a custom caching layer. By using a dedicated service for caching, I ensure that visitors hit my local REST API rather than exhausting external API limits. By coding to interfaces rather than concrete classes, the system is prepared for future-proofing (e.g., swapping out a price API without touching the core logic).
• The Frontend (React): To keep the experience snappy, the actual currency conversion happens on the client side. Once the React component fetches the cached prices from the WordPress REST API, it handles all calculations locally. This reduces server overhead and provides an instantaneous UI for the user.

2. Building “Bulletproof” Software with PHP-Scoper

In the WordPress ecosystem, dependency conflicts are a silent killer (e.g., your plugin uses Guzzle 7, but another plugin loads Guzzle 6). To prevent this, I used PHP-Scoper.

I’ve ensured that the plugin uses prefixes for third-party namespaces to make it completely isolated. It doesn’t matter what other plugins are installed; my dependencies will never conflict. This is a standard I believe should be used in all high-level WordPress development.

3. Modern Frontend & Gutenberg Integration

I wanted to showcase my experience with the modern WordPress block editor. The plugin includes a custom Gutenberg Block built with TypeScript and React.

• Editor Experience: A custom Gutenberg block built with React and TypeScript for a native editing experience.
• Frontend Performance: While I initially considered Vanilla JS, I pivoted to a React-based frontend component to handle the state of price conversions more elegantly and provide a smoother UX but mainly to showcase my experience creating React components. By moving the conversion math to React, I avoided unnecessary admin-ajax or REST calls during user interaction.
• REST API Integration: I built custom REST endpoints to handle data fetching, this decouples the frontend from the backend logic.

4. AI-Augmented Engineering

I used an AI coding assistant as a co-pilot for this project. My goal was to see how much it could accelerate my workflow.

• The Result: It significantly sped up boilerplate and initial implementations.
• The Caveat: It requires a human hand. I found that while the AI is fast, I had to refactor its output to meet my architectural standards, fix edge-case validations, or pivot when I realized a design needed to change (such as switching from a Vanilla JS table to a full React component). I remained the architect; the AI was the builder. By maintaining a strict “Human-in-the-loop” approach—including detailed code reviews and manual refactoring—I was able to code faster without sacrificing the integrity of the architecture or losing control and knowledge of the details of the architecture.

5. Quality Assurance & Tooling

Even for a portfolio piece, code quality is non-negotiable.

• Unit Testing: I implemented tests for the core PHP logic, specifically focusing on the external API requests and the caching mechanism.
• Static Analysis & Type Safety: To reduce bugs in the codebase, I utilized PHP 8 features with strict typing throughout the plugin. I integrated PHPStan into my workflow to catch potential edge cases and type mismatches before the code ever reached execution, ensuring a level of type safety rarely seen in traditional WordPress development.
• Coding Standards: The project enforces PHPCS (WordPress standards) and ESLint to ensure the code is clean and readable for any developer who touches it next.
• Build Automation: Using package.json and composer, I created a streamlined local build process that orchestrates tsc, wp-scripts, and dependency scoping into a production-ready ZIP file.

---

Summary

This project was a great way to combine my interest in Web3 with my experience in modern software design. It’s not just a price converter—it’s a demonstration of SOLID principles, dependency isolation, and a modern React-to-REST workflow.

View the Source Code on GitHub

Multi Crypto Price Converter in Action