💬 Чат (Slack) - Учебный проект №4

Дипломный проект программы "Фронтенд-разработчик" на Hexlet

Упрощенная версия Slack-чата, демонстрирующая работу с веб-сокетами, REST API, React, Redux, роутингом, авторизацией и современными инструментами сборки.

🚀 Демо

Live версия: https://frontend-project-12-1-rnx4.onrender.com

📋 Возможности

• ✅ Регистрация и авторизация пользователей
• ✅ Создание, переименование и удаление каналов
• ✅ Отправка сообщений в реальном времени через WebSocket
• ✅ Фильтрация нецензурных слов
• ✅ Интернационализация (i18n) - поддержка русского языка
• ✅ Обработка ошибок через Rollbar
• ✅ Адаптивный дизайн с Bootstrap

🛠 Технологический стек

Основные технологии

• React 19 - библиотека для построения пользовательских интерфейсов
• Redux Toolkit - управление состоянием приложения
• React Router - маршрутизация на клиенте
• Vite - современный сборщик фронтенда

Дополнительные библиотеки

• Socket.IO Client - обновление данных в реальном времени
• Axios - выполнение HTTP-запросов
• Formik + Yup - работа с формами и валидация
• React Bootstrap - компоненты UI
• react-i18next - интернационализация
• leo-profanity - фильтрация нецензурных слов
• react-toastify - всплывающие уведомления
• Rollbar - отслеживание ошибок

📦 Установка

# Клонировать репозиторий
git clone https://github.com/Max-climber/frontend-project-12.git
cd frontend-project-12

# Установить зависимости
make install

🏃 Запуск проекта

Режим разработки

make develop

Или вручную:

# Терминал 1: Запустить API сервер
npx @hexlet/chat-server

# Терминал 2: Запустить фронтенд
cd frontend && npm run dev

Приложение будет доступно по адресу: http://localhost:5002

Продакшен режим

# Собрать проект
make build

# Запустить сервер
make start

Приложение будет доступно по адресу: http://localhost:5001

📁 Структура проекта

frontend-project-12/
├── frontend/              # Фронтенд приложение
│   ├── src/
│   │   ├── components/   # React компоненты
│   │   ├── features/    # Redux слайсы
│   │   ├── pages/       # Страницы приложения
│   │   ├── utils/       # Утилиты
│   │   └── locales/     # Переводы
│   ├── public/          # Статические файлы
│   └── dist/            # Собранный проект
└── package.json         # Зависимости проекта

🧪 Тестирование

# Запустить линтер
cd frontend && npm run lint

# Запустить тесты Playwright
npx playwright test

📝 Основные функции

Каналы

• Создание новых каналов
• Переименование существующих каналов
• Удаление каналов
• Автоматическое переключение на канал по умолчанию при удалении текущего

Сообщения

• Отправка сообщений в каналы
• Автоматическое обновление через WebSocket
• Фильтрация нецензурных слов
• Отображение имени пользователя и времени

Авторизация

• Регистрация новых пользователей
• Вход в систему
• Сохранение токена в localStorage
• Защита маршрутов

🌐 Деплой

Проект развернут на Render:

• URL: https://frontend-project-12-1-rnx4.onrender.com
• Платформа: Render Free Tier
• Автоматический деплой: при пуше в main ветку

👨‍💻 Автор

Проект выполнен в рамках обучения на Hexlet

📄 Лицензия

ISC

---

_{Сделано с ❤️ для изучения современной фронтенд-разработки}