Community Building using React Native and Firebase noSQL

Firebase + Aliens + React Native

The inspiration for this experimental project came from discovering the Class Dojo app for web, iOS and Android. In short, the ClassDojo app helps teachers and parents build community in a classroom. By providing a fun and simple social network with many useful features, it allows for student and parent interaction and engagement. With the emergence of COVID-19, tools like these have become more important. My favorite aspect of CD is it’s simplicity and accessibility to younger children.

In students become cute monsters

So, given ClassDojo as a model, I thought it would be interesting to adapt some of the good ideas found there to another focused on community building. And so, the idea of CommunityMojo was born.

Basically, CommunityMojo is a simple social network for groups, whereby contributions to the group would be recognized and rewarded. In the process of building prototype app, I gained experience with a new tools and platforms, which I will elaborate on in this post. Rewarding students and presenting a leader board of students are ideas that I wanted to incorporate into CommuntyMojo.

The first tool that to highlight in the process is, a FREE online tool that allows for easy mock-up creation and mobile app prototyping. Below is the first set of screens with prototyping paths that can be created with Figma. The vector drawing capabilities rival those of InkScape (also free) and Adobe Illustrator (not free). protytyping feature

For CommunityMojo, I wanted group members to take on the persona of aliens from outer space. Here is a sampling of graphics created, along with some of the rewards.

Alien heads and treasures

I have some experience with MongoDB, but wanted to try another noSQL database back end for CommunityMojo. Google’s Firebase worked well for the project and I appreciate the well written documentation and large amount of well produced tutorials on YouTube. The web based administration interface for the back end data is very polished and easy to use. I was able to experiment with the platform without spending money as well. If the app were to become commercially successful with tons of traffic, Firebase is designed to handle it. It is designed for speed.

The Firebase console

Firebase is made to work with mobile apps. Because I wanted this app to be created with React Native Firebase was an easy choice. As I mentioned, Firebase prioritizes speed/scalability over data integrity. Firebase is not a relational database where one of the most important rules is to not repeat data.

Typical Relational Database Schema, data is not repeated

In a relational database, data is queried using joins to pick data that is needed from multiple tables.

NoSql is different. It is more like a tree of nodes of data hierarchical data, organized by the needs of the application, optimized for reads. Data points are repeated where they need to be. For instance, a user node with repeated attributes might exist at multiple points in the tree. Joins are not used.

noSQL data organized in a tree structure

When data does need to be synchronized within the tree, cloud functions are used to keep de-normalized (repeated data) in line.

React Native is a framework that allows developers to write code for an app only once (in JavaScript). The JavaScript code is then compiled down to native code for Android and iOS devices. Here you can see the code compile down for Android.

React Native crunching away

In this experience, I found that React Native worked pretty well and I could get the app to update and run on my phone consistently. I found that connecting a physical Android device to my computer was the best development setup. There are emulators as well.

I did not explore the iOS side of things.

Here is the app in action. I illustrate logging in as an organizer of a group and reward a member of the group for a contribution.

The GitHub repository for this project can be found here. You can download the apk directly here, which you can install on an Android device if you would like to give it a try.