6 Hour Vue.js & Firebase Project - FireBlogs

Demo:

Code:

John's YouTube Channel:

John's Socials:

Timestamps:
0:00 - Introduction
0:52 - Walkthrough
9:55 - Project Setup
21:45 - Navigation(Desktop/Mobile)
44:52 - Footer
50:08 - Blog Post Component (Home)
1:17:07 - Blog Card Component (Home)
1:39:29 - Register Section (Home)
1:45:58 - Blogs View
2:01:21 - Vue Document Titles
2:04:34 - Firebase Auth Implementation (Login, Register, Reset Password Components)
3:25:43 - Profile Menu
3:45:02 - Conditional Rendering (User)
3:50:20 - Profile View
4:05:16 - Admin View (Firebase Functions Setup)
4:35:08 - Create Post Component
4:57:02 - Post Cover Photo Component
5:02:34 - Image Handler (Quill Editor)
5:08:25 - Blog Preview
5:15:20 - Uploading/Publish Blog To Firebase
5:31:03 - Populating Application From Firebase Data
5:43:40 - View Blog Component
5:54:54 - Update/Edit & Delete Blog Post
6:15:35 - Vue Route Guards
6:23:15 - Securing DataBase
6:25:05 Deploy to Firebase Hosting

[pragith]

I'm the first but won't be the last one to say - "Was really waiting for this". Thank you Traversy Media team.

[Steph-gjkz]

For those who have troubles with this project: the syntax is outdated! Take this project as a blueprint but don't copy and paste it from git. Start a new vue.js project from scratch on your own and start writing your code. This is a great video for showing you a starting point, but it won't work without further adjustments.

[agustin]

In this channel, there is nothing but quality tutorials. Thanks guys :)))

[inakipedroche]

just for people seeing this after 2021, you need to add fire base as import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';

[TipsyRiver]

For people unable to start the app after getting errors about the node-sass version and all that:

*Assuming you've already ran "npm install" first and gotten some errors

0. Delete the "node-sass" dependency line in the package.json file

1. npm uninstall node-sass

2. npm i -D sass

3. npm run serve

[EscOfficial]

Why would someone give this video a "dislike" - it's literally teaching you something...

[michaelamckanna]

Awesome tutorial for familiarizing with Vue, Vuex, and Firebase. I had to read the docs as the current version 9 vs version 8 used in the video has some different syntax but reading docs never hurt anyone. Great explanations, great content, awesome tutorial!

[gtbaba]

Finally got my project which Im gonna add on my resume. Happy to see Vue project and Firebase together ♥️

[kariminic]

Okay, this is timely and a MUST watch. I have a blog app in Django, been learning Vue, and hope to apply the knowledge gained on this tut to integrate Vue into my Django app. Thanks, John, you earned +1 sub. To Brad, you're the real GOAT. You've given many content creators a platform to be discovered by the masses. We will support them.

[comunicloud]

April 14 I'm starting a new position as Vue developer, so far I've been working on react JS, seems like it's a good tutorial to get ready. I'd like to thank you already for sharing this kind of content.

[davebudah]

You just earned one more subscriber John, thanks to Traversy Media for bringing you here. I'm gonna enjoy this tutorial, had to watch the first 11 mins, and I already love what's coming.

[ttufox]

Traversy Media hits us again with quality content :)

[DrCaesarsPalace_MD]

Great tutorial!
For others using vue3, @ 1:59:20 in vue3 'beforeDestroy' lifecycle method is replaced by 'beforeUnmount() {}'.

[TheJackForge]

I must have missed when this was uploaded! Going to check it out this weekend!

[chawerkamanga]

Was totally waiting for this thanks Traversy Media

[senpaioka]

Just couple of days ago started to learn firebase. This tutorial will be a massive help. ありがとうございます

[otorisamson]

i`ve been following this tutorial, and so far, everythings been so good. cant wait to have my blog through this tutorial. thanks so much for this very educative tutorial.

[bekzodbekolimbekov]

Thank you for that John. This was amazing. One thing. In the video, you mentioned that you can copy from the finished repo. Unfortunately I could not find finished repo

[hafizjavaid]

My Favourite Youtuber John's Socials

[pandaabinash]

Was waiting for this from last 1 year...thanks Brad and John