Creating my Rails Portfolio Project

William Pannell
4 min readJul 2, 2021

While skateboarding, there is always an option to simply go to a skatepark. However, not everyone is as fortunate as to have one within their reasonable vicinity, as well as the fact that a large part of skateboarding is exploring surrounding areas and making the most of what you can find. My project was to create a web application that users can communally log skate spots for others to view and interact with, allowing fellow skaters to find spots easier.

I began by figuring out the associations first. I realized that both the user and spot would have many comments, and so I utilized a has many through relationship for both the spots and the users in order for them to interact. Additionally, a spot has many obstacles and an obstacle has many obstacle ratings. After adding the correct foreign keys and additional fields for the models, this general flow allowed me to track the data where it logically concerns. Also, by utilizing dependant: destroy on certain relationships, such as an obstacle’s has many with the obstacle ratings, it allowed me to delete both the model and the one related to it once the initial model was deleted. Now when an obstacle was deleted, the associated obstacle ratings would not remain, as if another obstacle was created and this wasn't implemented, the obstacle ratings’ obstacle id field would refer to this new obstacle, which would be incorrect.

I then began work on the user login/signup system. Fortunately, using Devise made this a relatively simple process, while also giving the application decent formatting. There would be many issues I would run into while implementing Omniauth for Facebook with Devise later on, however.

After getting the user information with Devise, I created the forms and controllers for the spot, comments, and obstacles. Creating the spot was first, as the rest of the models relied on its existence. I created a general CRUD for the spot, tracked who created it with the user_id foreign key (in order to ensure only the creator of a spot could edit it), and made use of a partial form since both edit and create would use the same fields. I did essentially the same for the obstacle, except with the addition of making sure the obstacle form properly nested within the spot page and filling out the foreign key for the obstacle’s spot. The obstacle ratings’ and comments’ form were made within both the obstacle and spot view pages respectively, and only utilized a create path within their controllers.

I then added additional features, like the inclusion of Google Maps for the spots Location field. This was a relatively simple process, and if the user entered an accurate enough address, it would concatenate to the end of the Google Maps in order to display the location within a map. I also added an ActiveRecord query in order to find the spot with the most comments. Then the spots controller would use this to create a link that would display said spot. Also, I was able to display how many obstacles/comments/obstacle ratings a spot had by using the associations made with those models and the spot. One more feature was to include a method within the obstacle model that would take the average of all of its obstacle ratings and display that, instead of simply listing out each obstacle rating a user has made.

As mentioned previously, one issue I struggled with was utilizing Omniauth with Facebook. At first, I ran into the problem that it recognized my attempt to login with Facebook as a CSRF attack. This was due to multiple files calling the Facebook Developer App ID and key, so resolving it was done by removing the reference within the Omniauth initializer file and leaving it the same within the Devise one. Following that, it seemed that no matter would I tried, the demand for “https” over “http” prevented me from ever logging in. I was unsure about how to resolve this but learned about a helpful application named ngrok. By using this, I could manufacture a temporary https, however each time I use the website, I would have to run ngrok and update my Facebook Developer Application page that concurs with my project and change the Valid Oauth Redirects field to whatever ngrok provides. Though this issue is not ideal for a long-term website, I believed it would suffice for this project.

Throughout encountering many bugs (too many to even recall all of), I became much more acquainted with utilizing ActiveRecord with Rails, using many to many relationships, and implementing tools like Devise, Omniauth, and Google Maps. I feel it is also worth mentioning I became much more used to the flow of researching errors in general and properly learning from that.

--

--