Create a Shared Digital Albums Hybrid Application with Monaca, Firebase, Framework7 and React

Social media have introduced the ability to share pictures of personal moments to the whole world. Everyone is able to see those pictures, or more specifically, everyone that follows us or is our friend on a specific social platform. But what if we want to share pictures among a group of people that we went on a trip together and now our gallery is flooded with pictures of them? What we usually do is share those pictures through messaging apps, Bluetooth or Airdrop. As convenient as these tools can be, they don’t provide the full experience of sharing and viewing these pictures as a shared digital album would provide.

This tutorial gives guidance to develop exactly that, a digital album where users can share pictures among groups (networks of other users), edit them and view them. It’s a hybrid application, meaning that it can be supported by both Android and iOS operating systems. The tools used for the development are; Monaca, React, Firebase and Framework7. This tutorial will provide information only on the logic behind the application. The files related to the styling and the UI can be found in the GitHub repo here.

The tutorial is split into two parts. You can find the second part here.

Before diving into the process of development, let’s take a look at the technologies used for this project.

Monaca is a cloud-based platform for developing and deploying hybrid mobile apps. It provides a set of tools and services for building cross-platform mobile applications using web technologies such as HTML5, CSS, and JavaScript. It also provides a cloud-based build service that allows developers to build and distribute their apps to app stores without the need to setup their own infrastructure.

Firebase provides a comprehensive platform for developers to build, test, and deploy their applications quickly and easily, without the need for managing infrastructure or backend services. From the Firebase platform we will be using Firebase authentication to authenticate users, Firestore database to store data and Cloud Storage to store pictures.

Framework7 for React is a mobile-first UI framework for building cross-platform mobile applications using React. It provides a set of components and tools that make it easy to create native-looking mobile applications with a seamless user experience.

Before starting the development of a project, a good practice is to create a wireframe that depicts how the application should look like and what functionalities it provides in which parts. Here you can find the wireframe I created for this project with the help of Figma.

There are two ways we can start the development of our project, either locally with our favorite text editor or with the cloud IDE provided by Monaca. Both options will produce the same result so the decision depends on our own personal preference.