Rails Is Fun: Phase 3 Project + Progress

Wesley Beck
6 min readFeb 7, 2021
Photo by Christopher Gower on Unsplash

Overview of my time during the boot camp:

From Learning Ruby to practicing Ruby and using Sinatra to build a web app, to finally learning about Rails and its powerful framework in building dynamic websites with ease. I have come a long way, and while I still have 2 more phases to go and figuring out what to do after the boot camp, I am proud that I have the knowledge to build out a web application in a short time with basic features after a mere 3 months since starting this boot camp with Flatiron School. I can’t wait to finish the boot camp and find a job with these new found skills that I am now capable of building.

Onto the project itself:

As usual, the first part about coming up with your own application idea is always difficult and it took me a while to find something I could seek to build functionally. After a while of pondering, I decided that Toptenlister was my only solid idea.

Toptenlister is my idea of a recommendation app. It is a very basic CRUD application, where a user can create a top(up to ten) list of items based on a certain topic ( e.g. “Movies”). These top lists are shared by users on the web app where other users can view them and if they are interested in the lists of other users can then do their research on those items that were ‘reccomended’ by other users via their top 10 lists. I thought it was a pretty neat idea, though probably not original, so I ran with it.

Setting up the skeleton of the app was super easy with Rails where we could enter the following line of code to run a bunch of macros via the terminal that would set up all the files we need to get a Rails app up an running within minutes:

rails new (appname)

The above line of code will whip an app skeleton and associated files need to boot up an app in your browser almost instantly. However, given the requirements of the project we did not want to implement certain things which you can append the skip command along with whatever you don’t need to add such as active-storage or action-mailbox.

Next came a big issue that I had was my Node version, which caused my app to not work properly. I don’t quite comprehend the underlying issue but a specific line rendered my project useless due to its presence and a gem associated with Rails called webpacker was ultimately not compiling the project and javascript. I was confronted with either deleting the line of code in my main layout view thus temporarily fixing the problem, or I could figure out the solution the right way.

I scoured google and tried so many different fixes that other people had come up with that when I finally just asked my instructor he knew exactly what was happening and gave me the answer. By then I had already did the damage and had to rebuild my project over again. Thankfully it was simple copy and paste the code from the files I wanted to keep and run through the processes to build up the database and be able to run the server with no issues.

Disclaimer: the following paragraph is my interpretation of the problem that I encountered, I still dont know the full extent of the problem, but here is my simplified explanation to my understanding. It may not be entirely accurate:

The underlying issue with webpacker was that it wasn’t able to compile due to a javascript tag in my application layout, because the webpacker was failing behind the scenes from an updated Node that I had installed previously. Reinstalling Node to an older version (14.11.0 I think it was) and reinstalling webpacker in my rails app root directory was the simple trick, which I could have known if I just asked my instructor. One of the main lessons I learned for this project and continuing forward was to ASK FOR HELP if I needed it and to not spend too much time on one thing. Do not be afraid to ask for help or be too stubborn (like I was) to try to figure it out on your own, it wastes your time and you will start doubting confidence in your ability to code.

Anyways, after fixing that issue, setting up was a breeze. Then I ran into my nested routing issues, which I found out the code for them was much simpler than originally anticipated. My original controller logic was long and unnecessary for nested routes and trimmed it down after finding out about a special format for my else statement. I directed the flow of logic to hit my else statement when a list did not save to the database it would rerender the new form page for the user to fill out again. The issue was losing the nested attribute after re-rendering the new list form from an error preventing that list from being saved into the database. Here is the simple trick I found to be able to hold the nested attribute when you rerender on a page using a declaration of the attribute on the render action:

At the ‘elsif’ statement I created, it determines whether the List object already has a topic and doesn’t save, which an object being instantiated from the nested route will have the associated Topic object already upon reaching the nested new form in the web app. ‘:topic_id => @list.topic.id’ declaration is telling the condition to restart the action and simulate the nested route by already setting the :topic_id attribute (via params on render) on the list object equal to the nested routes :id, in this case :topic_id.

Once I figured that out I was able to successfully get the create action working through a nested new route, which was one of the project requirements.

Omniauth was another fun requirement of the project. I think it is really awesome that I was able to learn how to establish a third-party log in using Google in my application. When I initially heard about it and seen it on other websites prior to learning about omniauth, I thought it would be a pain in my side to learn and integrate third-party signup, but it turned out not so bad. Using the omniauth gem and the google-oauth2 gems made it a lot more simple to integrate the sign in via google into the website.

Rails.application.config.middleware.use OmniAuth::Builder doprovider :google_oauth2, ENV["GOOGLE_CLIENT_KEY"],ENV["GOOGLE_CLIENT_SECRET"]end

The code above was all I needed to access the Google API database of users, which I then had to build methods and a route to process the login using the email address and generating a password for the user to create an account to log into via the database associated with my app.

Overall, my app has basic layouts and simple design principles(at least I believe, I’m still a beginner here), but I am proud of what I built and I know that I could build on top of it with the basic functionality there. In my spare time I want to brush up on CSS, as I don't remember the advanced stylings, as its not technically required for this project as well as the previous Sinatra project. My goals going forward is to be able to pump out some incredible projects since we will be learning Javascript and more in the coming phases.

Javascript here we come!

--

--

Wesley Beck

Recent Flatiron Boot Camp Grad. Pursuing my dream to become a software engineer, sharing what I can to help others that are new to coding.