Полная копия ВКонтакте VK за 3 часа на React + TypeScript + Firebase + Material UI

В этом крутом ролике мы сделаем полную копию VK (Вконтакте) на React + Material UI + Firebase + TypeScript.

Надеюсь Вы оцените мои старания, с Вас лайк и подписка. 🔥 150 лайков и я снимаю полную копию другого приложения

Если есть какие то советы или рекомендации по этой теме - дай знать в 💬 комментариях!

#React #VK #Firebase

Тайм коды:
00:00 - Какой дизайн я выбрал?
01:43 - Стэк технологий
04:24 - Небольшой план действий
09:14 - Важный блок для подписчиков!
14:02 - С чего начать + Тема + Шрифт
15:20 - Базовая структура файлов
16:43 - Обзор макета
17:22 - Создаем структуру
19:27 - Layout
20:54 - Подключение Material UI
22:08 - Контейнер и колонки
24:00 - Сайдбар (блок с контактами)
29:21 - Базовый роутинг
34:40 - Продолжаем сайдбар
45:17 - Сайдбар (меню)
52:36 - Мапим диалоги
55:43 - Добавление поста
01:01:10 - Пишем типы на TypeScript
01:05:16 - Добавление поста пока в useState
01:10:00 - Компонент постов
01:18:00 - Тестим добавление постов
01:22:48 - Header
01:36:40 - Каркас для всех страниц
01:39:40 - Страница авторизации
01:46:26 - Пытаемся поставить Firebase
01:50:16 - Новая версия Firebase
01:53:05 - Регистрация пользователя Firebase
01:58:26 - Вход в систему Firebase + Auth Provider
02:05:53 - Простейший хук useAuth
02:07:10 - Redirect auth page
02:08:00 - Блок авторизованного юзера
02:10:05 - Выход из системы Firebase
02:13:55 - Поле Имя для регистрации
02:16:55 - Добавление поста от авторизованного юзера
02:18:33 - Учимся выводить данные из Firebase
02:29:47 - Страница профиля
02:33:47 - Сообщения (Real Time чат)
02:50:16 - Итоги по изначальному плану
02:51:17 - Домашнее задание для Junior и Middle
02:56:35 - Большое спасибо за просмотр! С Вас лайк и подписка!

👉 Смотрите видео ДО КОНЦА, подписывайтесь на канал, ставьте 👍 и колокольчик 🔔

[revolutionmovies]

Очень крутой контент, автор молодец, вопросы только по монтажу, в некоторых моментах из-за излишних вырезанных моментов даже не понятно, что произошло, условно, если бы материал длился на час больше, но без резких скачков обусловленных монтажом, воспринимался бы лучше!

[MsBuravchik]

очень Круто, Мне реально помог в моем проекте на TypeScript

[raidenraiden]

Так сегодня стартуем 2 день занятий по видео, пока что я дошел до 1:12:45, что можно сказать, контент хороший, момент с затупами по материал конечно не очень, иногда обрезается слишком быстро, но терпимо. Сам по себе материал годный, тем более это старое видео, уверен в новых качество в разы круче, отпишу ещё комментов для продвижения как закончу, материал заслуживает больше просмотров)

[VLADNET]

У тебя будет много подписчиков, пройдет время и у тебя появится золотая кнопка!) Желаю удачи

[amenjv]

а вот в 32:45 у вас атрибут exact, который убрали в новой версии, что делать, можно ли его чем то заменить?

[alisazazhigalkina]

спасибо большое! очень полезно! сейчас как раз захотелось сделать что-то вроде чата, тоже с помощью firebase, но большинство уроков на английском. выручил!

[yakub]

урок очень хороший, но думаю стоит пересмотреть еще раз чтобы хорошо освоить материал .

[sezarohs]

Огромное спасибо, посмотрел полностью видос и потом сам реализовал похожий проект с соц. сетью, только со своими фишками. В качестве благодарности оформил подписку на 3 месяца на твоем сайте. Очень жду подобных видео в будущем, они дают большой рывок в прокачке навыков и обучении

[neilhackgamer]

Кстати, вы сказали на 27:28, что среда разработки не успевает подсказывать. Я тоже заметил у себя, что у меня тоже ide (vs code), к примеру показывает ошибку, я её устраняю, и через 5-7 сек. Происходит только обновление. Может это связано с последним обновлением vs code

[xeonc]

JSX element type 'Link' does not have any construct or call signatures. ошибка на 25:39

[user_ib_]

Отличный урок, но возник вопрос: на таймкоде 34:32 мы оборачиваем <route.component /> в <Layout>. Но проблема в том, что в react-router-dom 6+ уже нельзя написать <route.component />, а нужно пользоваться element={<route.element />, из-за чего мне просто нечего оборачивать в <Layout />. И более того, в новой версии React компонент Layout не может быть внутри элемента Route. Это как-то можно исправить без переделывания проекта целиком?

[MorjickMatvey]

Очень-очень круто было посмотреть, как ты это делаешь. По поводу размера текста в ide, под мобилки самое то, очень удобно, но и с меньшим размером тоже норм. Будет намного комфортнее смотреть и пожмечать для себя что-то новое, если ты будешь испольщовать хорошо знакомые технологии. Однозначно видос заслуживает лайка и респекта автору😁😉

[ФЭЙКА]

у меня yarn не работает хотя я скачал yarn но не работает?

[dkaygorodov]

Привет! Спасибо за видео! А подскажи почему не VKUI?

[Demimur]

Подскажите, можно вместо фаирбайс использовать обычный бд мириадб (mySCL

[yourbadapple]

Годно, как раз хотел посмотреть в сторону создания чатов и пользования firebase

[VLADNET]

Подскажи, где можно выучить реакт? А то он какой-то непонятный на первый взгляд, я собираюсь становится фронтендером

[toktobaeva-tj]

Здраствуйте я новичок и я здесь не понимаю одну вещь почему у меня этот {children} выдает ошибку, можете пожайлуста обьяснить

[LuckyStilet]

Может не знаешь, в emmet можно w75p --> width: 75%;

[данилалабужев-ыы]

Добрый день, кто-то разобрался как пушить правильно, чтобы ссобщения шли вниз а не вверх?