Hands down the best ruby gems for your rails project

Up your user interface from zero to hero

We all want an impressive rails project to put on our portfolio. Most of us try to do this by adding a bunch of different models and features but end up with a site similar to reddit, craigslist, or wikipedia.

Unless you want a minimalist and spartan project, in order to really stand out or even retain your audience, you have to also give due importance to the user experience. This can be quite challenging because the user experience depends on the user interface which can be quite difficult and time-consuming to design.

To alleviate this difficulty and facilitate this process, I have will introduce a few gems along with brief introductions and basic setup steps. Without further ado:

Toastr

Toastr is a javascript library that makes your flash messages more functional and interactive. Use this to make your notices extra crispy.

An example usage of Toastr notifications is shown on the top right of the image.

1. Go to your Gemfile
   gem 'toastr-rails'
2. Go to application.css
   app >> assets >> stylesheets >> application.css
   @import "toastr";
3. Go to application.js
   app >> assets >> javascripts >> application.js
   //=require toastr
4. Install the gem
   $ bundle install
5. Use the toastr demo page to create your desired flash message
   copy the toastr options and paste it in your application.scss
6. Go to application.html.erb
   app >> views >> layouts >> application.html.erb
   Add your custom flash notice code

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects . Use this to make your project the illest on the web.

Bootstrap has many example templates to help jumpstart your project design.

1. Go to your Gemfile
   gem 'bootstrap'
gem 'jquery-rails' (dependency)
2. Go to application.css
   app >> assets >> stylesheets >> application.css
   rename application.css to application.scss
   @import "bootstrap";
3. Go to application.js
   app >> assets >> javascripts >> application.js
   //= require jquery3
//= require popper
//= require bootstrap-sprockets
4. Install the gem
   $ bundle install
5. Use the bootstrap documentation page for examples to manipulate the page to your desired appearance

Devise

Devise is a simple, full-fledged authentication system. Use this if you want to keep your network secure and free from all the haters.

1. Go to development.rb
   config >> environments >> development.rb config.action_mailer.default_url_options = { host: ‘localhost’, port: 3000 }
2. Go to application.html.erb
   app >> views >> layouts >> application.html.erb
   Add your flash messages
3. Make your devise views for your users
   $ rails generate devise:views
$ rails generate devise User
4. Migrate your database
   $ rails db:migrate

You should see a similar model in your schema

ActiveRecord::Schema.define(version: 2019_01_22_143000) do
create_table "users", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.string "name"
    t.string "provider"
    t.string "image"
    t.string "website"
    t.string "bio"
    t.index ["email"], name: "index_users_on_email", unique: true
    t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
  end
end

Other gems to consider:
OmniAuth — lets you use other logins for authentication
Cloudinary — cloud based image manipulation

There you go! These ruby gems are indisputably the best tools to not only make your project more visually attractive but also practically feasible. Good luck!