Yabber

Simple Group Chat Application built using MEAN stack and Socket.io for Zoho Project Contest 2017.

Index

• Technology Colophon
• Installation
• Features
• Documents
• Screenshots
• Contribute
• License

Technology Colophon

• Backend -
  • Node.js
  • Framework - Express.js
  • Socket Connection - Socket.io
  • Database - MongoDB
  • ODM - Mongoose.js
  • Templating - Handlebars
  • Session Storage - Redis
  • Authetication - Passport.js with Bcrypt for encryption
  • Task Runner - Gulp
• Frontend -
  • Framework - Angular 4
  • CSS Preprocessor - SCSS
  • CSS Reset - Normalize.css
  • Angular Client Libraries -
    • angular/material
    • JQuery
    • JQuery-UI
    • angular2-notifications
    • bootstrap
    • twemoji
  • Libraries used by non-angular client pages -
    • materialize-css
    • Babel with Browserify

Installation

1. Install Node.js, MongoDB, and Redis
2. Install Angular CLI

  $ sudo npm install -g @angular/cli

3. Clone the repository

  $ git clone https://github.com/AravindVasudev/Yabber.git
  cd yabber

4. Install dependencies

  $ npm install

5. Build the angular client-side

  $ cd client
  $ npm install
  $ ng build --base-href chat
  $ cd ..

6. Start MongoDB

  $ sudo service mongod start

7. Start the application

  $ npm start

8. The application is now running on http://localhost:3000/

Features

• Group Chat
• Instant Communication using web sockets
• Image Transfer
• Secure Authetication using passport.js and bcrypt
• Parses emoji in text into image for cross browser compactibility
• Emoji Tray for easy access to emojis
• Push notification when window not in focus
• alert sound when message received
• interfaced embedded progress bar to signify image upload progress
• Right click context menu overridden for accessibility
• Image full screen on click

Bugs:

• When new group is added, the window has to be manually freshed for the update.
• App crashes if any value is left blank on new group creation.
• Group icon, dp icon is read as link instead of providing upload functionality

P.S.: This application is built within a time limit and hence the bugs.

Documents

Documents prepared during the event are linked below:

• Software Requirements Specification
• Proposed Design & Data Model

Screenshots

• Login Screen

• Signup Screen

• Chat Demo

• Context Menu

• Emoji Tray

• Progress Bar

• Push Notification

Contribute

You are always welcome to open an issue or provide a pull-request!

License

Built under MIT license.