hype

hype is a real-time messaging app built to clone the app Slack over a 2-week sprint. hype allows users to send and receive messages with other users in real time via direct messages, group chats, and channels.

Technologies

Backend: Rails/ActiveRecord/PostgreSQL
Frontend: React.js, Redux
Messaging: ActionCable / Websockets
Image Hosting: AWS S3

Features

Full-stack user authentication, backed by BCrypt
Users can send, edit, and delete messages
Inbound messages and newly created chatrooms are added to a user's interface in realtime
Unread message counts are present next to the chatroom name
Users can create, join, and leave channels or direct messages
At channel creation, users can search for available users or channels to invite

Real-time Unread Message Counts & Notifications

In order to push live updates to the end-user, I created an ActionCable subscription that listened for various actions, so that a user can see live updates without refreshing the page. When a user logs in, they are subscribed to a general purpose websocket, that allows for broadcasting of any wide-scale changes, such as creation or deletion of channels.

Receiving new inbound messages
Listening for newly created chatrooms, so that a user can automatically join and subscribe
Watching for deleted messages (in which they will disappear in realtime)

Real-time notifications and unread message counts

createSocket(chatroomId) {
        let cable;
        if (process.env.NODE_ENV !== 'production') {
            cable = Cable.createConsumer('http://localhost:3000/cable');
        } else {
            cable = Cable.createConsumer('wss://get-hype-chat.herokuapp.com/cable');
        }
        this.chats = cable.subscriptions.create(
            {   channel: 
                    'MessagesChannel',
                room: 
                    chatroomId
            },  
            { received: message => {
                    if (message.deleted){
                        this.props.removeMessage(message.id);
                        this.props.fetchChatroom(message.chatroom_id);
                    } else if (message.new_chatroom){
                        this.props.fetchChatroom(message.chatroom_id);
                        this.props.fetchUser(this.props.currentUser.id);
                    } else {
                    this.props.receiveMessage(message);
                    this.props.fetchChatroom(message.chatroom_id);
                    }},
                create: function(message) {
                    this.perform(
                        'create', { 
                        body: message.body,
                        author_id: message.author_id,
                        chatroom_id: message.chatroom_id,
                        parent_id: message.parent_id,
                        }
                    );
                    }
            }
        );

Real-time Messaging with other users

WIth ActionCable, users can direct message one another in real time. Upon login, a subscribes to a websocket for each chatroom that they're a part of, allowing for granular live messaging.

Live messaging with other users

User lookup & direct message thread creation

When adding users to a direct message thread or a chatroom, you can start tying to see other users that can join. On click, their names are added to the input box and the users you've added will all be added when the account is created.

jameshawkinsjr/hype