academind / yt-devmeetup-vue-firebase

Source code for my Vue + Vuetify + Firebase DevMeetup YouTube Project

yt-devmeetup-vue

A dev meetup application built with Vue + Vuetify + Firebase.

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

yt-devmeetup-vue-firebase's Issues

Using '.id' atttribute in a simply array within the State

In the following line:

yt-devmeetup-vue-firebase/src/store/user/index.js

Line 18 in f2c1a46

registeredMeetups.splice(registeredMeetups.findIndex(meetup => meetup.id === payload), 1)

you are using 'meetup.id' in the closure; however the registeredMeetups is a simple array of ids!

So instead of this, you should use:
registeredMeetups.splice(registeredMeetups.findIndex(meetup => meetup === payload), 1)

Same in line 10.

This wasn't discovered because it still works as lon as you don't have more than one registration in that array!

I should write a pull request, but I'm not too familiar yet with that process...

firebase api absent from main file in branch 11

First of all, thanks so much for this great video tutorial.

Working through, I see errors while on branch 11-signup, since the following dependency is actually absent from the top of the main.js form:

import * as firebase from 'firebase'

so invocation of firebase gives error.

This is of course corrected in the next branch, just fyi.

Thanks again, for great video on vuetify (so few things out there right now).

Request for latest version

I Need its latest version

Account creation is possible with non-matching passwords

I'd suggest doing a check inside of the onSignUp to make sure that the user has inputted two matching passwords. Otherwise, they will only be warned if passwords don't match, but they won't be prevented from submitting the form.

I implemented the following in my code:

if (!this.comparePasswords) { this.$store.dispatch('signUserUp', { email: this.email, password: this.password }); } else { console.log('Passwords did not match'); return; }

Register/Unregister for a meetup

If there are 3 meetups(A,B,C) , when I register for A, the user node with the associated meetup is created in firebase and the unregister button is displayed. All is good until here.

But the issue I have is meetups B and C also displays Unregister(but no data is created in firebase), whereas I registered only for Meetup A. I have spent several hours trying to fix this bug, but I cant really find out the root cause, if someone did come across this issue and fixed it, could you please point me in the right direction

a logic issue on branch 19

on Meetup.vue line 42:
v-if="userIsAuthenticated && !userIsCreator"
You cannot register for a meetup you created

what's your plan of adding LocalStorage logic

Hi Max,
do you want to put it in router or main.js?
for example, is firebase would return some jwt for us? so user can automatically login within restriction period of time

Router-link issue

I can not seem to find the solution...

My router-link is pointing at a wrong route, namely on "meetups/something..." and not displaying the carousel at all at the beginning

However, the code seems fine to me, in App.vue:

Home

and in router/index.js
routes: [
{
path: '/',
name: 'Home',
component: Home
}, else....
]

It looks like it goes straight into the method in Home.vue without displaying the carousel and the rest of Home.vue

methods: {
onLoadMeetup (id) {
this.$router.push('/meetups/' + id)
}
}

What am I missing out?

Loading and Error shared logical error

Having shared loading and error will result in modules sharing the same error and loading state which doesnt make sense... lets say you load up the meetups in the meetup page and while its still loading you go to the signup page.. observe that the signup page then will have a loading state.

DevMeetup Errors upon "npm run dev"

I'm not able to launch this project in my browser from the final project of the github page. Here's what I did so far:

1. download the project as a zip file & extract from: https://github.com/academind/yt-devmeetup-vue-firebase

2. run "npm install" in project folder

3. change firebase information to my own on src/main.js (e.g. apiKey, authDomain, databaseURL, etc.)

4. run "npm run dev"

At this point, I get the error as shown in the image: https://drive.google.com/open?id=1FykTdftXAu9cM0K5How-zIbEPVRLaJ9j

I start a github of my code for review: https://github.com/gchan82/devmeetup

Update: I also tried the latest (on the dropdown branch menu), which didn't work either. It seems the "latest" was a vuetify-type of update. The most updated overall project file seems to be in the master folder.

Thank you,

Firebase `downloadURLs` is deprecated

yt-devmeetup-vue-firebase/src/store/index.js

Line 99 in 0f3ee16

imageUrl = fileData.metadata.downloadURLs[0]

REFERENCE:
https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getDownloadURL

"comparePasswords" couldn't prevent unequal password to submit

yt-devmeetup-vue-firebase/src/components/User/Signup.vue

Line 66 in 4d5df82

comparePasswords () {

"comparePasswords" couldn't prevent unequal password to submit

vuetify nested menu

Good morning, how can you create a nested menu? or on what web can I consult about it? I apologize for my language level

list of meetups from firebase are only fetched once

List of meetups from firebase are only fetched once, while you are not signed in.
After I do sign in and make refresh in a browser, all data is lost. Something is wrong in code. It is quite difficult to find it for beginner.