Aug 2, 2020
What I Learned from building an Online Ear Training Platform as a Junior Front End Developer
With this article I, as a junior developer, want to share with you all the journey, the things that I learned, as well as the challenges I faced during the creation of Learn By Ear.
Learn By Ear is an online music platform where the main goal is to help musicians from all around the globe to improve their ear skills.
First, let me tell you why I decided to create it. I have another side of my life and it is being a musician and as one, the idea of being able to mix two different skills like programming and music always blew my mind. It also served as and kept on driving my motivation to start learning how to code and dealing with all the pain that requires to immerse yourself into the world of programming.
Long story short — I started writing code back in 2018 and decided to start a 12-weeks intensive bootcamp in Full Stack Web Development. Before I even started the course I knew what would be my final project, without having any experience in programming and without acknowledging the complexities that this task would require, what I knew for sure, is that I wanted to help the community of musicians and also find a topic which will drive me to push myself continuously and learn more programming. I’ll include below a link, where you have the first prototype of Learn By Ear, called Ear-Builder which is also what I presented on my last day of school as my graduation project. Here is the link to it.
The initial prototype was built in jQuery and one of the first things I noticed was that it would be very challenging and repetitive to make it scalable, fast and simple. So I decided to build the new version in ReactJS. I chose it for several reasons — the main one being me wanting to get better at this technology as well as its big demand on the market.
I wanted to use this project as part of my portfolio to showcase my skills and attract companies’ interest.
So, let’s break this app down and go through some main components so I can explain the functionality of them and some of the struggles I faced while building them.
Components
The Piano Component
The Piano serves as a tool that users can use as a guide, by visualising better the notes and/or the intervals. I wanted to give the user the choice of using the keyboard or the mouse/touch in order to play the piano. Plus since the piano’s range is quite big I added the possibility to change the octaves through the whole scale of the instrument.
Want to read this story later? Save it in Journal.
One of the challenges of building this component was that it got to a point where it was getting really really really big. Just imagine the Key Events, Mouse Events, sound control and processing, to just name a few! I needed to Think in React, meaning I had to split it into smaller components which, honestly, also made debugging a lot easier. Since React offers hooks I decided to jump on the train and use them (apart from the split to smaller components). So, the *just* Piano component was split into the following:
Components:
- Keyboard
- PianoKey
- OctaveMenu
Hooks:
- useClickEvents
- useDocumentEvents (more on that another time)
- useKeyEvents
Imagine all of this in one component! :O Of course the more the app grew the more functionality was added, but apart from it being more granular,
I was able now to move parts independently without fearing to break some core functionality.
The Notation Component
When the user is playing the Piano, they are most likely interacting within an exercise and the given question. After answering, the user should be able to analyse their answer and see the notes. Now, how do you approach this requirement? I hear a lot of “build things from scratch to understand them better!”, which I believe is a great practice, but you need to choose your battles. To build this feature from 0 would require a lot of time and since it is just a “helper” feature, I decided to use Vex Flow, which is an open-source online music notation library. I, personally, enjoyed working with it, as it has good documentation and it’s relatively easy to understand as soon as you get familiar with its functionally.
To touch once more on the topic of building things from scratch — in my opinion, it is important to do so, but also developing the skill of reading documentation, going through it and finding what you need among all of the information is also a very essential skill.
The Settings Component
It is important to me to create a platform where the user can enjoy spending time and I wanted to give them the freedom to customise their practice as much as I could. With the Settings component the user can:
- Change the distance/length between playing the notes, so the exercise is executed faster or slower as desired
- Use a keyboard to play the Piano, which can be very useful while working with musical intervals
- Auto Continue — gives the user the choice to decide if they want to go to the next question straight after they submit the answer or to have some time to analyse the result and then click “Next” manually
- Dark/Light Mode — one of my favourite features of this project, it was a pure styling decision for me but a huge preference game changer for the user (even got already some positive feedback about it!). Since it’s my favourite I’d like to elaborate on it more: CSS offers native support for variables, so I created some in the main.css file, on the root selector, and then the second batch of variables on the root selector as well, but with an attribute of my choice. This means that the only thing you really need to do is to create the variables and apply a data attribute to the html page. Let me know if you’re interested in a separate article about that but more in depth!
Now, to the important point — how to make sure the user can leave the page, come back to it and not need to set up their preferences again? The store won’t be a solution here since the user will quit the application and I didn’t want to deal with databases as well, so I went for a lighter solution — localStorage. Of course if the user cleans up their localStorage then everything will be gone, but this is something that, for now, I am willing to accept and how often do you clear you localStorage anyhow?
The Progress Components
The platform should be interactive and engaging, it should motivate and push the user to keep on trying and going through levels, exercises and courses.
This brought the idea of keeping track of the user’s progress.
As you noticed, I mentioned that it is components — in our case: 2. And they are quite different!
The Progress Bar Component
It is displayed on the top of the exercise page along with the course’s and exercise’s name and keeps track of the correct/incorrect answers. I also set a goal for the exercises — the user needs to reach at least 85% of correct answers in order to be sure they are ready to move to the next level.
The Radial Progress Component
Can be seen on the courses and course page, a highly reusable component as it is not only used to show the overall progress of the course but also of the specific exercise or even level.
The Struggles
One of the biggest lessons of building Learn By ear is that the initial idea I had in mind about how to build such an app turned out to be very much different at the end, let me give you an example:
Once it was more or less at the last stage of the project and it was time to go public with it, I realised that the rendering of the website was very slow (had to push it to production to see the real effect, as locally it will mostly be blasting fast, so don’t let that trick you!).
After doing lots of research and thinking how to speed up the rendering of the page, I found out about SSR (Server Side Rendering) and I came to a conclusion that this is exactly what I need to use. To tackle this task I chose NextJS, which offers great out-of-the-box SSR solution if you don’t want to build the server side part by yourself.
The Conclusions
As a Junior Front End developer, one of the things that I realised is that you need to start building things, as soon as possible, in order to progress as a web developer. Now don’t get me wrong, all the online courses, tutorials and guides out there are great learning resources, but it is only when you start facing an application with “real life” problems as a developer — that will be the moment when you will bring your coding skills to the next level.
I also want to point out that if starting to build things on your own is very important, then to bring these projects to an end and not leave them halfway through is even more important!
It’s easy to quit or give up on things when they don’t go according to your expectation, right? But it won’t make you grow.
That’s exactly why you need to find the things that excite you and/or you’re passionate about, because when the struggle comes and the struggle is big time real, your passion will remind you of the reasons why you decided to take that step.
📝 Save this story in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.
