ychoy / wehuddle

Real time chat application for modern teams

WeHuddle

WeHuddle is a Ruby-On-Rails, ActionCable touting, real-time chat application targeted at agile development teams. This project presented many interesting challenges, including getting ActionCable, a new Rails v5 feature, to implement websockets and render chat windows in real time. Fun stuff!

Getting Started

Clone down!

...or visit the live demo and sign in with the default login:

email: [email protected] password: 123456

Prerequisites

You need Ruby (which comes default with Mac)!

You also need to install imagemagick (v. < 7.0)

$ brew install imagemagick

Installing

Once you've cloned down the repo and installed imagemagick, in terminal...

1. Have bundler install gems/dependencies

$ bundle install

2. Create a SQL database

$ rails db:create

3. Migrate database up

$ rails db:migrate

4. Run your rails server!

$ rails s

Navigate to localhost:3000 in your browswer to begin!

Deployment

Currently deployed to Heroku @ wehuddle.herokuapp.com

Built With

• RubyOnRails - Our framework
• Bundler - Dependency management
• Carrierwave - Used to upload user avatars
• Devise - Handles authentication
• Rspec Rails - Handles testing

Versioning

We use GitHub for versioning. For our commit history, see the repo.

Wireframes

Entity Relationship Diagram

User Stories

Homepage: in the center of the page, user can select either the create an account or login button to start using We Huddle

• If the user selects "Sign Up", user creates an account
• User is prompted to enter information: first name, last name, username, email and password
• User submits the information to sign up
• User is directed to Edit Profile page
• User sees profile page with basic information filled out (first name, last name, email). On the bottom of the edit profile there is a small link to change the password and to delete the user profile
• User proceeds to edit their profile

User can type in to edit the following fields:

• First name

• Last name

• Username

• Email

• Profile Image

• Biography

• Phone Number

• After user submits the information, user is redirected to the Profile page, with changes saved.

If user selects Change Password

• User goes to an edit form with change password
• User can save new password
• User gets redirected to the user Profile page

If user selects Delete Profile

• User gets a prompt - Are you sure?

• If user confirms Delete, user gets redirected to the homepage and a notification pops up "Thank you for using We Huddle"

• User can select chat icon in the navbar to redirect to the chat page index

• User selects login

• User logins with username or email, and password

• User is redirected to the chat page index and can see two columns:

• Left column: List of chatrooms. left-bottom: Create new chatroom button

• Right column: empty if no chatroom selected. If chatroom selected, recent messages

User can see the chat icon and profile icon in the navbar (top right).

• Chat icon refreshes the chat page index
• Profile icon redirects user to the Profile page
• User can select a chatroom
• Right column will render most recent messages to the view. User can also see a people icon with a number count representing number of users active in the chatroom
• User can see a form on the bottom to type and send a message to the chatroom
• If the user sends a message
• The user will see the message in the chat window in real-time
• Other users will see the message in real-time if they are view the chat window
• If user selects the people icon in the right column, they can see the list of active users - profile image thumbnails and names.
• User can sign out
• User is redirected to homepage

Future Development

• Fix issue - get thumbnails to show up dynamically while chatting. The problem seems to lie in the asset pipeline and how it fingerprints the path, we just haven't quite worked it out.
• Fix bug - Messages are broadcast in other channels.

Authors

• Yan-Yin Choy - Developer - GitHub
• Thelma Boamah - Developer - GitHub
• Will Kaspar - Developer - GitHub

See also the list of contributors who participated in this project.

License

MIT license

Acknowledgments

• Nathan Allen and Michelle Ferreirae are great! Thanks for helping us debug. Thanks Nathan for reviewing our code.
• Luke Swanson - UX/UI Designer -LinkedIn. Thanks Luke for reviewing our UI and providing UX/UI advice.

wehuddle's Issues

Messages broadcasted in incorrect channels

Issue:

• Chats from DM pop up in other DMs, chats from DM pop up in chatrooms

How to fix:
-Integrate DM controller in Chatroom controller
-Active Channel broadcast needs to be in other controllers/views

Avatar not displaying

On refresh, you will see the default avatar
When you send a message, the avatar is broken
After you upload an image it doesn't display the image. It displays the default avatar

New accounts messages in chatrooms and DMs are not broadcasted in RT