강의

멘토링

커뮤니티

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) 47 reviews

294 learners

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

Reviews from Early Learners

What you will gain after the course

  • 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

26,076

Learners

1,565

Reviews

658

Answers

4.9

Rating

18

Courses

안녕하세요.

코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,

인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여

설명하고자 할 때는 최대한 쉽게,

알려드리고자 할 때는 최대한 알차게 설명드립니다.

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

감사합니다.

📹짐코딩 유튜브 채널 운영 | 구독자 25,000+

💻 짐코딩 클럽 | gymcoding.co

🔗 GitHub: https://github.com/gymcoding

🧑‍💻 인스타그램 @gymcoding

📨 이메일 bruce.lean17@gmail.com

Curriculum

All

68 lectures ∙ (16hr 38min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

47 reviews

5.0

47 reviews

  • dmb050087997님의 프로필 이미지
    dmb050087997

    Reviews 6

    Average Rating 5.0

    5

    11% enrolled

    I had to create a web page for my college graduation project, and I was wondering whether to use Vue or React, and then I heard that Vue can be developed quickly, so I vaguely searched around and happened to find it on YouTube, so I took the Vue Basics + Practice course and successfully completed my graduation project and got a job with the project, but there were still many things I didn't know about Vue. I'm satisfied because I think I'll be able to further develop my ability to study by checking the official documentation and parts I'm curious about through this lecture. I'll be waiting for better lectures in the future!

    • gymcoding
      Instructor

      I also had a lot of trouble studying on my own when I started programming! But after I found a pattern that I could learn on my own?, I think I gained confidence in learning any technology after that! Through this lecture, I wanted to give students the power to learn on their own as well as the technical aspects! I am very touched that you recognized this and were satisfied with it. 🥹 Thank you 💪

  • leehyesu955241님의 프로필 이미지
    leehyesu955241

    Reviews 3

    Average Rating 5.0

    5

    24% enrolled

    Really.. in a word, it's great. I'm the type that has to go over parts that I don't understand, but the best part was that you explained it repeatedly and gave me side stories that I didn't know about, so my knowledge expanded even more. I thought about it from the previous lectures, but I was grateful that you took the time to teach everything from a beginner's perspective to a professional's perspective. When I went to the academy, I was in a hurry to keep up, but since I started listening to Jimcoding's lectures, I've been learning properly! Please continue to give great lectures^^

    • gymcoding
      Instructor

      It seems like a lecture that I really put a lot of effort and prepared hard for compared to other lectures 🥹 As you said, thinking of each and every student, The content is deep and informative so that it can be really easy and repetitive for beginners, and also helpful to those in the field! I am deeply touched that you understand 🙏 Thank you~!! 🙂

  • hiperbono4518님의 프로필 이미지
    hiperbono4518

    Reviews 1

    Average Rating 5.0

    5

    52% enrolled

    This lecture is also good! I started listening to Jim Coding's lectures one by one, and this lecture was very helpful and I think I can use it in my work. The lecture is fun and the diction is so good that I can listen to it without getting bored. Thank you for your hard work as always :-)

    • gymcoding
      Instructor

      Wow~! Thank you for leaving such a thoughtful review 🙂💪

  • gichulroh6344님의 프로필 이미지
    gichulroh6344

    Reviews 14

    Average Rating 4.7

    5

    52% enrolled

    I have taken all of the Vue lectures in Inflearn and am currently working as a Vue front-end developer at a publisher. I think this is probably the closest lecture to the practical level among the Vue2 and Vue3 lectures. This is the first time I have taken Jimcoding's lecture, and I can see traces of his efforts to teach more kindly than other lecturers. I have heard that Quasar is better than other frameworks, and after taking all of these lectures, I will also proceed with the stack of this lecture as a side project. Please give me many good lectures.

    • gymcoding
      Instructor

      For those who are just starting out with web development, I tried really hard to make the lecture easy and for those who are in the field, I am so touched that you recognized it 😭 Thank you for your hard work! Thank you 💪

  • e12402508님의 프로필 이미지
    e12402508

    Reviews 4

    Average Rating 5.0

    5

    20% enrolled

    Thank you for uploading the precious Vue3 lectures. There aren't many Vue3 lectures, but I listened to all of Jimcoding's Vue3 lectures, from the basics to the practical ones! After listening to them all, I was wondering if there would be any more, but this lecture on how to use them came out, so I paid for it right away. LOL! As expected, I trust and listen to Jimcoding's Vue lectures... They are so precious. It's not easy to find someone who teaches this well, so I always trust and listen! By any chance... Do you have any plans to upload a Nuxt lecture? LOL,,,

    • gymcoding
      Instructor

      Thank you for cherishing my lecture!!😃 I will prepare the Nuxt lecture as soon as possible! 💪 Thank you 🙂

$127.60

gymcoding's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!