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.
Breathr Gallery
Save your favorite sounds and they will be stored across browser sessions. You can add and remove to a collection at any time.
Track time with the audio/video playing. You can even control the video settings while it's going. Do what you wish!
Choose from an unlimited collection of sounds. The results are sourced from a filtered YouTube API search, so there really is no limit to what you can discover.
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.
Want to check out some code demos?
Check out code samples written in JavaScript, React, Node, and more
Demo 1
Converting jQuery Blog Post Component To Vanilla JS
I have a simple blog component that is written in jQuery. I would like to convert it to plain JavaScript as part of my effort to completely remove jQuery from my portfolio website. Here’s what the code does in order. init() on .header-info click, call the toggle method. Get the initial textbox height and store […]
Demo 2
Converting jQuery Navbar Code to Vanilla JavaScript
I am on a journey to completely replace jQuery on my portfolio site. The first step is updating the 10 or so JavaScript files that still rely on it. Why not start with one of the easier ones, the navbar? As you can see, the code is pretty straightforward. On init, add event listeners to […]
Demo 3
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 […]