Michael R. Dinerstein
Senior Software Engineer (Full Stack)
md@missionmike.dev|Newport, Oregon, USA

The Real Deal (TRD) runs a high-traffic real estate news website https://therealdeal.com. This is a Next.js website powered by headless WordPress in the back-end. It is hosted in AWS using custom-build Docker images in Elastic Container Registry (ECR), deployed to Elastic Kubernetes Service (EKS).

Challenge: Pod Resources

The back-end WordPress installation is home to over 100,000 articles and tens of thousands of tags. Dozens of writers and editors can access the site to create and organize content.

One challenge we faced was to allocate the correct amount of resources per Kubernetes pod, as well as to ensure the correct min/max number of pods are available for WordPress. With some light trail & error, we were able to iron this out and keep the site running smoothly for back-end editors and staff as well as front-end users.

Challenge: Checking Work

Initially this project was outsourced to a contractor. At the time, I was working with the internal team, focused on a different project.

When it was nearly time to be delivered, I checked the state of the work out of curiosity. I had hoped to learn a new technique or two from the developers. I was surprised, however, to find out that the bulk of this project didn't appear to follow healthy coding standards.

Based on what I found, I was nervous about the success of this project. This work was meant to be a milestone transition for the company's digital footprint: it combined seven CMS platforms for various real estate markets into a single powerful website to serve millions of visitors.

Fearing a potential botched launch, I brought up my concerns to management and I presented a plan to help get the project back on track. I recommended to:

• Follow React and Next.js best practices.
• Add tests with Jest in the front-end and PHPUnit in the back-end to cover critical functionality to start, then backfill additional coverage post-launch.
• Improve TypeScript usage and remove loose "any" definitions.
• Follow lint rules and guidelines with ESLint in front-end, and WordPress Coding Standards in the back-end.
• Organize code and files for clarity in front-end and back-end repositories.
• Implement a continuous integration (CI) pipeline to ensure all new pull requests don't break existing functionality.

While we experienced a bit of a setback to the expected launch timeline, I was much more confident in the launch of this project after we fixed the codebase in front-end and back-end. The code quality and development improvements greatly aided our future development and maintenance on this project.

Cache Invalidation

The front-end Next.js setup is served behind CloudFront, so we had to implement robust caching and invalidation settings at multiple levels: Redis Object Cache, Next.js SSR, and CloudFront CDN.

We needed to maintain a balance of aggressive caching to save on AWS resources, while ensuring that the latest content was always available to visitors. To accomplish this, I led the effort to plan ideal cache settings for different sections of the website, as well as to architect a plan to trigger a cache-clearing mechanism to keep all content up-to-date when a post is edited in the back-end.

You can read more about this challenge on my blog here.

Image Assets and CloudFront Costs

The news website https://therealdeal.com/ houses hundreds of thousands of images, with several sizes for each image - millions of image assets. The cost of serving these images from the CloudFront CDN via AWS was very high, especially when certain articles would gain traction and go viral.

To remedy this, I proposed we serve image assets from a separate static domain, using Cloudflare's lower-cost CDN services to serve the image assets. This offloading of images saved thousands of dollars in monthly overhead.