Последние новости: Свежий coursehunters.club

Создайте 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

Твоя оценка

6 0
Следи за последними обновлениями и новостями в нашем coursehunters.club, или вступай в наш канал telegram.

Комментарии

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

04-09-2017 ru 10 уроков
swiftbook Firebase: Наше первое приложение
В этом курсе мы построим свое маленькое TODO приложение на swift, в каком пользователь зарегистрировавшись, сможет добавлять и удалять свои заметки или задачи. Firebase мы будем использовать для аутентификация пользователя (Firebase Authentication) а также будем хранить и обновлять все задачи пользователя с Firebase Realtime Database.
Duration 01:53:04
7 0
18-07-2018 en 41 урок
udemy Full-Stack Firebase
Firebase давно популярен для создания быстрых прототипов и минимально жизнеспособных продуктов. Google купил Firebase в октябре 2014 года и расширил платформу до достойного сервиса.Full-Stack Firebase учит, как использовать Firebase для быстрого создания веб-приложений, которые автоматически масштабируются от вашего первого до вашего миллионного пользователя. Не используйте Firebase для своего прототипа! Возьмите его в продакшн !!!
Duration 02:38:36
6 2
en 383 урока
udemy React 16+ - The Complete Guide (incl. Redux & React Router 4)
Погрузитесь и изучите React.js с нуля! Изучите Reactjs, Redux, React Routing, Animations, Основы Next.js и многое другое! Изучите React или погрузитесь в него глубже. Изучайте теорию, решайте задания, практикуйте в демонстрационных проектах и создавайте одно большое приложение, которое улучшается на протяжении всего курса: Burger Builder!
Duration 32:06:03
108 3
09-10-2018 ru 97 уроков
udemy React + Redux - Профессиональная Разработка
Практическая разработка коммерческих React приложений. Чтобы сделать этот курс максимально полезным, мне очень важно знать мнение первых учеников. А это невозможно сделать, не поделившись готовыми уроками уже сейчас. Этот курс снят на 70% (это означает, что несколько последних глав ещё не добавлены в курс).
Duration 12:28:42
164 2
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
4 1
10-07-2018 en 76 уроков
udemy Full-Stack React with GraphQL and Apollo Boost
Создавайте и развертывайте приложение с React и GraphQL с нуля с помощью Apollo Boost, Express и MongoDB.Этот курс предназначен для всех, кто хочет начать создавать приложения с помощью React и GraphQL! В этом курсе мы создадим приложение "рецептов" с нуля с полной аутентификацией (signup, signin, signout), а также с возможностью создавать, просматривать, искать, сохранять и удалять рецепты.Построение этого проекта даст вам навыки для...
Duration 06:52:36
13 0
ru
[Alex Banks, Eve Porcello] Functional Web Development with React and Redux
Если вы хотите научиться создавать эффективные пользовательские интерфейсы с помощью React, это ваша книга. Авторы Alex Banks и Eve Porcello показывают вам, как создавать пользовательские интерфейсы с помощью этой небольшой библиотеки JavaScript, которая может ловко отображать изменения данных на крупномасштабных веб-сайтах с данными без перезагрузки страниц. По пути вы узнаете, как работать с функциональным программированием и последними...
Duration 00:00:00
44 2
en 65 уроков
Нет лучшей стратегии для изучения новой технологии, кроме создания собственной версии. В этом курсе мы доведем это до крайности. Сначала вы начнете с создания своего собственного Redux. Затем, как только вы поймете ins и outs Redux, вы посмотрите, как подключить этот интерфейс к пользовательскому интерфейсу JavaScript. Затем вы увидите, как React и Redux работают вместе, заменяя свой интерфейс с помощью React. После этого мы рассмотрим проблемы...
Duration 06:56:47
24 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
22 0

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

Laravel - Узнайте, как создавать диаграммы с Vue.js и Laravel

Laravel - Узнайте, как создавать диаграммы с Vue.js и Laravel

en
На этом коротком курсе студенты научатся использовать VUE.js с Laravel для создания пользовательских диаграмм (чартов) для отображения данных. Студенты также научатся отправлять и получать запросы через VUE на бэкэнд (PHP), где они могут его обработать. Это отличный курс для тех, кто хочет...
The Essential Android O Developer Course (Java)

The Essential Android O Developer Course (Java)

en
Узнайте все подробно о том, как писать приложения для Android O с помощью Java. Студенты научатся программировать мобильные приложения с использованием языка программирования Java на платформе Android. Это включает в себя такие темы, как: жизненный цикл Android, ресурсы Android, дизайн...
Android Java Мастер-класс - станьте разработчиком приложений

Android Java Мастер-класс - станьте разработчиком приложений

en
Улучшите свои карьерные возможности, изучив разработку приложений для Android. Изучите Android Studio и создайте свое первое приложение сегодня. На Android приходится 81,7% всех проданных смартфонов, но не все упакованы самой последней Android Nougat. Это вас не волнует, потому что после...
Laravel Eloquent: Экспертный уровень

Laravel Eloquent: Экспертный уровень

en
После этого курса вы станете экспертом в создании отношений, эффективном анализе данных и в использовании малоизвестных функций Eloquent. Eloquent отлично подходит для операций с базами данных, но на протяжении многих лет я заметил, что это самая популярная тема для вопросов на Twitter или...
Изучите JMETER c нуля - (Performance + Load)

Изучите JMETER c нуля - (Performance + Load)

en
Лекции по Jmeter, в которых объясняется нагрузочное тестирование с реальными примерами, включая поддержку material и query. Курс разработан таким образом, что пользователь может начинать все с самого нуля без каких-либо предварительных знаний о Jmeter или Performance...
iOS 12 и Swift 4.2 для начинающих: 200+ практических туториалов

iOS 12 и Swift 4.2 для начинающих: 200+ практических туториалов

en
Изучайте iOS 12 и Swift 4.2, используя курс высочайшего качества по разработке приложений. Автоматическая компоновка, Core Data, анимация и многое другое! Если вы всегда мечтали создать свои собственные приложения для iPhone и iPad, то это курс для вас. Этот курс является исчерпывающим...
chat
logo