Journey towards launching: Follow My Church Mobile App - (iOS & Android)

At the start of 2023 I wanted to work on a pet project to implement Cloud Native App. 
Following a series of brainstorming sessions, I reached the decision to develop an application specifically designed for churches. 

The primary objective is to create a multi-tenant app that enables each individual church to independently manage its own content, while allowing users to access and view the relevant content for their respective churches through a mobile app.

I will attempt to guide you through the entire process of implementing this pet project.

***As this project was undertaken as a personal endeavor, the objective was to minimize costs by predominantly utilizing open source technologies and free tier products***


Follow My Church - High Level Components 


Phase 1: Develop Prototype with App Features for feasibility study

Created a prototype which will help visualize the To-Be product and its features.   

    .....

Tools & Languages: Figma


Phase 2: Find approach to implement a multi-tenant backend system to allow Church Admin/Editor to manage its own contents.

In this scenario, I had to devise an approach for developing a backend web application that functions as a Software-as-a-Service (SaaS) product. This application enables individual churches to onboard and independently manage their own content, such as articles, announcements, events, and donation links.

After extensive research and trials, I selected PayloadCMS an open source headless Content Management System. 

I very much impressed with PayloadCMS, it allowed me to implement the multi-tenant backend app with in a month time. It also comes with out of the box REST & GraphQL API's. 

PayloadCMS support NoSQL MongoDB. Thus, selected MongoDB Atlas with Serverless version which was much cost effective and easy to setup.

Tools & Languages: React JS, PayloadCMS, MongoDB Atlas
Production Site: Follow My Church Backend


Phase 3: Theming - Logo's, Fonts, Color's Etc.

To achieve a more polished and professional appearance for my app, I initially chose my own themes, but the results were not as impressive as I had hoped. 

Consequently, I made the decision to seek assistance from a freelancer who aided me in designing logos, selecting fonts, colors, and other visual elements for both the backend and mobile app. 

Credit: @AnjuTuscano - Please visit her blog for more information.
UI Elements for Follow My Church App


Phase 4: Selecting the Cloud Platform - Google Cloud Platform

It is obvious I will need the cloud platform to host the backend/Frontend apps and services. For years, I have been experimenting with Google Cloud Platform and since I was pretty comfortable using GCP products, I decided to implement it on GCP.

Below are the key GCP services used in this project:

  • Cloud Run - A fully managed platform for containerized Apps. 
    • Service Hosted: 
      • PayloadCMS as a web and backend services
      • Tagged with Custom Domain Name
    • Reasons for selection:
      • It allow to host your docker container in serverless mode, and pricing is based on the number of transactions. Since, I am not expecting much traffic at the start, I didn't wanted to pay for dedicated server and using Kubernetes was overkill. 
  • Cloud Storage - To store uploaded Documents & Images
    • All the content i.e. uploaded by Church's are saved with applied security on Cloud Storage. 
  • Cloud Artifact - The Docker build generated via GitHub is pushed and maintained in GCP Artifact storage for versioning. 
  • Cloud Functions - To host serverless functions. 
    • Service Hosted:
      • Church Middleware Service which is implemented in NodeJS to orchestrated calls from Mobile App to Backend CMS services with API security etc.
    • Reasons for Selection:
      • The middleware was implemented using Node JS Framework and it was very simple to host it as a API using Cloud Functions.

***Approaches taken are towards using as serverless services as much possible, as it is easy to scale on demand and incur no cost if you are a startup.

Tools & Languages: Node JS, Cloud Run, Cloud Function, Docker, Github


Phase 4: Selecting technology for implementing mobile app

I want to use the framework which will allow me build app for all platform i.e. Android, IOS, Web. 

After exploring, React Native, Ionic, Flutter, I decided to implement it in Flutter because of the wide community support, cool widgets, animation etc. 

Tools & Languages: Flutter


Phase 5: Selecting Mobile App Backed Services

To implement any scalable mobile app, we need a mobile app backend service platform which will help us implement and scale on need basis. 

After researching and trying, AWS Amplify and Google Firebase, I decided to go with Google Firebase for its simplicity, examples, use cases and my familiarity with GCP platform. I also wanted to keep infra limited to single cloud provider. 

Tools & Languages: Firebase - Authentication, NoSQL DB,  Functions, Analytics, App Notifications etc.


Phase 6: Implementing a Middleware Service between Mobile App and Headless CMS

The Scenario was that the Church Admin's/Editor's will use the backend System to publish the Articles. This Articles will have Fonts, Lists, Images.

In order for Mobile app to render the Articles & Events, we needed a Middleware service. Also, it was bit tricky to add the JWT Validation on PayloadCMS, thus implemented the JWT validation in Middleware API.


Phase 7: Implementing Actual Mobile App and its Features

The mobile app implemented has below features:

  • List and View Articles
  • List and View Events
  • List and View Announcements 
  • List and View Mass Timings
  • Donation Options
  • Search Churches
  • About My Church Info
  • App Notifications using Firebase Messaging
  • App Analytics using Firebase Analytics
  • Sign in with Google using Firebase Authentication

Phase 8: Implementing CI/CD for Flutter Mobile App using Code Magic

I wanted an approach to build and publish the App in draft release on Google Play. CodeMagic is the cool tool to set it up with your Github Repo.

You can configure it either start on Git Check in or initiate it manually.


Phase 9: Creating Marketing materials for publishing the App - Canva

In Order to publish app on Play Store, I needed to create the marketing video. Canva was a quick option to create demo videos.


Phase 10: Signing up for Google Play and releasing beta version and sharing it with Friends and Family


Phase 11: Submitting the App for approval on Play Store and publishing it. 


Phase 12: Implementing the web site for users to know about the app. 

Hosted the simple ReactJS Site to provide details about the App. The site is hosted on Firebase Hosting.

Tools & Languages: Firebase - Hosting


Code Repo & Development tools:

  • Github
  • Github Codespace with Visual Studio
  • Android Studio for Flutter


You can view the App by downloading it from Play Store. 

Follow My Church Google Play App 


If you want to check demo videos on App and Backend check below site.

https://followmychurchprod.web.app/


P.S: iOS Version will launch soon..


Popular posts from this blog

Combine or Merge XML documents in Single XML using Boomi & Groovy

Image
In this small post will try to show how you can merge multiple XML Documents in Boomi.  Consider following scenario where you have to merge Document 1 & 2 in a new Document 3 Document 1: <?xml version="1.0" encoding="UTF-8"?> <tns:OutputParameters xmlns:tns="http://sample.com">    <tns:Book>       <tns:Names>          <tns:Name>XZY World</tns:Name>       </tns:Names>       <tns:Authors>          <tns:AuthorID>12354</tns:AuthorID>       </tns:Authors>    </tns:Book> </tns:OutputParameters>   Document 2: <?xml version="1.0" encoding="UTF-8"?> <tns:OutputParameters xmlns:tns="http://sample.com">    <tns:Book>     ...
Read more

API Design First approach: Implementing quick mock API's using swagger hub and postman

Image
Consider a scenario, where you as a API developer been ask to to implement the API's for a new mobile/web application team. The requirement is to implement a application to allow users to manage orders.         Mobile APP -> API infra->Backend enterprise system While implement a full working API might take days, you also do not want the application team to wait till the API's are ready. Thus, in most case we end up implementing the mock API's with sample scenarios. In this post, we will define an API using swagger openapi 3.0 yaml specification in swaggerhub. We will then use the definition to implement mock API's in postman. Even though postman provide option to define the API's, i liked swagger hub much better, it allow you to view your API on right side.  For this post I implemented API definition in swagger, please find the below link. https://app.swaggerhub.com/apis-docs/lopesrohan1988/ordermanagement/1.0.0 API Definition can be found at below link: h...
Read more