🚀 СОЦИАЛЬНАЯ СЕТЬ + ЧАТ с нуля за 3 часа [Next.js 14 / React / Socket io / Strapi / TS]

🔥 Оформить премиум подписку - https://htmllessons.ru/premium?utm_source=youtube&utm_medium=red-group&utm_campaign=description&utm_content=social-media-2023-big-video ❤️ Отзывы тут - https://t.me/htmllessons_reviews ❄️ Зимний марафон для разработчиков (уже 3 поток) - https://max-redgroup.notion.site/RED-WINTER-ea5c0c277fb74aa6844087cba2286489 Скачать 🖥 папку проекта в нашем ТГ (закреп) - https://t.me/redgroupchannel Поддержи видео лайком, 2000 лайков 👍 и разработаю CRM систему! Новый большой проект на канале, сегодня мы научимся разрабатывать социальную сеть с нуля. А также разработка чата на socket io. На фронте будем использовать Next js React и Strapi на бэкенд. В качестве базы данных для нашей соц сети и чата будем использовать PostgreSQL. Для написания стилей будем использовать Tailwind CSS. Формы будем создавать и обрабатывать с помощью react hook form. Типизация в нашем проекте будет на TypeScript (TS). [СОЦИАЛЬНАЯ СЕТЬ + ЧАТ с нуля за 3 часа] ✨Скачать настройку VS Code - https://get.redlinks.tech/s/7hEUp1j ⚡️ Список интенсивов по подписке - https://htmllessons.ru/list-intensives?utm_source=youtube&utm_medium=red-group&utm_campaign=description&utm_content=social-media-2023-big-video ☑️ Чеклист "С нуля до Senior front-end" - https://t.me/checklist_redgroup_pay_bot VK - https://vk.com/redgroupchannel 🍥 Тема в редактор/IDE - Soft colors / Unfancy icons 🎹 Клавиатура - NuPhy Halo65 / switch Night Breeze Если есть какие то вопросы по этой теме - дай знать в 💬 комментариях! 00:00:00 - Начало 00:01:00 - Дизайн проекта 00:02:39 - Обзор Next js 14 00:04:23 - Установка проекта 00:05:40 - Структура 00:06:18 - Sidebar 00:22:00 - Список чатов 00:24:00 - Почему взяли Strapi? 00:25:00 - Установка Back-end 00:27:00 - Страница входа 00:29:00 - Создаем UI компоненты формы 00:33:00 - Форма логина 00:37:00 - Класс для запросов 00:39:00 - Продолжаем next-auth 00:47:00 - Пытаемся вывести ошибку на front-end 00:50:40 - Сгорел на Next-auth( 00:52:00 - Продолжаем делать вход в систему 00:56:06 - Второй круг эмоций 01:02:00 - Текущий юзер 01:04:30 - Список чатов 01:09:00 - Создание таблицы в БД 01:12:00 - Важно включить в Strapi! 01:13:00 - Разбираемся population 01:14:00 - Разбираемся с фильтрами 01:20:00 - План "Б", так не надо делать! 01:22:00 - Смотрим вложенность strapi 01:25:00 - Дженерики под strapi ответ 01:30:00 - Кнопка выхода 01:33:00 - Аватарка не приходит 01:37:00 - Интегрируем плагин strapi и убираем вложенность 01:38:22 - Поиск по чатам 01:42:00 - Layout для чатов 01:43:00 - Объясняю круглые скобки в новом Нексте 01:45:00 - Начало чата 01:47:00 - Поле для отправки сообщений 01:49:00 - Компонент сообщения 01:50:00 - react query + socket 01:53:00 - Получаем чат 01:55:00 - Шапка чата 02:01:00 - Отправляем сообщение через сокеты 02:11:00 - Список друзей 02:22:00 - ДЕМО 02:25:00 - Не рекомендую next-auth 02:26:00 - Мнение по Strapi ⚡️Закрытый клуб "5 утра" - https://htmllessons.ru/ext/club 💡 Личный ТГ канал - https://t.me/hardmaxchannel 🌿 Плейлист с полными курсами для новичков и не только - https://www.youtube.com/playlist?app=desktop&list=PLXkonRjGXZwxfa5YGgkENee7sQhc-Mdhd 👉 Все ссылки (+ настройка редактора) и информация обо мне - https://htmllessons.io/links 💻 Дизайн проекта - https://dribbble.com/shots/15343641-Messenger-Dark-theme #СоциальнаяСеть #React #nextjs #strapi #typescript #next14 #RedGroup