Community Building using React Native and Firebase noSQL

Firebase + Aliens + React Native

Inspiration

In ClassDojo.com 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 Figma.com, 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).

Figma.com 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

Firebase: noSQL back end

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 front end

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.