Pokedex, a Sinatra Project

Mcrea
4 min readJan 11, 2021

--

For the second assessment project at Flatiron, I was required to build a Sinatra MVC (Model View Controller) Application, using ActiveRecord. Creating my first CLI Ruby gem on a blank canvas was a bit intimating. Luckily going into this there were many labs beforehand that prepare us for such.

Special Assessment Requirements:

  • Build an MVC Sinatra Application.
  • Use ActiveRecord with Sinatra.
  • Use Multiple Models.
  • Use at least one has_many relationship.
  • Must have user accounts. The user that created a given piece of content should be the only person who can modify that content.
  • You should validate user input to ensure that bad data isn’t created.

Setting Up Sinatra Structure

For this task, I used the Corneal gem which provides all of the necessary documentation(models, views, controllers)to start building any Sinatra app. I had to make changes in the structure still. I started by deleting the spec folder as there would be no tests and made some changes in my public folder for styling purposes as well. I also added a few gems to my GEMFILE that I knew I was going to use them.

Above is a view of the many folders and files we use to make magic happen for the user’s view.

Once we have our shotgun server running, we’ll make our way over to localhost:9393.

After creating this line of code in my pokemon_controller.rb, I then created a views folder called index.erb. The views folder is where all of the HTML we want to display to the user, including the index.erb. Here the user will see the screen below. They will be able to Login, or use the Nav bar to Sign up or view the Pokemon Index.

A helper methods was used to find the current user using sessions, to check if the user is logged in. When the user logs in they then will be rerouted to the their account where they can view their Pokedex. If they do not have any Pokemon, the user will have the option to add the Pokemon of their choosing to their own Pokedex by clinking Pokemon Index.

Above, the current user “BillyBean” has one Pokemon in his Pokedex. On this page the user can also give their Pokemon’s a nickname of their choosing. They have the option to release their Pokemon. Sadly, if the user would like to end their journey and delete their trainer, they have this option as well. User can also just log out if they would like to come back at a later time.

Above is the code we use to iterate through all the Pokemon in order to list them for the users view. The code is checking to see if the Pokemon listed belongs to the current user. If the Pokemon does in fact belong to the current user, they then have the option to “release it back into the WILD”. All this is happening by a joined table, where a Pokemon trainer object is created and assigned to the current user and the Pokemon who is being captured.

To meet project requirements the trainer has the option to edit their profile. Only “BillyBean” is able to edit his own information. This is accomplished by using a helper method that allows us to render the page, only if the current user is logged in.

And thats it folks, there you have a working app. I hope we all appreciate how much work goes into a simple HTML page, I know I do.

--

--