"Zen Garden is a minimalistic Meditation-Timer to help you find your zen moment fast"
The purpose of this Web-App is to allow people to track their meditation habits and have reliable timer to take the desired time off. Meditation is an effective method to relieve stress and increase well being. In our busy and stressful everday life it is often hard to find time to sit still and just take a deep breath. Due to my own experiences of meditating everyday and using various timers i had the motivation to build something that i can use myself and enable others to get the chance to benefit from a daily meditation.
The WebApp is targeted to users who now basic principles or practices of meditation and who are looking for a solution to track their meditation time and have a motivation to keep up the day-to-day sessions by tracking their streak.
Even though it would be great to have unlimited time for meditation like a zen monk, everyday life has its demands and we can often only slice a couple of minutes out of the day. Therefore the timer helps to enjoy the meditation sitting without worrying about meditating too long or too short. Since phone timers often have awkward timer sounds that are not sensitive the use of compelling gong sounds start and end the session itself.
The core functionaly of this WebApp is to provide an meditation timer. It allows the user to start a session, which is signaled by a gentle gong sound. Furthermore the user has the option to activate/deactive an ambient sound, choose the prefered meditation time (5, 10, 15, 20 Minutes) and a background image. Additionally the WebApp tracks the day-to-day interactions and allows the user to track his/her meditation streak.
The following user stories where defined before the development:
- As a meditator i want to choose between longer and shorter sessions, so that i can adjust my practice to my liking.
- As a mediator i want to have a countdown button after starting the mediation, so that i have time to close my eyes and adjust my seating before the "real" practice starts.
- As a meditator i want to be able to start / stop the timer, so that i can react to interruptions.
- As a meditator i want to be informed when a session is done, so that i know when my time is up.
- As a meditator i want to be able to activate / deactivate whitenoise, so that i have the chance to focus on my meditation in noisy surroundings.
- As a mediator i want to keep track of my day-to-day practice, so i keep being motivated even on days where my energy is low.
- As a meditator i want to see inspiration quotes, so that my mind has something to ponder on during my day.
- As a meditator i want to have beautiful backgrounds, so that my mind is in a positive state.
The wireframes were sketched in Balsamiq Mockups and can be found here or following the direct links:
| Planned | Result | Reasoning | |
|---|---|---|---|
| Web Landing |  |
 |
* progressbar exchanged for animated outline * left out warmup/cooldown options * included settingsbutton |
| Mobile Landing |  |
 |
* exchanged progressbar for animated circle to track progress |
| Web Settings |  |
 |
* left out warm-up/cool-down option * only provided on/off switch for white noise and used bell as a default * reminder bell was excluded * added option for a random background * used morning/afternoon background |
| Mobile Settings |  |
 |
(see websettings) |
The Web App is designed to be a single page application. It basically contains 4 different size sections. On top is the title bar which holds the Logo/Application Name and the Settings-Button. The section that follows provides space to display random Quotes from type.fit. The third section holds the core functionality of the app - the meditation timer. It displays a circle that gets filled as time progresses. Additionally the time is printed below the circle. The user has the option to interact with a single button which controls play, pause and reset. At the bottom of the page the Streakbar is being displayed. It contains of 7 squares which get exchanged for squares with a checkmark after a completed meditation.
The App backgrounds with a light greyfilter on top of it to reach a standardized look. Orange is used as a highlighting color and the font is white.
Roboto was used due to its "dual nature". On the one hand its clean and geometric and on the other hand it signals friendliness and openness, which is believed to also effect the user when seeing the font.
- Timer incl. Control, Start / Finish Sound
- Random Inspirational Quotes
- Ambient Sound can be activated/deactivated incl. volume controle
- 7-Day-Streak
- Background-Image can be switched (Morning, Afternoon, Random)
- Warm Up & Cool-Down Time can be activated
- Offline support
- Progress Web App support
-
Timer inkl. Control
Interactive countdown timer with animated circle created through the use of html, css, javascript
countdown time can be adjusted (5, 10, 15, 20 Minutes) countdown can be restored after finishing a session
countdown can be started, stopped and resumed
default meditation duration is 15 minutes -
Inspirational Quotes
Quotes are fetched from type.fit/api/
Function calculates random number between 1 and 100 which is then used to choose the quoate from the array
quotes get fetched on every page reload -
Ambient Sound can be activated/deactivated incl. volume controle
integratedsoundManager2howler.js library (ADD LINK) to handle playing of songs and support different browser
integrated start- and endbell sound
integrated option to play ambient sound (river sound) -
7-Day-Streak
day to day activities are tracked through 2 localstorage variables (Number of Sessions & Date last session completed)
if one day of meditation is missed the streak is broken and all values are reset
after 7 days in a row a congratz popup will show -
Background can be switched (Morning, Afternoon, Random)
depending on the time of the day the user gets a different image
in the setting modal the user has the chance to manually switch between morning, afternoon or a random background image.
random background image is pulled from unsplash (https://source.unsplash.com)
- Warm Up & Cool-Down Time can be activated
- Reduce amount of global variables
- Increase amount of Jasmine tests
- Refactor code to increase testability
- Track amount of completed streaks (e.g. 4 x 7-Day-Streaks)
- Integrate reward program for multiple completed streaks
- As user accaptance increases it could be interesting to store the user activities to a server to provide cross device support
- in order to support cross device support a user data base would also be a helpful feature
- Integrate End-to-End Testing Framework (e.g. Cypress) to increase quality
- HTML5
- CSS3
- JavaScript
- Bootstrap 4.5.0
To make use of a responsive css-framework and to ensure mobile first approach. - Font Awesome 5.13.0
Using Icons within the page SoundManager2- Howler.js
Howler.js library helpy to handles all audio() calls across various browsers
special support for iOS - Google Fonts
To make use of the Roboto Font - jQuery
Comes with Bootstrap - Git
Version Control - GitHub
cloud-based hosting service to manage Git repositories. - Gitpod
cloud-base development Environment - Balsamiq
Wireframe design tool - Am I responsive
To Check responsiveness and create demonstration gif for readme
Jasmine used to set up tests. Some example test where written but should be extended more broadly in the future. Therefore i would make sense to refactor the existing functions to make them easier for testing.
- Start Stop of Timer
- Entering Settings while no mediation is running
- Entering Settings while meditation is running
- Switching Meditation-Duration while no mediation is running
- Switching Meditation-Duration while Timer is playing
- Switch background
- Activate/Deactivate White-Noise & Change Volume of White-Noise
- Check Streak Logic after one missed day
- Check Streak Logic over 7 days
- Testing if Service Worker is running
- Browser Compatability Chrome Safari Brave
- Device Compatibility iPhone 11 Pro iPad
- Friends and Family Testing
- Peer-Review in CI #slack
- W3C HTML Validator (https://validator.w3.org/)
Used to make sure that no obvious html mistakes are made
fixed wrong data-attribute on buttons
removed unused code
- CSS Validator https://jigsaw.w3.org/css-validator/
- JS Hint (https://jshint.com/)
Used to remove unused variables and check for mistakes
- Lighthouse (https://developers.google.com/web/tools/lighthouse)
Used the validator to improve Performance, Accessibility, Best Practices, SEO and Progress Web App Setup
raw=true) - Troy (http://troy.labs.daum.net/) tested layout on different device sizes
- caniuse.com
to check CSS content-visibility
-
Fixed Bugs & Issues:
Sound on Safari not playing (switched from SoundManager2 to Howler.js)
Location of the play/pause button due to absolute positioning
Setup of PWA was tricky due to routing of github pages - solution was adapted from https://gist.github.com/kosamari/c5d1e8449b2fbc97d372675f16b566e -
Open Issues:
landscape view an mobile devices - App intended to be used in portrait mode
- Log in to GitHub
- Choose prefered GitHub Repository
- Navigate to Repository Settings
- Scroll to GitHub Pages Section
- Set Source from "None" to "Master Branch"
If you want to deploy the site to githubpages yourself, you will need to adjust the routes for the registration of the service worker and the according manifest.json. If you want to test the service worker on a local machine you also need to remove the /{repository name}/ from the scope.
Option A: Make a Local Clone from GitHub Repository (also see https://docs.github.com/en/free-pro-team@latest/github/creating-cloning-and-archiving-repositories/cloning-a-repository)
- Navigate to Mainpage of the repository
- Click on "Code" button
- Choose "Clone with HTTPs" & copy URL
- Open Terminal
- Change the current working directory to prefered location
- Type git clone and past copied URL
git clone https://github.com/p0wen/zengarden.git - Press Enter to create local clone
Option B: Fork the repository (also see https://docs.github.com/en/free-pro-team@latest/github/getting-started-with-github/fork-a-repo):
- Navigate to Mainpage of the repository
- Click Fork in the top-right corner
- Bootstrap 4.5
- css-trciks.com
- w3schools.com
- youtube.com
- stackoverflow.com
- medium.com
- css-tricks.com
- https://webkit.org/
- unsplash.com
- freesound.org
- http://ami.responsivedesign.is
My Mentor for continuous help and support throughout the project.
The Code Institute Slack Community.
Friends & Family for continuous feedback and support.
Created by @p0wen