Flatiron School — Phase 4’s JS/Rails API Portfolio Project
My name is Carolyn Manning, and I am a student at Flatiron School. I spent the last couple days tackling my fourth portfolio project using Javascript with a Rails API. Let’s walk through my process!
After taking a look at the project requirements and some sample projects from previous students, I decided that I was going to build a simple trivia app. With this in mind, I decided that within a single page(as required), a user would be able to create a new game, display a certain number of questions, have an interactive question-answer functionality, display a running score, and display a leaderboard upon completion of the game. While those tasks seem quite simple, I learned that with so many different options of how to accomplish simple interactivity, it can become quite overwhelming.
While this app is perhaps the most simple one I have created for a portfolio project at Flatiron School, I have to mention, it was perhaps the most challenging for me to develop/debug/ideate. As mentioned in this phase’s lessons, to really grasp an understanding for Javascript, you have to write a whole lot of code, and I definitely learned that fully. BUT by working through this project I feel considerably more confident with the language.
I started my project by working on the backend by building my Rails API. In this API, built and tested many associations between my 3 classes (User, Game, Question) as that is what I was familiar with in working with Rails. In retrospect, with the simplicity of my app, the associations I had determined were not entirely necessary, as many of them were not utilized in the first iteration of the app. However, I still find that having this framework is important. For me, I like to think about different functionalities that I may want to include in the app down the line. With these associations in place, any modifications or enhancements, I will already have the groundwork in place to start working on any enhancements. (For example, I have the framework in place to create a user login, have a user track their progress across many games, grade the quiz by question etc.) However, while my Rails API is probably more thorough than necessary, I kept it relatively very simple after it was established since the projects requirements to not call for a comprehensive backend.
Upon completing the simple rails API, and building a simple HTML template to work from, I spent some time navigating from the backend and front end to build out my controller actions and some necessary AJAX calls. Once I saw that the fetch requests were working as intended, I spent a majority of the rest of my time working on the front end.
For the frontend, while I had some loose ideas in place, I definitely did not fully grasp the complexity of Javascript until i started testing out some code. I went through about 4 iterations of what the users interactivity with the page would look like until I landed on a concept that I liked and (most importantly) I could figure out in a way that would be simple and clean. I learned quickly how important it is to constantly test code every step of the way! While jumping between terminal and browser console to test simple functions was a bit frustrating on my tiny laptop screen, I actually really enjoyed working through the solutions on challenges I set for myself and learning more about what is possible with Javascript. Honestly, I think with enough time and a bit more practice, I can see how the possibilities are somewhat limitless with the language.
My excitement was definitely short-lived though. Once I had the app fully working to my specifications, it was time to refactor it to use Object Oriented Javascript. This was definitely my biggest roadblock as I almost consistently received an error message or broke my app with every slight refactor that I made. While I think this is just part of the process and I was not deterred, For my next project, I definitely want to have an idea of how my objects/classes are going to look in the earlier stages of my build. Refactoring with much cohesiveness in the functions I build initially was extremely challenging!.
As with my last 3 portfolio projects, this project definitely gave me even more confidence continuing to move forward onto the last Phase of this program. However, I am definitely going to do a thorough refresher on Object Oriented Javascript right away!.
