mindful.io

I wanted this project to be as simple as possible, since I wanted as many people as possible to benefit from it. I made this web app for a particular professor at UCLA who wanted a project for his students to use. Mindful.io provides links to guided meditation apps and videos, information on mindfulness and meditation, including benefits, techniques, and exercises. I also wrote a custom list of questions to answer after the user is done meditating, for the purpose of applying that calmer state and increased mindfulness to their personal life. This app is currently used by my friends, family, and other students.

Technologies Used

  • React (JavaScript)
  • React Context API
  • CSS
  • vanilla JavaScript

Project Inspiration and Purpose

I made this project for the purpose of helping others develop the healthy habit of meditating and being more mindful. A professor at UCLA wanted a project that would help improve the public's knowledge of mindfulness. They asked for me to build something that would help accomplish that, so I created this web app for them to use.

The Tech that Made it Happen

React seemed like the best tool for the job, because I wanted to create a single-page application that is interactive and easy to use. I used vanilla JavaScript to create the meditation timer and the button that saves responses to questions to the user's local device (since the app does not store them).

Challenges and Lessons

I found myself studying a lot of CSS techniques and design principles (à la "The Design of Everyday Things" by Don Norman) while making this app. Initially, I customized the experience via a database that was setup to gradually guide users along the mindfulness journey through questions that required an increasing level of self-honesty and integrity. However, I realized that fewer people would use this app and, thus, fewer people would benefit from mindfulness if they had to create an account before being able to use the app, so I completely removed the backend so as to simplify and enhance the user experience. After understanding these techniques, I revisited Creatures of Habit and improved upon its design and user experience. I used these lessons and principles when designing The Republic 310, as well.

Check out my other projects

The Republic 310

View Project

Creatures of Habit

View Project