Breathr.io – Build Your Meditation Practice One Day at a Time

July 3rd - Current
Goals
  • Create a responsive web app that can adapt to a wide set of users
  • Create a design and UX that is easy to use while handling a growing feature set
  • Add requested features, stay on top of bugs, and scale the app as it grows

Project Overview

Breathr.io is a passion project of mine that I work on in my free time. It’s in the early stages and I add new features as needed. Currently, it allows for an unlimited amount of video searches, has a time tracker, and allows users to store their favorite videos across browser sessions. In the future, I hope to find contributors and build a headless back-end API to allow for user authentication, among other potential new features.

Process

Breathr.io is a single page application built with React and Redux. Since I was building it from the ground up, I had the opportunity to start with a nice foundation. Naturally, Create React App was my choice since it gives you a professional build right out of the box.

From there, it was about creating a viable app structure and learning the ins and outs of React as I went along. I was far better with Vue.js, but I enjoyed the challenge of learning something new!

How to Actually Finish a Project..

If you’re a developer.. you know how many ideas will pop up. Before you know it, you have yet another unfinished project with too many incomplete features. That’s why I decided to scope my project functionality, and deploy once I hit my “MVP”. I scoped it as if I were making an app for a client.

In short, decide your scope and stick with it until you have your MVP deployed!

Starting Point

I built out a few UI features such as buttons, modals, and control styles. I knew I’d use each of these items multiple times, so I made them reusable and configurable. This was a good starting point, but then I needed to add real features.

Adding My First Feature

My main MVP features were the timer, the YouTube searching functions, the timer controls, and the ability to save and store videos. I had a lot on my plate, but I decided to start with the timer. This was a good start since there was a pre-built timer component I could use.

Adding More Features..

Once I had the timer ready and functional.. I built the YouTube API portion. This was a multi-step process, since I first had to set up axios to interact with the YouTube API, then automatically play and embed the YouTube iframe once a user clicked on their video.

And Beyond..

From there, building out the rest of my MVP was a mixture of testing, finding and fixing bugs, and adding the rest of the functionality. As I’m writing this with the finished deployed MVP.. this will likely be the remaining process for a good while. That’s just the life of maintaining software!

Technologies Used

The Build

Since I used Create React App and haven’t modified it much out of the box.. the build comes with the typical Webpack tools. The basic build includes SCSS compilation and prefixing, babel with ES6 support, and JSX compilation.

Redux and react-redux

This app utilizes Redux for video state management, communicating what components should be visible, and global player controls. In the future, Redux will be used to extend these types of functionalities plus aid in adding new overall functionality.

Need something? Let's get in touch