Mindly Care

Spreading Mental Health Awareness with VR

Comment

Inspiration

Research shows that one in three adults suffers from mental health issues such as depression and anxiety disorder. Yet, mental health is not given equal importance as physical health, especially in the context of Asia Pacific Region where many people take is as myth.People often believe mental illness is not a “real” illness or cannot be treated effectively.

Mindly Care is an attempt to solve this issue by creating mental health awareness, providing chat support with professionals and connecting people to make sure they don't feel alone. We aim to show mental illness is real and embrace the people suffering from mental illness, all with an immersive VR experience.

What it does

Our project Mindly Care provides an immersive VR experience to maindly does these three things:

  1. Visualize Brain Parts affected by Mental Health Disorders: Using a 3D brain model, users can view the specific brain regions and parts that are affected by certain disorders, their characteristics, and chemical imbalance caused. This is to show that mental health is real and needs attention.

  2. Visualize physical location from where people are Seeking Support - 3D Globe: We track the requests from people seeking chat support with our professionals. Then we resolve the IP to show the country on our 3D Globe. Thus, when anyone start a connection request for chat, a ping animation is shown along with the country name on the globe. This will help people realize that there are other people like them around the globe and seeking support as well. Thus fulfilling our vision of making sure that no one feels alone about mental health issues

  3. Seek Professional Chat Support: Our users can chat with the mental health professionals to discuss about thier problems and get support all within an VR environemnt. We believe that it is more comfortable and convienent talking in a virtual world rather than meeting the professionals physcially. Our application does just that. We only allow verified medical professional to register to our application and only logged in user to initiate the chat session.

How we built it

  • Frontend: We used three.js to leverage the WebXR API and to create and animate 3D objects in VR. We designed and edited the 3D models in blender. The static files were built with ejs and Tailwind CSS. Then we used snowpack as our build tool to bundle the static assets.

  • Backend: Node.js and Express Server is used to run our application. Linode Managed MySQL database is used as our database. We build and publish the Docker Image which is then deployed to a Linode Server with CI/CD pipeline. Socket.io was used for the live chat connection.

  • CI/CD Pipleline and DevOps GitHub Actions is used to create a worflow that build the image from Dockerfile, publish to the public Dockerhub repository. Then our action SSH into the Linode Server, pull the updated image and run the updated Docker Container. The site is available at http://172.105.62.17 (Linode IP) and http://mindlycare.xyz

If the user doesn't have the VR headset, the application also runs in a normal browser on PC or mobile devices.

Challenges we ran into

We ran into quite a few issues while building the project. Firstly, as we do not have a VR headset, and we were working remotely, debugging and development was very tedious. Even though we had very little time period, we attempted to have an organized codebase using the proper OOP concept in JS. But, managing class instances, objects, and constructors calls made things a bit difficult. Additionally, we ran into JS Instance error in three.js.

Setting camera position in VR using three.js was difficult. So, we put the camera in a three.js group and changed the position of it. We wanted to make a 3D model inside our three.js application. For that, we needed to bake textures inside blender and since it was a long process, we postponed it for later. But, at the end moment, after baking the texture, it was not loaded in three.js. But luckily we did find a workaround.

We wanted to make sure that our app was scalable and use the industry standards. Thus, we used Docker Container on our Linode VM to run our application. Setting up the CI/CD Pipeline with GitHub ACtions to automate the deployment was a great challange. Managing secret credentials inside docker container was tough as well. Making sure that there was no downtime between updates was also challanging.

Likewise, setting up SSL certificate on Linode VM to enable WebXR https support was a challange. A workaround is made for the demo-video but needs some improvement in the future.

Accomplishments that we're proud of

We are proud of what we were able to achieve in such a short time. We did manage to build all the major three 3D components (Globe, Brain and Support Room), we successfully intergrated socket.io for live chat support and built a working CI/CD pipelinw. We hope our project will be able to help people with mental illness, spread awareness, demystify mental health and even save lives

What we learned

The whole 48 hours of the hackathon have been a fantastic experience for our team. Our project makes heavy use of three.js. We got to learn a lot about making use of this framework as well as other tools like Blender, Figma, davinci resolve, WebXR, and snowpack. We also used snowpack to build our project and our video clips were edited on davinci resolve.

This was the first time we used Linode, and we found it amazing and fast. We also learnt a lot about Docker and building the deployment pipeline. Finally, we absoultely enjoyed learning more socket.io to establish a live chat connection.

What's next for Mindly Care

We want to add information about more diseases in our application. We also add exhibition and seminar like feature in VR that can be used by medical institutions and colleges to teach students and create more awareness with people. This cann also be the major income source for our service. Then we also want to make more 3D models that helps to make the experience more immersive and knowledgeful.

Share this project:

Updates