Spring 2021
Web Development Challenge

Programmer Blog Album Landing Page

Project #5 - Breathing App

Breathing App Demo screenshot, mobile and desktop views

Start Date: April 10

End Date: April 13

Blog Post

Project #3’s failure has been bothering me enough that I had to at least give it another try. And this time, I was at least able to ship something, although the finished product doesn’t match up with the application I had in my head. This is a “Square Breathing” app, which guides the user through the titular breathing exercise.

Unfortunately, I didn’t have a ton of experience with non-trivial animation and granular state management going into this project. And I especially didn’t have much experience with those things in React, a shortcoming which ate up the bulk of my development time. Long story short: I succeeded in learning what needed to be learned, but only by implementing nearly everything in exactly the wrong way. Furthermore, I had to cut almost every other feature I wanted the app to have, leaving it as little more than a glorified GIF.

At this point, I’m just happy it works.

This one was made in React, using Create React App to abstract away the development and build environments. Compared to my first attempt, this was a huge help in reducing cognitive load - without it, this would have ended in another failure by time-out. React itself isn’t new to me, but this was my first project using it which was entirely “class-free’, using the “hooks” system for animations and state management. Again, I designed the thing almost entirely backwards - it’s imperative APIs all the way up. But it made for good practice, and I can say I’ve got a handle on how to manage apps of similar complexity from now on.

Remarks

This was the point where the reality of this challenge really started to sink in. While I'm still trying to stretch myself as much as possible with each project, I'm beginnning to accept that a lot of my vision for any given piece simply isn't acheivable, given time constraints and my current level of skill.

My comment about "reducing cognitive load" is more important than I'd realized at the time. I failed to complete projects twice over the course of the challenge, and on both occasions the cause of failure was in trying to learn and apply too many new things at once. In the instances where I succeeded, my focus was on a single concept - usually attempting some new skill, or polishing an existing one.

That lesson wouldn't sink in for another week or so, unfortunately.

Programmer Blog Album Landing Page