- 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
| Softwares | Versions |
|---|---|
| npm | 6.4.1 |
| nodejs | 10.10.0 |
| postgres | 10.5 |
| redis-server | 4.0.3 |
-
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/seednpm run seed -
for initial run on the machine, output a build directory
build directory will output to ./server/buildnpm 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
| Softwares for Production Deployment | Versions |
|---|---|
| nginx | 1.14.0 |
| docker | 18.06.1-ce |
| docker-compose | 1.22.0 |
-
install dependencies & output production build in server
production build directory will be output to ./server/buildcd slack-clone/server npm install npm run build
-
start server application with production build locally
server will be listening to [http://localhost:3030] by defaultnpm 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 defaultdocker-compose up
-
install dependencies & output production build in client
production build directory will be output to ./client/buildcd 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 defaultnpm 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