Jun 30, 2022
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.
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:
- Monaca account
- Firebase account
- Node.js (only if you want to code locally)
- Zappier account
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 monacaBefore starting, we have to log in using the following command:
monaca loginAfter logging in, we can create the project by running:
monaca create event_appAfter running it, we should choose the following options:
Cloud IDE:
After clicking on Create New Project, we will choose the options shown in the following screenshot:
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 </>.
Follow the instructions shown on the screen. Install Firebase and copy the firebaseConfig. We will need it in the next step.
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.
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.
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:
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:
Pages
The app will be divided into these pages:
- 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.
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).
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).
4. ListPage: in this page, non-admin users will be able to see the first five upcoming events.
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 :)
