Your Stretch Break

I am so excited to share that my labor of love Your Stretch Break finally has an MVP (minimal viable product)! I like to call in Minimal Lovable Product, which is also the most lovable. This full stack web app has over 50 stretches for you to try on your next computer break for your eyes, neck, shoulders, and hands!

A Brief Overview

This project was a dream of mine, over two years in the making. As a virtual occupational therapist and yoga teacher I wanted something for my patients to be able to use that could help them complete exercises as home exercise programs. As I spent more time working remotely via my laptop, I realized I also wanted something for myself and other remote workers to remind us to take a stretch break while working!

Exactly a year ago I decided officially that I was going to learn how to code and make this application a reality. It lived over many iterations and versions and has grown into what you see today.

Check out the project here: https://www.yourstretchbreak.com

Be mindful that this is in beta and you may incur a few bugs. This is not the final version but it’s ready for you to use on your next stretch break!

Under the Hood

This full-stack web application is for tech professionals who work at a computer all day. It allows users to set a 5-minute timer for a stretch break at the top of each hour. Users can click on which body part they would like to focus on during their break, which will display a gif from an array of images randomly on click.

How It’s Made:

Tech used: HTML, CSS, JavaScript, Nodejs, Express, MongoDB

• HTML was used to create the skeleton of the webpage and add information, including alt text to images and buttons.
• Vanilla CSS was used to construct the style of the page, given a very simple format.

Javascript was used to add in functions for page elements including:

• Displaying a random gif from an array of images on click
• Starting a 5-minute countdown timer
• Stopping a timer once timer hit 0 seconds
• Resetting a timer while counting down from a set amount of seconds

NodeJS was used for all backend routes -Create, Read, Update and Delete functions were created with information being sent to and pulled from MongoDB.

Optimizations To be added:

• Backend functions including bringing timer and stretch function serverside
• Creating a database of images and gifs that include yoga poses categorized by body part to increase speed and efficiency
• Adding ability to add stretches to database for other users to try
• Adding a social feed
• Creating ability to upload comments without needing to upload photo
• Adding React
• Updating HTML for accessibility
• Simplifying functions for more efficiency

Final Word

This project is by no means finished as it needs work to make it ready for mass public consumption. However, I am very proud of how far it’s gotten and I hope you enjoy what it has to offer. Please feel free to give me any feedback or advice, I appreciate it! :)