BEST

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

Name: Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]
Price: 33000 KRW

In this course, you will learn how to create a chat application using React and Firebase.

(4.7) 43 reviews

1,034 learners

John Ahn

React

Firebase

Web Application

Reviews from Early Learners

What you will learn!

React
Firebase

Creating a chat application that you can learn by following along.
Learn the key features one by one!

Hello ^ ^
In this lecture, we will learn each function from the beginning,
Let's create a chat application one page at a time.

Although this lecture does not use nodes,
It is easier to understand if you have basic knowledge of Node + React .
If you haven't learned Node + React, it's recommended that you learn the following lecture first.

Node and React: Learn by Following Series - Basic Course
Learn the basic concepts of Node + React to build real-world web apps.

💡 Course Features

John Ahn, Firebase

Support for Real-Time Streaming Protocol (RTSP)

Firebase provides authentication, database, storage, push notifications, distribution, etc.
It is a platform that automatically creates the parts needed to create most apps.
You can easily implement chat apps, taxi apps, etc. that require real-time data transmission .

We tried to include as many core features of the chat application as possible.
Because there are a lot of difficult logics involved in the making process
To help you understand better during the explanation, we use diagrams.
I tried to make the lecture progress by actually showing why this part is like this.

💻 Skills Used & What You'll Learn

^{▲ Prior knowledge of JavaScript, React, and Redux is required.}

Login/Sign up, Validation check
Real-time reflection of users registered in DM, DM message room
Create a chat room, add a description, and add/delete favorites.
Show number of message notifications
Chat in a public room
Notify when the other person enters a conversation
Chat search, skeleton effect
Show file upload percentage
Replace user image and send image messages
Application deployment
etc.

🧰 Tools covered here

I use Visual Studio Code, but you can use any editor you like.
I use a MAC but it works on Windows too.

🙋🏻‍♂️ Q&A

Q. Can non-majors also take the course?
A. Yes! This course is open to both majors and non-majors.

Recommended for
these people

Who is this course right for?

People who want to have fun coding
People interested in cutting edge technology

Need to know before starting?

JavaScript
React

Hello
This is

84,234

Learners

2,698

Reviews

2,430

Answers

4.8

Rating

Courses

안녕하세요.

즐겁게 개발하고 있는 개발자입니다.

앞으로 많은 도움을 드릴 수 있었으면 좋겠습니다.

- 따라하며 배우는 도커와 CI환경 저자
- 카카오 기업 신입 공채 FE 교수자
- 패스트캠퍼스, 구름 강사
- 현대자동차 개발 기업 교육
- 신한은행 메타버스, 코빗 타운 풀스택 개발
- 여러 공공기관 SNS 풀스택 개발

Curriculum

All

142 lectures ∙ (19hr 4min)

Course Materials:

Lecture resources

Section 1. Lecture materials

2 lectures

1. Source code material
2. Lecture Chart Materials

Section 2. Introduction and basic structure of the course

6 lectures ∙ (44min)

3. Introducing the React Firebase Slack App Video
03:03
4. Installing a React app and creating a structure
12:50
5. Setting up ESLint
04:46
6. Setting up React Router Dom
05:10
7. Setting up Redux
09:57
8. Using Firebase
08:47

Section 3. Creating the basic structure of a chat page

9 lectures ∙ (1hr 1min)

9. CSS Framework React Bootstrap
02:05
10. Creating a Membership Signup Page UI
06:53
11. Using react-hook-form
12:19
12. Create user by email in firebase
10:03
13. Adding details to a user created in Firebase
05:18
14. Save to the user database created in Firebase
07:49
15. Create a login page
04:22
16. Page navigation after authentication
05:54
17. Storing logged in user information in the Redux store
06:31

Section 4. Creating an authentication function

9 lectures ∙ (1hr 21min)

Section 5. Creating a Public Message Part

7 lectures ∙ (1hr 5min)

Section 6. Creating a Direct Message Feature

2 lectures ∙ (21min)

Section 7. Create a chat room like feature

4 lectures ∙ (36min)

Section 8. Show chat room information

2 lectures ∙ (18min)

Section 9. Implementing the Typing Function

4 lectures ∙ (19min)

Section 10. Implementing Auto Scroll and Skeleton

2 lectures ∙ (11min)

Section 11. Database, Storage Rules & Deployment

4 lectures ∙ (37min)

Section 12. [Reference] Redux

8 lectures ∙ (1hr 28min)

Section 13. From here on out, these are old lecture materials. (Deprecated)

0 lectures

Section 14. Lecture materials

5 lectures

Section 15. Lecture Introduction & Basic Structure

9 lectures ∙ (45min)

Section 16. Authentication Processing

14 lectures ∙ (1hr 37min)

Section 17. Basic structure of the chat page

12 lectures ∙ (1hr 45min)

Section 18. Public room chat

10 lectures ∙ (1hr 46min)

Section 19. DM (direct message) chat

5 lectures ∙ (46min)

Section 20. Notifications & Favorites Room

9 lectures ∙ (1hr 27min)

Section 21. Chat room information

3 lectures ∙ (29min)

Section 22. Typing...

4 lectures ∙ (36min)

Section 23. Auto Scroll & Skeleton

3 lectures ∙ (26min)

Section 24. Modifying source code with Firebase v9

9 lectures ∙ (1hr 15min)

Published:

Last updated:

Reviews

All

43 reviews

4.7

43 reviews

familyman803619
Reviews 14
∙
Average Rating 5.0
5
58% enrolled
本当にReactとnodejs、firebaseの最高の先生ではないかと思います。 ReactとReudxの基礎講座を完全に行った後に、john ahnさんが載せてくれたすべての講義だけをしっかりと熟知して、1度は徹底的につくりながら丁寧に手書きし、1度は手書きしたものを見ながら参考しながら作ってみて、1度は見ていない作り見て、最後にまた見て、それを創作で自分がいくつか作ってみると、とても早い実力向上になると見てください。ただ残念なのは、cloud functionに関する内容が込められた川の一つ作っていただければとても良いようですㅠㅠ
kbba785883
Reviews 32
∙
Average Rating 4.8
4
33% enrolled
良い講義、素晴らしい講義ということには断然異議を提起する考えはありません。しかし、最近2週間前に購読を行った私としてはこれまでアップデートとなり、多くの部分が日焼けします。リアクトーム、リダックス、ファイアベースv9バージョン講座を聞いて、ダメな部分になるまで探さなければならないので、苦しいですね。もし最新バージョンで再講座を作る考えがあれば、購読して聞くようにします。 ......
near
Reviews 25
∙
Average Rating 5.0
5
77% enrolled
ファイアベース初めてやってみるのが面白い講義でした。講義はクラスでしたがフックで一応やってみました。リアクトコンポーネントの構造化に適応されたようです。
oan63103756
Reviews 1
∙
Average Rating 5.0
5
78% enrolled
もう半分くらい聞いているのに私がいくつかの講義を聞いてみましたが確かにdiagramで授業進行されますので、はるかに目にすっぽり入ってきて私もダイアグラムで今回まとめて勉強してみると本当のこれが効率が違いますね。おかげで勉強する道具一つ新しく習得していきます。 Youtubeでfirebaseの講義を聞いてとても理解できなかったのですが、この講義のため、本当の講師がどれくらい準備をして進行しているのかを感じますね。お勧めします。
obj1227
Reviews 5
∙
Average Rating 5.0
5
76% enrolled
いつも感謝しているジョン先生！おかげで3日でreactを復習しました。

Limited time deal

$4,000.00

22%

$34.10

John Ahn's other courses

Check out other courses by the instructor!

フォローして学ぶTDD開発[2023.11アップデート]

John Ahn

このレッスンでは、テスト主導開発（TDD）を使用してNode.jsアプリケーションを作成します。

初級

TDD, Node.js, Express

フォローして学ぶTDD開発[2023.11アップデート]

John Ahn

手を動かしながら学ぶReact A to Z [19バージョン反映]

John Ahn

この講義を通して、Reactの基礎から中級までを学ぶことができます。一つの講義で概念を理解し、実習を通して、Reactに必要なほとんどの知識を一度に習得できるように構成されています。

初級

React, Next.js, TypeScript

手を動かしながら学ぶReact A to Z [19バージョン反映]

John Ahn

フォローして学ぶリアクトネイティブ基礎

John Ahn

この講義を通じてリアクトネイティブを利用してアプリケーション開発を行うことができます。

初級

React Native, React, expo

フォローして学ぶリアクトネイティブ基礎

John Ahn

フォローして学ぶリアクトテスト [2023.11アップデート]

John Ahn

このレッスンでは、リアクトアプリケーションをテストする方法を学びます。

初級

React, React Context, Web Application

フォローして学ぶリアクトテスト [2023.11アップデート]

John Ahn

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

このレッスンを通して、Reddit Webサイトを最初から1つ1つ作成することができます。

初級

Clone Coding, Node.js, React

フォローして学習するノード、リアクトシリーズ - Reddit Site Creation（NextJS）

John Ahn

真似して学ぶNode、Reactシリーズ - ショッピングモールサイト作り[全面リニューアル]

John Ahn

この講義を通じてショッピングモールウェブサイトを最初から一つ一つ作ってみることができます。

中級以上

React, Redux, Node.js

真似して学ぶNode、Reactシリーズ - ショッピングモールサイト作り[全面リニューアル]

John Ahn

フォローして学ぶノード、リアクトシリーズ - チャットボットサイトを作る

John Ahn

このレッスンでは、Googleが提供するAPIを使用してチャットボットを作成できます。

初級

React, Node.js

フォローして学ぶノード、リアクトシリーズ - チャットボットサイトを作る

John Ahn

フォローして学習するノード、リアクトシリーズ - YouTubeサイトを作成

John Ahn

このレッスンでは、リアクトとノードの概念を習得するだけでなく、実際にどのようにWebサイトを作成できるかを学ぶことができます。

初級

React, Redux, Node.js

フォローして学習するノード、リアクトシリーズ - YouTubeサイトを作成

John Ahn

フォローして学ぶノード、リアクトシリーズ - 基本講義

John Ahn

このレッスンでは、リアクトとノードをどのように使用するのかを学ぶことができます。

初級

React, Node.js

フォローして学ぶノード、リアクトシリーズ - 基本講義

John Ahn

フォローして学ぶタイプスクリプトA-Z

John Ahn

この講義を通じてタイプスクリプトについて学ぶことができます。

初級

TypeScript, JavaScript

フォローして学ぶタイプスクリプトA-Z

John Ahn

真似しながら学ぶJavaScript A-Z

John Ahn

ウェブ開発の基礎となるJavaScriptの基礎から中級まで学ぶことができます。

入門

JavaScript

真似しながら学ぶJavaScript A-Z

John Ahn

フォローして学ぶHTML、CSS

John Ahn

このレッスンを通して、HTML、CSSの基礎を固めることができます。

入門

HTML/CSS

フォローして学ぶHTML、CSS

John Ahn

フォローして学ぶウェブゲーム

John Ahn

このレッスンを通して、Webゲームをどのように開発するかを知ることができます。

中級以上

React

フォローして学ぶウェブゲーム

John Ahn

フォローして学ぶNestJS

John Ahn

このレッスンでは、NestJSについて学ぶことができます。

初級

NestJS, PostgreSQL, TypeORM

フォローして学ぶNestJS

John Ahn

フォローして学ぶドッカーとCI環境[2023.11アップデート]

John Ahn

このレッスンでは、ドッカーについて学び、CI環境を設定できます。

初級

GitHub, AWS, Docker

フォローして学ぶドッカーとCI環境[2023.11アップデート]

John Ahn

フォローして学ぶデノ（DENO） - 基本講義

John Ahn

発売前から多くの関心を受けていたデノがいよいよ出てきました。このレッスンでは、デノがノードとどのように異なり、デノをどのように扱うかを学ぶことができます。

初級

Deno

フォローして学ぶデノ（DENO） - 基本講義

John Ahn

フォローして学ぶノード、リアクトシリーズ - 映画サイトを作る

John Ahn

この講義を通じてリアクトやノードなどの概念だけでなく、実質的にどのようにWebサイトを作るかを学ぶことができます。

初級

React, Node.js, Web Application

フォローして学ぶノード、リアクトシリーズ - 映画サイトを作る

John Ahn

Similar courses

Explore other courses in the same field!

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

開発から配布まで！一つのサービスを完成するための険しい旅をろ過なくお見せします。初めて使ってみる技術を盛り込んで左衝ウドルウダン湯湯ながらもなんとか迷っていくことができますよ！

初級

React, GraphQL, Firebase

フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る

jaenam

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

リアクト＆amp;ネクスト＆amp;リダックス＆amp;リダックスサーガ＆amp; ExpressスタックでTwitterに似たSNSサービスを作成します。最後に、検索エンジンの最適化後にAWSにデプロイします。

中級以上

React, Redux, Node.js

[リニューアル] ReactでNodeBird SNSを作成する

zerocho

Flutterでメッセンジャーアプリ作り

DEV MOO

FlutterのRiverpodの状態管理とFirebaseを活用してメッセンジャーアプリを制作します。

初級

Flutter, Firebase, riverpod

Flutterでメッセンジャーアプリ作り

DEV MOO

[コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

codecamp

1年間で300人以上の開発者を輩出した「本物の」ブートキャンプの濃縮カリキュラムです。この講義1つで、実務のジュニア開発者レベルまで成長し、フロントエンド技術スタックの活用能力と知識を得ることができます。[InflearnXコードキャンプ]は、社会、経済、教育の背景に関係なく、誰もがキャリアを積めるように準備しました :)

入門

React, Next.js, GraphQL

[コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

codecamp

構造探索と操作のすべて - [DOM完全攻略 Part 1]

nhcodingstudio

React、Next.js、Vueをいくら勉強してもコードが抽象的に感じられ、構造がはっきりと理解できないのであれば、その根本的な原因は、DOMへの理解不足である可能性があります。DOMは、すべてのフロントエンドフレームワークの基盤であり、ウェブページの構造と動作を繋ぐ実体です。この講義は、単純なセレクターや操作方法を超え、HTMLがどのようにDOMオブジェクトに変わり、この構造をどのように選択し、探索し、操作できるのかを最初から段階的に教えてくれるDOM完全攻略のPart 1入門講義です。 HTMLタグは構造に過ぎず、JavaScriptは動作に過ぎませんが、その二つを繋ぐ核心がDOMです。この繋がりを明確に理解すれば、どのようなフレームワークを使ってもその中の本当の構造と流れを正確に見抜けるようになります。

入門

HTML/CSS, JavaScript, React

構造探索と操作のすべて - [DOM完全攻略 Part 1]

nhcodingstudio

iOS/Android アプリ開発のための本番 React Native - Intermediate

Wintho

React Nativeベースのモバイルアプリ開発のための中級講義です。フロントエンドの深化内容学習だけでなく、Firebaseベースのバックエンド内容まで一緒に学びながら、サーバー連動/ログイン/データ送受信/公共API活用などが可能な一つの完璧なアプリを開発できるように作られた講義です。

中級以上

React Native, Redux, Firebase

iOS/Android アプリ開発のための本番 React Native - Intermediate

Wintho

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Mobile App Front-End開発のためのReact Nativeの基礎知識の習得を目指しています。進入障壁の低い言語/APIの活用により、非専門家も簡単にNative Mobile Appを開発できるように作られた講義です。

初級

React Native, React, ES6

iOS/Androidアプリ開発のための本番 React Native - Basic

Wintho

Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成

gis

Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login を簡単に学べます~~

初級

Vue.js, PWA, Firebase

Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成

gis

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

React, Electron, Zustandを活用しタイマーアプリを直接制作、クロスプラットフォーム（Windows、macOS、Linux）へデプロイまで行う実践講義です。慣れ親しんだReactウェブ開発を皮切りに、Zustandを通じたグローバル状態管理と最終的なGUIデプロイまで、デスクトップアプリ開発の全体的な流れを学ぶことができます！

初級

React, Electron, GUI

[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)

dakgangjung123

フォローして学ぶノード、リアクトシリーズ - 映画サイトを作る

John Ahn

この講義を通じてリアクトやノードなどの概念だけでなく、実質的にどのようにWebサイトを作るかを学ぶことができます。

初級

MongoDB, React, Node.js

フォローして学ぶノード、リアクトシリーズ - 映画サイトを作る

John Ahn

Klaytn ブロックチェーンアプリケーションの作成 - NFT

SEJONG IT EDU

この講座では、代替不可能なNFT（Non Fungible Token）を活用して、非アプリを作成することができます。

中級以上

Web Application, Blockchain, NFT

Klaytn ブロックチェーンアプリケーションの作成 - NFT

SEJONG IT EDU

Java（javafx）本番デスクトップアプリプロジェクト - YouTube管理アプリ

formygoddess10025500

最小限の理論でデスクトップアプリを作ろう！プログラミング経験がなくても、誰でも起動するアプリを作ろう！

入門

Java, Web Application, JavaFX

Java（javafx）本番デスクトップアプリプロジェクト - YouTube管理アプリ

formygoddess10025500

Python WebサービスAPI本番プロジェクト - お金を稼ぐデジタルマーケティング

nomad

ネイバーショッピング、クパンパートナーズなどお金を稼ぐデジタルマーケティングは着実さも必要ですが、科学的な分析と自動化で簡単かつ効果的にアプローチしてください。人気商品、キーワード、ブログ、ショッピング情報を収集して分析するプログラムを作成するための重要な法律をお知らせします。

初級

Digital Marketing, Python, Web Application

Python WebサービスAPI本番プロジェクト - お金を稼ぐデジタルマーケティング

nomad

キーワードと実習で読むWebフロントエンド基礎概念総まとめ

ronpark

Web開発入門者のためのコンパス、あなたがWebフロントエンドについて知らないことを発見し、体系的に進むためのガイド講義です。

入門

Network, Google Chrome, Chrome DevTools

キーワードと実習で読むWebフロントエンド基礎概念総まとめ

ronpark

非専攻者でも可能なAIバイブコーディング入門コース

itconnect

💡 非開発者もAIと一緒にたった10時間で創業MVPから収益化サービスまで！ 💰 外注費数千万円が必要だった開発、今や12万円で完全解決 🎯 名刺認識、感情分析、立地分析まで実戦ビジネスプロジェクト5個完走 🔥 企画者、マーケター、予備創業者なら開発者なしでもアイデア実現 ⚡ 今始めれば一生使える開発自立能力を獲得しましょう！

入門

HTML/CSS, Java, Web Application

非専攻者でも可能なAIバイブコーディング入門コース

itconnect

パパが聞こえる「Rシャイニーアプリ」を作る

jeehyoung

Rの無関心な機能をWebアプリ上で実装させるR shiny 最も簡単に活用して学ぶことができます。

初級

Web Application, R

パパが聞こえる「Rシャイニーアプリ」を作る

jeehyoung

[2021]最近誰が有料でウェブサービスを構築するのか、ファイアベースのすべて - Javascript

David

2021年に新しく戻ってきた、＆quot;最近、誰が有料でWebサービスを構築していますが、Firebaseのすべて - JavaScript＆quot;講義！ 1人創業を夢見る初級開発者のためのバイブルになります。

初級

Firebase

[2021]最近誰が有料でウェブサービスを構築するのか、ファイアベースのすべて - Javascript

David

本当！ Spring BootとJPAの活用1 - Webアプリケーション開発

実務に近い例として、Spring BootとJPAを活用してWebアプリケーションを設計および開発します。

初級

Spring, Web Application, Spring Boot

本当！ Spring BootとJPAの活用1 - Webアプリケーション開発

SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

ehtjd339667

ReactフロントエンドとSpringBootバックエンドをAWSクラウドに直接デプロイするポートフォリオ中心の講座！素早く自分のポートフォリオにフロント、バックエンドプロジェクトをデプロイしたい方に役立つ講座です！デプロイに必要な知識を、サーバー設定からDocker、Domain接続、Nginx、HTTPS適用まで段階別に短期間で実習できるようになります！

初級

React, Java, AWS

SpringBoot & React ポートフォリオプロジェクト: AWSサービスで実戦デプロイ入門

ehtjd339667

バイブコーディングで掲示板作成 + 会員登録ログイン (React + FastAPI)

Kyung-il In

バイブコーディングでReact会員登録ログイン + 掲示板作り (React + FastAPI)は、AIプロンプトを活用してフルスタックWebアプリケーションを直接完成させる実習型講義です。 OpenAI CodexとClaude Code この講義では、React(Typescript)フロントエンドとFastAPIバックエンドを連携して、会員登録 & ログイン機能掲示板CRUD(作成、照会、修正、削除) JWT認証と権限処理を一つのプロジェクト内で実装します。特に、単純にコードを作成するだけで終わるのではなく、 👉 AIプロンプトでコード生成 → 実行及び修正 → テスト → 拡張という「バイブコーディング」学習方式を通じて、AIと一緒に開発する新しい流れを体験できます。完走後には「自分だけの会員制掲示板サービス」を直接完成させることができ、追加でコメント、いいね、画像アップロードのような拡張機能まで挑戦できます。

入門

React, Node.js, TypeScript

バイブコーディングで掲示板作成 + 会員登録ログイン (React + FastAPI)

Kyung-il In

Learn React and Firebase by following along - Creating a Chat Application [Renewed in December 2023]

Reviews from Early Learners

What you will learn!

💡 Course Features

💻 Skills Used & What You'll Learn

🧰 Tools covered here

🙋🏻‍♂️ Q&A

Recommended for these people

HelloThis is .css-1q3zd4q{text-decoration-line:underline;text-underline-position:under;text-underline-offset:1px;}

Curriculum

Reviews

John Ahn's other courses

Similar courses

Recommended for
these people

Hello
This is