xuanhoa88/holler

Full-stack, Facebook Messenger-inspired peer-to-peer messaging application utilizing a Ruby on Rails backend and a React/Redux frontend.

Holler 🌸

Holler is a full-stack, Facebook Messenger-inspired, peer-to-peer messaging application utilizing a Ruby on Rails/PostgreSQL backend and a React.js/Redux frontend. Its live messaging feature is powered by WebSockets, integrated into the application using Rails ActionCable technology. Other features include real-time messaging, stickers/gifs, image uploading, etc.

This project was proposed, designed, and built within two weeks, with the following minimum viable product goals in mind:

• User Authentication (backend and frontend)
• Direct Conversations
• Group Conversations
• Live Chat
• Emojis/GIFs

The aforementioned goals were reached, however, due to the time constraint, I was not able to implement additional features I had initially wanted to. I do plan on adding more to this project at a later time. (Please see Potential Future Features.)

Demo:

Experience the live demo.

Technologies Used

• Ruby on Rails/PostgreSQL — backend
• React.js/Redux — frontend
• User Authentication — from frontend to backend, using BCrypt
• Rails ActionCable — implement WebSockets for real-time, peer-to-peer messaging
• jQuery — XHR requests
• AWS (Amazon Web Services) — image uploading
• HTML/CSS/SCSS — frontend design
• GIPHY API — stickers and gifs

Features and Functionality:

• design based on Facebook Messenger
• creating direct and/or group conversations
• communicating via real-time messages (utilizing WebSockets)
• sending stickers and gifs (courtesy of GIPHY API)
• changing the conversation name
• uploading images (via Amazon Web Services)
• other features to be implemented in the future

Implementation

WebSockets Using Rails ActionCable

When a conversation is mounted or loaded on the frontend, an ActionCable chatroom is set up based on the conversationId.

class MessageView extends React.Component {
  setUpChatroom(convId, receiveMessage) {
    const chatroom = ActionCable.createConsumer();
    chatroom.subscriptions.create({
      channel: 'ChatChannel',
      room: `chat-${convId}`,
    }, {
      connected: function() {},
      disconnected: function() {},
      received: ({ payload }) => {
        receiveMessage(payload)
      },
    });
  };
}

Once a user submits a message (or sticker/gif), a jQuery $.ajax POST request is sent to the backend, creating the message. The created message is then broadcasted back to the Redux frontend. Any user subscribed to the chatroom will be able to see the chat live update.

class MessageCreationEventBroadcastJob < ApplicationJob
  queue_as :default

  def perform(message)
    ActionCable.server.broadcast(
      ("chat-#{message.conversation_id}"),
      payload: ActiveSupport::JSON.decode(render_message(message))
    )
  end

  private

  def render_message(message)
    ApplicationController.render(
      partial: 'api/messages/action_message',
      locals: { message: message }
    )
  end
end

Sample XHR response:

{
  "message": {
    "id":45,
    "senderId":2,
    "conversationId":1,
    "body":"https://media0.giphy.com/media/jU9rKpLMLRXPO/200.gif?cid=e1bb72ff5ad1201d48622e45452710d3",
    "messageType":"Giphy",
    "timestamp":"APR 13, 2:25PM"
  },
  "messageIds": [31,32,33,34,35,36,37,38,39,40,41,42,43]
}

Depending on the messageType, a text message or img message will be rendered in the chatroom.

GIPHY APIs

Users can also send Stickers and/or GIFs for additional personalized messages (and increased cuteness level), thanks to the GIPHY's APIs. The following endpoints were used for this project:

• GIPHY Trending Endpoint
• GIPHY Search Endpoint
• Sticker Trending
• Sticker Search

Depending on if the user has typed in a search query, the jQuery $.ajax GET request would fetch data from different endpoints.

export const fetchGiphys = (query, offset) => {
  let url = (query === "") ? "trending" : "search";
  return (
    $.ajax({
      method: 'GET',
      url: `https://api.giphy.com/v1/gifs/${url}`,
      data: {
        q: query,
        limit: 5,
        offset: offset,
        api_key: "*************"
      }
    })
  );
};

Keeping Code DRY

In order to keep code DRY and avoid duplicating HTML, a single component would be shared by multiple similar components. This is the case for the login/signup session forms, as well as the expressions component (Stickers/GIFs).

Potential Future Features

• add users to existing conversations
• send images as messages (other than stickers/gifs)
• display ... bubble when someone is typing
• display message timestamp on hover
• users can react to messages
• update user image