Разработка чата на ReactJS + NodeJS: вёрстка компонентов (голосовое сообщение, стикеры, аватарки)
💡 Что в этом видео?
04:00 — Доделываем компонент списка диалогов
08:55 — Делаем отдельный файл с валидациями
44:50 — Создаем компонент "аудиосообщение"
2:14:20 — Создаем компонент аватара
📢 О чём данный курс?
Как разработать свой чат на ReactJS, Redux + NodeJS, Socket.IO, MongoDB. Сделаем полноценный чат с возможностью загрузки фотографий, отправки аудиосообщений как в Telegram, VK, отправка Emoji (смайлов). Также со списком диалогов и поиска пользователей по E-Mail или имени.
⚙️Исходники:
— Frontend: https://github.com/Archakov06/react-chat-tutorial
— Backend: https://github.com/Archakov06/backend-chat-tutorial
🔧 Какие технологии используются?
Frontend:
— Redux
— Antd
— Formik
— React Router
— Socket.IO
Backend:
— NodeJS / ExpressJS
— MongoDB / Mongoose
— TypeScript / ts-node
— Socket.IO
— Cloudinary (хранение фоток и аудио в сервисе Cloudinary.com)
— JWT (авторизации)
— multer (загрузка файлов)
— nodemailer (отправки E-Mail)
— nodemon (перезагрузка сервера при изменении кода)
— validator for express
Следите за обновой, новыми курсами, статьями по JS, ReactJS и т.д. в:
— Telegram-канале: https://t.me/archakov_im
— VK: https://vk.com/archakov_im
— Личном блоге: https://archakov.im
— Моё резюме: https://moikrug.ru/archakovim
Видео Разработка чата на ReactJS + NodeJS: вёрстка компонентов (голосовое сообщение, стикеры, аватарки) канала Archakov Blog
04:00 — Доделываем компонент списка диалогов
08:55 — Делаем отдельный файл с валидациями
44:50 — Создаем компонент "аудиосообщение"
2:14:20 — Создаем компонент аватара
📢 О чём данный курс?
Как разработать свой чат на ReactJS, Redux + NodeJS, Socket.IO, MongoDB. Сделаем полноценный чат с возможностью загрузки фотографий, отправки аудиосообщений как в Telegram, VK, отправка Emoji (смайлов). Также со списком диалогов и поиска пользователей по E-Mail или имени.
⚙️Исходники:
— Frontend: https://github.com/Archakov06/react-chat-tutorial
— Backend: https://github.com/Archakov06/backend-chat-tutorial
🔧 Какие технологии используются?
Frontend:
— Redux
— Antd
— Formik
— React Router
— Socket.IO
Backend:
— NodeJS / ExpressJS
— MongoDB / Mongoose
— TypeScript / ts-node
— Socket.IO
— Cloudinary (хранение фоток и аудио в сервисе Cloudinary.com)
— JWT (авторизации)
— multer (загрузка файлов)
— nodemailer (отправки E-Mail)
— nodemon (перезагрузка сервера при изменении кода)
— validator for express
Следите за обновой, новыми курсами, статьями по JS, ReactJS и т.д. в:
— Telegram-канале: https://t.me/archakov_im
— VK: https://vk.com/archakov_im
— Личном блоге: https://archakov.im
— Моё резюме: https://moikrug.ru/archakovim
Видео Разработка чата на ReactJS + NodeJS: вёрстка компонентов (голосовое сообщение, стикеры, аватарки) канала Archakov Blog
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![Продвинутый Fullstack-курс разработки облачного хранилища на NextJS + NestJS (Middle / Senior)](https://i.ytimg.com/vi/_oR1p79t6gw/default.jpg)
![Прекрати использовать useMemo! Топ ошибок Junior/Middle/Senior React-разработчиков](https://i.ytimg.com/vi/b8fCGXT60b4/default.jpg)
![React Query за 10 минут! Быстрый курс](https://i.ytimg.com/vi/4-SOv7eTfoQ/default.jpg)
![Не делай такое с useState! Топ 5 ошибок junior React-разработчика](https://i.ytimg.com/vi/fKZoF-cqino/default.jpg)
![React Intersection Observer (scroll + lazy-load картинок)](https://i.ytimg.com/vi/a9GQFD5t6Jo/default.jpg)
![Разработай 6 проектов на ReactJS (для начинающих)](https://i.ytimg.com/vi/eS0GL73tkmw/default.jpg)
![React Native для начинающих за 2 часа [2022] ! Мобильное приложение на JavaScript](https://i.ytimg.com/vi/K-aD8ClG1FQ/default.jpg)
![Полный Full Stack курс ReactJS + NodeJS для начинающих за 4 часа! (MongoDB, Express, React, NodeJS)](https://i.ytimg.com/vi/GQ_pTmcXNrQ/default.jpg)
![#27: 🍕 React Pizza v2 — Оптимизируем сборку JS-файла. Code Splitting, Tree Shaking, Reexport](https://i.ytimg.com/vi/uEcss7s6vBc/default.jpg)
![#25: 🍕 React Pizza v2 — Оптимизируем перерисовку компонентов с помощью useCallback и React.memo](https://i.ytimg.com/vi/KvoWbHHBv88/default.jpg)
![#24: 🍕 React Pizza v2 — TypeScript + Redux Toolkit](https://i.ytimg.com/vi/cFkSoZVzngo/default.jpg)
![#22: 🍕 React Pizza v2 — Типизируем пропсы (props) и хук useRef (TypeScript)](https://i.ytimg.com/vi/7QdQc-KwWKE/default.jpg)
![#21: 🍕 React Pizza v2 — Используем TypeScript + ReactJS (практика)](https://i.ytimg.com/vi/9rA2bXWDLjw/default.jpg)
![#20: 🍕 React Pizza v2 — Что такое TypeScript и зачем он нужен?](https://i.ytimg.com/vi/9MUudEhpj2A/default.jpg)
![#18: 🍕 React Pizza v2 — Что такое ThunkAPI в RTK? Создаем селекторы](https://i.ytimg.com/vi/4mCR72ug1SE/default.jpg)
![#17: 🍕 React Pizza v2 — Асинхронные экшены в RTK (createAsyncThunk), отлавливаем ошибки](https://i.ytimg.com/vi/azf3uk4zOew/default.jpg)
![#15: 🍕 React Pizza v2 — Сохраняем параметры фильтрации в URL](https://i.ytimg.com/vi/e-sm4OOXHBc/default.jpg)
![#14: 🍕 React Pizza v2 — Оптимизируем поиск с помощью Debounce, пагинация через Redux Toolkit](https://i.ytimg.com/vi/YAsKVCNqdy4/default.jpg)
![#13: 🍕 React Pizza v2 — Изучаем хуки useSelector, useDispatch, создаем свой Slice в Redux Toolkit](https://i.ytimg.com/vi/h1Q2V2Ek0EQ/default.jpg)
![#12: 🍕 React Pizza v2 — Изучаем библиотеку Redux Toolkit](https://i.ytimg.com/vi/-pF8SDS-uSc/default.jpg)
![#11: 🍕 React Pizza v2 — Что такое контекст в React (useContext) и Props Drilling?](https://i.ytimg.com/vi/dR96e1fq6Mg/default.jpg)