For this project I figured I continue exploring the idea of a vinyl record collection management tool. This time I approached it on the side of users being able to share records with other users, and have those users comment and review them (and vice-versa).
The functionality aspect of the project was laid down fairly easy. Users create new tracks which are added to their collection, or “Recordbox”, other users can then see that Recorbox and add a review and comment on the records. I used Rails’ nested resources and validations to ensure that reviews can only be created within the record page and that only logged in users can create and edit these reviews.
The “magic or Rails” allowed me to setup the main logic of the app fairly quickly, so I decided to invest most of the time learning and practicing front-end design. I wanted to have a professional looking app as part of my portfolio, so I watched a few tutorials online and read the documentation on implementing the Bootstrap toolkit. I must say I got hooked immediately! It really does give that modern, elegant look to web applications in a “simpler” way than straight up CSS. The grid system was essential for designing my app. Adding columns and rows was not only easy, it was extremely practical as it allows for them to change sizes depending on the user’s screen size, so once you have this implemented correctly, your web app becomes a mobile-ready app as well.
One key feature of this app was giving the user the ability to dynamically add fields to a form. See vinyl records have an artist, a title, a label, a format, and so forth, but that record also has at least one or multiple songs (or tracks). Since I wanted to have a nice looking app and had spent a good amount of time learning Bootstrap, I needed to find a way to dynamically add tracks to a record. That is, when a user wants to create a new record, that user will fill in a form with a single field for each of the record’s attributes —name, title, release date, etc. But what about the track fields? In one situation a user can create a new record with two tracks, but in another, a new record may have three tracks, or four tracks, or one track. How can the new record form dynamically add the number or required track fields without having a bunch of empty track fields? After extensive reading and research, I found out the answer lies in using JavaScript. But I don’t know JavaScript yet! Again, I spent a day or so watching and reading tutorials on how to implement helper methods and JS scripts to create links and actions that don’t require a refresh of the current page. A bit complicated, specially since each track is an instance of a track object nested in the main form, but I got very close to making it. I was able to do the nested form and generate the nested attributes, but I couldn’t do so without reloading the page. After a great deal of trail and error I was about to give up, and then… I discovered this gem called “Cocoon”. I read the documentation and realized that it does all of that most of the Javascript in the background for you. After installing the gem and doing some small tweaks to the app, I was able to accomplish adding dynamic fields to a form! I highly recommend this gem if you are trying to achieve something similar. It can save you PLENTY of time!
Overall I really enjoyed working on this project. Not only did I feel comfortable with Rails and mastering what I learned in this module, but I also learned plenty of new things. I learned about Bootstrap, learned some Javascript —changing integers inputs to star ratings too a while too. I learned about ActiveStorage in Rails 5 and how managing files is much easier now. There is no need for gems or elaborate code anymore. So overall I had a lot of fun with this project.