Demo

• Live Site Demo
• Video Demo

Objectives

• User Stories
• Future Expansions

Tech Stack

System Architecture Diagram

• Client Diagram
• Server Diagram

Getting Started

• Prerequisites
• Server Development Environment
• Client Development Environment

Testing

Production Deployment

• Prerequisites
• Server Production Deployment
• Client Production Deployment

Author

License

Acknowledgments

Link

• single page application with React and its ecosystem
• Flexbox and CSS Grid for UI layout
• User authentications with sessions and OAuth2
• Real time messaging and file sharing
• cache SQL queries and static files for optimized performance
• loading balancing for scalability
• Containerized with Docker

• users can register and log in to their account
• users can edit his/her profile info, including profile image & password
• users can create team
• teams description can be edited only by admin
• users can invite people to join their team
• users can create channel inside his/her team
• channels can be public or private for invited members only
• channels description can be edited by channel members
• users can create direct message or group message with other team members
• users can send real time message within channels or direct message
• users can share images, audio or text files to other users

• Splitting different functionalities into its own services to maximize resource allocations
• implemented more features in WebSocket instead of REST, similiar to Slack's implementation
• Implements more test coverage
• Optimization
  • More advanced webpack config
  • Prerendering

• React ∙ React-Router
  • component based single page application
• Redux ∙ Redux-Thunk ∙ Reselect
  • client side data management
• SCSS ∙ Semantic UI
  • Styling
• Node.js ∙ Express ∙ TypeScript
  • web server & services in service oriented architecure
• RESTful API ∙ Socket.io
  • HTTP & WebSocket implementations
• Redis
  • session store, cache SQL query results
• Postgres ∙ Sequelize
  • persisted database
• Nginx
  • load balancer, reverse proxy, caching static file
• Docker
  • containerization

!important .env file is required for setting up environment variables for this project
an example of .env file client is using by default is located at ./client/.env
an example of .env file server is using by default is located at ./server/.env

• postgres client for Nodejs need to be installed globally

  npm install pg -global
  

• we are using default value for redis's environment variables in this application, modify accordingly to your environment in .env file

• postgres database needs to be setup first
  Postgres configuration is stored in .env file, modifiy .env variables for your own environment

• install Slack-Clone server's dependencies

  cd slack-clone/server
  npm install
  

• optional: populate/reset Postgres database with initial seed data
  seed configuration & schema is in dir ./server/seed

  npm run seed
  

• for initial run on the machine, output a build directory
  build directory will output to ./server/build

  npm run build
  

• start application in server
  server will be listening to [http://localhost:3030]

  npm start
  

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

  cd slack-clone/client
  npm install
  npm start
  

• Redux data flow are covered in the tests including actions, reducers, selectors

  cd slack-clone/client
  npm install
  npm run test
  

• install dependencies & output production build in server
  production build directory will be output to ./server/build

  cd slack-clone/server
  npm install
  npm run build
  

• start server application with production build locally
  server will be listening to [http://localhost:3030] by default

  npm run serve
  

• !important: client API url's port is set to 80 by default in its production build
  change server port from 3030 to 80 in server's .env file

• build the Docker image as "slack-clone" with Dockerfile using the server's production build Docker build file is located at ./server/Dockerfile

  sudo docker build -t slack-clone .

• start server application as Docker container locally using docker-compose
  docker-compose file is located at ./server/docker-compose.yml server will be listening to [http://localhost:80] by default

  docker-compose up

• install dependencies & output production build in client
  production build directory will be output to ./client/build

  cd slack-clone/client
  npm install
  npm run build
  

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

  npm i -g serve
  npm run serve
  

• Yu Chiu

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

• Project inspired by Ben Awad's Slack Clone.

• key differences are the followings:

  • Restructure Client and Server code base from ground zero
  • Use Redux as state management instead of Apollo
  • Use sessions and OAuth2 intead of JWT for authentications
  • Use RESTful and Socket.io instead of GraphQL and Redis Pub Sub for data transmission
  • Use TypeScript in Server instead of ES6 JavaScript
  • modified database schema for better performance
  • expanded functionalities including uploading profile image, sidebars, profile editing and so on