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.

Want to check out some code demos?

Check out code samples written in JavaScript, React, Node, and more

Demo 1
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 […]

Demo 2
Discord Bot: Reddit API Ask Feature

The Purpose Some Discord bots have a feature where you can “chat” with the bot(i.e: Cleverbot integrations). I decided to take a spin on this concept and utilize the Reddit API to answer common questions. A user from the server asks a question using the b!ask command, then the bot gives a random answer from […]

Demo 3
React.js Modal Using The Hooks API

Modals are a classic piece of application functionality, made even easier with libraries like React. You could go with a library, but you can often make your own with less than 100 lines of code. Using the hooks API, you don’t even need a class based approach. This example is going full functional! Defining The […]

Need something? Let's get in touch