StaySafe - Pandemic Awareness Application

Stay Safe - Track, Learn and Care

This is a Pandemic awareness application that focuses on creating awareness in situations like the current Corona Virus Pandemic. The application at the moment only shows details of COVID-19 situation around the world.

The vision of the application is to create a single platform to fight any kind of global threat or pandemic together.

Thanks to my awesome friend for designing the UI and the Logo (Chandan R Sindhe)

The Logo

The idea behind the logo is to provide the idea of being safe. The logo is of a home which is the one place we all feel safe.

Demo Link

Application Demo can be accessed here: StaySafe - Track, Learn and Care

Powered by Netlify and Heroku.

Link to Code

The application had both the Front-end and the Back-end.
Here are the links to the repos:

Front-end: https://github.com/adisreyaj/staysafe-frontend
Back-end: https://github.com/adisreyaj/staysafe-backend

If you like to show your support, leaving a 🌟 for the repo would be great.

The Tech Stack Used

StaySafe application is build using the latest version of Angular(v9). And for the back-end I've used NestJS which is a really awesome framework for building great back-ends.

Angular for me was an obvious choice as I have exposure on the framework and am pretty good with the framework itself. I've tried to keep an eye on best practices too.

For the back-end, this is the first time I'm trying NestJs to build something. I've worked with Express before, the exposure to Angular definitely helped me pick up things quickly in NestJS.

⚡️ Features of Front-end:

1. Based on Angular v9
2. Static Site Generation Powered by Scully
3. Lazy Loaded Modules and Modular design
4. No external design library used (like Angular Material)
5. All Icons used are SVGs (No extra library used)
6. SCSS Based styles
7. Maps Powered by AmCharts
8. Charts Powered by Ng2 Charts
9. Push Notifications powered by Firebase
10. Responsive Design
11. Virtual Scrolling for tables
12. Flexbox all the way.

⚡️ Features of Back-end:

1. Modularized design
2. MongoDB as the Database
3. Communication Queue for processing SMS, Notifications, and Emails
4. Encryption of firebase configuration for easy deployment
5. Caching of Data for better performance
6. Cron Job for automatic updates of data and sending out notifications

For sending SMS messages to the user, I have implemented a verification flow using Twilio. When the user subscribes using their phone number, as soon as it is received by the back-end, an outbound call will be initiated from the Twilio number.

The user will be asked to Press 1 to confirm their subscription. I've used the Twilio Gather verb to get the user input during a call. Once the user has successfully subscribed, a welcome message will be sent to the user.

Cron Jobs are set up to send timely notifications through Push Notifications and SMS to subscribed users.

One more feature in the pipeline is in pipeline, which will allow the users to directly make a call to helpline numbers using Twilio's Programmable Voice feature.

A Helpline phone number is also in progress, which you can call to get the latest information about the current statistics about COVID-19.

Challenges I faced

I have worked on this project in my free time. To be honest, I couldn't actually put my everything into it.

One issue that you would come across is related to Firebase push notifications, there are a few issues because of conflicts in the version of firebase and the @angular/fire library.

Being the first time dealing with Maps in general, I took some time to get familiar with AmCharts. Definitely a very powerful library with tons of options available. For beginners, I would suggest closely follow the official documentation.

Another challenge was building the table component for the frontend as a reusable component. I haven't used any library for tables. I opted for a div based table design. I took some time to actually get the table in a good shape.

Additional Resources/Info

🚧 There are a lot of improvements and features that can be done.

• Setting up Angular Fire Messaging
• Using AmCharts with Angular

Thanks for your time! I had fun creating this application.