강의

멘토링

로드맵

BEST
Programming

/

Front-end

Vue 3 & Firebase 10 Community Building Full Stack - "Practical Use" (with Pinia, Quasar, Tiptap, VueUse)

This course on creating a community using Vue3 & Firebase(v10) will help you grow as a developer in various ways, including practical use of Vue3, Firebase basics to practical use, use of the latest web technologies, and sharing experiences as a knowledge sharer!

(5.0) 46 reviews

288 learners

  • gymcoding
실습 중심
vue
quasar
vue.js
풀스택
firebase
Vue.js
Firebase
Quasar
Vue 3
algolia

Reviews from Early Learners

What you will learn!

  • Practical usage of Vue3 Composition API (Composable, Dynamic & Async Components, etc.)!

  • Firebase (v10) from the very basics to practical use! And deployment!

  • How to create a beautiful UI easily and quickly with Quasar!

  • Using popular libraries such as VueUse and TiptapEditor!

  • How to use the latest technologies such as IntersectionObserver and RelativeTimeFormat!

  • Using Algolia Search for full text search!

Have you learned the basics of Vue3?
Now it's time to put it to good use! ✨

Inflearn class review event in progress 🎉

Hello 🙂 We are holding a review event for the course on creating a Vue3 & Firebase10 community.
After taking the course, please write a sincere review.  We will give you one free lecture coupon .

(First 30 people)

Utilizing the latest technology
Building a Vue 3 & Firebase 10 Community 📖

Hello! This lecture is about creating a community web using Vue3 and Firebase. If you take this lecture, you will learn how to use Vue3 Composition API in practice ! It is a lecture that will allow you to make Firebase from the basics to practice all at once.

When developing a front-end web, you need a variety of knowledge such as editors, infinite scrolling, search functions, and debugging . This lecture is a lecture that will help you grow as a developer by acquiring various web technologies that can be learned from practical experience.


Because practice is always important 💻

In fact, this lecture is one that I had planned before the "Vue3 Perfect Mastery (Basic/Practical)" that I launched previously. This is because when learning a technology, it is important to learn, but it is also really important to create something using the technology you have learned .

When we get a driver's license and start driving, it's not as easy as we think. This is because there are various difficulties that we face when actually driving that we didn't have when we were learning to drive .

Web development is the same. If you learn a technology called Vue.js and don't try to make something, your growth will be slow. And even if you learn Vue3 and try to make something real, it won't be easy. When actually developing a web, core technologies are important, but the surrounding front-end ecosystem technologies and skills that you can learn from experience are also very important. Those who have tried to make an actual web application will agree with this.

"When I actually tried to create a website, I found it difficult..."

So, I launched a course on building a community using Vue3 & Firebase. As I mentioned earlier, this course covers practical use of Vue3, Firebase from basics to practice! It is also a course that can solve various difficulties that may arise when creating an actual web application .


Special features of this course ✨

📌 You don't need to know Firebase! You can learn everything from the basics to practice and deployment all at once.

For front-end developers, Firebase is a really attractive technology.

When we study web technologies or actually create web apps, there are times when we need a backend. In such cases, if we utilize Firebase, we can easily implement services such as membership registration, database management, file upload, and push notifications.

📌 Understand the fallthrough property, dynamic & asynchronous components, composable functions, etc. with practice!

Through the lecture, you can learn various technologies necessary for creating real web applications, such as Pinia (with Setup Stores syntax), Quasar, VueUse, Tiptap Editor, and Algolia Search. You can properly learn how to use Vue3 in practice, such as Dynamic Components, Async Components (asynchronous components for lazy loading), and Composables function implementation.

📌 We will help you develop the ability to do things on your own. You will never regret it!

This lecture is not simply a lecture that teaches you certain techniques.

  • How do I use Breakpoints and debug when a bug occurs?
  • Also, what is the study method when I learn a skill?
  • And how do you view the official documentation when learning Firebase?

I share my experiences and thoughts in the lecture. It is to give students the power to do it on their own. You will feel it when you watch this lecture! I will teach you in detail and repeatedly how to view the official document, so that students can do it on their own even without the lecture. So that they can get used to it!


What you'll learn 📚

Section 0. Getting Started

  • Set up a development environment together and create a project

Section 1. Auto Page&Layout Settings

  • Set up the library so that Page&Layout routing can be set automatically
  • Setting up a library and sharing insights from knowledge sharers

Section 2. Creating a UI using Quasar

  • Quick and easy web layout and community UI markup using Quasar
  • router-link vs router.push() difference
  • Performance improvement using dynamic and asynchronous components
  • Using Vue's built-in objects $attrs, $slots
  • Understanding the Fallthrough property and the inheritAttrs option
  • Multiple v-model, VueRouter nested layouts

Section 3. Getting started with Firebase

  • Description of Firebase services to use in your project and how to view the official documentation
  • Create and install a Firebase project

Section 4. Firebase Authentication

  • Email sign-up, Google sign-in, and user information management using Firebase
  • User state management using Pinia Setup Stores grammar
  • Sharing study methods of knowledge sharers

Section 5. VueUse & Common Functions

  • Asynchronous state management and Pinia state maintenance using the VueUse library
  • Local & Global Error Handling
  • Creating a Tiptap Editor (using various Tiptap Extensions)

Section 6. Firebase Cloud Firestore

  • Implementing CRUD community and comment features
  • Share tips from your experience using Firebase, such as the difference between setDoc and addDoc
  • Implementing slightly more complex features like querying, sorting, and viewing more posts

Section 7. Web API & Enhancements

  • Infinite scroll function using IntersectionObserver
  • Displaying relative time using Intl.RelativeTimeFormat
  • Parameter URL Linking
  • Navigation Guard & Client Security
  • Implementing like, bookmark, and view count increase features

Section 8. Firebase Storage

  • Uploading Firebase Storage Images in Tiptap Editor
  • Utilizing UUID and Image Resizer when uploading images

Section 9. Firebase Cloud Functions

  • Install Cloud Functions & Emulator
  • Implementing advanced features using Functions
  • Local testing using Firebase Emulator
  • Show post and comment authors

Section 10. Algolia Search

  • Install Algolia Search Extension
  • Algolia search function project application

Section 11. Firebase Security Rules & Hosting

  • Setting up Firebase security rules
  • Firebase Hosting Deployment

I recommend this to these people 🙋

  • Anyone who wants to learn how to use Vue3 and grow as a developer!
  • For those who want to create a real web application using Firebase!
  • Anyone who wants to learn the latest web technologies, libraries, and other technologies needed to create web apps!

After listening to the lecture, you will 😎

  • You can confidently use Vue3, such as easily separating composable functions.
  • You can create and deploy your own web service using Firebase.
  • No matter what technology you learn, you will gain the power to learn on your own by looking at official documentation.

Expected Questions Q&A 💬

Q. Do I need to know Quasar Framework to take this course?

no :)

Even if you don't know Quasar Framework, you can still take the course. Quasar is used as a tool to create community UI, and you can follow along slowly while watching the lecture! And for those who don't know Quasar, we will explain basic knowledge in the middle of the lecture. 🙂

Also, you can still take the course even if you don't know about Quasar, but they say you can see as much as you know, right? Of course, if you know about Quasar, your perspective will be broader!

It would be helpful if you watched the free Quasar lecture on the Jimcoding YouTube channel :)

Quasar Free Lecture YouTube Link

Q. Do I need to know Firebase to take this course?

no :)

This course is about learning Firebase and building a community, so you can take it even if you don't know anything about Firebase. This course is designed to help you grow as a developer, from the basics of Firebase to practical use, as well as how to study on your own by looking at the official documentation.

Q. Do I need to know Vue3 to take the course?

Yes, that's right :)

You need to know Vue3 to take this course. The link below is to the Vue3 course I launched. If you like it after looking at the course reviews, curriculum, and sample lectures, please take the course. Thank you.


Course Roadmap 📢

I recommend learning in the following order!


With Jim Coding
Practical Coding Learning 💪

Hello, I am Jim Coding, a coding education creator.
I run a YouTube channel called "GYM CODING" !

Many of you loved the Vue3 Complete Mastery course that we launched previously, so we launched the Vue3 & Firebase Community course, which is a course for utilizing Vue3!
Thank you for your interest in my lecture. I will reward you with better content in the future. 💪


Recommended for
these people

Who is this course right for?

  • If you want to learn how to properly use Vue3 Composition API!

  • If you want to learn Firebase from the ground up and create a web!

  • If you have learned the theory but are having trouble actually creating a site!

  • If you want to gain knowledge and experience from knowledge sharers and grow together!

Need to know before starting?

  • HTML, CSS

  • javascript

  • Vue3

Hello
This is

25,095

Learners

1,426

Reviews

637

Answers

4.9

Rating

17

Courses

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.
감사합니다.

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

Curriculum

All

68 lectures ∙ (16hr 38min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

46 reviews

5.0

46 reviews

  • dmb050087997님의 프로필 이미지
    dmb050087997

    Reviews 4

    Average Rating 5.0

    5

    11% enrolled

    大学卒業作品プロジェクトでウェブページを作らなければならなかったが、ビューを使うかリエクトを使うのか悩んでいる。進行とその​​プロジェクトで就職に成功したが、まだビューについて知らない点が多かったが、今回講義を通じて気になる部分や公式文書を確認し、勉強できる能力をさらに育てることができると思います。これからもさらに良い講義をお待ちしております!

    • gymcoding
      Instructor

      私もプログラミングを始めたときに一人で勉強するのに多くの困難がありました!さて、自分で学習できるパターン? 今回の講義を通じて受講生の方々に技術的なことはもちろん、自分で学習できる力を抱きしめたかったのです!こういう部分を知ってくれてまた満足してたなんてとても感慨無量ですね🥹 ありがとうございます💪

  • leehyesu955241님의 프로필 이미지
    leehyesu955241

    Reviews 3

    Average Rating 5.0

    5

    24% enrolled

    本当に..一言でガドジムです。一番良かったです。現業者の視線まで時間をかけて鼓楼お知らせいただくことが今回も如実に見せてくれてありがとうございました。

    • gymcoding
      Instructor

      他の講義より本当に気にして、大変に準備していた講義のようです 🥹 受講生の方一人一人考えておっしゃったように 初心者の立場で本当に簡単で繰り返し また、現業者の方々に多くのお手伝いをさせて頂けるよう、内容は深く充実! 知っておくと感動無量ですね🙏 ありがとう〜! 🙂

  • hiperbono4518님의 프로필 이미지
    hiperbono4518

    Reviews 1

    Average Rating 5.0

    5

    52% enrolled

    今回の講義もいいですね! ジムコーディング様の講義を一つずつ聞き始めましたが、今回の講義を聞くと役に立つことが多く、実務でも役に立つことができるようです。講義も面白く、辞書もとても好きで退屈しないように聞くことができます。 いつもお疲れ様でした :-)

    • gymcoding
      Instructor

      うわー!誠意をこめて受講していただきありがとうございます🙂💪

  • gichulroh6344님의 프로필 이미지
    gichulroh6344

    Reviews 14

    Average Rating 4.7

    5

    52% enrolled

    インフラ内のVue川のすべてが受講し、パブリッシャーで現在の実務でVueフロントエンド開発者として活動しています。おそらくVue2、Vue3講義の中で実務級に最も近い講義だと思います。ジムコーディングさんの講義は初めて受講することになりましたが、他の講義者よりももっと親切に教えようと努力した痕跡が随所に見えます。 Quasarが身につけたフレームワークよりも大丈夫だということは聞きましたが、本講義を聞いて私もサイドプロジェクトで本講義のスタックを中心に進めてみなければなりません。どうぞよろしくお願いいたします。

    • gymcoding
      Instructor

      Web開発を始める人のために簡単 現業でお持ちの方のために充分に整理しよう 本当に頑張った講義なんですが、わかってくださると感慨無量です😭 頑張って苦労しました! ありがとうございます💪

  • e12402508님의 프로필 이미지
    e12402508

    Reviews 4

    Average Rating 5.0

    5

    20% enrolled

    貴重なVue3講義をありがとうございましたㅎㅎvue3講義がたくさんありませんが、その中でジムコーディング様vue3講義の基本編から実戦編までみな聞きました!みんな聞いてああもっとアンナオナする時頃こんなに活用法講義が出てすぐに決済しましたww!やっぱり信じて聞くジムコーディングビュー講義.. とても大切ですよ こんなによく教えている方探すのは簡単ではないのに常に信じて聞いています!もし.. nuxt講義はアップロードするつもりはありませんか?ㅎㅎ

    • gymcoding
      Instructor

      私の講義を大切にしていただきありがとうございます!!😃 Nuxt講義もできるだけ早く準備してみましょう! 💪 ありがとうございます🙂

Limited time deal ends in 4 days

$15,056.00

24%

$127.60

gymcoding's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!