kloudysky / strife

Discord Clone - Ruby on Rails, PostgreSQL, React, Redux, Redis, ActionCable

About Strife

Strife is synonymous with Discord and also a clone of the existing application.

Strife App

Strife is an community driven environment to connect with people or groups via messaging.

Strife Tech Stack

Backend

• Ruby on Rails
• PostgreSQL
• Redis
• ActionCable

Frontend

• JavaScript/React + Redux

Key Features

• CRUD for Servers
• Add users to servers
• CRUD for Channels
• Live messaging within Server Channels
• Create live DM's and Group DM's

Live chat is the primary feature of Strife and utilizes ActionCable - Integrated WebSockets for Rails [Action Cable](https://www.npmjs.com/package/actioncable).

ChannelChannel
def subscribed
    @channel = Channel.find_by(id: params[:id])
    stream_for @channel
  end

this.CableApp.messages = this.CableApp.cable.subscriptions.create(
      {
        channel: "ChannelChannel",
        id: this.props.channel.id,
      },
      {
        received: (message) => {
          this.getResponseMessage(message);
        },
      }
    );
  }

Action Cable creates a subscription which listens for new messages associated with the appopriate channel.

def create
    @message = Message.new(message_params)
    @channel = Channel.find(message_params['channel_id'])
    if @message.save
      ChannelChannel.broadcast_to(
        @channel,
        { json: @message.to_json(include: :author) },
      )
      render json: @message.to_json(include: :author)
    else
      render json: @message.errors.full_messages, status: 422
    end
  end

When a new message is created it broadcasts the message to the appopriate channel and for users who are subscribed to the channel they will receive the message in real time.

• Users can create, edit and add members to servers and channels.

strife's Issues

MVP Review- New account creation, login, and guest/demo login

Styling-

• Placement and size of logout button
• Faster fade-in for forms
• Padding in input fields so there is a gap between typed characters and the left edge of the input field
• Errors should be better formatted. Doesn't have to perfectly match Discord, but should not be bullet points on top of the form

Functionality-

• Needs demo login
• Logout button doesn't work
• Errors should clear when switching between forms

Initial Documentation Review

MVPs-

• Include expected timeline for each MVP.
• Production README.md will come towards the end of the project.
• The term live chat includes text messaging. This will utilize websockets which we haven't taught in this course. Expect this to take a fair amount of time and it should be a separate MVP. It is also the core functionality of your application so you may want to prioritize this relatively early on in your .
• Voice, video chat, and screen sharing will all be bonus features and should come after direct messaging, which is also a bonus feature.

Schema-

• Include associations for each table in the bullet points listed beneath each table: has_many, belongs_to, has_many through

Sample State-

• I recommend to include any modals, drop downs, etc In your ui slice of state. React and redux give us a very easy when of rendering ui components.

Back-End Routes-

• Everything looks good!

Front-End Routes-

• We only need a new front-end route when rendering a new webpage. Once we're on the /servers page, each server and channel will be rendered as components on the /servers webpage. We do not need the /servers/:id front-end route or anything more complex than that.