Проект представляет из себя простой мессенджер, предоставляющий основные возможности - отправка сообщений, фотографий, поиск пользователей и тд.
В основе лежит шаблон реакт приложения cra (Create react app).
- Typescript
- CSS
- SCSS
- React
- React-router-dom
- Formik
- Redux
- Redux-thunk
- Webpack
- Socket.io
- Node.js
- Express
- JWT (Json Web Token)
- MongoDB
- Mongoose
- Jest
- React testing library
Проект предназначен для освоения новых технологий, а в частности серверной разработки в целом, чтобы лучше понимать взаимодействие между сервером и клиентом, и само собой для практики.
Необходимо, чтобы был установлен Node.js ^14.x
Чтобы запустить проект необходимо его скачать и установить все зависимости:
-
git clone https://github.com/MaksFenek/Messanger.git -
npm install
Чтобы проект полноценно работал необходимо подключиться к MongoDB и Cloudinary. Это делается с помощью создания файла .env в папке backend таким образом:
MONGO_URI=*указываем URI от MongoDB*
Помимо этого необходимо указать ещё несколько значений в файле .env :
JWT_SECRET=*указываем любое значение для хеширования данных*
PORT=*указываем порт, на котором будет работать локальный сервер*
CLOUDINARY_NAME=*******
CLOUDINARY_API_KEY=******
CLOUDINARY_API_SECRET=********
Однако, при установки порта необходимо учитывать, что в конфигурационном файле (package.json) клинетской части установлен прокси 5000 для обращения к серверу, находящемуся на том же порту.
"proxy": "http://localhost:5000"Проект состоит из двух основных частей - сайт и сервер. Сайт находится в папку src, а сервер - backend.
Папка backend содержит основной файл server.ts и несколько других папок:
- controllers - контролеры для работы с данными.
- core - эндпоинты и сокет.
- middlewares - прослойка для проверки входящих данныхю
- models - основные модели данных (Пользователь и чат).
Папка src содержит в себе основной файл index.tsx, несколько других файлов (normilize.css, index.scss и тд.), а также вложенные папки:
- Components - все основные компоненты, не связанные с
redux store. - Containers - все компоненты, связанные с
redux store. - icons - иконки.
- Pages - несколько основных страниц сайта.
- Redux - всё, что связано с
redux. - styles - общие стили, миксины, перменные и тд.
- utils - вспомогательные утилиты для работы с данными.
Приложение предоставляет возможность регистрации своего аккаунта.
Для регистрации необходимо имя пользователя (Имя, которе будет отображаться у других пользователей), email (уникальный) и пароль.
Для авторизации в приложение необходимо ввести свой email и пароль.
При авторизации в приложение пользователь получит уникальные токен, который позволит автоматически входить в приложение без ввода данных.
На данный момент возможность поменять email и пароль отсутсвует.
В левой части экрана располагается навигационное меню, позволяющее переходить по вкладкам приложения.
На верхней части располагается текущее имя пользователя.
На данный момент меню содержит только две вкладки - Chats и Settings.
Во вкладке Chats, распологающеймся в боковом меню, при нажатии открывается список чатов пользователя.
Каждый элемент в списке содержит имя собеседника и его фотография, последнее сообщение и время отправки последнего сообщения.
После нажатия на один из доступных чатов, открывается чат с пользовтелем.
В верхней части экрана располагается имя пользователя, фотография и дата последней активности.
В средней части экрана находится непосредственно сам чат, содержащий сообщения переписки.
В нижней части экрана можно увидеть поле ввода сообщения и кнопка для отправки.
Каждое сообщение содержит в себе контент и дату отправки, а также возможно ответ на другое сообщение.
При нажатии на сообщение открывается контекстное меню, в котором находится несколько кнопок:reply (Ответ на сообщение) и edit (Редактирование сообщения).
Во вкладке Settings, распологающеймся в боковом меню, при нажатии открывается настройки.
В разделе Account можно меня настройки аккаунта, например, имя пользователя, статус, фотографию.
В разделе Options можно менять пользовательские настройки, такие как тема.