Чат на WebSocket с нуля: React, Socket.IO и Mantine

Создаём real-time чат на WebSocket с нуля: React, Vite, TypeScript, Socket.IO и UI-библиотека Mantine.
Логин, комнаты, история сообщений, инвайт-коды и обмен сообщениями в реальном времени — всё пишем на клиенте, шаг за шагом.

В этом уроке мы с нуля собираем полноценный чат как фронтендеры: создаём проект на Vite + React + TypeScript, подключаем Mantine для интерфейса (AppShell, формы, ScrollArea, CopyButton), настраиваем Socket.IO и реализуем логин, создание комнат, подключение по инвайт-коду, загрузку истории и обмен сообщениями в реальном времени. Готовый backend уже есть — фокус на клиентской части и работе с сокетами.

🔗 Полезные ссылки:
Документация по бэку — https://ws-chat.dyuzhev.dev/docs
Mantine — https://mantine.dev
Vite — https://vite.dev
Socket.IO — https://socket.io
Node.js — https://nodejs.org
Tabler Icons — https://tabler.io/icons

📱 Соцсети:
Telegram: https://t.me/daonejuniorday
⚡️ Поддержать меня на Boosty: https://boosty.to/sovit

⏱ Таймкоды:
00:00 — Интро
00:32 — Демонстрация готового чата
01:57 — Стек проекта: Mantine, Vite, Socket.IO
03:50 — Создаём React-приложение на Vite + TypeScript
09:28 — Установка и настройка Mantine (PostCSS, MantineProvider)
13:42 — Вёрстка интерфейса: AppShell, header, navbar
15:08 — useDisclosure, бургер-меню и логотип
19:26 — Состояние логина и условный рендеринг navbar
23:36 — Форма логина: хук useForm и валидация
30:25 — Стилизация формы: Stack и центрирование
33:04 — Зачем нужны WebSocket и подключение к Socket.IO
40:14 — Логин через сокет: user:join и emitWithAck
51:18 — Запрос списка комнат и типизация (room:list)
59:47 — Создание комнаты (room:create)
1:05:50 — Подключение к комнате и история сообщений
1:10:38 — Активная комната и отрисовка сообщений
1:14:49 — Отправка сообщений (message:send)
1:21:44 — Приём сообщений в реальном времени (message:new)
1:25:25 — Invite-код и кнопка копирования (CopyButton)
1:28:30 — Форма входа в комнату по приглашению
1:32:24 — Финальная демонстрация: чат между пользователями
1:33:58 — Итоги и пожелания

#react #websocket #socketio #typescript #mantine #frontend #вебразработка #javascript #программирование

Видео Чат на WebSocket с нуля: React, Socket.IO и Mantine канала Дюжев Алексей. с 0 в IT.