Drumverb

What can I say? I love React! It’s been a great experience working through the React curriculum in Flatiron’s course and spending loads of hours (probably too many) on my final project. I’ve come to the conclusion that using regular old Rails views for rendering your front end in a project just won’t cut it anymore. Whether it’s rendering a new form field by clicking a button or not having to do any page refreshes in a single-page app, utilizing JavaScript and libraries like React are a must for an optimal user experience.

The app I built for my final project is called Drumverb and is a slimmed down version of the community marketplace/e-commerce site for musicians called Reverb.com. As a drummer with a previous career as an audio engineer, I’ve been using Reverb to buy and sell music gear for the past four years. They’re based here in Chicago, and the company really peaked my interest when I decided to become a web developer. This is because of their tech stack, associated physical store (Chicago Music and Drum Exchange), their start up culture, and being in an industry that aligns with my previous career and musical passions. Because of this I decided that it would be fun to build a site that has some similar features to Reverb and emulates their site design.

My project is a single-page app that uses React on the client side and a Ruby on Rails back end for the API to store data. Users can search, filter, and sort pre-existing products and also create and upload new products to the Rails server. There’s also a feature that lets you add products to your cart and “buy” them. It just deletes the stored cart data and gives you an alert saying your cart is purchased. No real money changes hands here.

One of the things I love about React is how it encourages separation of concerns. This comes from the fact that the way everything is structured makes you take sections of code and put them in separate files or functions to make your code more readable and gives the whole app a better structure. Making purely presentational components takes this a step further by designating that the React component is only used for presenting the information to the user and not the manipulation and storage of data. For whatever reason this really gels with my way of thinking and I feel like it helps me be a better programmer. Maybe this is because I try to understand projects as whole and when I see everything in its rightful place it makes more sense.

Because of my newfound love for React and all of the front-end goodness it brings, I’m real excited to continue working with it. I’m not sure what coding projects I’ll be spending my time on over the next few months while I job hunt, but I’m sure that I’ll be diving deeper into the trenches of React. If I do end up landing a developer job at a company like Reverb, hopefully that job will enable me code with React on a day to day basis.