Mindful is a mental health website built with React, using Firebase as our backend for efficient data storage and retrieval. To enhance the user interface, we utilized Tailwind and pure CSS for styling and responsive design. Our core functionality includes a mood tracker, journal, calming music, and a memory game to boost and refine mindfulness. Also, a forum to connect with other users and let your voice be heard. We incorporated Chart.js, D3.js, and amCharts 5 to present our findings on mental health in an engaging and easy-to-understand format, which we hope will raise awareness for mental health.
Clark is looking for ways to improve his mental well-being and learn more on the subject. He finds Mindful and is able to check out our interactive wellness rooms. He also explores beautiful and informative graphics about mental illness prevalence on the data page. And tours the forum as a guest to see what users are saying.
Clark decides to sign up and now has access to his dashboard. Here he can privately express his thoughts and emotions. The dashboard consists of two main components: a mood tracker and a journal. The mood tracker allows him to input his emotions daily and track his past moods. In the journal, he can document and express his thoughts privately. He can now post to the forum and add comments to other users’ posts. Clark is impressed by Mindful and recommends it to his friends and family. Win for Team Mindful and its users!
- React
- Node.js
- Firebase
- Cloud Firestore
- Tailwind
- Chart.js
- D3.js
- amCharts5