This is a mindfulness-based app that takes kids ages 8-12 on an interactive journey to learn about mental wellbeing and how fun it can be to create a healthier mind.
Link to project:
.gif)
Front-end: HTML, CSS, JavaScript, React.js
Back-end: Node.js
@Nafisa-Huda, @DrummerDee, and @SarahAlCodes collaborated to build this project.
Creating this mindfulness web-based application allowed us to push our coding skills and creativity. Targeting a young age group, our focus was on accessibility and practicality. We would often ask ourselves "Would an 8 year old enjoy this feature"? By building a mindfulness page similar to Youtube's layout, we included control mechanisms to engage the users and allow seamless navigation through numerous videos. We installed swiper.js, a JavaScript library that creates a modern free mobile touch slider, to swipe through various breathing exercises. Visual aesthetics was crucial in setting a playful environment, that children can use and grow in. With that being said, HealthierMind reinforced the importance of making our applications as web accessibile and inclusive as possible, ensuring anyone can use this application. In the future, we aim to build our projects in a mobile responsive fashion and then bu
- User authentication
- Adding a mood tracker feature
- Adding a journal entry feature
- Enhancing media queries
- Adding more meditation videos
- Ability to switch through audio sounds
- Convert website to mobile application
npm install
npm install swiper
git lfs install
This a mobile responsive web application that can be used on numerous devices. Our goal was to make this website as accessible as possible to all users, by using Web Speech API that enables speech recognition and adding Aria labels.