Breathr.io – Build Your Meditation Practice One Day at a Time
July 3rd - Current
- 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
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.
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!
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.
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!
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.
Want to check out some code demos?
Converting jQuery Blog Post Component To Vanilla JS
Defining Reusable Column Extends with SCSS
Quick Note: The atSmall type mixins are just basic media queries. Since these kinds of layouts are common, they also need to be overwritable if I want to change the spacing. Generally, the ‘default’ spacing is defined in the extend/mixins. Example Use Cases To get the layout working, you only need a container class and […]