How I build an announcement notifier app
Tags: firebase, react, pushnotification, puppeteer
Published: 2021-02-02 13:19:06

---
title: How I build an announcement notifier app
published: true
description: automating my boring stuff 
tags: firebase, reactjs, pushnotification, puppeteer 
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/lm9r20893f8xyrz2mxi8.png
---


This is how I automate my mundane task of check for any announcements daily. This  app track any announcements regarding my degree program. With the ongoing situation there are announcements that I need to be informed about so, what I do is visit [bit.lk](http://www.bit.lk/) daily and check if there's anything new. Because with COVID-19 they might just cancel the exams 🙊! Checking whether there’s any new updates to me, is very boring and why bother doing it yourself when you can get a machine to do it for you? Also, I like automating stuff! This to me, is a great opportunity to use web scraping, cloud function and FCM. 


I decided to use [Puppeteer](https://pptr.dev/) for web scraping, [Firebase](https://firebase.google.com/) cloud functions to trigger the web crawler, Firebase Cloud messaging to push notifications to my mobile and a React app to show the announcements. It looks something like this,

![infrastructure](https://dev-to-uploads.s3.amazonaws.com/i/wiy8yp71k9d40wvazbqc.jpg)


The application start with cloud function that trigger four times a day which uses Puppeteer to crawl into the web page and get me those 🔔 new announcement which get posted.

```javascript
exports.crawler = functions.runWith({
    timeoutSeconds: 150,
    memory: '1GB'
}).pubsub.schedule('0 */6 * * *').onRun(async (context) => {
    await init();
    return null;
});

```

When using Puppeteer make sure use add `args: ['--no-sandbox']` into launch options save you lots of time thinking why the function is failing for no reason whatsoever 😁. And also the function need more memory and increase of the timeout. Firebase function [scheduler](https://firebase.google.com/docs/functions/schedule-functions) use both Unix Crontab and App Engine syntax when passing the time I went with Unix Crontab and I used [crontab guru] (https://crontab.guru/) to get the syntax for run it every 6 hours.

Then I save any new announcement to the Firestore while I do that I, a function is listening to new announcement adding. It triggers the function to push notification to saved devices.

```javascript

exports.onAnnouncementCreate = functions.firestore.document("announcements/{announcementsId}").onCreate(async (snap, context) => {
    await broadcastNotification(snap.data(), context.params.announcementsId)
})

```

The purpose of the React app is very simple it shows announcements that I have captured and allow a user to subscribe to push notification. Users can subscribe by clicking the bell icon 🔔 in the top right corner; yes I know! It is not that obvious, but I can't think of anywhere else. I have animated it just to bring attention to it though 😉.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k5s194m481hpiyhmzkn4.png)

That’s how I build an announcement notifier app, just using a few components that is available in Firebase. 

check it out - https://bit-notify.web.app/
github - https://github.com/chamra/bit-notify