BUILT WITH REACTJS

This site uses a ReactJS/Redux front end and a backend powered by a Wordpress REST api. I originally built this site in 2016 with Wordpress when I was first getting started with web development. I liked the appearance of the original site, so the new React version is nearly identical. I developed the current ReactJS version in mid-2020 immediately after taking an online ReactJS course on Coursera.com. This site was my first foray into creating a fully-blown ReactJS/Redux web application.


I like ReactJS. I've been working with Angular since 2018 and by comparison I find React more intuitive and more performant. Additionally, the ReactJS community is large and growing, which results in more searchable online help content and more and better tooling.


Front End: The front end stack is ReactJS/Redux, Bootstrap and minimal custom JS and CSS. The graphics all come from the free version of Font Awesome. This was intentional. The original Wordpress version used a professionally-designed third-party theme, and I wanted to see if I could duplicate it using open source tools. I encountered a variety of design and technical challenges with the home page, which you can read more about in this blog post, Animations in ReactJS.

Source code: https://github.com/lpm0073/lawrencemcdaniel.com

I designed and coded the logo cube animation on the home page and then later wrote this blog article that discusses my design considerations and some of the unique challenges I encountered along the way, and their solutions.

Back End: The back end is a Wordpress REST api and the AWS Cloudfront content delivery network. Wordpress is a great back end solution, though oddly, I never read nor hear much about this. I manage a medium-sized Wordpress hosting platform for my clients so this obviously impacts my decision. This site mostly needs back-end support to provide image assets. Currently, there are around 500 images on this site which are all ultimately served by AWS Cloudfront CDN. I like Wordpress because there's a lot of important minutia like backups, security, permissions, data backups etcetera that Wordpress takes care of out of the box. I use some premium Wordpress plugins to help with image optimization and CDN synchronization which make adding new images pretty painless. The wordpress site is behind a Varnish cache which means that in practice, everything is served instantaneously by a proxy server, so its really fast. Lastly, the Wordpress REST api is robust (and free).

Backend API URL: https://api.lawrencemcdaniel.com/

Progressive Web App (PWA): This site is fully-functional and performant regardless of Internet quality, even if there's no Internet service at all. It's observably performant because all of the site assets are precached and served locally. It's more resilient because it works fine even with sparse or non-existent Internet service.

Part of this is made possible simply because the World Wide Web Consortium implemented a set of standards for implementing a local browser javascript-based service worker. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. They manage the client side of synchronizing web apps; topics like precaching, runtime caching, request routing, and background code and static asset synronization. I'm using Google Workbox, a library that bakes in a set of best practices and removes all of the heavy lifting involved in working with service workers.

In my case converting my standard React app into a PWA involved modifying/creating the following:

Infrastructure: This site runs on AWS primarily because I had existing multi-tenant infrastructure there that I could leverage for this site (see diagram below). But that aside, there are a couple of things about AWS that are hard to beat for small projects. First, S3/Cloudfront are effectively zero cost, and they are super resilient and performant. And second, AWS offers Lambda as an alternative to a standalone Linux server, which will save you tons of money if you're on a limited budget.

CDN: https://cdn.lawrencemcdaniel.com/

AWS React Hosting Architecture