thtruo / minstantly

An instant chat app built with Meteor

Minstantly

This is a project inspired by Coursera's Web Application Development with Javascript and MongoDB course.

What is Minstantly?

Minstantly is an instant messaging app built with Meteor and Coursera's starter code. While it satisfies the requirements for Coursera, I made sweeping modifications to how the app feels and looks. :)

Task 1: Improve the look and feel

Adapt the templates and helper functions so that the messaging window displays users’ avatars next to their messages. Feel free to add other enhancements!

• Thank heavens for object-fit: cover in CSS to center and crop images!

Task 2: Implement data writing security

Remove the insecure package from the application and implement a Meteor method to allow the insertion of chat items in the Chats collection. Test that you cannot insert items directly any more.

Lessons Learned

Make sure methods have no explicit access to client specific variables - i.e. Session or event.

Task 3: Implement data reading security

Remove the autopublish package from the application and implement publish and subscribe for Chats. Users should only be able to retrieve chats that have their user id in either the user1Id field or the user2Id field. Test by logging in as different users and checking what you can see.

Lessons Learned

• Remember to publish the Meteor.users collection or else the homepage does not list all the Minstantly users.
• Sometimes when refreshing a chat page between two users, both will end up in a new chat session. To fix this, wait for the subscription to be ready at the route before checking for any preexisting chat sessions.
• An extension to the point above, I ran into a problem where inserting a new chat into the Chats collection failed. This is because no Chats.allow was not defined for insert on the server-side. Remember to add this in for currently logged-in users in Minstantly.
• To ensure users only retrieve chats with their userId in either user1Id or user2Id, add an extra condition in the /chat/:_id route to bring non-users back to the root.

Challenge: Implement emoticons

Can you implement emoticon functionality which allows the user to insert graphical emoticons into their message? Emoticons are small icons such as smiley faces which are typical of this kind of application.

Lessons Learned

Use the mattimo:emoticons package.

Refactored the application into a hierarchical structure.

General Learnings

When creating the chat page, I wanted to correspond the height of the chat window to the viewport height vh. While I was able to keep all the content within the height of the window, a problem I encountered was being able to scroll new divs automatically when a user enters a new message. My solution follows this stackoverflow approach. Specifically, I computed the different in offsets between the first and last message and then make the chat window scroll to that position.

Template.chat_page.rendered = function() {
  $('.js-send-chat').on('submit', function() {
    var $firstMessageOffset = $(".chat_message_row:first").offset();
    if ($firstMessageOffset) {
      var scrollOffset = $(".chat_message_row:last").offset().top -
                         $firstMessageOffset.top;
      $(".chat_page-chat_window").animate({ scrollTop: scrollOffset }, '1000');
    }
    else { // no message so no need to scroll
      return;
    }
  });
}

Deploying

As a last step, I added SSL for security purposes. I opted to do a basic deployment on meteor.com by running the command

meteor add force-ssl # for enabling SSL security
meteor deploy minstantly.meteor.com