Создайте Slack чат с помощью React, Redux и Firebase - Видеоуроки

Build a Slack Chat App with React, Redux, and Firebase
Duration 05:54:48
Открыть все курсы от udemy

Build a Slack Chat App with React, Redux, and Firebase - Полный список уроков

Развернуть / Свернуть
  • Урок 1. Required Tools for the Project 00:01:00
  • Урок 2. Install React / Redux Dev Tools for Google Chrome 00:02:28
  • Урок 3. Git Clone and Install Dependencies 00:01:45
  • Урок 4. Organize Project, Create Routes 00:04:20
  • Урок 5. Setup Firebase 00:03:40
  • Урок 6. Create Register Form 00:05:37
  • Урок 7. Register User with Email and Password 00:06:08
  • Урок 8. Form Validation for Register Form 00:07:09
  • Урок 9. Clear Errors upon Registration, Show Loading State 00:05:33
  • Урок 10. Add Name and Avatar to Users, Add New Users to Database 00:07:20
  • Урок 11. Create Login Form and Functionality 00:04:11
  • Урок 12. onAuthStateChanged to Listen for Login/Register 00:02:59
  • Урок 13. Set up Redux to Make User Data Available on Global State 00:08:50
  • Урок 14. Add Spinner Component for Loading State 00:03:29
  • Урок 15. Scaffold App Components 00:04:20
  • Урок 16. App Header / UserPanel Dropdown 00:06:06
  • Урок 17. Add Signout Functionality, Clear User Action 00:04:05
  • Урок 18. Passing Redux State via Props 00:07:05
  • Урок 19. Add Avatar to User Dropdown 00:01:20
  • Урок 20. Add Channels Component 00:03:00
  • Урок 21. Create Modal for Adding Channels 00:05:34
  • Урок 22. Create Channels Collection, Add First Channel to Database 00:06:46
  • Урок 23. Display Channels with child_added Listener 00:03:23
  • Урок 24. Put Channel on Global State, Add channel_reducer 00:05:22
  • Урок 25. Set First Channel on Page Load, Show Active Channel 00:04:20
  • Урок 26. Remove Listeners with componentWillUnmount 00:00:52
  • Урок 27. Scaffold ColorPanel / Message Components 00:08:13
  • Урок 28. Create Messages Collection, Add First Message to Database 00:11:21
  • Урок 29. Controlled Input to Clear Message, Disable Button on Loading State 00:01:12
  • Урок 30. Display Messages, Create Message Component 00:07:24
  • Урок 31. Create File Modal to Upload File 00:05:20
  • Урок 32. Put Media File in State, Add Mimetype Validation 00:05:51
  • Урок 33. Upload Image File, Post Image Message 00:09:16
  • Урок 34. ProgressBar Component to Represent Image Upload 00:03:47
  • Урок 35. Options for Displaying ProgressBar 00:03:51
  • Урок 36. Add Channel Title / Users Count to Messages Header 00:05:12
  • Урок 37. Add Ability to Search Messages 00:07:20
  • Урок 38. Create DirectMessages Component 00:03:02
  • Урок 39. Add Users to DirectMessages Component, Show If Online/Offline 00:08:35
  • Урок 40. Put DirectMessage Channel Data in Global State, Set as Private Channels 00:05:35
  • Урок 41. Functionality to Add Messages / Images to Private Channels 00:07:09
  • Урок 42. Display Active DirectMessage Channel 00:01:34
  • Урок 43. Add Notifications to Public Channel 00:09:36
  • Урок 44. Add Starred Component to Hold Starred (Favorited) Channels 00:03:46
  • Урок 45. Update 'Starred' Property for User Data Upon Starring Channel 00:09:12
  • Урок 46. Display Starred Channels in Starred Component 00:04:09
  • Урок 47. Scaffold MetaPanel Component 00:05:41
  • Урок 48. Display Channel Info in MetaPanel 00:03:31
  • Урок 49. Display Top Posters for each Channel in MetaPanel 00:10:37
  • Урок 50. Add Color Picker Modal to ColorPanel 00:04:30
  • Урок 51. Attach Chosen Colors to User Data 00:07:58
  • Урок 52. Display Saved User Colors as Icons, Change App Colors on Click 00:11:25
  • Урок 53. Create Change Avatar Modal 00:04:12
  • Урок 54. Crop Uploaded Image with AvatarEditor 00:06:22
  • Урок 55. Upload Cropped Image to Firebase, Put on User Profile 00:06:50
  • Урок 56. Add Typing Collection to Track When Other Users Typing 00:03:57
  • Урок 57. Add Typing Component / Animation, Display in Messages 00:04:01
  • Урок 58. Add Typing Listeners to See When Other Users Typing 00:07:07
  • Урок 59. Emoji Picker to Add Emojis to Messages 00:06:52
  • Урок 60. Automatic Scroll to Bottom upon New Message 00:03:00
  • Урок 61. Show Message Skeleton when Messages Loading 00:06:34
  • Урок 62. Create Key Combo Shortcuts to Send Messages 00:01:27
  • Урок 63. Remove Listeners upon Component Unmount 00:06:40
  • Урок 64. Write Firebase Storage Rules for Media Files 00:06:01
  • Урок 65. Write Database Rules for App Data 00:06:51
  • Урок 66. Deploy our App with Firebase Tools 00:03:05

Создайте полное приложение чата с полным стеком с начала и до конца с помощью React, Redux, Firebase 5 и Semantic UI React. Заинтересованы в создании впечатляющих приложений с полным стеком с помощью React, Redux и Firebase? Это курс для вас!

Вот что мы рассмотрим:

  • Создание полного приложения Slack chat с помощью React, Redux и Firebase 5 с нуля
  • Отправка и получение сообщений мгновенно с помощью базы данных Firebase
  • Загрузка и отображение изображений с использованием Firebase Storage
  • Уведомления для отображения новых сообщений в других каналах
  • Отправка прямых сообщений другим пользователям в нашем чате
  • Отслеживание / показ, когда пользователи находятся в режиме онлайн / офлайн
  • Поиск сообщений в пределах созданных каналов
  • Пользовательские анимации, чтобы увидеть, когда другие пользователи вводят один и тот же канал
  • Создание, обрезка и загрузка пользовательских аватаров
  • Возможность любимых / непривлекательных общественных каналов
  • Добавьте emojis в наши сообщения с компонентом Emoji Picker
  • Аутентификация пользователя с помощью Firebase
  • Проверка формы для наших форм входа и регистрации
  • Управление состоянием с помощью Redux
  • Создание потрясающих пользовательских интерфейсов с помощью Semantic UI React
  • Основные возможности React Router 4 (компонент Switch, withRouter HOC, объект истории)
  • Тонны работы с ES6 / 7
  • Полезные инструменты для браузера, такие как React / Redux Dev Tools
  • Защита нашего приложения с помощью правил Firebase
  • Развертывание нашего чат-приложения в Интернете с помощью Firebase Tools
  • Горячие клавиши для быстрой отправки сообщений
  • И больше!

Что будет в этом курсе?

На протяжении всего этого курса мы будем создавать приложение для чата для разработчиков под названием DevChat, где пользователи смогут создавать каналы, отправлять сообщения другим пользователям по этим каналам, отправлять медиафайлы, видеть, когда набирают другие пользователи, добавлять emojis к их сообщениям, любимым и непривлекательным каналам, которые им нравятся или не нравятся, и получать уведомления о новых сообщениях по другим каналам.

Требования

  • Некоторый опыт работы с React (т.е. построили пару проектов с React Create App)
  • Предварительное знание функций ES6

Твоя оценка

28 2
Следи за последними обновлениями и новостями в нашем coursehunter-club.net (Ex coursehunters.club), или вступай в наш канал telegram.

Комментарии

Похожие курсы

04-09-2017 ru 10 уроков
swiftbook Firebase: Наше первое приложение
В этом курсе мы построим свое маленькое TODO приложение на swift, в каком пользователь зарегистрировавшись, сможет добавлять и удалять свои заметки или задачи. Firebase мы будем использовать для аутентификация пользователя (Firebase Authentication) а также будем хранить и обновлять все задачи пользователя с Firebase Realtime Database.
Duration 01:53:04
9 0
18-07-2018 en 41 урок
udemy Full-Stack Firebase
Firebase давно популярен для создания быстрых прототипов и минимально жизнеспособных продуктов. Google купил Firebase в октябре 2014 года и расширил платформу до достойного сервиса.Full-Stack Firebase учит, как использовать Firebase для быстрого создания веб-приложений, которые автоматически масштабируются от вашего первого до вашего миллионного пользователя. Не используйте Firebase для своего прототипа! Возьмите его в продакшн !!!
Duration 02:38:36
8 4
20-12-2018 en 448 уроков
udemy React 16.7 - The Complete Guide (incl. React Router & Redux)
Погрузитесь и изучите React.js с нуля! Изучите Reactjs, Redux, React Routing, Animations, Основы Next.js и многое другое! Изучите React или погрузитесь в него глубже. Изучайте теорию, решайте задания, практикуйте в демонстрационных проектах и создавайте одно большое приложение, которое улучшается на протяжении всего курса: Burger Builder!
Duration 37:49:13
140 3
09-10-2018 ru 143 урока
udemy React + Redux - Профессиональная Разработка
Практическая разработка коммерческих React приложений. Чтобы сделать этот курс максимально полезным, мне очень важно знать мнение первых учеников. А это невозможно сделать, не поделившись готовыми уроками уже сейчас. Этот курс снят на 70% (это означает, что несколько последних глав ещё не добавлены в курс).
Duration 18:11:32
774 20
09-10-2018 en 155 уроков
udemy Master Full-Stack Web Development | Node, SQL, React, & More
Создайте проект fullstack с помощью Node.js, PostgreSQL, SQL, React, Redux! API, аутентификация и многое другое!Это тот курс, который вам нужен, прежде чем стать инженером. Это тот курс, который был мне нужен, прежде чем я стал инженером-программистом, работающим в центре города в Сан-Франциско. Он преподает понятия, которые я применяю на практике каждый день. Крайне важно понять весь полный стек.
Duration 18:36:51
12 2
10-07-2018 en 77 уроков
udemy Full-Stack React with GraphQL and Apollo Boost
Создавайте и развертывайте приложение с React и GraphQL с нуля с помощью Apollo Boost, Express и MongoDB.Этот курс предназначен для всех, кто хочет начать создавать приложения с помощью React и GraphQL! В этом курсе мы создадим приложение "рецептов" с нуля с полной аутентификацией (signup, signin, signout), а также с возможностью создавать, просматривать, искать, сохранять и удалять рецепты.Построение этого проекта даст вам навыки для...
Duration 06:56:34
16 0
30-11--0001 ru
[Alex Banks, Eve Porcello] Functional Web Development with React and Redux
Если вы хотите научиться создавать эффективные пользовательские интерфейсы с помощью React, это ваша книга. Авторы Alex Banks и Eve Porcello показывают вам, как создавать пользовательские интерфейсы с помощью этой небольшой библиотеки JavaScript, которая может ловко отображать изменения данных на крупномасштабных веб-сайтах с данными без перезагрузки страниц. По пути вы узнаете, как работать с функциональным программированием и последними...
Duration 00:00:00
61 2
30-11--0001 en 65 уроков
Нет лучшей стратегии для изучения новой технологии, кроме создания собственной версии. В этом курсе мы доведем это до крайности. Сначала вы начнете с создания своего собственного Redux. Затем, как только вы поймете ins и outs Redux, вы посмотрите, как подключить этот интерфейс к пользовательскому интерфейсу JavaScript. Затем вы увидите, как React и Redux работают вместе, заменяя свой интерфейс с помощью React. После этого мы рассмотрим проблемы...
Duration 06:56:47
33 0
05-05-2018 en 248 уроков
udemy Build an app with React, Redux and Firestore from scratch
Узнайте, как создать веб-приложение с помощью React, Redux и Firestore с нуля до развертывания. Вы хотите изучить React и Redux в контексте построения полного приложения? Вы хотите узнать о Firestore, новой базе данных от Google, которая предоставляет «живые данные» для нашего приложения? Вы тип ученика, который больше всего зарабатывает на создании приложения, а не смотрит на бесконечные слайды о том, как что-то должно...
Duration 24:31:30
31 0
22-10-2018 ru 35 уроков
doge.codes Онлайн интенсив по React
За 6 недель ты изучишь самую востребованную библиотеку для веба. Напишешь реальный проект и поймешь весь цикл разработки современного фронтенд приложения!
Duration 09:23:42
19 7
12-09-2018 en 113 уроков
udemy Learn React & Redux: From Beginner To Paid Professional
Станьте хорошим разработчиком React и Redux менее чем за 30 дней. Этот подробный и всесторонний курс научит вас всему, что вам нужно знать о React и Redux, до такой степени, что вы сможете написать себе веб-приложение с нуля. Эксперт разработчик React и Redux проведет вас через учебный процесс, чтобы вы не пропустили ничего. Все еще не убеждены? Читайте дальше, чтобы понять, почему он для вас.
Duration 10:43:11
8 2
13-12-2018 en 64 урока
frontendmasters Firebase with React, v2
Иногда у вас есть отличная идея для приложения и вы хотите как можно быстрее представить его миру. Лучше потратить время на работу над тем, что делает приложение особенным, чем на настройку и защиту серверов. Firebase позволяет вам получить критически важные - и ужасно утомительные для реализации - такие компоненты, как аутентификация, хранилище файлов, облачные функции и базу данных в реальном времени, чтобы вы могли быстро перейти к облачной...
Duration 04:48:10
9 0

Последнее добавленное

Введение в Python разработку

Введение в Python разработку

en
Этот курс предназначен для обучения программированию с использованием Python. Мы рассмотрим строительные блоки языка, основы программирования, как использовать стандартную библиотеку, сторонние пакеты и как создавать проекты Python. В конце концов, вы должны понимать, как программировать.
Профессиональный облачный разработчик Google Cloud Certified

Профессиональный облачный разработчик Google Cloud Certified

en
Этот курс подготовит вас к сертификации Google Professional Cloud Developer, и все разделы основаны на общих целях, которые Google опубликовал для подготовки к экзамену. Мы также включили подробные пошаговые руководства и практические занятия, которые помогут закрепить концепции, которые мы...
Профессиональный облачный архитектор Google Cloud Certified (Ранний доступ)

Профессиональный облачный архитектор Google Cloud Certified (Ранний доступ)

en
Цель этого курса - подготовить вас к сдаче сертификации Google Cloud Certified Professional Cloud Architect certification. Мы достигнем этого с помощью широкого спектра уроков, практических демонстраций, лабораторных условий и практических вопросов в качестве многогранного подхода к подготовке.
AWS Advanced Networking Specialty

AWS Advanced Networking Specialty

en
Добро пожаловать на курс сертификации специалистов по продвинутым сетям AWS. Этот курс предназначен для того, чтобы дать вам концепции, практические занятия, практические экзамены и учебные пособия, необходимые для подготовки к экзамену. Хотя AWS больше не требует сертификации уровня Associate...
Автоматизация AWS с помощью Lambda, Python и Boto3

Автоматизация AWS с помощью Lambda, Python и Boto3

en
В этом курсе будет изучаться автоматизация AWS с использованием Lambda и Python. Мы будем использовать AWS SDK для Python, более известный как Boto3. Вы узнаете, как интегрировать Lambda со многими популярными сервисами AWS, такими как EC2, S3, SQS, DynamoDB и другими.
Постройте приложение Laravel с TDD

Постройте приложение Laravel с TDD

en
Пришло время взять методы, которые мы изучили в Laravel From Scratch, и эффективно использовать их при создании вашего первого реального приложения. Вместе мы будем использовать TDD для создания Birdboard - минимального, похожего на Basecamp, приложения для управления проектами.
Web Start

Web Start

ru
Хорошие новости - Codename 47 вернулся. Плохие новости - ничего нового он с собой не захватил. В этой части все те же уровни, для все то й же аудитории. Все надежды прошлой части развеялись в пух и прах. Если вы следили за приключениями лысого раньше, то эта часть врятли вас чем то...
Стилизация (стайлинг) NativeScript Core приложений

Стилизация (стайлинг) NativeScript Core приложений

en
Все о CSS в NativeScript Core. В этом курсе мы подробно изучим методы моделирования с помощью NativeScript Core. Мы узнаем, как использовать глобальные конструкции стилей NativeScript, а также как лучше подходить к разделению стилей на составные правила. Мы также рассмотрим использование стилей...
chat
logo