Developer Stories

WordPress to Mobile App with StepZen and React Native

David Griffin, Freelance Developer
David GriffinFreelance Developer

David turned a WordPress blog into a mobile app using StepZen and React Native

About David

David Griffin is a freelance web developer from Austin, TX. After a career as a pastry chef, David fulfilled his lifelong dream of becoming a software engineer. We met David at a hackathon for developers learning GraphQL. He has found several projects to build and hone his GraphQL skills since then and our team is having a blast working with David.

David started this project to help a non-profit put their WordPress.com blog (with additional assets stored in Cloudinary) onto a mobile application. The idea was for this application to update when the blog did, acting as a new social and PR channel for the organization. David’s goal was to leverage the content and activity already being built by the non-profit into a new channel, expanding reach and broadening awareness for the business.

Configuring a GraphQL endpoint

David was looking for a solution that would allow him to re-use those backend systems in a new application on a new platform. He decided to create a GraphQL API on top of the different backend data sources. Mindful that his client wanted a soliution quickly, David came to StepZen as he liked the configuration-driven approach to GraphQL.

“Using a configuration-driven approach allowed me to deliver a solution quickly. It also made for an incredibly inexpensive and easy way for my client to reuse existing assets and reach better market saturation.”

David first created his GraphQL endpoint to consolidate the WordPress and Cloudinary backends. He then extended a sample React Native application provided by StepZen (StepZen React Native template) to start making his React Native app. David used StepZen's embedded GraphiQL IDE to test and query his endpoint as he designed it.

"I used this IDE to run sample queries before hooking up the React-native frontend. Once I confirmed I could get data from calling all WordPress posts and calling all Cloudinary images, I had complete confidence in the backend. I began implementing the React Native frontend."

You can read all the details of how David built the mobile app in his blog post: Turn a WordPress Blog into a Mobile App Using StepZen and React Native.

Delivering a GraphQL API to consolidate data from existing backends

Creating a GraphQL API on top of multiple systems allowed the non-profit client to re-use those systems in a new application on a new platform. The cost of the solution and time to develop it was important for the non-profit. So David leveraged StepZen’s configuration-driven approach to quickly deliver a solution that fit the budget and expectations of his client. The app is undergoing final testing and preparation for deployment to the App stores! He, and we, also had a lot of fun doing it!

David’s app is an excellent example of an emerging pattern enabled by GraphQL. He created a single GraphQL endpoint (a kind of data layer) to consolidate the data from existing content management and image management systems. This pattern allows front-end developers to ask for the data they need, and in the “shape” they need it to build new experiences for mobile, web, or other apps - all from a single GraphQL endpoint. As a result, access to the data is massively simplified, and development time is significantly reduced for the frontend developer. Also, there is no additional work on the part of the backend teams delivering the data. While cost and time were particularly salient for a non-profit, regardless of sector or business model, building new systems to deliver content from existing systems just doesn’t make sense.

This site uses cookies: By using this website, you consent to our use of cookies in accordance with our Website Terms of Use and Cookie Policy.