Most of us find messaging apps as a major source of anxiety and stress. Sometimes we want to be alone and don’t feel like talking to someone, but when we don’t reply, we feel guilty that we might be ignoring and disappointing others. This inspired us to think of a feature that can be added to chatting apps, that can allow us to show our emotional status as a badge next to our chatting avatar, that can let our friends know whether we are emotionally available to text or do we need some space today. Our goal is to improve the mental health of others without the awkwardness and insecurities of others!

What it does

The feature is designed to be added to chatting apps, to allow users to show their emotional state as a badge next to their chatting avatar, letting their friends know whether they are emotionally available to text or do they need some space today, with a bonus feature when you select the badge asking for support; the app sends you a word of encouragement in case you don’t receive any from your friends!

How I built it

For the three parts of our project: 1- the web app: We combined HTML, CSS, and Javascript together in order to create special features such as pop-up modals and pretty buttons. We hosted our code on Qoom which is a student-friendly web hosting platform that allows for an easy combination of files and references and has continuous updating.

2- the quote generator: We built our self-care quote generator using tkinter in python, which allows you to build a GUI and apps. We hadn’t used tkinter before this challenge, so we had to watch tutorials, ask for help and learn from others.

3- the UI prototype: We used Adobe XD to create how we envisioned our feature for the chatting app would flow, starting from the login screen, to installing the plugin and using it. Public link: emotional-badge-plugin (4) (

Challenges I ran into

Our team had four people from UK, Canada, India and Egypt. All from different time zones! It was challenging coordinating the tasks and combining all our work together. We also had issues with using the files in our self-care generator, but we managed to figure out by trial and error. We had to implement lots of new modules, and it was the first time some of us had used OOP in a real project.

Accomplishments that I'm proud of

In a short time, we were able to make three working aspects of our project! We built a web app, created a quote generator and designed a UI prototype of our feature! We’re also proud that we managed to meet the deadline.

What I learned

Our team members have different experiences in different areas from frontend experience using HTML, CSS and Javascript to backend experience to having designing skills in UX/UX using adobe XD. Coming together, we learnt new things about the other’s experiences, expanding our knowledge! We learnt so much about all the different features. We also know now how python can access your folders and use it to build something cool. A lot of knowledge was shared among members, many of us learnt about making a UI using Adobe XD and tkinter in python as well as Eel.

What's next for Helping Hearts - Mental Health Status

We showcased our plugin by incorporating it in a simple web chatting app we coded from scratch, however, our feature is not limited to one chatting app! Perhaps, we would generate a meditation or workout link for users to have when in distress, by the add on. We hope in the future that our plugin can be implemented in real chatting apps like whatsapp and messenger!

Built With

Share this project: