This is a guest post by Tanner Moushey, Founder and Lead Engineer of StudyChurch. He is a BP REST API early adopter and we thought his achievments implementing Headless BuddyPress was a great source of inspirations for the BuddyPress community. Many thanks to him for taking the time to share with us about this case study.

Peer reviewed by @imath

StudyChurch is an ambitious startup seeking to make a mark in the church product marketplace. With a unique approach to online interaction, StudyChurch combines elements of engagement and learning in a way that is both simple and intuitive for the end user.

Background

I began working on StudyChurch as a side project in 2015. It started as a proof of concept and an excuse to dive deeply into BuddyPress. I wanted to leverage the group and activity components that BuddyPress provides and combine that with a custom study module that I created with a custom post type, BackboneJS, and the WordPress REST API. Answers to study questions were stored in WordPress Comments and synced to a custom BuddyPress activity type which was then used to create the discussion interface. Each question had an activity component under it to show off the other group answers and corresponding discussions.

I finished the first draft of the project after several months and before too long I had groups signing up to use the system. I continued to make minor modifications over the next few years but kept running into complaints about speed and the user interface.

When I was approached in 2018 by a publisher that wanted to use StudyChurch on a larger scale it sounded like a great opportunity to rebuild.

Implementing Headless BuddyPress

One of the big changes that I wanted to make in the rebuild was to switch to a JavaScript front end. I wanted something that was going to allow us to make numerous asynchronous data requests without using Ajax, which can be slow and difficult to maintain over a large project. I decided on VueJS and started building out the API to handle the data that was previously controlled by the BuddyPress templates.

Building a custom API with the BuddyPress REST API

I’d done quite a bit of work extending the WordPress REST API on previous projects and was excited to discover the BuddyPress REST API that extended it. This took care of a lot of the structure and allowed me to focus my time on building out our custom modules and functionality. Anytime I ran into something that needed to be more flexible, I’d submit a patch to the BuddyPress REST API repository and would get a prompt resolution.

Now that we are able to post and retrieve data through the API, the user interactive elements on the site are noticeably faster and the overall load on the server is much less. Not only that, but we are ready for a native app once we get to that point.

Creating a VueJS front end

Building a completely JavaScript front end for BuddyPress was fun challenge. I underestimated how many different components I’d need to build out since I wasn’t able to rely on the BuddyPress default templates, but the end result was well worth the effort.With VueJS we were able to leverage a lot of prebuilt UI packages (like Element) to do a lot of the heavy lifting for us. Since we were no longer tied to the BuddyPress template engine, we were able to get creative with how we displayed information and handled user interactions. The end result was a clean, fast, and user friendly interface that was simple and straightforward to use.

I made a few modifications to allow WordPress and BuddyPress recognize our front end app and use it for BuddyPress components. I solved this with a pretty simple hook into the template include filter and included our template instead of the default. A few custom rewrite rules handled any non-BuddyPress url structures I needed to support and I soon had a fully functional and detached front end.

Conclusion

StudyChurch is now a powerful, robust social network ready for scale. We are still working on improving the system and adding new features which are now easier and faster to implement with the new structure.

We’ve received some great feedback from users who find the app fast and intuitive. We are hoping to build out a native app in the near future.

I’m so thankful for the work done by all of the volunteers who’ve put so much time into WordPress, BuddyPress, and now the BuddyPress REST API. I think there are going to be many more projects like StudyChurch in the near future that will leverage these great tools to build amazing and helpful solutions.

Feel free to reach out if you have any questions or comments on what we’ve done with StudyChurch. Also, you are welcome to browse our code base on GitHub.

You can read more about StudyChurch and other projects we work on at iwitnessdesign.com.