View at: https://ment-ally-3fc6a.web.app/
Nowadays, taking care of mental health is very essential. It aims to help people in dealing with mental health-related issues like stress, anxiety, depression, etc. You can’t tell whether a person is mentally dealing with stress or pressure by looking at that person. This can be sometimes very risky, leading to suicide. The study supports that in most cases depression and mental pressure are the main reasons for suicide. In the current pandemic situation, due to lockdown, we have witnessed increasing cases of suicide, anxiety, depression. So, we came up with “Ment-Ally” to help people to gain mental peace and stability. It has helpful blogs, a Meditation guide with relaxing music, Yoga, and BMI Tracker. A person can use these to keep himself/herself occupied when feeling sick mentally.
Home Section
Blog Section
Meditation Section
Yoga Section
Refer to https://nodejs.org/en/ to install nodejs
Install create-react-app npm package globally. This will help to easily run the project and also build the source files easily. Use the following command to install create-react-app
npm install -g create-react-appClone the project in localhost
git clone https://github.com/Aniket762/playground.gitInstall all the npm packages. Go into the web folder and type the following command to install all npm packages
npm installIn order to run the application in development mode type the following command
npm startThe Application Runs on localhost:3000
Navigate to the main project folder in a seperate terminal. Then install all npm packages
npm install If you don't have nodemon globally installed on your system, install it so the server can autorefresh
npm install -g nodemonNow it's time to spin up the backend server. Run the lines
npm run devIf you get an error immediately, don't worry. The final step is to connect to the MongoDB database.
Note: The Server Runs on localhost:8080
Spin up your cluster in MongoDB and replace your connection with URI in .env
If you face any problems, refer to the MongoDB website.
Install the MongoDB Node.js Driver with the following command:
npm install mongodbSet up a MongoDB Atlas Database by following this short MongoDB setup video till the 3:20 mark. Stop after that mark!
We used React.js in the frontend and Node.js in the backend and MongoDB as our database. We have used Lottie animation and Framer motion for some components like buttons and illustrations for our website. We have created an API using Express and this API fetches data from our database in the backend for contents in the blogs section. Heroku app is used for hosting the backend. We have used Mongoose which connects our database to Express. We have used firebase for hosting the frontend and then we have connected it to our custom domain.
We faced numerous challenges throughout the journey. First, we have decided to work on VS-Code Live share. But we all were new to it. Sometimes it is the connection issues and sometimes it’s our lack of experience in Live Share feature. It took a lot of time to overcome this issue. After this we have faced issues while writing codes for responsive design. Sometimes the components were distorted and moved from their places. It took time to place them in their right position. Placing the elements in their position and designing for responsiveness was our big challenge. The next challenge which we have faced is domain configuration. This is the first time we are hosting our project on xyz domain. We don’t have any previous experience. We have hosted our project on GitHub pages, but this was completely different. We have to go through the documentation and follow the steps mentioned according to the project. But finally, we all can able to figure this out and did this. Along the process, we all have learned how to configure your project in a custom domain.
The biggest accomplishment for us was that we learned so many things just in 36 hours. We worked with VS-Code Live share, then we have tried Replit. We were able to overcome all the challenges and were able to create and deploy a completely functional web app the way we have envisioned. Even though one of our teammates was sick and another one was out of town, we didn’t lose hope and stayed up all night. It was tiring but all was worth it. We all have tried our best to contribute to this project without thinking about in which condition we are right now. Our team is most proud of the fact that this web app will be able to help many persons across the globe to deal with mental health-related issues.
We are a group of very enthusiastic developers who are open to learning and experimenting with new techs. The thing which is common among us is that we love hackathons 🤩. In this hackathon we learnt how to use VS-Code Liveshare smoothly. We have created blogs and with the help of API we fetched data from our database. We also have learnt how to connect and configure DNS of any custom domain to firebase project which was something very new for us.
