How React Saved Harvy
A couple months ago, Harvy launched to the world after spending a couple weeks as a prototype and a very simple minimal viable product. After the launch, there was a little fanfare with some small bursts in traffic that helped validate the idea enough for me to continue working on development. However, even though people were interested...I had lost some of my motivation and interest in coding Harvy. So as the summer months went on and my deadline for new features grew nearer, the amount of work being done on Harvy diminished. This decrease in motivation unfortunately didn't stem from one event that I could push past. To figure out the root cause of my lack of motivation, we have to go back to my first ever job, 5 years ago, in 2013.
Well, come a new idea and a new project in 2018, I wanted to get up and running as quickly as possible...so I went with what I know (but with some twists). I used MongoDB instead of MySQL or Postgres for my database, I used ExpressJS as my backend, and then Handlebars and some jQuery for my frontend. That may sound all nice and dandy, but remember when I said "prototype something really quickly and get up and running fast"? Well, that was the extent of my knowledge in those areas - I could get up and running fairly quickly, but that doesn't mean I could scale it well. So come post-launch of Harvy back in May...and my code was a humble-jumble of a mess. I didn't know how I could grow and make it better because all my prototypes never made it past the prototype stage. I was becoming deeply frustrated and stressed with how not-reusable my code was. For example, Harvy has the opportunity to add songs in two places - the first time when you chose your base song and then another on the playlist page to add more songs. Well in Harvy version 1, that was two different code chunks, and I was unable to reuse the "search tracks" code because of how messy it all was.
Come end of June and beginning of July, I knew I needed to start over and start fresh. I could reuse most of the design and experience, but I knew if I wanted to grow and add features to Harvy, I had to switch. Now React has always been on my radar as one of the exciting new technologies of the past few years. Even though I was working mostly with content management systems and iPhone apps, I still kept up to date with the latest news and frameworks. I decided then to watch a course on React, follow along, and see what the benefits could be. I learned about making components and different lifecycle methods while still analyzing if it would be right for Harvy. I did actually spend a day analyzing Vuejs to see if that was a better alternative. In the end, I decided to leave the infinite indecisiveness loop and decided on moving forward with React. Decision made, time to learn.
If I were to recommend one course, video series, tutorial, or intro into React, I would without a doubt recommend Tyler McGinnis's React.js Bootcamp on Youtube. Four videos and each around an hour and a half each, Tyler does the best job at explaining the basics and beginnings of React. Other tutorials I looked at started with using Components in the design, but Tyler shares how you really don't need all of the fancy React components to get started - you really can just import the script in the bottom of an HTML page and get going. If you are hesitant about React or feel at all overwhelmed, check out the series, you won't regret it.
From there, Harvy cruised. I put more hours coding during the past two weeks into Harvy than I had during the months of May, June, and July combined. Working with React has made Harvy come to life in ways I didn't think were possible. Remember that searching problem I had before? Not a problem anymore! I am able to reuse the same component in two separate areas of Harvy with zero configuration changes. Write once, use multiple times. Splitting different sections of Harvy off into smaller pieces has allowed me to iterate faster, code more efficiently, and push changes out quicker. Turn around time for bugs is now minutes instead of hours or days. I've hopped on the React rocket and am all in. Now don't get me wrong, I'm no React expert. My code isn't the cleanest, best looking code around - I know there is still work to be done - but the biggest benefit is I am no longer worried about being bogged down by bad code. I'm excited about opening up the codebase instead of anxious. I can add features and refactor bad design all within one component without have to worry too much about how it will impact the rest of Harvy.
If I were to sum up some of the key points I've learned over the past couple weeks, I would share these four tips:
- Sometimes trying out the "unknown" may be better for you - sure I knew how to build a site, but I didn't know how to build one well.
- Making your codebase reusable is key to success.
- Give React a try, you may just like it 😉
- Also, Tyler McGinnis - couldn't give him enough thanks
So what is Harvy? Harvy is a web application to help you create a playlist for your next run. If you want to run for 25 minutes and are feeling "Sugar We're Going Down" by Fall Out Boy, you can input that into Harvy and you'll receive a 25 minute playlist will similar songs to keep you going (we made one, check it out). In upcoming releases you'll also be able to create playlists based on the difficulty of your route and your pace - all with Harvy.
The future of Harvy looks extremely bright. The days of poor code architecture and messy code design are gone. I've become a proponent of component based architectureand I'm not looking back. Harvy went from a downward projection to on the up-and-up in a matter of weeks, and I cannot be more excited. So check out the new and improved Harvy,let me know if you have any feedback, subscribe for updates in the future, and follow Harvy on Twitter - you won't want to miss out.
© Kevin Guebert.RSS