The Web Tub
Published in

The Web Tub

Create an event management app using Monaca, React, Framework 7, Firebase database and Zapier

Create an event management app using Monaca, React, Framework 7, Firebase database and Zapier
Create an event management app using Monaca, React, Framework 7, Firebase database and Zapier

In this article, we will learn how to create an event management application using Monaca, React and Framework 7, as well as the Firebase database and Zapier.

Event Management App designed in Figma

Used technologies

Before we start creating the project, it is good to understand what technologies we will be using in this tutorial.

Monaca is a collection of software tools and services for building and deploying HTML5 mobile hybrid apps. It is built using Apache Cordova and offers different resources like Cloud IDE, local development tools, a debugger, and also backend support.

React (also known as React.js or ReactJS) is a free open-source JavaScript library designed to create user interfaces to make single-page app development easier. It is maintained by Facebook and involves more than one thousand developers.

Framework7 is a free open-source framework to develop mobile, desktop or web apps. Besides, it is also possible to use it as a prototyping tool. It allows the user to create apps with HTML, CSS, and JavaScript easily and clearly.

Firebase is a cloud platform for web app and mobile app development launched in 2011 and acquired by Google in 2014. It is a Backend-as-a-Service solution that includes services for building, testing, and managing apps.

Zapier is a product which integrates web applications and automates workflows for users.

Prerequisites

This is what we need to have to follow this tutorial:

Are you ready? Let’s start!

Creating the project

Firstly, we need to create the project in Monaca. This can be done either locally or in the cloud IDE. We decided to use the Framework7 React Blank template to create the project.

Locally:

*If you don’t have Monaca installed, please run:

npm install -g monaca

Before starting, we have to log in using the following command:

monaca login

After logging in, we can create the project by running:

monaca create event_app

After running it, we should choose the following options:

Create a new Monaca project locally
Create a new Monaca project locally

Cloud IDE:

After clicking on Create New Project, we will choose the options shown in the following screenshot:

Create a new Monaca project using Cloud IDE
Create a new Monaca project using Cloud IDE

Project Type: Framework Templates

Framework: React

Template: Framework7 React Blank

Configuring Firebase

Our next step will be configuring Firebase. To do so, we need to go to the Firebase Console and create a new project. Follow the steps on the screen.

Once we have the project created, we have to go to Project settings and then go to the bottom of the screen. There, we should click on the web app icon, which is indicated as </>.

Create an app in our Firebase project
Create an app in our Firebase project

Follow the instructions shown on the screen. Install Firebase and copy the firebaseConfig. We will need it in the next step.

Firebase configuration

Once we have Firebase ready, we should create a .js file that will work as a service for the database. In our case, we called it db.js. Here, we need to import the firebaseConfig information, so then we can initialise the app and the connection to the Firestore service.

Firebase initialisation by import and connection to Firestore service

In this project we will be using the following Firebase services:

Firestore is a flexible NoSQL document database, where we will store the menu, table reservations and order information.

IMPORTANT

In order to connect Firestore to Zapier later, we would need to host the database on any of the US servers. Otherwise, it will not work.

Authentication is a service to authenticate users using backend services, SDKs, and UI libraries.

In the abovementioned db.js file, we will create all the logic behind the connection to the database. On the other hand, to work with the authentication service, we would need another .js file to create the connection. In our case, the file will be called auth.js, where we will create all the logic behind the authentication system.

Firebase initialisation by import and connection to Authentication service

Creating zap on Zapier

Now that we have the app created, we should create the Zap. It will be triggered when there is a new event in Firebase and will create an event in Google Calendar (sending an email to the attendees) and then publish a tweet with the event information. The zap will have the following steps:

Steps of the Zap
Steps of the Zap

In order to create a Zap, we will follow the official tutorial from Zapier.

Components

In this app, we will have the following components:

  • App: the main component of the app.
  • AppContext: a component that manages the context of the app.
  • Label: a component that includes a label and its text.

Among all the aforementioned components, the most important we need to fully understand is the AppContext component. It will define the context of the app.

React’s Context is a way of creating global variables that are being easily shared with other components or pages within the app. It is a better and more efficient alternative to the traditional method of sharing props from father components to children components.

The variables we will include in the context and consequently, we can access from any page of the app, are:

Context variables definition

Pages

The app will be divided into these pages:

  1. HomePage: in this page, the user will log in. Depending on the type of user (admin or not), it will go to the Event page (2) in the first case or the List page (4) in the second one. In this case, the users with the@asial.co.jp domain will be considered users.
Home Page
Home Page

2. EventPage: in this page, admin users will be able to start creating an event. After they fill in all the data displayed on this screen, they can continue to the second page (3).

Event Page
Event Page

3. Event2Page: in this page, admin users will be able to finish the creation of a new event. Here, they should also add the attendees of the event. After that, they can create the event or go back to the previous page (in both cases they will be redirected to 2).

Event 2 Page
Event 2 Page

4. ListPage: in this page, non-admin users will be able to see the first five upcoming events.

List Page
List Page

Conclusion

In this article, we could learn how to create an event management application using Monaca, React and Framework 7, as well as the Firebase database and Zapier. You can find the code here.

I hope that you could understand every step easily and please, contact me if there is any question or comment.

Good luck and enjoy coding :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store