The church I assist to in El Salvador is about to re-open to the public, so we were concerned about how many members were going to assist, mostly because of the pandemic we are still being affected by (this is the data we have of cases according to our government). In this context I went ahead and decided to create a registration web app, for members to confirm every week if they were assisting to the service. I used Firebase as a backend replacement since that seemed to be the fastest way, it was my first time using it so it was quite an experience, and Vanilla JavaScript for my front end (no frameworks because I wanted to practice my JS, and It's not like a know a ton of any framework), so let me tell you what the app is about and then the experience that I got.
The web app
The first screen is the registration, in which you submit your data, it automatically gets the next Saturday date based on your current date so you don't have to choose what date you are registering for (our services are on Saturday), and it also tells you how many members have already confirmed so you know how many people are still allowed (or there is space for)
The second screen is a list of the registered people, and we can move them from "pending to come" to "present" so we know how many haven't still arrived, that way we can have the exact number of people in the building
The Experience
- Integration: Integrating the app was simple enough, create the project in the console and add the scripts they tell you to and that's it.
- Cloud Firestore: this was my first time working with a NoSQL database so its kind of tricky to get the idea of no tables but for an app that was small like this one there was not much modeling to do, I just created a document called reservations and stored every registration there.
- Real-time updates: I listen to modifications on the documents with the onSnapshot() method to have changes reflect in real time, like new registrations and changes from "pending to come" to "present.
- Ag-grid: I'm using the Ag-grid to show data and on every snapshot call I repopulate the grid. I find it pretty simple to start using but adding the button to have the action was kind of complicated for me, not sure if there is an easier way, this article helped me a lot
- Querying: Query was cool until I had to create a composite indexes, which was a bit confusing but well!, it works
- Hosting: This part was super simple, just writing Firebase deploy and that's it, I even added a custom domain and its hosted already.
- Reads count: There is something weird in my read counts, not sure yet what I'm doing wrong but my reads are way too high compared to the number of times I test or access the page, I expected something between 100 to maybe 300 at most, but I'm getting reads of up to 4,000 for like 27 registrations. Not sure if it has to do with snapshot listening the documents or something similar.
So that's been my experience, I leave here a couple of videos that helped me get started:
If you have suggestions on how to improve this, and what should I've done better please let me know, thanks for reading
Top comments (0)