Исходный код: https://topmate.io/kishansheth/1076639
Привет, ребята! В этом видео мы создадим полнофункциональное адаптивное чат-приложение, использующее сокеты для общения в реальном времени. Мы также сможем создавать группы и загружать файлы и скачивать файлы. Для создания этого приложения мы использовали React, Node.js, Express, MongoDB, Socket.io, Zustand и многие другие замечательные технологии. В конце мы также развернем приложение MERN на Hostinger.
Дискорд по любым проблемам/ошибкам/багам: https://discord.com/invite/gr3JYgUFzQ
Контактное лицо по вопросам сотрудничества/фриланса/проектов: [электронная почта защищена]
Ресурсы и ссылки:
————————————————— ——————————
Ресурсы: https://drive.google.com/file/d/1_rre9UqQq_iQyoKjpTSslxBF3licSS7s/view?uspdrive_link.
Компонент multiselect.jsx: https://gist.github.com/koolkishan/b186b8eab5dbbaee383fd8f79f25eca9
Логотип: https://gist.github.com/koolkishan/8b590127ab27e3bdea1f39649f3ee8e9
Следуйте за мной здесь:
————————————————— ——————————
Присоединяйтесь к нашему сообществу Discord — https://discord.com/invite/gr3JYgUFzQ.
Следуйте за мной в Твиттере — https://twitter.com/thekishansheth
️ Следуйте за мной в Instagram — https://www.instagram.com/thekishansheth/
Следуйте за мной в LinkedIn — https://www.linkedin.com/in/koolkishan/
ХОТИТЕ ПОДДЕРЖИТЬ КАНАЛ?
————————————————— ——————————
https://buymeacoffee.com/koolkishansheth
Возможности приложения:
————————————————— ——————————
Фронтенд: создан на React ️
Компоненты пользовательского интерфейса: ShadCN
Стиль: CSS попутного ветра
Отзывчивость: полностью адаптивный дизайн
Аутентификация: токены JWT
Обработка файлов: Multer для хранения файлов и изображений
Загрузка файла: простая загрузка файлов
Обмен сообщениями в реальном времени: сокеты для мгновенной связи
Поддержка чата: групповые чаты и личные сообщения
Веселые разговоры: поддержка Emoji
Бэкэнд: Node.js и Express ️
База данных: MongoDB для эффективного хранения данных ️
Управление состоянием: Zustand для плавного управления состоянием
Вызовы API: Axios для плавного взаимодействия API
Качество кода: структурированный и поддерживаемый код
️ Временные метки
————————————————— ——————————
00:00 Демо
05:29 Хостингер
07:47 Настройка среды
20:00 Настройка маршрутизации
23:50 Пользовательский интерфейс аутентификации
45:40 Настройка сервера
01:02:40 Модель аутентификации
01:09:05 Интеграция аутентификации
01:43:30 Настройка Зустанда
01:49:10 Проверка токена JWT и промежуточное ПО
02:07:56 Интерфейс профиля
02:30:22 API профиля
02:42:10 Изображение профиля
03:11:30 Макет чата
03:15:40 Пустой экран чата
03:24:40 Контейнер контактов
03:28:50 Контейнер чата
03:54:55 Компонент «Информация о профиле»
04:05:00 Выход
04:10:25 Модальное окно личных сообщений
04:22:10 Поиск контактов
04:41:50 Контактная информация
04:52:00 Бэкэнд настройки сокетов
04:59:10 Настройка сокетов
05:05:00 Схема сообщения
05:09:40 Отправка/получение сообщения
05:41:10 Получить все сообщения
05:49:50 Получение контактов пользователя
06:15:10 Отправка/получение файлов
06:35:30 Загрузка файлов программно
06:39:25 Загрузка изображения
06:45:15 Интерфейс загрузки/загрузки файлов
06:56:08 API получения всех контактов
06:59:30 Создание модального интерфейса канала
07:12:03 Модель канала
07:16:52 Создание API канала
07:29:38 Получить каналы пользователей
07:37:15 Отправка/получение сообщения канала
08:02:40 Отправка/получение файлов каналов
08:04:30 Получение сообщений канала
08:18:30 Развертывание
Пожалуйста, воспользуйтесь возможностью подключиться и поделиться этим видео со своими друзьями и семьей, если вы считаете его полезным.
No Comments