DEV Community: Andrea Rocca 👨‍🍳

Reactive Map with Rails, Stimulus Reflex and Mapbox

Andrea Rocca 👨‍🍳 — Wed, 24 Jun 2020 10:54:15 +0000

Hello folks.

In the last couple of weeks I've seen more and more content being posted about Rails (possibly because Hey officially launched) as well as Stimulus and Stimulus Reflex.

I've used Stimulus in the past and thought that it was a very good solution to wiring up the HTML with your javascript, however, that still didn't take care of the infamous reactivity that frontend frameworks like Vue and React offer.

Stimulus reflex is supposed to help with that. The route that Stimulus reflex takes, however, is very different. It doesn't rely on you having to add any more JavaScript to your project as the reactivity is made possible thanks to some ruby files called reflexes.

Let's see how it works. I chose again to use a very common "feature" often implemented by my students: a map that you can add markers onto.

Project Setup

Let's start by creating a new Rails project using Stimulus.

rails new mapbox_reflex --webpack=stimulus

Then we can add the Stimulus reflex gem

bundle add stimulus_reflex

And finally we can run the installer

rails stimulus_reflex:install

The installer will do a couple of things:

It will create a app/reflexes directory and populate it with an application_reflex.rb and example_reflex.rb files
Update the javascript dependencies as well as the stimulus controller files to support Stimuls reflex

To make things slightly easier on the eye let's also add bootstrap using a CDN (I know, not the best practice but this is about Stimulus reflex after all, no need to further complicate things). Let's go in our application.html.erb and add the link tag

<!DOCTYPE html>
<html>
  <head>
    <title>MapboxReflex</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

Mapbox Setup

Before moving forward, let's create the db

rails db:create

To generate the sqlite3 db file and, before migrating the thing let's quickly scaffold a new table and migrate the database.

rails g scaffold Poi name latitude:float longitude:float

rails db:migrate

This is going to create a new migration/model/controller/views for the Pois table (short for Points Of Interest).

As you can see we added a latitude and longitude columns that we'll need to populate when creating a new POI. We can easily do that using the geocoder gem.

Let's add the gem to the gemfile bundle add geocoder and wire it up with the Poi model.

class Poi < ApplicationRecord
  geocoded_by :name
  after_validation :geocode, if: :will_save_change_to_name?
end

This will make sure that every time a certain POI gets an update to the name, we geocode it with the right latitude and logitude.

Of course, we'll need to display this POI on a map and to do that, we'll use Mapbox. First of all let's install it yarn add mapbox-gl then, you'll need to generate a new API token after creating a new account.

To use this token, let's create a new .env file and add this line

MAPBOX_API_KEY=pk. ***********************************

This is not really going to work unless we first add the dotenv gem to our Gemfile.

...
group :development, :test do
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'dotenv-rails'
end
...

and install the dependency bundle.

Let's now add the map to the page. First of all, let's add some code to the pois_controller.rb

class PoisController < ApplicationController
  def index
    @pois = Poi.geocoded
    @markers = @pois.map do |poi|
      { lat: poi.latitude, lng: poi.longitude}
    end
  end
end

Here we're simply getting the Pois along with their coordinates and we're creating a simple hash with their latitute and longitude.

Next, let's edit the views/pois/index.html.erb

  <div
    id="map"
    style="width: 100%; height: 600px;"
    data-controller="mapbox"
    data-markers="<%= @markers.to_json %>"
    data-mapbox-api-key="<%= ENV['MAPBOX_API_KEY'] %>"
  ></div>

As you can see, I also added a bunch of data properties that will be used by Stimulus. The first one data-controller will create a new instance of the class defined in mapbox_controller.js. This file doesn't exist yet, let's create it

touch touch app/javascript/controllers/mapbox_controller.js

And add this code

import { Controller } from 'stimulus'
import mapboxgl from 'mapbox-gl'
export default class extends Controller {
  connect() {
    this.map = null
    this.initMapbox()
  }

  initMapbox() {
    const mapElement = document.getElementById('map')
    const markers = JSON.parse(mapElement.dataset.markers)

    if (mapElement) {
      mapboxgl.accessToken = mapElement.dataset.mapboxApiKey
      this.map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v10',
        zoom: 5,
        center: ['12.4964', '41.9028']
      })

      markers.forEach((marker) => {
        this.addMarker(marker)
      })
    }
  }

  addMarker(marker) {
    new mapboxgl.Marker().setLngLat([marker.lng, marker.lat]).addTo(this.map)
  }
}

Let's see what is happening in here.

The connect method is called whenever the a new instance of the class is created (this is what the data-controller is for). In this method we set the map to null and we call another method called initMapbox.
In this method we grab the markers from the data-markers property (that is mapped to the instance variable @markers) and create a new map using mapbox-gl. Then, we add each one of those markers to the map using the addMarker method

Let's set the root of the app to the pois index page, start the rails server and test this out.

Rails.application.routes.draw do
  root 'pois#index'
  resources :pois
end

This is what you should be greeted with. Beautiful Italy.

As you can see, the style is a bit off. Simply importing the mabox scss file inside our app/assets/stylesheets/application.scss will make things look a lot better:

 @import 'mapbox-gl/dist/mapbox-gl';

There may be a chance that your map is gray and you have js errors in your console. If that is the case add this line to your environment.js

environment.loaders.delete('nodeModules')

Just before exporting the module.

All good for now. There are still no markers, though. Let's take care of that.

Adding markers with Stimulus Reflex

Let's add some more code to the pois index view

<div
  id="map"
  style="width: 100%; height: 600px;"
  data-controller="mapbox"
  data-markers="<%= @markers.to_json %>"
  data-mapbox-api-key="<%= ENV['MAPBOX_API_KEY'] %>"
></div>

<form data-controller="pois" class="mt-5 container">
  <div class="form-group">
    <label for="poi_name">POI Name</label>
    <input
      class="form-control"
      type="text"
      data-target="pois.address"
      name="poi_name"
      id="poi_name"
    >
  </div>
  <button
    data-action="click->pois#add"
    type="submit"
    class="btn btn-primary"
  >Submit</button>
</form>

This is simply going to add a new form to the view. As you can see, we're also instantiating another stimulus controller called pois_controller and we're wiring up the button click event to a method inside that controller called add.

This controller doesn't exist yet. Let's create it

touch app/javascript/controllers/pois_controller.js

And add this stuff in there

import ApplicationController from './application_controller'
import Rails from '@rails/ujs'

export default class extends ApplicationController {
  static targets = ['address']

  add(e) {
    Rails.stopEverything(e)

    this.stimulate('PoisReflex#add', this.addressTarget.value)
  }

  afterAdd() {
    this.addressTarget.value = ''
  }
}

Let's see what is happening in here:

We're declaring a target called address. This is directly connected to the input tag where we used the data property data-target. This will make it easier for us to access that element using javascript
In the add method we're first stopping any Rails default behavior and then, we're calling the stimulate method that was made available by Stimulus reflex (inside the application_controller.js connect method). The stimulate method will now call the PoisReflex add method passing through the input value of the address text field

We haven't created yet the PoisReflex.rb file. We can do so by using a rails generator rails g stimulus_reflex Pois. This will create the PoisReflex.rb file inside app/reflexes.

In this file we now need to define a method add that gets called by the stimulus controller

class PoisReflex < ApplicationReflex
  def add(name)
    Poi.create(name: name)
  end
end

As you can see, this method is pretty simple. We simply grab the POI name and create a new POI with it. And this is it. Stimulus Reflex is now connected.

Lets test restart our server and test this out. Go to the web page and type a POI, for instance Colosseum and hit the submit button.

You will see that the map suddenly disappears

This is because behind the scenes, Stimulus Reflex refreshes the bits of the page that are impacted by whatever happened in the reflex. In this case, in the reflex we created a new POI, which means that inside the index method of the pois_controller.rb a new POI was added to the @markers instance variables that the map depends on and thus the whole map element got re-rendered.

This means that now all we need to do is initialize the map back every time a new reflex has completed. Luckily, this is pretty easy to do thanks to the Stimulus Reflex hooks. Let's go in application_controller.js and add the afterReflex hook to reinitialize mapbox.

import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'
import MapboxController from './mapbox_controller'

export default class extends Controller {
  connect() {
    StimulusReflex.register(this)
  }

  afterReflex() {
    const map = new MapboxController()

    map.initMapbox()
  }
}

As you can see here we're importing MapboxController and in the afterReflex hook we are initializing mapbox again using an instance of the controller class.

Now if we test things out again we'll see something like this

Pretty awesome if you ask me. With just a couple of lines of code Stimulus Reflex allowed us to create a fully reactive map.

I've just started to play around with it so I'm sure things can be also further improved. If you want to get access to the code, you can find it here, if you want to get it touch, you can tweet me @ilrock__ or email me @ andrearocca [at] hey [dot] com.

Update

The awesome StimulusReflex community came to the rescue after posting this and shared with me an improvement that I could have worked on. At the moment, every time a new POI is added, the whole map gets re-initialized. It works, but that is not ideal. To tackle this issue, I've changed pois/index.html.erb to this

<div
  data-controller="pois"
>
  <div
    style="width: 100%; height: 600px;"
    data-controller="mapbox"
    data-target="mapbox.wrapper"
    data-markers="<%= @pois.to_json %>"
    data-mapbox-api-key="<%= ENV['MAPBOX_API_KEY'] %>"
  >
    <div
      data-target="mapbox.map"
      data-reflex-permanent
      class="w-100 h-100"
    >
    </div>
  </div>

  <form
    data-target="pois.form"
    class="mt-5 container"
  >
    <div class="form-group">
      <label for="poi_name">POI Name</label>
      <input
        class="form-control"
        type="text"
        data-target="pois.address"
        name="poi_name"
        id="poi_name"
      >
    </div>
    <button
      data-action="click->pois#add"
      type="submit"
      class="btn btn-primary"
    >Submit</button>
  </form>
</div>

The main changes here are:

I nested the div that holds the map inside a wrapper. The wrapper has access to all the needed data (markers and api key)
I marked the nested div with the data attribute data-reflex-permanent. This is a nifty StimulusReflex utility that will skip this div when reloading the interface (do you remember the blank div we were getting before re-initializing the map?)

I then made some changes to the mapbox_controller.js file

import { Controller } from 'stimulus'
import mapboxgl from 'mapbox-gl'

let currentInstance = null

export default class extends Controller {
  static targets = ['map', 'wrapper']

  connect() {
    this.map = null
    this.markers = null
    this.initMapbox()
  }

  initMapbox() {
    this.markers = JSON.parse(this.wrapperTarget.dataset.markers)

    mapboxgl.accessToken = this.wrapperTarget.dataset.mapboxApiKey

    this.map = new mapboxgl.Map({
      container: this.mapTarget,
      style: 'mapbox://styles/mapbox/streets-v10',
      zoom: 5,
      center: ['12.4964', '41.9028']
    })

    currentInstance = this

    this.markers.forEach((marker) => {
      this.addMarker(marker)
    })
  }

  showNewMarkers() {
    const allMarkers = JSON.parse(this.wrapperTarget.dataset.markers)

    const newMarkers = allMarkers
      .filter((marker1) => !this.markers.some((marker2) => marker1.name == marker2.name))

    this.showNewMarkers()
  }

  addMarker(marker) {
    new mapboxgl.Marker().setLngLat([marker.longitude, marker.latitude]).addTo(this.map)
  }
}

export {
  currentInstance
}

The changes here are:

I added a variable currentInstance that is assigned to this when Stimulus instantiate an object with this class. This is then exported as it will be used at a later stage
I added a new method showNewMarkers that gets the difference between the markers that had already been added to the map (this.markers) and the ones coming from the data property of the now-reloaded wrapper (because it was reloaded it will also include the newly added marker)

Last but not least, I moved the afterReflex code to pois_controller.js that now looks like so:

import ApplicationController from './application_controller'
import Rails from '@rails/ujs'
import { currentInstance } from './mapbox_controller'

export default class extends ApplicationController {
  static targets = ['address', 'form']

  add(e) {
    Rails.stopEverything(e)
    this.stimulate('PoisReflex#add', this.addressTarget.value)
  }

  afterAdd() {
    this.addressTarget.value = ''
  }

  afterReflex() {
    currentInstance.showNewMarkers()
  }
}

Here now we're simply importing the currentInstance that we exported earlier and calling the showNewMarkers method.

These small changes now yield this result

Let me know if the changes do make sense! Thanks again a lot to @leastbad for the help.

A simple guide to ActionCable

Andrea Rocca 👨‍🍳 — Mon, 09 Mar 2020 23:21:04 +0000

Hello folks. First blog post here on dev.to. For whom doesn't know me already (likely most of you), my name is Andrea and I am a freelance full-stack developer. On top of that, I often teach Ruby, Rails and Javascript at a coding bootcamp called LeWagon.

It's been already two bootcamps in a row that some students had a really tough time integrating ActionCable in their app, mostly because the official Rails docs are pretty vague and there are a lot of contradicting blog posts on the internet. Well, fear no more. With this guide I'll try to make it as easy and smooth as possible. Enjoy the read.

Quick app introduction

Much like my students, we'll create a (very) bare-bones Uber Chat application where we're going to have an Order that will connect a User and a Driver. These two, should then be able to exchange messages on the Order show page.

Rails app setup

Let's start by creating a new Rails project by running rails new uber_chat in your terminal

This will create a uber_chat directory with a shiny new Rails 6 project.

Let's now add user authentication using good ol' Devise.

This line goes into our Gemfile

# Gemfile
gem 'devise'

Let's now run bundle install to make the devise Gem available in our project. Now, we need to let devise add some boilerplate code in our project by running rails g devise:install first and rails g devise User after.

This last command will add the devise routes to our routes file and will generate a migration and model files for our users. Let's now add the Users table to our db by running rails db:migrate.

Adding drivers and orders

Let's now add two new models to our DB

rails g model driver user:references
rails g model order user:references driver:references

This will create the Driver and Order models together with the respective migrations. Let's now migrate the db with rails db:migrate and add the following to the User model.

# User.rb
has_one :driver
has_many :orders

Sweet! Now our users can have many orders and some of them, can also be drivers. Let's add some seed data so that we can actually use the application. Paste this in your seed file

# seeds.rb
puts "Resetting the db..."

User.destroy_all
Driver.destroy_all
Order.destroy_all

puts "Creating a user..."
user = User.create email: 'user@test.com', password: 'password', password_confirmation: 'password'

puts "Creating a driver"
driver_user = User.create email: 'driver@test.com', password: 'password', password_confirmation: 'password'
driver = Driver.create user: driver_user

puts "Creating an order..."
Order.create user: user, driver: driver

And now run rails db:seed

Adding the messages and the views

Let's add now a new model (and table) to the app to actually store the messages

rails g model message content:string user:references order:references
rails db:migrate

and let's add the relationship also on the User and Order models.

# User.rb
has_many :messages

# Order.rb
has_many :messages

Disclaimer #1 - here we could have gone deeper and we could have set up a more appropriate relationship to store the message author, however, because that is not the core part of this article I want to make it easier and quicker

Now we will be able to create messages written by Users scoped to a certain order. Good stuff.

Let's now add the Order index route that we'll use as our root path and the Order show route that will actually be responsible of showing the messages.

In the routes file, let's add this

# routes.rb
root to "orders#index"
resources :orders, only: %i[index show]

We can now generate the Order controller and views using rails g controller orders show index and let's make the controller look like so

class OrdersController < ApplicationController
  before_action :authenticate_user!
  def index
    @orders = current_user.orders
  end

  def show
    @order = Order.find params[:id]
  end
end

Nothing extraordinary here. We first make sure that the two pages are authentication protected (otherwise current_user.orders would give us an error) and then we grab all the orders belonging to a user in the index and the order matching the :id parameter in the show.

Now let's get the views done


<!-- orders/index.html.erb -->

<h1> Yo! These are your orders </h1>

<ul>
  <% @orders.each do |order| %>
    <li> <%= link_to "Order #{order.id}", order_path(order) %> </li>
  <% end %>
</ul>

<!-- orders/show.html.erb -->
<h1> Order #<%= @order.id%> </h1>

<h3> Messages </h3>

<div
  class="messages-box"
  data-order-id="<%= @order.id %>"
></div>

<form class="new-message-form">
  <input type="text" placeholder="Hola!" class="new-message-input">
  <input type="submit">
</form>

The index file is pretty simple. We're just displaying all the orders belonging to a user.

The show file is slightly more interesting. Here we are storing the order id as data attribute of the .messages-box div. This will come in handy in a little bit. We're also adding the form that we'll later user in order to create new messages.

Adding the API endpoint and Javascript calls

In order to fetch the messages after page load and post a new message once a user has typed it, I like to add a /api namespace to my app in order to keep things nice and tidy.

Let's add this stuff to the routes file

# routes.rb
namespace :api, defaults: { format: :json } do
  namespace :v1 do
    resources :orders do
      resources :messages, only: %i[index create]
    end
  end
end

The code above will now make it very easy to GET and POST to /api/v1/orders/:order_id/messages.

Let's now create the appropriate folders and controller with the command mkdir -p app/controllers/api/v1 && touch app/controllers/api/v1/messages_controller.rb

And add this code to the newly created MessagesController

# messages_controller.rb
module Api
  module V1
    class MessagesController < ApplicationController
      skip_before_action :verify_authenticity_token

      def index
        order = Order.find params[:order_id]
        messages = order.messages

        render json: messages
      end

      def create
        order = Order.find params[:order_id]
        message = Message.new message_params

        message.user = current_user
        message.order = order

        render json: message if message.save
      end

      private

      def message_params
        params.require(:message).permit(:content)
      end
    end    
  end
end

Disclaimer #2 - This is not an API post hence you shouldn't use this as a guide to create a robust API. In this case, for example, I'm not securing the endpoints for simplicity sake.

Now that the endpoints are ready, we can add our JavaScript code to load the messages on page load and to create new messages.

Lets run mkdir app/javascript/plugins -p && touch app/javascript/plugins/messagesPlugin.js

In this file, let's now add this stuff

//messagesPlugin.js

const fetchMessages = async () => {
  const messagesBox = document.querySelector('.messages-box')
  if (messagesBox) {
    const orderId = messagesBox.dataset.orderId

    const res = await fetch(`/api/v1/orders/${orderId}/messages`)
    const messages = await res.json()

    messages.forEach(message => addMessageToDom(message))
  }
}

const createMessage = () => {
  const messagesBox = document.querySelector('.messages-box')
  if (messagesBox) {
    const form = document.querySelector('.new-message-form')
    const input = document.querySelector('.new-message-input')
    const orderId = messagesBox.dataset.orderId

    form.addEventListener('submit', async (e) => {
      e.preventDefault()

      const res = await fetch(`/api/v1/orders/${orderId}/messages`, {
        method: 'post',
        headers: { 'Content-type': 'application/json' },
        body: JSON.stringify({
          message: {
            content: input.value
          }
        })
      })

      const message = await res.json()

      addMessageToDom(message)
    })
  }
}

const addMessageToDom = (message) => {
  const messagesBox = document.querySelector('.messages-box')
  if (messagesBox) {
    messagesBox.insertAdjacentHTML('beforeend', `<p> ${message.content} by <strong> User #${message.user_id}</strong></p>`)
  }
}

export { fetchMessages, createMessage, addMessageToDom }

Ok, there's a little more stuff to talk about here. The first fetchMessages function is simply needed to make a GET request to our API in order to show all the messages on page load.

Then, the createMessage function is needed in order to POST a new message to our API.

Finally, the AddMessageToDom function is simply needed to show the messages on the page.

Now, because we're exporting fetchMessages and createMessage, we also need to import them in our entry file packs/application.js. Let's paste this code in there

// application.js

import { fetchMessages, createMessage } from '../plugins/messagesPlugin'


document.addEventListener("turbolinks:load", function() {
  fetchMessages()
  createMessage()
})

Awesome! Now we're able to create messages directly from the application and the new messages will be displayed immediately to the page. Go have a look for yourself.

Start the server using rails s, then login using the credentials used to create the user in the seed file (user@test.com and password) and then go to the Order #1 page and try to create a message.

Just because we can see the message, that doesn't mean that the other person (the driver, for instance) will be able to do so. This is because we need to establish a communication channel between our backend and our frontend using ActionCable.

Adding ActionCable

The first thing we want to do when dealing with ActionCable is generating a new channel. This can be done using the command rails g channel chat.

This will generate a bunch of files for both the Ruby and the Javascript parts. Let's start adding some code to make it work.

In chat_channel.rb let's add this code

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from "order_#{params[:order_id]}"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end
end

Here, thanks to the interpolation of the order_id we'll "stream" a different "chat room" for each different order.

in chat_channel.js let's add this

import consumer from "./consumer"
import { addMessageToDom } from '../plugins/messagesPlugin'

const initChatChannel = () => {
  const messagesBox = document.querySelector('.messages-box')
  if (messagesBox) {
    const order = messagesBox.dataset.orderId

    consumer.subscriptions.create({
      channel: "ChatChannel",
      order_id: order
    }, {  
      connected() {
        console.log('Connected...')
      },
      received({ message }) {
        console.log('Receiving stuff...')
        addMessageToDom(message)
      }
    })
  }
}

export { initChatChannel }

Here, we're using consumer.subscriptions.create in order to create a new client that will actively listen for new messagess added to the "chat room".

You can see that the first argument of the create method is an object that will be used to establish the connection to a specific channel (ChatChannel in this case). It's also import to pass the order_id parameter in order to establish the connection to the right chat room as well (remember the params[:order_id] used in chat_channel.rb?).

The second argument, instead, is again an object that contains two methods. The connected method will simply run whenever the client gets connected to the ActionCable server. The received method, instead, is what makes the whole magic work. This method is automatically triggered whenever a new message is broadcasted on the channel that we connected our client to.

In this case, we want to grab that message and pass it as an argument to the addMessageToDom method that we're importing from the plugin we created earlier so that it can get displayed to the DOM.

Finally, we need to tell the server to broadcast a message every time a new message is created on the database. To do so, we can edit our Message model to look like so

class Message < ApplicationRecord
  belongs_to :user
  belongs_to :order

  after_create :broadcast_through_action_cable

  private

  def broadcast_through_action_cable
    ActionCable.server.broadcast("order_#{self.order.id}", message: self)
  end
end

Here, the broadcast_through_action_cable will simply broadcast the message to the right room according to the order id the message belongs to.

Let's now get rid of some (now) useless code. Go to the messagesPlugins.js and replace whatever you got in there with this

const fetchMessages = async () => {
  const messagesBox = document.querySelector('.messages-box')
  if (messagesBox) {
    const orderId = messagesBox.dataset.orderId

    const res = await fetch(`/api/v1/orders/${orderId}/messages`)
    const messages = await res.json()

    messages.forEach(message => addMessageToDom(message))
  }
}

const createMessage = () => {
  const messagesBox = document.querySelector('.messages-box')
  if (messagesBox) {
    const form = document.querySelector('.new-message-form')
    const input = document.querySelector('.new-message-input')
    const orderId = messagesBox.dataset.orderId

    form.addEventListener('submit', (e) => {
      e.preventDefault()

      fetch(`/api/v1/orders/${orderId}/messages`, {
        method: 'post',
        headers: { 'Content-type': 'application/json' },
        body: JSON.stringify({
          message: {
            content: input.value
          }
        })
      })
    })
  }
}

const addMessageToDom = (message) => {
  const messagesBox = document.querySelector('.messages-box')
  if (messagesBox) {
    messagesBox.insertAdjacentHTML('beforeend', `<p> ${message.content} by <strong> User #${message.user_id}</strong></p>`)
  }
}

export { fetchMessages, createMessage, addMessageToDom }

Here we simply removed the call to the addMessageToDom method from the createMessage method because now we're outsourcing the creation of new messages to the ActionCable receiver.

This is the result of all of this

Hope you guys found this helpful. (Contructive) Criticism is always very welcome. If you got any question, feel free to comment down below or tweet me @ilrock__. To check out the full source-code this is the GitHub link.