/slack

Primary LanguageJavaScript

Slack Clone

Slackers is a clone of the popular app, Slack. The app makes it really simple to follow different conversations and to keep all the communication regarding a project in the same place. Slackers incorporates user authentication and login, interaction with different channels and direct messages.

1

Quick Links

Demo

Objectives

Tech Stack

Getting Started

Production Deployment

License

Demo

Live Site Demo

Link

Objectives

  • Single page application with MongoDB, Express, React, and Node.js
  • Flexbox and CSS Grid for UI layout.
  • User authentication.
  • Real time messaging.

User Stories

  • Users can register and log in to their account, JWT for authentications.
  • Users can create a channel.
  • Channels can be public or private for invited members only.
  • Channels description can be edited by channel members.
  • Users can create direct messages or group messages with other team members.
  • Users can send messages within channels or direct messages.

Future Expansions

  • Implement more features in WebSocket instead of REST, similiar to Slack's implementation.
  • Implement workspace.
  • Implement more test coverage.
  • Optimization:
    • More advance webpack config.
    • Prerendering.

Tech Stack

MERN Stack (MongoDB, Express, React, and NodeJS).

  • Express.
  • React.
    • Component based single page application.
  • Redux.
    • Client side data management.
  • Node.js
    • Web server & services in service oriented architecture.
  • MongoDB.
    • Non-relational database.
    • Mongoose (to connect and interact with MongoDB).
    • Validator (for database validations).
    • Body-parser (to parse data from requests).
  • ES6 JavaScript.
  • Authentication.
    • Passport (for authentication).
    • Passport-jwt (for JSON web tokens).
    • Jsonwebtoken (to generate the tokens).
    • Bcryptjs (Bcrypting password).

Getting Started

Client Development Environment

  • Install dependencies & start application in client.
    Application will be running on [http://localhost:3000]

    cd slack/frontend
npm install
npm start

Docker Environment

  • Needed .env file similar to .env_sample. The .env is included on the .gitignore

    cp .env_sample .env

  • Docker run

docker-compose up build

Production Deployment

Prerequisites

Tools & Versions

Softwares for Production Deployment Versions
nodemon ^2.0.2
npm 6.13.4
jsonwebtoken ^8.5.1

Server Production Deployment

  • Install dependencies & output production build in server.
    Production build directory will be output to ./slack

    cd ./slack
npm install
npm run dev

Option A. Run application on Local Machine

  • Start server application with production built locally.
    Server will be listening to [http://localhost:3000] by default.

    npm run frontend

  • !important: client API url's port is set to 3000 by default.

Client Production Deployment

  • Install dependencies & output production build in client.
    Production build directory will be output to ./slack

    cd ./slack
npm install
npm update

  • Start client application with static server locally.
    Static server will be running on [http://localhost:5000] by default

    npm run dev

Group Members and Work Breakdown

  • Feb 10
    • Frontend auth.
    • Style landing page.
    • Setting up the mongodb configuration.
  • Feb 11
    • Style landing page.
    • Implement channels.
  • Feb 12
    • Implement direct messages groups.
    • Implement messages.
  • Feb 13
    • Debug and style on direct messages and channels.
    • Implement users info to show under direct messages and channels.
  • Feb 14
    • Implement messages on channels.
    • Implement messages on direct messages groups.
  • Feb 17
    • Finish styling and debugging.
    • Deploy to Heroku.
  • Feb 18
    • Debug and refactor, style on messages.

Author

  • David Odio, Javier Ortiz, Thalia Pena, and Yenisbel Valle.

License

This project is licensed under the MIT License - see the LICENSE file for details.