강의

N
챌린지

멘토링

N
클립

로드맵

Programming

/

Web Development

React + Firebase Full Stack Development - Firebase Firestore Data Modeling

Through this course, you will learn how to implement database relationships with Firebase. You can quickly become a React full-stack developer. In this era of unstable employment, you need to learn new skills and increase your value. And you need to create something. You need to be able to implement data "relationships" when implementing those side projects and ideas. This course will help you implement "relationships" with Firebase "Firestore."

(4.6) 8 reviews

31 learners

  • brightcoding
이론 실습 모두
수익화
솔로프리너
Firebase
React
firestore
database-modeling
react-fullstack

Reviews from Early Learners

What you will learn!

  • Learning the Basics of Firebase Firestore Data Modeling

  • Learn and apply Firebase Firestore features.

  • Implementing One-to-One, One-to-Many, and Many-to-Many Relationships in Firestore

  • Simple Service: Implementing Denormalization with VanillaJS + Firebase

  • SNS Service: Implementing Normalization with React + Firebase

  • React basics + partial JS learning if needed

  • Firebase Authentication, Storage

  • Vite (+Vanilla +React) / React Router

  • Becoming a Full-Stack Developer in a Relatively Short Time

The company I'm working for now...
Are you satisfied?

Even after 50 years old...
Is it possible to have a stable job?

The company is your life
It does not provide a stable support.


Many startups failed due to the economic downturn .
There are a lot of developers coming into the market.
Companies recommend resignation, layoffs, voluntary retirement,
We have started to restructure .
The company does not even guarantee retirement age.
I don't take responsibility for you.
It will increase more and more in the future,
It looks like the situation will continue to get worse.

...now

You have to prepare your own future.

What is the only solution?

It's about persevering, learning new skills, and preparing!

  • You have to be able to create something and implement your own ideas.

  • You need to work on your own side project and prepare a portfolio.

  • You must be able to implement your own new values.

Want to make your ideas a reality ?
How to do a side project ?
How to create your own service ?
From a software domain perspective >> How to go from a business domain perspective?


We need relationships in our data.

One To One, One To Many, Many To Many


In this course, you will learn the basics of Firestore database modeling > and implement relationships.
You can become a react-fullstack developer.

I recommend this to these people

Anyone who wants to become a full stack developer

VanillaJS + Firebase combination, React + Firebase combination
You will learn.

Anyone who wants to deal with data relationships

You will learn the basics of Firebase Firestore data modeling and implement relationships.

Anyone who wants to learn Firebase

It will provide a more basic foundation than Firebase, which is attached to React/Vue/Flutter.

After taking React + Firebase course,

  • You will learn the basics of React (JS knowledge) and Firebase data modeling.

  • You will learn about the characteristics of Firestore, a No-SQL database (from basics to applications).


  • You will be able to implement One To One, One To Many, and Many To Many relationships.

  • You will be able to create a simple SNS service.

Firebase Firestore is
 Many people think that NoSQL cannot implement relationships.

However, you can easily implement Firestore-specific relationships by leveraging Firestore features .

Features of this course

1. Did you find it difficult to learn CSS frameworks while taking the class?

Isn't it a hassle to learn CSS frameworks every time you take a new course? This course does not use CSS frameworks, but uses CSS modules. And since this course is not an HTML or CSS course, we will copy/paste the cumbersome HTML and CSS.

If needed, I'll give you a link at the bottom of the video. You can copy/paste it right away.

Screenshot 2025-02-11 075832

2. For each lecture, we provide slides explaining the theory.

The React grammar, Javascript theory, and Firebase knowledge that you learn in the course are not explained in words alone. They are all organized in slides. The materials for each video are at the bottom, so you can go in and view them right away.

Copy paste

3. The theory will be explained in as much detail as possible through slides.

I have tried to convey it in the most understandable way possible. I will explain it using pictures, diagrams, and visualizations as much as possible. I will convey it in a balanced way by separating theory and practice.

1
2
3
4
5
6
7

Firebase authentication and storage are only taught in basics.

Firebase Firestore helps you go from basics to application .

You have nothing to lose by learning Firestore.

Learn about these things

Curriculum

Technologies used in the course

firebase 2

Firebase @11

vite

Vite (Vanilla, React@13)

router

React Router@7

Do you have any questions?

Q. I am a developer in another language. Can I still take the course?

  • Since HTML/CSS are copied and pasted, you should know at least a little bit about HTML/CSS.

  • You should have an understanding of data types, IF statements, objects, arrays, and functions.
    However, the iteration (forEach/map), DOM manipulation, ternary operator, optional chaining, and asynchronous processing that are covered in the course are all explained using slide theory. Then, we move on to practical training.

  • Of course, I will also explain React basic theory/grammar in detail.

Q. Are there any issues with libraries and frameworks not working when updated to the latest version?

  • When libraries or frameworks are updated, we will check the course, test it ourselves to make sure it works well, and continue to update it.

Q. I am not familiar with the Node.js ecosystem. Can I still take the course?

  • You should have knowledge of installing node.js > installing libraries/frameworks via npm > running them. If you don't know how, please take another introductory course.

  • I'll give you the slides, copy/paste code, but... just in case, I'll give you the entire code with node_modules included.

Q. Are you good at answering questions?

  • Yes, I will answer all your questions.

Things to note before taking the class

Practice environment

  • Operating System and Version (OS): Windows 11

  • Tools used: node.js/ npm / vscode

Learning Materials - Easy to Use

  • I will provide a link to the video lecture at the bottom.

  • I'll provide a link to the copy/paste code at the bottom of the video lecture.

Recommended for
these people

Who is this course right for?

  • Developers who want to gain a competitive edge by acquiring new skills.

  • If you want to quickly become a full-stack developer

  • When a front-end developer urgently needs to work with a database

  • When you're a backend developer who wants to quickly learn React (js) and Firebase.

  • For Flutter, Kotlin, and Swift developers who want to quickly learn Firebase.

Need to know before starting?

  • Basic knowledge of HTML and CSS (able to understand code by looking at it)

  • HTML and CSS are copied and pasted.

  • You should know the basic JavaScript knowledge (if statements, objects, arrays, and functions).

  • I will partially explain the necessary JS knowledge while learning React.

Hello
This is

31

Learners

8

Reviews

4.6

Rating

1

Course

반갑습니다.

회사에서 소프트웨어 기술을 활용하여, 즐겁게 개발하는 사람입니다.

이제 ai 발전과 더불어, Solopreneur 가 대세가 되는 시대가 곧 오리라 확신합니다.

그 헤게모니가 이동하는 흐름을 따라 좋은 강의를 출시하여, 큰 도움을 드리고자 합니다.

Curriculum

All

62 lectures ∙ (9hr 59min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

8 reviews

4.6

8 reviews

  • jwscsg9447님의 프로필 이미지
    jwscsg9447

    Reviews 1

    ∙

    Average Rating 5.0

    Edited

    5

    27% enrolled

    新しく、実り多い内容で、多くの助けと道標になります！

    • brightcoding
      Instructor

      お役に立てて、とても嬉しいです^^

  • favoryouknow4403님의 프로필 이미지
    favoryouknow4403

    Reviews 1

    ∙

    Average Rating 5.0

    5

    84% enrolled

    講義とても分かりやすく、良いですね。 フルスタックを準備されている方々にとって、基準となる講義になるのではないでしょうか。

    • brightcoding
      Instructor

      はい、ありがとうございます^^

  • kgill7307님의 프로필 이미지
    kgill7307

    Reviews 5

    ∙

    Average Rating 5.0

    5

    31% enrolled

    • brightcoding
      Instructor

      星5つありがとうございます。 お疲れ様でした~~

  • airking4154님의 프로필 이미지
    airking4154

    Reviews 2

    ∙

    Average Rating 4.5

    4

    31% enrolled

  • mjkimien4839님의 프로필 이미지
    mjkimien4839

    Reviews 1

    ∙

    Average Rating 4.0

    4

    31% enrolled

    • brightcoding
      Instructor

      良い評価をくださりありがとうございます!!!

$55.00

Similar courses

Explore other courses in the same field!

React、Node.js、MongoDBで作る自分だけの会社ウェブサイト：完璧ガイド강의 썸네일

React、Node.js、MongoDBで作る自分だけの会社ウェブサイト：完璧ガイド

dakgangjung123

React、Node.js、MongoDBを活用して会社のWebサイトを自分で制作する過程を学べる実践的な講座です。 簡単なReact、Node.jsの基礎知識があれば、一緒にフルスタックプロジェクトを作りましょう！

중급이상

중급이상

React, Node.js, MongoDB

React、Node.js、MongoDBで作る自分だけの会社ウェブサイト：完璧ガイド강의 썸네일

React、Node.js、MongoDBで作る自分だけの会社ウェブサイト：完璧ガイド

dakgangjung123

アンギュラファイアベース完全征服 - PetStoreショッピングモールプロジェクト강의 썸네일

アンギュラファイアベース完全征服 - PetStoreショッピングモールプロジェクト

nomad

アンギュラFront-endとFirebase Back-endを利用して、さまざまな分野に直接適用できるPet StoreショッピングモールBlueprint Applicationに従いながら一緒に作ってみる本番プロジェクトの能力強化プロセスです。

중급이상

중급이상

Angular, PWA, Firebase

アンギュラファイアベース完全征服 - PetStoreショッピングモールプロジェクト강의 썸네일

アンギュラファイアベース完全征服 - PetStoreショッピングモールプロジェクト

nomad

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

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

John Ahn

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

중급이상

중급이상

React, Redux, Node.js

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

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

John Ahn

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

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

John Ahn

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

초급

초급

MongoDB, React, Redux

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

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

John Ahn

Vue 3 & Firebase 10 コミュニティ作成フルスタック - 「活用編」 (with Pinia、Quasar、Tiptap、VueUse)강의 썸네일

Vue 3 & Firebase 10 コミュニティ作成フルスタック - 「活用編」 (with Pinia、Quasar、Tiptap、VueUse)

gymcoding

Vue3＆amp; Firebase(v10)を活用してコミュニティを作る講義でVue3実践活用法、Firebase基礎から実戦、最新のWeb技術活用法、知識共有者経験共有など多様な方面で開発者として一段階成長できるようにします！

중급이상

중급이상

Vue.js, Firebase, Quasar

Vue 3 & Firebase 10 コミュニティ作成フルスタック - 「活用編」 (with Pinia、Quasar、Tiptap、VueUse)강의 썸네일

Vue 3 & Firebase 10 コミュニティ作成フルスタック - 「活用編」 (with Pinia、Quasar、Tiptap、VueUse)

gymcoding

ゼロベースから学ぶウェブ開発の概念とバイブコーディング강의 썸네일

ゼロベースから学ぶウェブ開発の概念とバイブコーディング

jeyong

迅速な実行と検証の時代、Vibeコーディングで誰よりも速く実行しましょう！広告、決済など収益化まで漏らさずに自分の手で実現してみましょう。

입문

입문

React, Web Application, Next.js

ゼロベースから学ぶウェブ開発の概念とバイブコーディング강의 썸네일

ゼロベースから学ぶウェブ開発の概念とバイブコーディング

jeyong

iOS/Android アプリ開発のための本番 React Native - Intermediate강의 썸네일

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

Wintho

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

중급이상

중급이상

React Native, Redux, Firebase

iOS/Android アプリ開発のための本番 React Native - Intermediate강의 썸네일

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

Wintho

ティンダーファイアベースクローン|リアクトネイティブ강의 썸네일

ティンダーファイアベースクローン|リアクトネイティブ

The Coders Studios

最小限の時間内にリアクトネイティブを学ぶことができます。不要な部分は入れませんでした。

중급이상

중급이상

React Native, Firebase

ティンダーファイアベースクローン|リアクトネイティブ강의 썸네일

ティンダーファイアベースクローン|リアクトネイティブ

The Coders Studios

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

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

jaenam

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

초급

초급

React, GraphQL, Firebase

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

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

jaenam

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

バイブコーディングで掲示板作成 + 会員登録ログイン (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)강의 썸네일

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

Kyung-il In

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

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

ehtjd339667

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

초급

초급

React, Java, AWS

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

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

ehtjd339667

手で熟すNext.js - 公式ドキュメントを見る강의 썸네일

手で熟すNext.js - 公式ドキュメントを見る

hajoeun

公式ドキュメントで最新のNext.jsを学びます。トラブルシューティングのツールとして、Next.jsが必要な理由を理解できます！

초급

초급

Next.js, next.js13, React

手で熟すNext.js - 公式ドキュメントを見る강의 썸네일

手で熟すNext.js - 公式ドキュメントを見る

hajoeun

Flutter + FirebaseでNetflix UIクローンをコーディングする[ランダムフラッター]강의 썸네일

Flutter + FirebaseでNetflix UIクローンをコーディングする[ランダムフラッター]

taebbong

このレッスンは、FlutterとFirebaseでNetflix UIをクローンコーディングするレッスンです！ 最も速くアプリ開発を学ぶためのFlutterを始めましょう:)

초급

초급

Flutter, Clone Coding, Firebase

Flutter + FirebaseでNetflix UIクローンをコーディングする[ランダムフラッター]강의 썸네일

Flutter + FirebaseでNetflix UIクローンをコーディングする[ランダムフラッター]

taebbong

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

10分で바이브코딩で作れる単純なサービスはもう捨てましょう！ '本当の'実務適用바이브코딩を学ぶことができます。 企画とデザイン通りに実サービスレベルの高度化されたサービスをカーソルAI NCOPで作ってみましょう。 No Code, Only Prompt

중급이상

중급이상

React, Next.js, cursor

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일

[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)

codecamp

非専攻者でも可能な超簡単グループチャット作り（バイブコーディング、Cursor AI）강의 썸네일

非専攻者でも可能な超簡単グループチャット作り（バイブコーディング、Cursor AI）

teracokr

この講義をすべて受講し、応用すれば皆さんだけのサイト、アプリを作ることができます。この講義はCursor AIを利用して、私たち家族だけのためのグループチャットルームをWebサイトとして作成しながら、コーディングの流れを自然に習得するバイブコーディング入門講義です。App開発者アカウントやMacBookなしで、Windows環境だけでも開発を知らなくても誰でも簡単に真似することができ、実際のWebサイトとして配布する方法も学びます。

입문

입문

Firebase, Next.js, vercel

非専攻者でも可能な超簡単グループチャット作り（バイブコーディング、Cursor AI）강의 썸네일

非専攻者でも可能な超簡単グループチャット作り（バイブコーディング、Cursor AI）

teracokr

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

[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)강의 썸네일

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

dakgangjung123

TypeScript Korea：React with TypeScriptセミナー강의 썸네일

TypeScript Korea：React with TypeScriptセミナー

woongjae

タイプスクリプトとリアクト関連講座です。

중급이상

중급이상

React, TypeScript

TypeScript Korea：React with TypeScriptセミナー강의 썸네일

TypeScript Korea：React with TypeScriptセミナー

woongjae

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

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

David

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

초급

초급

Firebase

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

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

David

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

ludgi

Next.jsフルコースをディップして食べよう！ GraphQL、Redis、RabbitMQ、Prisma、TailwindCSS、Docker Compose、Cypress、Prometheus、Grafanaなど、最新技術で実践プロジェクトを完成させ、App RouterとPage Routerの両方を経験できます。

중급이상

중급이상

Next.js, React, GraphQL

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)강의 썸네일

Next.js つけ麺フルコース (英語音声 & 韓国語字幕)

ludgi