CloneInstagram

Clone-Instagram is a web application inspired by Instagram for following the other users and sharing pictures. It was built using Ruby on Rails backend with PostgreSQL database and a React/Redux frontend.

Features & Implementation

• Users can post their pictures and share it.
• Users can follow the other users and also unfollow them.
• Users can comment on the post and delete it. Also can like or unlike the post.

Flexibility

Clone-Instagram can be used in every browser including Chrome, Safari, and even in mobile browser. Users can post new pictures and can like and comment, everything using their mobile phone!

Secure Authentication

With secure authentication system, users can Sign-up or Sign-in in a secure way. Or using guest id(DemoId), everyone can explore everything without Sign-up.

Welcoming User & Suggestions

When users visit Clone-Instagram for the first time and just made their account, users can get a few suggestions for follows. Suggestions will be the most popular users by followers count.

  //users_controller.rb
  def index
    @users = User.joins(:followers)
                .select("users.*, count(follows) as follower_count")
                .group("users.id")
                .order("follower_count DESC")
                .limit(5)
    render "api/users/index"
  end

Feed

When users follow the other users, then users can check their followings posts on their feed page. Users can comment on feed page and also like or unlike the post.

  // posts_controller.rb
  def index
    @posts = Post.where(user_id: current_user.feed_ids)
    render "/api/posts/index"
  end

Project Design

Clone-Instagram was designed and built in two weeks. The original proposal included:

• React Components Hierarchy
• DB schema
• Wireframes (Wireframe example)

Technologies

Backend

• Ruby On Rails
• jBuilder
• PostgreSQL Database
• Heroku

Frontend

• React/Redux
• javascript
• SCSS/CSS
• npm
• Webpack

Other

• Cloudinary for users' profile pictures and post pictures storage.
• BCrypt for password-salting and hashing for a secure authentication system.

Additional Features

• Add Geotags using Google map API
• Search for photos by Geotags