Hello there, this time we managed to develop a Mental Health Application in just 5 days as a part of our curriculum at
. This blog is all about our journey and the challenges we faced while building the project.Our project looks after the health and wellness of the User. Here you can meditate to attain a healthy mindset. You will find a feature to schedule an appointment with our doctor. You can also post your issues here, reply on other’s issues and like/dislike any post.
What was my problem statement and how did we approach it:-
So the best part of this construct week was that we had to collaborate with an UI/UX designer. We were provided with a mobile UI design developed around a concept of Mental Health. We were supposed to use React JS framework for the first time to develop the frontend part of the design.
Project walk-through 👣
This application is standing on various pillars, to name some, React, CSS, Node JS, Express JS, NPM and Mongo DB. Hands behind shaping this project were.
- Supriya Soreng — The UI/UX Designer !!
- Pratik Jadhav — Me!
- Ashwani Kumar Pankaj
- Rahul Kumar
- Prakash Chandra
Features:
1. Google Auth, Facebook Auth, Normal Signup/Signin.
2. Users can book an appointment with our doctor. You can also check doctor’s profile along with their specialization.
3. Users can post their issues, likes and comments on the other user’s posts.
4. Users can also play a small game and watch a meditation video in order to relax their mind.
USER ONBOARDING
We welcome every user with some cool images on the onboarding pages. Below is the snippet of the same.
SIGN UP AND LOGIN
This is our Sign Up page. We have implemented Facebook and Google authentication. So the user can either sign up in a conventional way by entering his email and password or he can directly login using google or the Facebook authentication. We are authenticating the user in the backend and if verified successfully, user is allowed to go ahead in the app. We have implemented all the validations. User will receive an alert accordingly.
LANDING PAGE
This is the landing page of our application. Here, the user is provided with a bottom navigation bar to visit different sections of the application like home, games, meditation and stats. We also have a hamburger menu at the top on clicking which a sidebar opens which has different sections like an appointment booking, a community section where users can post their mental health issues and the profile section.
GAME SECTION
Here, user can visit to play some games to increase their concentration and hence thereby improving focus. We will be asking few questions that will lead to User statistics page.
MEDITATION SECTION
User can do some meditation by visiting this section. Here the user can watch few relaxing videos to calm their mind. Once the meditation is over, user can go back to the landing page.
THERAPY
This is one of the important sections of the project. If a user wants to book an appointment with our doctors, he/she can do so by visiting the therapy section from the sidebar. There the user can see different categories of mental health issues under which we have different doctors assigned, handling patients under respective categories.
Below you can see doctors assigned to handle issues related to the sleep issues. Likewise, every category has different doctors assigned. We are getting all this data from the backend. You can see the doctor’s details here by clicking on the details button.
In below section, user can book an appointment with a doctor. There are two options for consultation — chat and video. User can then select a particular date, after which available slots for that date will only be shown.
Once all the details are collected, we also have a payment section. On a successful payment, user can see the appointment details like below.
COMMUNITY
This is an another important section of the application where user can post the issues they are facing related to mental health. They can select a particular mental health category and post their issue. Under this section, we also have a discussion forum where user can see all the posts done by different users related to different categories.
Below you can see the snippet of opened post. When any user opens a post he/she can post their like/dislike by clicking on the heart icon. You can also see the count of likes and comments on every post. Also, user can put up their comment and discuss on the issue. We are also showing the date on which the issue was posted. Below the post, you can see the list of comments on it.
USER PROFILE
In this section, user can see his/her profile and the upcoming appointment and its details.
Conclusion
We would like to thank Masai School for providing us with a beautiful platform to showcase our talents in web designing, I personally thank all my team members Ashwani Kumar Pankaj, Rahul Kumar and Prakash Chandra for their full support and contribution in building this wonderful project. A special mention to Supriya Soreng for designing the UI for this project in an amazing way.
Hope you liked our work. Thank you for reading with great patience, With this, I’ll take your leave. Take care, Be safe and Let There Be Light.
