LMS for Musicians: React Redux

Read more about the article LMS for Musicians: React Redux
Photo by Pixabay on Pexels.com

If the COVID 19 pandemic has taught us anything, it is that virtually everything can be virtualized. Zoom lessons have become a feature of life for students. Many teachers have taken the opportunity to collect and create resources for their students through a variety of platforms. I decided to design my React Redux project to serve this demand for virtual music education resources.

This current version of my project is only “music” related in name. I hope to incorporate many features specific to music education as I continue development and roll out some live versions for friends and colleagues, but this portfolio project represents more of a vanilla LMS. Users can sign up or log in, subscribe to courses, and record their progress through the course.

The backend models for the project started simply enough with Teachers having a collection of Courses which in turn are connected to a collection of Lessons. To allow for Users to have a collection of Courses, I created a Subscription model which serves as a join table for one User and one Course. This may seem unnecessary since Users could simply have_many Courses, but I knew from the start that keeping track of a User’s progress through a course would be best stored in the actual instance of this connection.

I ended up creating a final model called LessonProgress to store this information. Every Subscription has_many LessonProgresses, and a collection of LessonProgresses is generated automatically after a Subscription is instantiated. For simplicity’s sake, a LessonProgress stores a Lesson’s Id and a “status” as a string. I chose to use a string instead of a bool to allow for future implementation of multi-state LessonProgresses, which could include “pending review”, a “failed” state of an assessment, or a status to indicate that a lesson was started but has not been completed.

The utility of an LMS depends on having a secure login for users to access their courses and progress through the content at their leisure. Therefore I turned my attention first to the task of creating a sign up and log in process. This involved a simple form component in the frontend to take the username and password for a new or returning user (To scale the project, I will likely replace this simple username structure with full name and email for communication integration and security). After validating and creating a Session, the User object is sent by the API to the frontend.

This is where I believe the Rails API will end up falling flat when I decide to take this project to development. A more robust session creation process using cookies and full scale Rails routing will likely be the first in a list of improvements to the app as I continue to scale towards production.

To keep my Redux store simple, I needed most of my data to be structured into a single user key. To accomplish this, I needed to be sure to include all of the associations within the rendered User. To do this, I created serializers for each model in my database, making sure to include the associations I needed in this file. In addition, I altered the config/initializers/active_model_serializer.rb file to read as follows:

ActiveModelSerializers.config.default_includes = ‘**’

This allows my serializers to automatically include up to two levels of associations when rendering, giving me the depth of association needed to include Users that have many Subscriptions with many LessonProgresses and one Course.

From here, I created a spiderweb of containers and components to render (depending on the user property of the store) the correct courses and lessons. Further flow control and a new set of actions allowed me to update the backend’s LessonStatus within a subscription and allow a user to progress through a course one lesson at a time.

I initially set up the app to show the courses of multiple teachers. I realized this use case was very limited for real world application, so I pivoted the application to render a single teacher’s work. I am thankful to my friend at Horn Hippie Media for allowing me to use his existing YouTube content to serve as seeds for this project, in addition to his fantastic branding!

A quick demonstration of the UI of the Music LMS

I have to say, designing a frontend user experience has been very satisfying with React. I have learned many ins and outs of styling buttons and Router NavLinks, and I enjoyed designing a simple container style to go with the bright and bold colors from the Horn Hippie Media branding. Further improvements to the responsive styling of the navigation components will definitely come with further development, in addition to some render animations to make the user’s experience even more smooth and seamless. My goals for this project also include CReate, Update, and DElete (CRUD) for teachers, allowing production versions of the application to be “self service”. Incorporating payment and designing a paywall for the content on the app will also be essential to a production version of the app.

Overall the process of designing and building with React has been incredibly satisfying. The structure of passing properties and state between components clicks well with how I visualize the structure of the application, and creating flow controls based on the central store of information made the addition of features simple to add to the app.


Read more about the article Lemonade
Photo by Julia Zolotova on Pexels.com

My final project for the Flatiron School has been brought on a cocktail of mixed feelings. When I started the web development course at Flatiron in the summer of 2020, so much was uncertain. How would the performing arts fare in the 2020 pandemic? Would my job in the orchestra still be there when the dust settled? Most importantly, what was I going to DO with myself in the meantime?

As I near the end of the bootcamp, I am thankful that the Houston Symphony made lemons out of lemonade. We are very fortunate to be maintaining both our jobs and a regular performance schedule. I am also very grateful to the Flatiron School for injecting purpose and direction into a potentially stagnant and empty year.

All that being said, I do find myself at a real crossroads in my coding career. Flatiron seems to be designed to take newbie coders all the way from “zero to hero”. The tail end of the Flatiron experience includes consultations with a career coach (Hi Shelley!) designed to prepare you for the audition interview process and to enter the professional world as a newly minted developer. I am lucky to have this resource as I navigate how to incorporate my new skills into my life as a full time musician. How can I best use my new skills? What role will coding have in my life when the concert season is back in full swing?

I find myself utilizing some skills and approaches from learning to code to my career goals and music to guide me through these uncertainties, to continue moving forward, and continue to make lemonade.

Keep the end result in mind.

With any coding project, and in life in general, it is easy to get distracted and lose sight of your overall goal. Set clearly defined and achievable goals for short and long term periods.

Short term: add a subscribe button to each course of the LMS app. Write a blog post, and connect with potential employers on LinkedIn.

Long term: Create a structured user experience to guide users through a course, recording lesson progress to the backend. Score a job and start building solutions to real world problems.

Focus on incremental change.

It may seem counter to keeping long term goals in mind, but this skill has to work hand in hand with creating goals to effect a growth mentality. As you remain mindful of your short and long term goals, you can concentrate your daily efforts on inching your way towards accomplishing those goals. My mantra through my time at the Flatiron School has been “a little bit every day”.

Some days I feel like I have burned through an entire section of material, and everything clicks. Progress is swift and satisfying, and I am energized to dig in the next day. Some days, on the other hand, I remain stuck on a single small problem, or struggle to internalize a new concept. Whether I move myself one mile closer to my goals or one inch, I remind myself that progress of any kind is the goal. Looking back, I am most proud of those frustratingly slow days, where I was triumphant over a particularly difficult part of the path to success.

Good => Great

As a musician, we are trained to build our skills to deliver compelling performances with precision and consistency. However, one cannot achieve this level of performance without building skills through practice. No matter how talented a musician is, “greatness” never comes before “goodness”. The same goes for building an application! Any project is a constant evolution, starting by achieving some very basic levels of data handling and user experience and being refined to the end goal as a meaningful solution to a real problem. As I look back, realizing the incredible journey from hello world to an interactive learning management system reminds me to embrace and celebrate the “good” that comes on the way to “great”.

These are my guiding lights as I move towards graduation: know where you want to go, commit to making one step at a time, and enjoy the journey. I hope these concepts will help you proceed into uncertainty in your own life, thanks for reading!

One Step at a Time

Read more about the article One Step at a Time
Photo by Pixabay on Pexels.com

I began my exploration of computer programming with the Flatiron School in July. Learning to code continues to be both exciting and daunting for me. It is empowering to be able to write a line of code that effects a change, or accurately create connections where there were none before. At the same time, the scale of what I have not yet learned looms out of the darkness. Terminology, unknown languages and frameworks, techniques and conventions.

“Aller Anfang ist Schwer.”

German Proverb

This was one of the first phrases we learned German 101 in college. It very simply means All beginnings are hard. Of all the German aphorisms, this one has stuck with me the longest. The bluntness and brevity of the phrase perfectly exemplify a very German attitude to personal growth. There is nothing mysterious about the difficulties of starting from the beginning.

It is hard.

The Flatiron curriculum has taught me to focus on breaking concepts and processes down to their simplest parts. Instead of focusing on the magnitude of a task, I have learned to determine the steps needed to succeed, and start with a laser focus on step one. When those tests pass, move on to the next problem. As each test returns green, soon the lab is complete. I find my flow while coding when I am not distracted by the scale of the entire project.

I urge anyone who is feeling overwhelmed, whether by a coding problem or a roadblock in life, to take on the programmer’s approach. When you view the task or problem as a whole, it is incredibly difficult to appreciate the first step. Especially when starting a new skill, the scope of what you don’t yet know can be an immense pressure.

Commit yourself to reducing any process to its smallest components, organize your strategy, and start with step one. Celebrate each small victory, and keep your focus on what comes next. If your progress is slow or frustrating, keep in mind that all beginnings are hard.

Putting it “Out There”

Read more about the article Putting it “Out There”
Photo by Negative Space on Pexels.com

A topic of fixation in our hyper-connected world is web presence. The metric of success personally or for business can be measured in likes, views, retweets, and trending. As a self-identifying introvert, I find myself caught between sharing my passions and interests and protecting myself from the inevitable exhaustion of feeling constantly scrutinized.

As a musician, I find it challenging to “submit” a project to this public space. For one, the standard of perfection that is expected for recorded music makes it challenging to achieve an acceptable product. But on a deeper level, I have come to discover that I never feel ready to post for another reason: I never feel like my product is ever “finished”.

The pursuit of maintaining and refining the fundamentals of brass production is a bottomless pit. A feeling of incompletion nags every long tone session. New tendencies need identification and diagnosis, while old habits look for opportunities to sneak in through the back door. Why post anything at all if you can do better? It isn’t just the imperfections in a particular performance, but the dormant potential that one more week of grinding might cure that persistent hangup.

During quarantine, when the world of live performance came to a dead stop, I found myself searching for a sense of purpose, or at the very least a project to occupy my mind. I have never thrived when left to practice in a vacuum, and without the regular projects and programs to prepare it didn’t take long to feel burnt out and exhausted. I felt driven to build and create, and endlessly chasing the sound and facility I wanted in my horn playing was not satisfying when my only outlet was my practice room.

Enter: The Flatiron School

My search for a project to divert my energy led me to the Flatiron School. They offered a zero to hero online course promising proficiency as a front and back end web developer. I jumped straight into their free “Bootcamp Prep” course for software engineering, and was soon addicted to the satisfying green text of a passing test. After some study and practice, I could make things happen with a simple line of code, and a solution to any problem could be found in the lesson material or in easily searchable online guides. I applied for the self-paced program and dove head first.

Maybe not surprisingly, my resistance in sharing my musical projects was quickly manifest in my programming. The scale of what I knew how to do as a baby programmer was constantly dwarfed by the remaining curriculum, immense online community, and sheer number of languages I wouldn’t be learning through the program. I avoided the school’s Slack channel and study groups, unwilling to interact and discuss topics I had not yet mastered. I found myself in the same bottomless pit, frozen by a feeling of inadequacy.

Fortunately, the Flatiron School’s holistic program includes one-on-one sessions with educational and career coaches. A recent session with my coach (Thank you Valerie!) gave me some important perspective on my goals in the Flatiron School, which I hope to also apply to my work as a musician and web designer.

No project exists in a vacuum

Very few roles in life are truly isolated. We all depend on others to thrive. Cultivating a supportive community can provide numerous benefits, including support when the going gets tough. Both music and programming are necessarily collaborative pursuits, and that skill of collaboration needs just as much practice as the fundamentals of either.

The goal is growth, not perfection

Pursuing perfection has been a fickle and frustrating objective in music, and this reluctance to share my efforts until I am completely satisfied has been a significant mental block that has translated to many other parts of my life. With that in mind, I am enthusiastic about using this platform to share my progress as much as my products.

I hope this overly long post will serve as an inspiration to others who feel the same way. Be empowered to share what you do and love.

End of content

No more pages to load