HomeBound - My submission to the Twilio x DEV Hackathon!

What we built

Category Submission: COVID-19 Communications

If you haven't followed our journey from the previous two posts, HomeBound is a project that was built in 3 weeks by a team of five colleagues from PROTOTYP:

• Adrian Bece - Developer / Project lead
• Vlatko Vlahek - Developer
• Josip Ravas - Developer
• Igor Plac - Designer
• Valentina Bermanec - Content & Product Manager

Before we decided what to build and how Twilio's API would fit into our app, Valentina has done some research and identified key issues:

• Lack of indoor activity ideas and motivation to come up and maintain a new daily routine with healthy, beneficial activities.
• Lack of understanding of general rules of self-isolation that sometimes leads people into acting in a way that puts others in danger.
• People who test positive on COVID-19 may have issues recalling their close contacts for the past two weeks which can also put other people in danger.

Based on these conclusions, we decided to build an app that would act like a swiss knife for those situations.

We have set the following goals for our app:

• Adhere to the hackathon rules
• High-quality look and feel
• Delightful UX
• Can be installed and used today (no fictional scenarios or pre-requisites for usage)
• Light & performant
• Scaled down to mobile UI to speed up design & development process, but easy to scale up if needed

We've decided to pay special attention to the design and UX because it's really important for an app to look and feel good, not just function as expected. That is especially true with apps like this one, that aims to help people out and cheer them up during these difficult times.

So after we've agreed on these key points, Igor started working and created an amazing design that you see today, and Vlatko and I started working on the code, with Josip joining us in the final stretch. Vlatko and Josip took turns working on the app and have focused more on the Twilio API integration (more on that later) and I have focused more on the UI and the backend.

And after about 3 weeks of hard work (day and night), we created HomeBound, with the following features:

• Activity tracker with gamification elements - Users earn points by completing tasks (custom or suggested tasks). That way they're encouraged to find new and healthy activities while indoors.
• Close contacts list - users can maintain list their close contacts with contact details. They can also use Twilio's programmable SMS to send a message to them in an emergency.
• Tailored experience dependant on the situation - Recommend different activities for users based on the following criteria: if they are in a mandatory self-isolation or not and if they live alone or not.
• Chatbot assistance - Users can get informed about self-isolation rules. Currently with very basic chatbot flow, but with wide possibilities for extending it, depending on the config in the Twilio console.

Let's take a look at each feature individually and explain the idea and flow behind it.

A delightful app for not-so-delightful times

Activity tracker with gamification

"Keep regular routines and schedules as much as possible or help create new ones in a new environment, including regular exercising, cleaning, daily chores, singing, painting or other activities."

Mental health and psychosocial considerations during the COVID-19 outbreak
(World Health Organization)

With most outdoor and social activities not being an option for most people for time being, people need new activities in their day in order to maintain mental and physical wellbeing. With HomeBound, we want to encourage users to include new and healthy activities and develop healthy routines.

Users are able to assign themselves various tasks and activities and complete them without any limits imposed. When the user completes the activity, they are awarded a random number of points. This is where gamification comes in. There are also many interesting opportunities for expanding this feature further (leveling system, achievements, streaks, etc.).

Close contact tracker

"Let’s say you test positive for COVID-19. A health professional will then ask you where you have been in the past two weeks and most of us can’t remember that kind of information with accuracy."

Alán Aspuru-Guzik, Professor at University of Toronto

It’s important for a person that tested positive for COVID-19 to recollect their close contacts within the past two weeks. Accuracy can make a massive difference in the prevention of spreading the virus. Companies are looking into automatic close contact tracking using our own mobile devices, which makes the future look like something out of a dystopian movie.

With HomeBound, we wanted to give users a simple tool to keep track of their close contacts with complete control over their data. If a user ends up testing positive for COVID-19, having a complete and accurate list of close contacts for the past two weeks would prove invaluable to the medical staff.

This is also where our Twilio API integration comes in, with Twilio’s programmable SMS functionality, users will be able to send a quick message to their close contacts to warn them and tell them to stay put and keep a distance from their close contacts. We’ve integrated the API using Firebase Cloud functions so we keep all backend functionality there.

Please note that we have disabled the SMS functionality on the demo site, so our test phones do not start ringing during the night :) You can test the functionality using your Twilio account on the local instance by providing the valid config.

Tailored experience

When the user signs up, they are asked if they have been assigned mandatory self-isolation and if they live alone. Based on that data, we can be careful not to include activities in a recommended list that might cause harm to others.

Meet Couchy - our chatbot!

It's important to keep the users informed and provide a simple way to answer their questions during these times. We've integrated Twilio's Autopilot and Chat functionality using Firebase Cloud Functions. Even though it currently features a basic flow, it has the potential to be extended with an extensive knowledge base and multiple possible flows (checking symptoms, self-isolation rules, recommended activities, news, stats, etc.).

Please note that chatbot integration may have some edge cases present due to the complexity and time required to iron out all the bugs. But it still cool, though, and it works! :)

Demo Link

https://twilio-prototyp.web.app/

Link to Code

GitHub repository: https://github.com/codeAdrian/homeBound

How we built it

We've built HomeBound with React for frontend and Firebase Firestore for the backend. We have also integrated Twilio functionality using Firebase Cloud functions for extra flexibility and security.

import * as functions from 'firebase-functions';
import { Twilio } from 'twilio';

export const sendSMSMessage = functions.https.onCall(async (data) => {
  const { sid, token } = functions.config().twilio;
  const client = new Twilio(sid, token);

  const { from, to, body } = data;
  return client.messages
    .create({
      from,
      to,
      body,
    })
    .then(() => ({ success: true }))
    .catch((err: string) => {
      console.log(err);
      return { success: false };
    });
});

Firebase Firestore database is structured to be scalable and performant and is protected by a strict set of rules. Only authenticated users are able to create new data nodes. Users can read and update the data that only belongs to them.

    match /contacts/{userId}/{document=**} {
      allow read, update, delete: if request.auth.uid == userId;
      allow create: if request.auth.uid != null;
    }

Additionally, Twilio API keys are stored in the Firebase and Firebase API keys are stored in a .env file which is not available. A ".sample" file is provided so you can set your own config keys. If you wish to create your own instance of HomeBound, you'd have to also set provide Firebase Firestore and Twilio credentials.

As for frontend, we've used the following:

• React with custom hooks
• Redux for global state
• PostCSS build with postcss-preset-env and cssnano
• react-circular-progressbar for score
• react-hook-form for forms
• react-toastify for global messsages

Conclusion

I would like to thank the team for their hard work and effort and I would also like to thank DEV and Twilio for organizing the hackathon and making the last three weeks really fun.

Stay safe and happy coding! :)