Overview

MyMental is a web application designed to help people check their mental health condition through an initial screening test. The purpose of this test is to give users a general idea of their mental health based on their answers to a series of yes-or-no questions, which are sourced from Universiti Kebangsaan Malaysia. While it does not provide a deep diagnosis, it offers helpful indications that can guide users toward taking more detailed assessments tailored to their needs. In short, this website serves as a ‘frontliner’ in mental health awareness, giving users an accessible first step in understanding their mental well-being.

Tech Stack

This are the tech stack that I use with my team to build this website as a Frontend Developer and libraries to help utilized this project.

• React.Js + Vite
• MaterialUI
• Axios
• RTK Query
• React-Router-Dom
• i18n
• notistack

Features

Initial Mental Health Screening

This feature is the main feature of this website’s business process. This initial test ensure all of the other assessment that user will take according to their mental health indication is depending on user’s answer on this test. User will answer 37 questions with Yes or No choices, and then backend team will provide the calculation based on the legit document from Universiti Kebangsaan Malaysia to score user’s answers.

Mental Health Assessment

Once users receive their initial screening results, they can proceed to take a more detailed assessment for each of their indicated mental health conditions. This allows them to understand the severity level of each condition, along with a score based on validated documentation from Universiti Kebangsaan Malaysia. To access the results and educational materials aimed at helping users manage and prevent worsening mental health conditions, a payment is required before the full assessment outcome is provided.

Chatbot AI

This feature provides users with a friendly and supportive chatbot powered by AI to assist them throughout their mental health journey. Users can ask general questions about the platform, mental health topics, or how to navigate the assessments. While the chatbot does not replace professional help, it serves as an accessible companion that offers guidance, encouragement, and helpful information based on the user’s needs.

Mental Health Intervention Education

After completing an assessment, users gain access to educational resources tailored to their specific mental health indications. These materials are designed to raise awareness and provide practical strategies for early intervention and daily well-being. The goal is to help users manage their mental health more effectively and prevent their conditions from becoming more severe through self-education and consistent healthy habits.

As the Frontend Developer of this website, I am thrilled to announce that this app is already go live right now. User can now take test to check their mental health condition through assessment that this website provide.

Things I Learn

Throughout the development of MyMental, I gained valuable experience and insights, especially in frontend engineering and team collaboration. I learned how to properly implement theming using Material UI, which allowed us to maintain a consistent and accessible design system across the application. I also applied the atomic design pattern in structuring the components, which made our codebase more modular, reusable, and easier to maintain.

In addition to technical skills, I learned how to overcome challenges related to communication and changing requirements within the team. During the project, we frequently faced shifts in direction and updated feature scopes. To stay on track, I practiced being more adaptable, clarified expectations early, and improved the way I communicated progress with my teammates. These experiences helped me code more effectively, prioritize better, and deliver features more confidently even in a fast-moving environment.