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

• Макс, автор канала "Эд Групп", представляет долгожданный ролик о создании копии ВКонтакте.  

• Он планирует создать полную копию ВКонтакте, урезанную до функционала, так как это займет много времени.  

• Макс призывает подписаться на канал и активно регистрироваться на его интенсивы по React и Node.  

• Макс выбирает макет ВКонтакте, который он нашел на русском сайте.  

• Он решает использовать React для создания проекта, так как это будет удобнее для него.  

• Макс инициализирует проект React и выбирает библиотеку Material UI для использования.  

• Создание нового проекта с использованием React и TypeScript.  

• Подключение библиотек и настройка проекта.  

• Реализация сообщений с использованием Socket.io.  

• Создание страницы пользователей с использованием React Router.  

• Использование Firebase для авторизации и реализации постов.  

• Создание бэк-энда с использованием Firebase.  

• Использование React, Redux, React Router, Socket.io, Firebase, Material UI.  

• Подгрузка постов и пользователей через React Query.  

• Использование React Router для роутинга на сервере и клиенте.  

• Автор рассказывает о своем обновлении системы и проблемах с микрофоном на MacBook Pro.  

• Он решает обновить систему и использовать программу QuickTime для записи видео.  

• Автор обсуждает создание копии ВКонтакте и его сложности.  

• Он планирует сделать полную копию, но с некоторыми изменениями в функционале.  

• Автор использует FireBase для реализации авторизации и создания пользователей.  

• Он также планирует использовать различные технологии и стили для создания контента.  

• Создание структуры сайта с использованием React и Material Design.  

• Создание компонентов и использование React Router для роутинга.  

• Импорт и настройка компонентов, таких как Header, Footer, и т.д.  

• Использование React Router для создания ссылок и роутинга.  

• Создание макета и отступов для сайта, используя Flexbox.  

• Создание элементов, таких как Header, Footer, и т.д., с использованием Flexbox.  

• Добавление контента и стилей для сайта, используя React Router и Material Design.  

• Создание аватара пользователя и сообщения для сайта.  

• Автор обсуждает создание макета без текста, используя картинки и бокс-элементы.  

• Он объясняет, что бокс-элемент - это обычный див с параметрами, и его нужно обернуть в бокс.  

• Автор также обсуждает использование позишен и позишен релей для позиционирования элементов.  

• Автор создает компоненты для юзер айтом и сайт бар, используя флекс-элементы.  

• Он обсуждает, что эти компоненты будут использоваться для итераций, и что они будут располагаться отдельно от других элементов.  

• Автор также создает компонент для роутера, который будет использоваться для навигации по сайту.  

• Создание роутов в React с использованием React Router и React Router Dom.  

• Обсуждение использования React Router и React Router Dom для создания роутов.  

• Реализация роутов в React с использованием React Router и React Router Dom.  

• Обсуждение использования React Router и React Router Dom для реализации роутов.  

• Проблемы с реализацией роутов в React, связанные с использованием React Router и React Router Dom.  

• Обсуждение необходимости использования готовых компонентов для реализации роутов в React.  

• Автор обсуждает стилистику и использование фреймворка Material UI для создания компонентов и стилей.  

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

• Автор создает аватар и историю, используя Material UI.  

• Он обсуждает проблемы с окружением и цветом аватара и решает их с помощью новых пипеток и настроек.  

• Автор создает меню и тестирует его работу.  

• Он решает использовать компонент для создания меню и обсуждает возможность использования Material UI для создания других компонентов.  

• В видео автор обсуждает создание меню и юзер-айди для своего проекта.  

• Он импортирует необходимые компоненты и делает итерацию для создания меню и юзер-айди.  

• Автор добавляет юзер-айди и атрибут к меню, используя юзер-айди и атрибут от линки.  

• Он также добавляет юзер-айди к аватару и нейму.  

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

• Создание нового файла с именем "edd post" и настройка его параметров.  

• Использование импута для работы с постами, но без картинок и мелодий.  

• Создание интерфейса для постов с использованием тайп скрипта.  

• Импорт интерфейса и настройка его параметров.  

• Создание интерфейса для юзеров с использованием заготовленных полей.  

• Импорт интерфейса и настройка его параметров.  

• В видео автор объясняет, как создать сет пост в Tapp Script.  

• Он начинает с создания сет поста, который будет использоваться для получения контента.  

• Затем он добавляет стейт, который будет содержать контент и сет контент.  

• Автор добавляет юзера и контент, используя сет пост.  

• Он также объясняет, как использовать преф предыдущий для получения предыдущего состояния и добавления нового.  

• Автор решает разделить создание сайта на отдельный компонент, чтобы избежать путаницы.  

• Он экспортирует юзеров и контент из сет поста и добавляет их в сайт.  

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

• Автор добавляет стейт для постов и указывает тип постов как пост сет пост.  

• Он объясняет, что это позволяет точно определить тип постов и избежать путаницы в будущем.  

• Создание нового файла и компонента для постов.  

• Использование компонента для получения постов и их обработки.  

• Добавление контента в пост, включая автора и контент.  

• Использование аватара из Google для автора.  

• Объединение контента и аватара в общий компонент.  

• Использование проверки для определения наличия изображений.  

• Инициализация компонента с дефолтным постом.  

• Улучшение дизайна компонента и исправление ошибок.  

• Автор тестирует работу постов, добавляя новые и проверяя их работу.  

• Обсуждается порядок постов и необходимость проверки работы постов.  

• Автор создает модульный файл для хедер, используя стили из текущей стилистики.  

• Обсуждаются особенности использования логотипа и поиска в хедер модуле.  

• Автор меняет стили хедер модуля, используя модульные стили.  

• Обсуждаются возможные проблемы с использованием хедер модуля и их решение.  

• Создание стиля для поиска с использованием хедера, имиджа и диф в рапер.  

• Создание бэкграунда колор и бордера для хедера.  

• Создание плейс холдера и его заливка.  

• Создание позишен абсолют и релей для поиска.  

• Реализация поиска через импут и плейс холдер.  

• Создание эффекта вскрытия при клике на поиск.  

• Создание компонента с пейджис и музеем.  

• Создание компонента с нью файлом и месседжс.  

• Создание компонента с профайлом и новостями.  

• Создание роутинга и авторизации в роутинге.  

• Добавление авторизации и авторизации в роутинг.  

• Создание формы авторизации через React Hook Forms.  

• Использование React Hook Forms для создания формы авторизации.  

• Тестирование формы авторизации в браузере.  

• Проверка работы формы авторизации в браузере.  

• Инициализация React Firebase в проекте.  

• Использование React Firebase для авторизации в проекте.  

• Автор объясняет, как использовать файербейс для создания веб-приложения.  

• Он импортирует необходимые модули и настраивает их для работы.  

• Автор переходит к авторизации и использованию модуля файербейс хукс.  

• Он объясняет, что новая версия файербейс не поддерживается, и решает использовать старую версию.  

• Автор также обсуждает, как отслеживать ошибки и выводить их в консоль.  

• В видео обсуждается использование Firebase для авторизации пользователей в приложении.  

• Упоминается использование React и Firebase для создания приложения.  

• В видео демонстрируется реализация входа в систему с использованием Firebase.  

• Обсуждаются различные методы и параметры для входа в систему.  

• В видео объясняется, как создать контекст и провайдера для использования в приложении.  

• Обсуждаются различные типы данных и их использование в контексте.  

• В видео демонстрируется, как реализовать проверку данных в контексте.  

• Обсуждаются различные способы проверки данных и их использование в контексте.  

• Создание хука для получения юзера из контекста и использование его для проверки наличия юзера.  

• Создание кнопки выхода и размещение ее в сайд баре.  

• Создание функции для проверки наличия юзера и использование ее для редиректа.  

• Добавление проверки имени юзера и отображение его в случае отсутствия.  

• Обновление страницы и проверка работы авторизации.  

• Добавление имени юзера в форму регистрации и проверка работы формы.  

• Создание авторизации с использованием email и пароля.  

• Авторизация работает, но нужно добавить сообщения и новости.  

• Создание функции для добавления постов в базу данных.  

• Использование функции для добавления постов с использованием авторизации.  

• Создание функции для вывода постов при загрузке страницы.  

• Использование провайдера для вывода постов.  

• В видео автор создает компонент для постов, используя данные из коллекции и документа.  

• Он также добавляет возможность вывода контента и авторов постов.  

• Автор реализует компонент для сообщений, используя тот же принцип, что и для постов.  

• Он добавляет возможность вывода сообщений и их авторов, а также возможность добавления новых сообщений.  

• Автор создает компонент для чата, используя готовый компонент для постов.  

• Он добавляет возможность вывода сообщений и их авторов, а также возможность добавления новых сообщений.  

• Автор обсуждает ошибки в коде и решает их.  

• Он также добавляет компоненты и стили для создания чата.  

• Автор тестирует чат и исправляет ошибки, связанные с расположением элементов и стилями.  

• Он также обсуждает, как можно улучшить дизайн и расположение элементов.  

• Автор создает сообщения и проверяет их, используя различные параметры и стили.  

• Он также обсуждает, как можно улучшить дизайн и расположение сообщений.  

• Автор обсуждает реализацию чата в проекте, включая проверку на равенство и использование флекс энд и флекс старт.  

• Он также упоминает о необходимости обновления чата при изменении текста.  

• Автор дает домашнее задание для студентов, которое включает в себя реализацию эд лодер, кастом юс юс кверри хук, ю квери хук, юзерс дб, файер бейс юзерс дб, гет гет юзер профайл бай кверри айди, профайл пейдж доступ всем, доступ пайгу, гет гет юзер профайл бай кверри айди, френдс, сайт бар, поиск, статусы, мейк диф, конверсейшн, ю кен и кэнд, ю ю кен рейс, фикс бак, виз, месседжс, ордеринг, конверсейшн фо мейк дифферен конверсейшн юзер.  

• Автор также упоминает о том, что студенты могут реализовать свои собственные идеи и функции в проекте.