Stretch by HELLO

Inspiration

After spending just over a year stuck inside studying from our desks and kitchen tables, everyone can attest to the strains and pains that have arisen due to our long periods of inactivity. It's very easy to get lost in your work and for time to disappear, especially when working alone, which inspired us to find a solution.

What it does

At it's core, the web app sends you a notification periodically (every 30 minutes by default). Once the notification is sent, you will be given an exercise or stretch to complete within 2 minutes. At the completion of the activity, you'll have the opportunity to claim some points for yourself and your team if you have one. We built in some extra features to make the app simultaneously more pleasant and accessible for users. First, we implemented a notification scheduling system, allowing users to specify the days and hours which they want the notifications to run (Monday-Friday 9am-5pm by default), so they aren't bugged late at night or on the weekend when they are relaxing. Next, we added the ability for users to filter out exercises, in case they aren't enjoyable, too hard or not physically possible for them to undertake due to an impairment.

How we built it

We built this web app using Firebase as a backend, which gave us access to a hosting provider, a No-SQL database and a drop-in authentication system. This enabled us to not worry about developing the backend systems and allowed us to focus on the features of our app. For the frontend, we used JavaScript with HTML and CSS. We also have a service worker that handles user events from the notifications (somewhat redundant, but it's there!). All the code is written in vanilla JavaScript (except the Firebase libraries).

Challenges we ran into

Being a team of programmers, we had some troubles designing a UI, but with some trial and error and testing, we managed to arrive to a product we're proud of. The time limit imposed by the hackathon was also a major challenge, meaning we had to cut some features and polish and prioritise other things that were closer to the core of our idea. In addition, for most of the hackathon was done online at different times by each of the members, which resulted in some communication problems, meaning we weren't able to work in the most efficient manner. Finally, using Firebase proved to be a challenge within itself, as a result of it working differently to other backend systems. This required us to change our way of thinking about developing our app, and to try new ways of doing things we otherwise mightn't have tried.

Accomplishments that we're proud of

We are incredibly proud of the final product we produced within all the constraints of the hackathon. In addition to this, we are proud of using a technology stack that operates differently to other stacks (particularly not having a 'conventional' backend server and database). We're also proud of the 'real time' aspect of the app, how it can update scores and leader boards automatically without refreshing the page, so you can see when your friends have completed exercises in real time!

What we learned

First and foremost, we learnt a lot about Firebase and how it works under the hood, along with how best to develop a service with. In addition to this, we were able to learn more about frontend development, including using more features particularly when debugging broken CSS and stubborn service workers. We also were able to gain experience working with other people on a project, which was full of little lessons within themselves. Finally, we learnt how to prioritise features and ideas, and how to keep working through problems, especially on very short time frames.

What's next for Stretch

There are still many ways for us to extend Stretch. First and foremost, the feedback provided by the app needs to be improved, so user's will have a clear indication of when the app is loading, and if there's any problems (for example incorrect credentials). This could be extended by adding animations and other transitions to make the experience feel smoother and more enjoyable for the user. We would also love to extend the collaboration options within the app, such as being able to match with team members to do activities at the same time, and to upload photos as a way to prove you have done the exercise and to score some bonus points! The notification system could be further improved, by adding an option to snooze the notifications for a given period of time (eg if there was a meeting) and even integrating with a calendar to automatically snooze the notifications when events are underway. To make the exercises easier for the users, we would love to add animations for each exercise to demonstrate how it is meant to be done.

Built With

• css
• firebase
• firestore
• git
• html
• javascript