technifyedWeekly list
Menu
Opportunities
Learn
Prepare
Get the weekly list

Traversy Media

6 Hour Vue.js & Firebase Project - FireBlogs

via YouTube Free video

Compare with others

Overview

Build a multi-user blog project with Vue.js, Vuex and Firebase

Demo:

https://fireblogs-50850.web.app/

Code:

https://github.com/johnkomarnicki/FireBlogs-YouTube

John's YouTube Channel:

https://www.youtube.com/channel/UCr0D7PVNOHqB3Td7lVl_LKw

John's Socials:

https://twitter.com/john_komarnicki

https://www.linkedin.com/in/john-komarnicki

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

Chapters 26

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

Advantages and disadvantages

Advantages

  • Free, one long video that covers a topic end to end.
  • Use the chapters to jump to what you need.
  • 209,682 views, so help and notes are easy to find.
  • Completely free.
  • Self-paced: start any time.
  • A clear syllabus (26 parts) you can see before you start.
  • Hands-on: you build or practise, not just watch.
  • Start watching right away, no sign-up.

Disadvantages

  • No exercises or certificate: code along to make it stick.
  • No certificate.
  • No graded assignments or feedback.

Some points apply to every course of this kind; see how we rank.

Free

  • Free: Watch on YouTube, no account needed.
  • Certificate: None. Code or take notes along to make it stick.

Traversy Media is in Tier 3: good universities, respected companies, nonprofits and well-known teachers of our institution ranking (74/100).

Similar courses

Compare these

Harvard University

CS50's Introduction to Databases with SQL

This is CS50’s introduction to databases using a language called SQL. Learn how to create, read, update, and delete data with relational databases, which store data in rows and columns. Learn how to model real-world entities and relationships among them using tables with appropriate types, triggers…

  • Free video
  • 8 videos, 11 hours

Harvard University

CS50's Introduction to Computer Science

An introduction to the intellectual enterprises of computer science and the art of programming.

  • Free to audit
  • 12 weeks, 5 - 14 hours per week

Harvard University

CS50's Introduction to Programming with Python

An introduction to programming using Python, a popular language for general-purpose programming, data science, web programming, and more.

  • Free to audit
  • 10 weeks, 3 - 6 hours per week

Harvard University

CS50's Web Programming with Python and JavaScript

This course picks up where CS50 leaves off, diving more deeply into the design and implementation of web apps with Python, JavaScript, and SQL using frameworks like Django, React, and Bootstrap.

  • Free to audit
  • 12 weeks, 6 - 14 hours per week