How to Build a Twitter Clone
Decided to move this over from Evernote so it’s actually searchable for anyone who needs it!
This is the Twitter clone that I rebuilt (and mentioned in last week’s journal) after we were done with Show and Tell. Barebones, but hopefully this is helpful for anyone struggling to build their own Twitter clone.
Next up, I’m going to rebuild our e-commerce store app!
Repository at: https://github.com/kennethteh90/twitter-reclone
Heroku app at: https://twitter-reclone.herokuapp.com/
1. Tweets and Tags
Main ideas
Three models: Tweet, Tag, TweetTag
Connect using has_many, through
Two controllers: Tweets and Tags
Two resourceful routes: tweets and tags
Migrations
Models
Routes
Controllers
Views
tweets/index
tweets/_new
shared/_tweet-table
tags/index
tags/show
If you did it correctly, the app should look something like this so far:
2. Adding Users (Devise)
Main ideas
Install devise!
Optional: add username
Permit parameters
Generate views and add fields
https://github.com/plataformatec/devise
gem ‘devise’
bundle install
rails generate devise:install
rails generate devise User
Add this if you want to add your own fields (and customize the sign up form)
rails generate devise:views
When you customize your own views, you may end up adding new attributes to forms. Rails 4 moved the parameter sanitization from the model to the controller, causing Devise to handle this concern at the controller as well.
There are just three actions in Devise that allow any set of parameters to be passed down to the model, therefore requiring sanitization. Their names and default permitted parameters are:
sign_in(Devise::SessionsController#create) - Permits only the authentication keys (likeemail)sign_up(Devise::RegistrationsController#create) - Permits authentication keys pluspasswordandpassword_confirmationaccount_update(Devise::RegistrationsController#update) - Permits authentication keys pluspassword,password_confirmationandcurrent_password
In case you want to permit additional parameters (the lazy way™), you can do so using a simple before filter in your ApplicationController:
class ApplicationController < ActionController::Base
before_action :configure_permitted_parameters, if: :devise_controller?
protected
def configure_permitted_parameters
devise_parameter_sanitizer.permit(:sign_up, keys: [:username])
end
end
Add this to your controller to authenticate the pages it controls
before_action :authenticate_user!
Devise Views
Migration
Side note: maybe this is a good time to add a nav bar to log out, navigate between home page and hashtags
application.html.erb
shared/_navbar
If you did that right, this is what the homepage should look like:
3. Associating Users With Tweets
Main ideas
Associate User and Tweet models
Modify Tweet controller to add association when tweets are posted
Migration
Models
Tweet Controller (change Tweet to current_user.tweets)
View (add line that shows username)
Now it looks like this:
4. Seeing other users (a list of users and individual profile pages)
Main ideas
Add routes
Generate Users controller
Add User views
Routes
Controller
Add line to Navbar
Views
user/index
user/show
shared/_tweet-table (add the if current_user == tweet.user)
If you did it right, it should look like this now:
5. Following other users
Main ideas
Add Relationship Model
Modify User model, defining functions
Add relationship routes
Add Relationships Controller
Migration
Models
Routes
Controllers
Relationships
Tweets (change to current_user.feed)
View
users/index
users/show
Side note: You can choose to make the usernames clickable at this point
shared/_tweet-table
This is what the clone looks like now: