Making a Games Backlog Library with Sinatra and ActiveRecord

Angelo Urtula
4 min readApr 19, 2021

For my second project with Flatiron School’s Full-Time Online course, the task was to make a MVC(model-view-controller) app with CRUD(Create, Read, Update, Destroy) using Sinatra and ActiveRecord. Having listened to friends complain about their backlog of games they haven’t played yet and having an extensive list of my own, I know we tend to forget about some of those games the longer they sit in our backlog! That being said, for my project, I chose to create an app that allows users to create and share their own backlog libraries in order to better keep track of all those games. Furthermore, on the off chance they actually get to finish a game on their back log, they can finally remove it from their profile’s backlog library!

Initially, I chose to start with a gem called corneal, which creates the scaffolding one would normally need for such a project with Sinatra and ActiveRecord. Having most of the file structure laid out with a simple gem install allowed me to get right into creating migrations and models. First, I started by making migrations for three tables: users, games, and a join table usergamers. The reason for adding the join table was because in this scenario users can have many games and games can have many users! On a sidenote, understanding your models’ relationships and associations is key to knowing what migrations you’ll need, and vice versa. Luckily, if somewhere down the line you realize you forgot an association that requires a join table, you can always add another migration to create said table. After making the migrations, the models were such that User has_many usergames AND games through usergames, Game has_many usergames AND users through usergames, and usergames belongs_to both User and Game.

After seeding some data into our newly migrated tables, I got started on making sure accounts were unique and users couldn’t sign up with empty username and password fields (which would create bad data). Passwords were also made secure using bcrypt to encrpyt passwords so users’ passwords are hashed. This prevents others with access to the database from seeing users’ actual password, as the entire password column would be filled with NULL, with their hashed passwords in another column titled password_digest.

Moving on, I started to work on the actual front-end, working on controllers to set up the routes I would need for the web app. I also started to work on the erb(embedded Ruby) files that would render the messages, buttons, links, and fields for the web app. Erb files are interesting in that they are read as html but have lines of Ruby sprinkled around in order to access variables from the route that calls on these files and add some of Ruby’s helpful functionalities, such as iteration! In an erb file, lines of Ruby are enclosed between <% %> if the line doesn’t need to be rendered, or they can be enclosed between <%= %> if the return value needs to be rendered. While on the topic of erb files, forms can be tricky, especially when it comes to patch and delete forms! While working on the patch form for users to add/remove games from their library, I kept running into an error that didn’t allow my form to patch and I was met with this image that will always haunt me:

I kept looking through my code for any sort of typo. I was sure that everything was in order and that I wasn’t missing a single “/” or a stray “s”, as was the case with some of the other errors I was running into. After about 30 minutes of staring at my code, I realized that I decided to look through the config.ru file to see if maybe I forgot to mount a controller. It then dawned on me that the corneal gem does not add the VERY important line “use Rack::MethodOverride”, which is very much necessary for forms requiring patch and delete capabilities. Lesson of the story: always check your files for little preliminary things that you’ll need, even if you’re using a tried and tested scaffold gem.

Overall, it was nice to get a better understanding of how browsers and the internet work! Although my project is currently a “minimum viable product”, I hope to expand on it by adding more functionality, such as a message board where users can hype up games they’ve played and others are still sitting on, or where users can look for co-op partners for games they’ve been holding off for lack of a co-op partner. Aside from that, I could definitely get more practice with HTML and CSS by making the site prettier in the future.

--

--