Book Club apps that is…
I just did the first iteration on the book club app I’ve been thinking about for a while. It’s not really doing much aside from listing out the books we’ve read (well as many as I’ve loaded in so far). But it’s a full-stack application and I even managed to deploy in via netlify.
On the backend:
I’m using a WordPress custom post type (‘Book’) and the Advanced Custom Fields (ACF) plugin to set-up the data on the back-end. Books have authors, cover URLs, descriptions, etc. I’ve added a field for the bookclub date, but some of these we read 5-6 years ago, so I’m not worrying about going back to fill them in. On top of WordPress, I’m using the delightful WPGraphQL plugin to expose nice, convenient endpoints.
Initially, I was excited to use the WPGraphQL extension for ACF, but I realized that with a couple lines of php, I could have a nice flat book object return client-side. Surprisingly easy, if you’re curious check out the plugin repo.
On the front-end:
It’s a pretty standard React app so far, bootstrapped really quickly with create-react-app and Apollo. I did a quick proof-of-concept a couple weeks ago, just messy loading in data and making sure that it works. Again, mostly easy. You can check out the repo here.
This morning and tonight, I focused on starting from scratch with what I’d learned and writing better, or at least less lazy code. I wrote a small set of tests (in Jest) for the various components, and that was a really great learning experience. I’ve used Jest a lot at work, but from within the Salesforce ecosystem (with their lightning web components). The basics are, of course, the same, but the way to mock data retrieval is quite different.
Although now that I’ve figured out how to mock the Apollo client and GraphQL queries, I’m realizing it’s kind of the same:
- Initialize component
- Provide a mock source of data
- Wait for DOM updates or other async stuff
- Make assertions.
Basically the same steps for any unit test, just in the Apollo client vs. Salesforce the way(s) available to do #2 & #3 are pretty different.
What’s Next?
Next minor thing is being able to click on each book and read more about it. After that, display each book’s categories and allow user to view all books in a given category. Pretty standard React routing and queries.
After that, the slightly trickier part – allow authenticated users to add new books via searching the Google Books API. The GraphQL part I’m not too worried about, but authentication just adds another level of complexity.