Back to Blog

Create Unique Beats Quickly with this Student Redux App

Gery Egan had been DJing and producing electronic music for 5 years before he got to Hack Reactor, and for his final project he wanted to bring his love of music into an app. He pitched an idea to his Hack Reactor thesis project team, who loved it, and the four of them built Steps160, a tool that allows anyone to make and save unique beats.

“Steps160 empowers anyone to have their own creative exploration,” Egan describes.

The program is incredibly easy to use. Each row makes a different sound, and the columns represent when in the loop they go off. By simply clicking on different rows of the grid, one can experiment with the different sounds you can make, and how they sound together. Once you have a mix you’d like to try, hit play to see how it sounds. The speed of the loop is adjustable by changing the beats per minute (BPM).

hack reactor, student project, app, coding bootcamp, redux, react, beat maker

Steps160 makes creating a unique beat as simple as clicking squares on a grid.

“If you want, you can upload your own samples,” adds Andrew Sherman, who built Steps160 with Egan, Alex Ting and Chris Doo. “Any songs you want to cut, you can drop in there and edit on the fly.”

To build Steps160, the team learned Redux, a technology none of them had worked with previously. The Hack Reactor course is designed to instill the ability to teach oneself new technologies in two days, and the group took that same approach during their project period.

“We set aside a couple days of self study,” says Egan. “That itself was a pretty satisfying experience--the fact that we are able to pick anything up in two days without the structure of the course.”

The team drew directly from the methods taught at Hack Reactor to pick up Redux on their own.

“The course teaches us to learn the most important parts of any tech or skill,” adds Doo. “We can parlay the same concept to our project. We would just set a goal, reach it, then move on and implement.”

One of the hardest parts of creating music apps is that timing has to be exact to the millisecond.

“Once we started scaling, we had network errors,” says Ting. “The way we built out the app initially created a rerender for each beat, but then we squashed that bug, so we weren’t doing all that processing upfront.”

With that fix, the beats began to line up with precision.

Several members of the group came to Hack Reactor from non-technical backgrounds, and building Steps160 was a sign of how far they had progressed in a short amount of time.

“At the beginning of the course, I was pretty concerned was I going to be able to build anything,” says Egan. “By the time we got to the final project, I was pretty confident in our ability to build something complex like this, so that was a huge shift in how I was framing these things.”

Part of how Hack Reactor catalyzes this transformation in one’s abilities is by structuring the program so students are learning for the entire day.

“At my old job, I was engaged for half the day--probably less than that,” recalls Ting. “Here you are working 12 hours a day and you literally have to be engaged at every second of it. Did I think I was capable of that? No, probably not. I feel much more prepared than I did for my job search coming out of grad school.”

Egan echoes that sentiment, adding that the camaraderie with other students helps power you through.

“This is one of the few educational programs that I’ve been through where at no point did I want to check out,” he marvels. “I was constantly engaged. It was tiring and hard. What made it worth it was the people around us. I feel very lucky to have been in this cohort and I feel like I made lasting friendships.”

Your Hack Reactor journey could be just around the corner. Prepare for our course with our new free online prep program, or, if you already know some JavaScript, get started with our admissions challenge.

Read more:

How Hack Reactor Enabled This Alumna to Quickly Switch Careers

Student IoT Project Lets You Communicate With Your Plants

Blogrank: the Student-Created Search Engine for Coding Blog Posts