My first portfolio CLI project

Credit: N3cr0sz on Newgrounds

After being enrolled in Flatiron’s software engineering bootcamp for a month, finally it’s time to build my very first portfolio project. The last time I worked on any CLI app was few years back in when one of our teacher gave us task of building any CLI app using Assembly language, that I built a simple currency calculator. It was a totally a procedural program, no Object Oriented concepts were used. So it was pretty simple to build.

But for this project we had to use Object Orientation design and concepts, it took me a while to come up with my own idea of what I’ll build.

What I built

I had two options to choose from, either scraping a website or using built in APIs. I wanted to build a tweet livestream of certain keywords using twitter’s API. But they declined my application for developers access for some reasons.

So I chose to scrape IGN’s top 100 video games of all time. I scraped list of all the video games, along with description, release year, and the facts. Scraping was easy enough to tackle.

Parsing HTML

Using Nokogiri library I parsed the whole HTML, and selected the main attribute of HTML which was article , using .css method. That tag alone gave me all the information of top 100 video games. I selected facts, description, release year, rank and title of every game.

game_articles = parsed_html.css("article")game_articles.map do |game|hash = {fact: game.css("ul.ul li.item-highlight").first.text.strip,description: game.css("div.item-body p").first.text.strip,released: game.css("span.item-label-value").first.text.strip,ranking: game.css("div.badge-number").first.text.strip,title: game.css("div.item-heading a").first.text.strip}

Storing data

After scraping the data I had to store it my Game class so I can use it to build my CLI project. I built a Game class and stored all of the data in array of class variable @@all . And saved it using save method.

class Game@@all = []def initialize(hash)  hash.each do |key, value|  self.class.attr_accessor key  self.send("#{key}=", value)endsaveenddef save  self.class.all << selfenddef self.all  @@allendend

Building CLI app

Flow diagram using draw.io

Here’s the flow diagram of my CLI app. When user starts the app, it loads up for few seconds and then gets the data from the web. And then user is greeted with a greeting message.

Using VS Code

And then user is asked to see the list or to leave the program. If user presses enter, they will see the list of 20 games only.

Using VS Code

And then user is prompted with the input again to see more list of games or they can type any number of list to get the information of that game.

Using VS Code

When user types the number, it sees the title, rank, release year, description and the facts of that game. Users can also press enter to see the list again or type exit to leave.

Using VS Code

Here’s my GitHub repo of the project

The link of my go through video 🎬

Let’s get connected on LinkedIn 🙌

Full Stack JavaScript developer | Data | Programming 👾