Instagram Clone

This is a prototype aimed at teaching developers a few fundamentals of Instagram. This is not production-ready and will not be able to scale 100M users. If you're looking for a scalable solution, I suggest looking into Phoenix Framework or an Erlang Framework.

---

Getting Started

Step 0

bundle install --full-index

---

Step 1

Create a new Rails 5.0 application with a Postgres DB.

rails _5.0.0_ new clone-instagram-rails -d postgresql

---

Step 2

Review the Gemfile to see which libraries we are using.

---

Step 3

Add this to config/application.rb. This will tell rails to autogenerate .haml files instead of the default .erb files.

  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.
    #CHANGED
    config.generators do |g|
      g.template_engine :haml
    end
  end

---

Step 4 - Convert existing .erb to .haml

Convert the existing .erb files to .haml by picking one of these commands.

Keep .erb files

rails haml:convert_erbs

Replace .erb files

rails haml:replace_erbs

---

Step 5 - Simple Form

Run this command to complete the simple_form gem install. This will connect simple_form with Bootstrap templates.

rails g simple_form:install --bootstrap

---

Step 6 - Create a Model, Controller and Views through Scaffold

Some people are really against Scaffolding but I don't agree. There's nothing wrong with instant convenience. It's no different than modern day baking. LOL.

rails g scaffold pic title:string description:text

Regarding security, don't worry, we'll add that next.

Update the database schema by running a rails migration.

rails db:migrate

Add this to config/routes.rb or at least make sure this is there.

Rails.application.routes.draw do
  resources :pics

  #CHANGED
  root "pics#index"
end

---

Step 6 - Install Devise

Install the Devise gem and follow the remaining command line instructions.

rails g devise:install

Install the views and now you will reap the .html benefits

rails g devise:views

Create a User model through Devise gem.

rails g devise User

Associate devise's User to a specific Pic.

rails g migration add_user_id_to_pics user_id:index

---

Step 7 - Style your app

Add this bootstrap stuff to app/assets/stylesheets/application.scss

@import "bootstrap-sprockets";
@import "bootstrap";

The easiest way to style your app is to vist the Twitter Bootstrap page and find an exmple you want to copy.

Once you find a template you like, go to Inspect, copy the HTML and paste it into the HTML to HAML converter.

---

Step 8 - Add Images

The most popular rails gem for adding images is paperclip.

You'll need this to render images.

brew install imagemagick

Ghostscript is important if you want to upload PDF files.

brew install gs

Then add gem paperclip and follow these Quickstart instructions.

rails g paperclip pic image

---

Step 9 - Add Liking

Follow these gem instructions.

Add this models/pic.rb.

class Pic < ActiveRecord::Base
  ...
  acts_as_votable
end

Add this to config/routes.rb

Rails.application.routes.draw do
  ...
  resources :pics do |p|
    member do
      put "like", to: "pic#upvote"
    end    
  end
end

Add this to controllers/pics_controller.rb.

class PicsController < ApplicationController
  # Add upvote as a before action that requires :set_pic
  before_action :set_pic, only: [..., :upvote, :downvote]
  
  # Restrict user behavior by only allowing for :index and :show to appear
  before_action :authenticate_user!, except: [:index, :show]

Add this to controllers/pics_controller.rb.

  # ################
  # acts_as_votable
  # ################
  #Once you update, redirect back to the show page
  def upvote
    @pic.upvote_by current_user
    redirect_to :back
  end

  def downvote
    @pic.downvote_by current_user
    redirect_to :back
  end

---

Resources

• Seed Data Examples
• Convert HTML to HAML