Chris Who Codes

Development Process and Challenges Faced

I had a few false starts, as I had never seriously spun up a react app development environment before, however WP Engine's "headless CMS developer roadmap" had tons of great resources that I was able to easily follow to get up and running. 

Coming from a traditional WordPress and PHP background, I was used to creating code that would be run on the server itself and dynamically generate content pages from the PHP code. This was very different from creating a react based JS application. React applications typically have to be compiled ahead of time, and have all bugs as ironed out as possible in the development environment ahead of launch, or it just won't deploy. I learned how to use node package manager to get a dynamically compiling development environment set up for my app. Using Nextjs, which is react-based, also allows for partial dynamic page generation for faster app builds, which I was thankful for.

Working in React and Nextjs for the first time had me fighting my way through various concepts like how a Nextjs app renders twice, once on the server and once on the client-side, and if both renders don't match, it causes errors. I solved some of these issues by using react hooks to tie into specific points of the rendering pipeline and make sure the content rendered and matched where it should.

A small, but cool, touch that I wanted to add was a light and dark mode toggle button. If you go to my website on your phone or computer where you have the operating system set to a specific mode (ex. dark mode), the website will automatically load with the appropriate stylesheet loaded. I also used a basic setup of storing the user's preference in the client side local storage to persist the light mode state across their user session.