I’ve been spending time lately, improving my skills in order to be able to make meaningful contributions to open source projects. One thing I’m trying to get better at is having better git commit messages. I recommend this excellent post on writing descriptive, yet brief git commit messages. It really gets into nitty-gritty details on what makes a message good, or how bad ones can be improved.
In addition to trying to generally improve the notes around my code, I also of course have to learn to code better. The project I found, that I’m working on contributing to, involves combining React and WordPress together in a pretty unique way. I have an understanding of React, and of WordPress, but I’ve never used WordPress exclusively as an API before, and I’ve never used Next.js either. Lucky for me, there is a lot of beginner documentation out there for both – and this project is still in its infancy – so there are plenty of basic things to add!
To begin my process, I simply cloned the github repository, and followed the readme’s instructions for installing dependencies and launching the site in a local environment. Then I opened up the project in my text editor of choice (vscode right now) and looked it over. While I haven’t used Next.js before, everything for the front-end looked pretty familiar and intuitive based on my experience with React. I familiarized myself with the file structure, and where code and/or libraries were being imported and exported. The WordPress folder was of course, very familiar to me from my time working at Bluehost. Nothing new there.
As I saw how routing was working on the front-end, I knew I’d need to study more about Next.js if I want to help add components to display pages and posts. That seemed the most obvious thing to add at this point, but it was still unclear to me how to build that out. Here is where I went to learn to how Next.js works, and how I can add to the project. It’s really nice because it even has a section for creating dynamic pages – exactly what I want to be able to do when creating a custom react front-end for WordPress. Now that I have a pretty good understanding of how that works, I should be able to get started following that pattern, and document my work properly with git commit messages. The next tricky part is figuring out what urls to use to fetch the data from WordPress, and make sure the links all work properly. More on this to come.