fireblogs-youtube's People
Forkers
bharathjinka09 joespencer bangrobe letuankiet212 jadsn markoton collenz vienpt yujiay aminsehati chezo25 appletouch safarovdeem thanh01pmt tabsdrisbidmamul mettad3v dterzian namianya heo-0229 ahmedthabet569 rajendrataradale kareemhisham ritapetillo computahsaysno kk0055 ayush10 domicoder jgashi sandy98urs chsevero keljtanoski allybi-design unitedideas syafiqjos osamadiab81 alfathmuqoddas pragmaticcreator zilongrrr kleeeeea redoni18 marcoslebron re-creators mjriyanto oluwatosin123 shegdamm andreamartz mickaelrichard s-raps soso-md mdixon47 oussama-smiai sitc badasscodr zaq141 davidoludolapo isokandonee khanflex bil-prog olsi-aliaj iskandarsd janzenfaidiban likaiw ichbinsieger anarcypher begovicg ivan-shpynda bucbharat jhantu-nandi aungkyawhtwe1998 fortesa773 nabedkhan new-media-art milidrag rolteame trevour66 essentialenglish adnin danielthames360 dennisobel undefined-exception mresire jamesande65 mahfuz68 santiagoaloi isaactekulu titusnjuguna ahalamora1981 chanbormey10mao nandatritona unitedwithcode vrothenbergucsd iamarbabhussain luisoft13 drowe1 tastai44 hammad538 kec1510 juandld calebkoehn lucasmorifireblogs-youtube's Issues
Some global styles are missing in `App.vue`
Global styles added in the YouTube video is not updated in App.vue
When i login as admin in console shows the UID of admin is undefined
Error when Install this project
FYI: if you have problems during installation maybe it's because of the new version of node, I recommend using node 14.17.0, this worked for me
Every User beign a Admin Issue
Here is the fixed code on store/index.js:
import Vue from "vue";
import Vuex from "vuex";
import firebase from "firebase/app";
import "firebase/auth";
import db from "../firebase/firebaseInit";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
blogPosts: [],
postLoaded: null,
blogHTML: "Write your blog title here...",
blogTitle: "",
blogPhotoName: "",
blogPhotoFileURL: null,
blogPhotoPreview: null,
editPost: null,
user: null,
profileAdmin: null,
profileEmail: null,
profileFirstName: null,
profileLastName: null,
profileUsername: null,
profileId: null,
profileInitials: null,
},
getters: {
blogPostsFeed(state) {
return state.blogPosts.slice(0, 2);
},
blogPostsCards(state) {
return state.blogPosts.slice(2, 6);
},
},
mutations: {
newBlogPost(state, payload) {
state.blogHTML = payload;
},
updateBlogTitle(state, payload) {
state.blogTitle = payload;
},
fileNameChange(state, payload) {
state.blogPhotoName = payload;
},
createFileURL(state, payload) {
state.blogPhotoFileURL = payload;
},
openPhotoPreview(state) {
state.blogPhotoPreview = !state.blogPhotoPreview;
},
toggleEditPost(state, payload) {
state.editPost = payload;
},
setBlogState(state, payload) {
state.blogTitle = payload.blogTitle;
state.blogHTML = payload.blogHTML;
state.blogPhotoFileURL = payload.blogCoverPhoto;
state.blogPhotoName = payload.blogCoverPhotoName;
},
filterBlogPost(state, payload) {
state.blogPosts = state.blogPosts.filter((post) => post.blogID !== payload);
},
updateUser(state, payload) {
state.user = payload;
},
setProfileAdmin(state, payload) {
state.profileAdmin = payload;
},
setProfileInfo(state, doc) {
state.profileId = doc.id;
state.profileEmail = doc.data().email;
state.profileFirstName = doc.data().firstName;
state.profileLastName = doc.data().lastName;
state.profileUsername = doc.data().username;
console.log(state.profileId);
},
setProfileInitials(state) {
state.profileInitials =
state.profileFirstName.match(/(\b\S)?/g).join("") + state.profileLastName.match(/(\b\S)?/g).join("");
},
changeFirstName(state, payload) {
state.profileFirstName = payload;
},
changeLastName(state, payload) {
state.profileLastName = payload;
},
changeUsername(state, payload) {
state.profileUsername = payload;
},
},
actions: {
async getCurrentUser({ commit }) {
const dataBase = await db.collection("users").doc(firebase.auth().currentUser.uid);
const dbResults = await dataBase.get();
commit("setProfileInfo", dbResults);
commit("setProfileInitials");
const adminEmails = ["[email protected]", "[email protected]"];
const admin = adminEmails.includes(dbResults.data().email);
commit("setProfileAdmin", admin);
},
async getPost({ state }) {
const dataBase = await db.collection("blogPosts").orderBy("date", "desc");
const dbResults = await dataBase.get();
dbResults.forEach((doc) => {
if (!state.blogPosts.some((post) => post.blogID === doc.id)) {
const data = {
blogID: doc.data().blogID,
blogHTML: doc.data().blogHTML,
blogCoverPhoto: doc.data().blogCoverPhoto,
blogTitle: doc.data().blogTitle,
blogDate: doc.data().date,
blogCoverPhotoName: doc.data().blogCoverPhotoName,
};
state.blogPosts.push(data);
}
});
state.postLoaded = true;
},
async updatePost({ commit, dispatch }, payload) {
commit("filterBlogPost", payload);
await dispatch("getPost");
},
async deletePost({ commit }, payload) {
const getPost = await db.collection("blogPosts").doc(payload);
await getPost.delete();
commit("filterBlogPost", payload);
},
async updateUserSettings({ commit, state }) {
const dataBase = await db.collection("users").doc(state.profileId);
await dataBase.update({
firstName: state.profileFirstName,
lastName: state.profileLastName,
username: state.profileUsername,
});
commit("setProfileInitials");
},
},
modules: {},
});
After This you need to fix the route's in router/index.js:
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
import Blogs from "../views/Blogs.vue";
import Login from "../views/Login.vue";
import Register from "../views/Register.vue";
import ForgotPassword from "../views/ForgotPassword.vue";
import Profile from "../views/Profile.vue";
import CreatePost from "../views/CreatePost.vue";
import BlogPreview from "../views/BlogPreview.vue";
import ViewBlog from "../views/ViewBlog.vue";
import EditBlog from "../views/EditBlog.vue";
import firebase from "firebase/app";
import "firebase/auth";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home,
meta: {
title: "Home",
requiresAuth: false,
},
},
{
path: "/blogs",
name: "Blogs",
component: Blogs,
meta: {
title: "Blogs",
requiresAuth: false,
},
},
{
path: "/login",
name: "Login",
component: Login,
meta: {
title: "Login",
requiresAuth: false,
},
},
{
path: "/register",
name: "Register",
component: Register,
meta: {
title: "Register",
requiresAuth: false,
},
},
{
path: "/forgot-password",
name: "ForgotPassword",
component: ForgotPassword,
meta: {
title: "Forgot Password",
requiresAuth: false,
},
},
{
path: "/profile",
name: "Profile",
component: Profile,
meta: {
title: "Profile",
requiresAuth: true,
},
},
{
path: "/create-post",
name: "CreatePost",
component: CreatePost,
meta: {
title: "Create Post",
requiresAuth: true,
isAdmin: true,
},
},
{
path: "/post-preview",
name: "BlogPreview",
component: BlogPreview,
meta: {
title: "Preview Blog Post",
requiresAuth: true,
isAdmin: true,
},
},
{
path: "/view-blog/:blogid",
name: "ViewBlog",
component: ViewBlog,
meta: {
title: "View Blog Post",
requiresAuth: false,
},
},
{
path: "/edit-blog/:blogid",
name: "EditBlog",
component: EditBlog,
meta: {
title: "Edit Blog Post",
requiresAuth: true,
isAdmin: true,
},
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
scrollBehavior() {
return { x: 0, y: 0 };
},
});
router.beforeEach((to, from, next) => {
document.title = ${to.meta.title} | FireBlog
;
next();
});
router.beforeEach(async (to, from, next) => {
let user = firebase.auth().currentUser;
let admin = null;
if (user) {
let token = await user.getIdTokenResult();
admin = token.claims.admin;
}
if (to.matched.some((res) => res.meta.requiresAuth)) {
if (user) {
if (to.matched.some((res) => res.meta.requiresAdmin)) {
if (admin) {
return next();
}
return next({ name: "Home" });
}
return next();
}
return next({ name: "Home" });
}
return next();
});
export default router;
some additional info for people who didnt watch complete video
hi john, thank you for great tutorial and very detailed explanation about vue and firebase.but better to add some info about npm install-g firebase-tools and firebase init and select their own firebase application steps to the project main page at installation section.
the people who is didnt watched all video "like me" will getting error while try to run project
thanks...
Admin Demo
I just tried the demo and install the project on local, when registering and logging in I can't make a blog post.
please tell the email and password for the demo admin.
Npm install finished project does not work.
Npm install finished project does not work. Do you know why?
Should i not be able to see some of the interface at least?
Thanks.
emoved 8 packages, changed 24 packages, and audited 215 packages in 4s
10 packages are looking for funding
run npm fund
for details
3 moderate severity vulnerabilities
To address all issues, run:
npm audit fix
Run npm audit
for details.
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm -v
8.3.0
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % sudo npm npm install -g npm@latest
Unknown command: "npm"
To see a list of supported npm commands, run:
npm help
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % sudo npm install -g npm@latest
changed 14 packages, and audited 215 packages in 3s
10 packages are looking for funding
run npm fund
for details
3 moderate severity vulnerabilities
To address all issues, run:
npm audit fix
Run npm audit
for details.
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm -v
8.3.0
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % sudo npm install -g npm@latest
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm install
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn
npm ERR! dest /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-N9aErJTn
npm ERR! errno -66
npm ERR! ENOTEMPTY: directory not empty, rename '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn' -> '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-N9aErJTn'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ms/.npm/_logs/2022-01-06T16_53_18_596Z-debug-0.log
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % sudo npm install
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn
npm ERR! dest /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-N9aErJTn
npm ERR! errno -66
npm ERR! ENOTEMPTY: directory not empty, rename '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn' -> '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-N9aErJTn'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ms/.npm/_logs/2022-01-06T16_53_42_848Z-debug-0.log
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm run serve
[email protected] serve
vue-cli-service serve
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module '@vue/cli-shared-utils'
Require stack:
- /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js:3:27)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js'
]
}
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm install
npm ERR! code ENOTEMPTY
npm ERR! syscall rename
npm ERR! path /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn-walk
npm ERR! dest /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-walk-cqDuPq6B
npm ERR! errno -66
npm ERR! ENOTEMPTY: directory not empty, rename '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/acorn-walk' -> '/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/.acorn-walk-cqDuPq6B'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/ms/.npm/_logs/2022-01-06T17_10_52_790Z-debug-0.log
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code % npm run serve
[email protected] serve
vue-cli-service serve
node:internal/modules/cjs/loader:936
throw err;
^
Error: Cannot find module '@vue/cli-shared-utils'
Require stack:
- /Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
at Function.Module._load (node:internal/modules/cjs/loader:778:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object. (/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js:3:27)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12) {
code: 'MODULE_NOT_FOUND',
requireStack: [
'/Users/ms/Projects/FireBlogs-YouTube-Finished-Source-Code/node_modules/@vue/cli-service/bin/vue-cli-service.js'
]
}
ms@Ms-MacBook-Pro FireBlogs-YouTube-Finished-Source-Code %
at 139 my project is showing err...
index.js?a18c:139 Uncaught (in promise) TypeError: user.getIdTokenResult is not a function
Not getting admin panel when /admin
Not getting admin panel when /admin
After scrolling , The modal component pops up without filling the window
You can modify the CSS in the modal component:
.modal {
//position: absolute;
position: fixed;
}
The experience will be better
I like this project, thank you !!
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.