Project Messenger

Tech Stack

About

• TS web messenger project. - Version 0.0.1
• TS web messenger project. React, Redux, Webpack - Version 1.1.1

Demo

"demo"

Implemented features:

• User registration, authorization
• Edit user profile info, password
• Uploading user/chat avatar
• Create chat, user search, add/remove a user to/from a chat
• Redux, RTK Query
• Axios, WebSocket
• React error boundaries
• Form validation, react-hook-form
• Resizable-Sidebar
• Docker
• CI/CD GitHub Actions
• Dark&light theme
• Tests

Links

• Figma
• Swagger

Installation

Clone the repository on your computer:

# Install dependencies
$ npm install

# Run dev mode
$ npm run dev

# Build project
$ npm run build

# Clear project
$ npm run clear

# Run eslint
$ npm run eslint

# Launch
$ npm start

Docker

docker-compose build

docker-compose up

docker-compose stop

docker system prune -a

docker push cr.yandex/${REGISTRY_ID}/messenger:latest

docker pull cr.yandex/${REGISTRY_ID}/messenger:latest

docker run cr.yandex/${REGISTRY_ID}/messenger:latest

docker run -d -p 80:3000 cr.yandex/${REGISTRY_ID}/messenger:latest

https://cloud.yandex.ru/docs/container-registry/tutorials/run-docker-on-vm#before-begin

docker exec -it container_ID_or_name /bin/bash

# on an M1 mac…

# --platform linux/amd64

NGINX

sudo apt update

sudo apt install -y nginx

sudo ufw allow 'Nginx Full'

sudo ufw allow OpenSSH

sudo ufw enable

sudo systemctl enable --now nginx

sudo nano /etc/nginx/sites-available/default

sudo nginx -t

sudo systemctl reload nginx

SSL

sudo apt update

sudo apt install -y certbot python3-certbot-nginx

sudo certbot --nginx

sudo systemctl reload nginx