Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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

24,546

Learners

1,353

Reviews

629

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

  • 크하함님의 프로필 이미지
    크하함

    Reviews 4

    Average Rating 5.0

    5

    11% enrolled

    대학교 졸업 작품 프로젝트로 웹 페이지를 만들어야 했었는데 뷰를 쓸지 리엑트를 쓸지 고민하다 뷰가 빠르게 개발할수 있다는 얘기를 듣고 막연하게 여기저기 뒤져보다 우연히 유튜브로 알게되어 뷰 기본+실전 편을 모두 수강하여 졸업작품 진행 및 해당 프로젝트로 취업에 성공했지만 아직 뷰에 대하여 모르는 점이 많았는데 이번 강의를 통하여 궁금한 부분 및 공식문서를 확인하며 공부할수 있는 능력을 더 키울수 있을거 같아 만족스럽습니다. 앞으로도 더욱 좋은 강의 기다리겠습니다!

    • 짐코딩
      Instructor

      저도 프로그래밍을 시작할 때 혼자 공부하는 데 많은 어려움이 있었어요! 그런데 스스로 학습할 수 있는 패턴?을 찾고 나서 이후에 어떠한 기술을 학습하던 자신감이 생긴 것 같아요! 이번 강의를 통해 수강생분들에게 기술적인 것은 물론이고 스스로 학습할 수 있는 힘을 안겨드리고 싶었는데요! 이러한 부분을 알아주시고 또 만족하셨다니 매우 감개무량하네요 🥹 감사합니다 💪

  • Wonder.B님의 프로필 이미지
    Wonder.B

    Reviews 3

    Average Rating 5.0

    5

    24% enrolled

    정말..한마디로 갓짐입니다. 저는 이해가 어려운 부분은 꼭 짚고 넘어가야하는 편인데, 반복해서 설명해주는 정성과 더불어 주 내용뿐 아니라 모를 수 있는 사소한 부분을 곁다리로 알아보게끔 해주셔서 지식이 더욱 넓혀지는게 가장 좋았어요. 저번 강의들부터 생각했지만 초보자의 시선에서부터 현업자의 시선까지 시간 들여 고루 알려주려 노력하시는 것이 이번에도 여실히 보여 감사했습니다. 학원을 다닐때는 따라치느라 급급했다면 짐코딩님 강의를 들으면서부터는 학습이라는 것을 제대로 하고 있습니다! 앞으로도 좋은 강의들 부탁드립니다^^

    • 짐코딩
      Instructor

      다른 강의보다 정말 신경 많이 쓰고 힘들게 준비했던 강의 같아요 🥹 수강생분들 한분한분 생각하며 말씀하신 것처럼 초보자분들의 입장에서 정말 쉽고 반복적으로 또 현업자의 분들에게 많은 도움을 드릴 수 있도록 내용은 깊고 알차게! 알아주시니 감개무량 하네요 🙏 감사합니다~!! 🙂

  • hiperbono님의 프로필 이미지
    hiperbono

    Reviews 1

    Average Rating 5.0

    5

    52% enrolled

    이번 강의 역시 좋아요! 짐코딩님의 강의를 하나씩 듣기 시작했는데 이번 강의를 들을 때 도움이 많이 되고 실무에서도 유용하게 사용할 수 있을거 같습니다. 강의도 재미있고 딕션도 너무 좋아서 지루하지 않게 들을 수 있습니다. 항상 수고하시고 감사합니다 :-)

    • 짐코딩
      Instructor

      와우~! 정성스런 수강후기 남겨주셔서 감사합니다 🙂💪

  • Gichul Roh님의 프로필 이미지
    Gichul Roh

    Reviews 14

    Average Rating 4.7

    5

    52% enrolled

    인프런 내 Vue 강의 전부 수강하고 퍼블리셔에서 현재 실무에서 Vue 프론트엔드 개발자로 활동하고 있습니다. 아마 Vue2, Vue3 강의 중에서 실무급에 가장 근접한 강의라 생각합니다. 짐코딩 님의 강의는 처음 수강하게 되었는데, 타 강의자보다 좀 더 친절하게 가르치려고 노력한 흔적이 곳곳에서 보입니다. Quasar가 익히 타 프레임워크보단 괜찮다는 건 들었었는데, 본 강의 다 듣고 저도 사이드 프로젝트로 본 강의의 스택을 중심으로 진행해봐야겠습니다. 아무쪼록 많은 좋은 강의 부탁드립니다.

    • 짐코딩
      Instructor

      웹 개발 시작하시는 분들을 위해서 쉽고 현업에서 계신 분들을 위해서 알차게 구성하려고 정말 노력한 강의인데요 알아주시니 감개무량합니다 😭 완강하시느라 고생 많으셨습니다! 감사합니다 💪

  • 경이님의 프로필 이미지
    경이

    Reviews 4

    Average Rating 5.0

    5

    20% enrolled

    귀한 Vue3 강의올려주셔서 감사합니다 ㅎㅎ vue3 강의가 많이 없는데 그 중 짐코딩님 vue3강의 기본편부터 실전편까지 다 들었어요 ! 다 듣고 아 더 안나오나 할때쯤 이렇게 활용법 강의가 나와서 바로 결제했습니다 ㅋㅋ ! 역시 믿고 듣는 짐코딩 뷰강의 .. 너무 소중해요 이렇게 잘 가르치시는분 찾기 쉽지 않은데 항상 믿고 듣습니다 ! 혹시.. nuxt 강의는 올려주실 생각은 없으신가요 ?ㅎㅎㅎ,,,

    • 짐코딩
      Instructor

      제 강의를 소중히 생각해 주셔서 감사드립니다!!😃 Nuxt 강의도 최대한 빨리 준비해 보도록 할게요! 💪 감사합니다 🙂

$127.60

gymcoding's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!