Coding

Finishing Our Project | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:01 welcome to this video over this whole
  • 00:00:04 series about beautifying firebase we
  • 00:00:07 achieved a lot we built a whole
  • 00:00:09 application with sign up sign in the
  • 00:00:13 ability to create meetups register for
  • 00:00:15 them to edit them date and time Pickers
  • 00:00:16 so much stuff now
  • 00:00:19 our store file also grew quite a bit
  • 00:00:22 it's really long and it's already a bit
  • 00:00:25 unmaintainable to be honest now it would
  • 00:00:27 make sense to split it up into modules
  • 00:00:29 and this is exactly what we'll do in
  • 00:00:31 this video
  • 00:00:36 so let's split our store fall into
  • 00:00:38 modules now let's first analyze which
  • 00:00:40 modules would make sense well in my
  • 00:00:44 opinion we got mainly two topics in this
  • 00:00:46 application we got user related stuff
  • 00:00:48 sign up sign in and so on and we got
  • 00:00:51 meetup related stuff now of course there
  • 00:00:53 are some overlapping but in general this
  • 00:00:56 is how I see it
  • 00:00:57 so it would make sense to probably
  • 00:00:59 create these two modules the question of
  • 00:01:02 course always is what is something like
  • 00:01:04 registering is that user or is that
  • 00:01:08 meetup related because the user
  • 00:01:10 registers for a media not really either
  • 00:01:12 of the two right so maybe we need a
  • 00:01:14 fourth third module deregistration
  • 00:01:17 module let's go with that I'll create
  • 00:01:20 three new folders in the store user
  • 00:01:26 registration and of course meetup and in
  • 00:01:32 these folders there I want to store my
  • 00:01:35 modules now you could go super granular
  • 00:01:38 and outsource your actions and your
  • 00:01:40 rotations in two different files now
  • 00:01:42 I'll see if I do that I'll start by
  • 00:01:45 creating different pieces so a file with
  • 00:01:49 all actions and mutations for the user
  • 00:01:51 part a file with all actions and
  • 00:01:53 mutations for the meetup part and so on
  • 00:01:55 so I'll create new index.js file in all
  • 00:02:00 of these folders like that here in the
  • 00:02:10 user and now let's split it up no
  • 00:02:12 splitting it up can be yeah not really
  • 00:02:15 difficult but you have to be careful
  • 00:02:17 that you don't mess things up because
  • 00:02:19 handling or working with the state can
  • 00:02:21 differ from how you did it before
  • 00:02:24 depending on how interweaved your
  • 00:02:25 different parts are but we'll see how it
  • 00:02:27 goes so I'll take the cheap approach
  • 00:02:31 here and copy everything in my main
  • 00:02:34 index.js fault and copy it into the
  • 00:02:36 meetup file and now I'll simply start
  • 00:02:38 removing stuff so let's start at the top
  • 00:02:41 in this state loaded meetups make sense
  • 00:02:44 to have it here user not so much
  • 00:02:47 loading probably yes err
  • 00:02:50 or yeah do we even use that I don't
  • 00:02:52 think so so still let's leave it in
  • 00:02:54 there ah
  • 00:02:55 we'll see if we use it here register
  • 00:02:58 user for Meetup and unregister
  • 00:02:59 definitely can't get rid of these
  • 00:03:01 mutations loaded meetups make sense
  • 00:03:03 create meetup and update meetup these
  • 00:03:05 are all mutations which makes sense in a
  • 00:03:06 meetup store set user doesn't make sense
  • 00:03:10 said loading make sense at error well
  • 00:03:13 let's see if we use it but make sense
  • 00:03:15 clear error as well
  • 00:03:17 now here actions register user for
  • 00:03:21 meetup and unregister definitely don't
  • 00:03:23 need that here load meetups make sense
  • 00:03:27 to have it here create me that makes
  • 00:03:29 sense and update meetup also makes sense
  • 00:03:33 sign user up nope that definitely
  • 00:03:36 doesn't belong here the same for a sign
  • 00:03:38 user in and for auto sign in fetch user
  • 00:03:42 data all the sounds like a user later
  • 00:03:44 tasks to me so why don't we get rid of
  • 00:03:47 that too
  • 00:03:47 the same with log out clear error I'll
  • 00:03:51 leave it here seems like we use it
  • 00:03:53 somewhere I must have forgotten where so
  • 00:03:55 I'll leave it here so dad is now my my
  • 00:03:58 setup here much leaner already the
  • 00:04:01 gathers of course also need to be
  • 00:04:02 cleaned up loaded meetups make sense
  • 00:04:04 feature loaded makes all sense the user
  • 00:04:07 doesn't make sense here so now I get my
  • 00:04:10 meetup store set up here though in the
  • 00:04:15 end it will all be merged into one
  • 00:04:16 central store so it's not really
  • 00:04:18 different stores it's just one part let
  • 00:04:21 me continue I'll copy everything from
  • 00:04:23 the main index file again and go to
  • 00:04:25 registrations now there again what's
  • 00:04:29 inside the state here now one thing we
  • 00:04:32 have is that in mutation for the
  • 00:04:36 register user meetup
  • 00:04:37 we of course access the user so that is
  • 00:04:41 something which makes me lean towards
  • 00:04:43 using this in our users module because
  • 00:04:48 it is connected to it we need access to
  • 00:04:50 the users state here so maybe we don't
  • 00:04:53 really need a registration module
  • 00:04:55 maybe that robber belongs to the user
  • 00:04:57 module because we change the user when
  • 00:05:00 we do register or unregistered we don't
  • 00:05:02 change the meetups
  • 00:05:03 so I'll get rid of registration and
  • 00:05:06 instead copy everything into the user
  • 00:05:08 index.js file now there let's move
  • 00:05:12 through it noted meetups we don't need
  • 00:05:14 that here the user we need it a loading
  • 00:05:17 an error yeah let's leave it here
  • 00:05:18 registering we need that loaded meetups
  • 00:05:21 create meetup update meetup we don't
  • 00:05:23 need that here in the user file set user
  • 00:05:27 that makes sense set loading probably
  • 00:05:29 same for the errors actions create a
  • 00:05:33 registry users make sense load meetups
  • 00:05:36 we don't need that create we don't need
  • 00:05:39 that an update we also don't need that
  • 00:05:41 so now oops we have just as a next
  • 00:05:47 method sign user up and in and all the
  • 00:05:50 sign-in and fetch user data so quite a
  • 00:05:53 lot of user related actions here but now
  • 00:05:56 we at least focus on that in this file
  • 00:05:58 and as I said you could go more granular
  • 00:06:01 and even outsource the actions into
  • 00:06:02 their own file and so do for the
  • 00:06:05 mutations with that let's go down to the
  • 00:06:08 gathers loaded meetups we don't need add
  • 00:06:10 featured and loaded we also do any debt
  • 00:06:12 we need the user and I'll leave loading
  • 00:06:14 an error here so now we get cue state
  • 00:06:17 felt in the two different modules of
  • 00:06:20 course we now need to merge them
  • 00:06:22 together we did it in the main index
  • 00:06:25 chase fall now in the main index.js fall
  • 00:06:28 let's remove everything in this view X
  • 00:06:31 store constructor everything so that we
  • 00:06:34 only pass an empty object to it and we
  • 00:06:36 don't need firebase in this file now
  • 00:06:38 here we now instead add modules as a key
  • 00:06:42 and this is a JavaScript object where we
  • 00:06:44 now merge these modules you can now a
  • 00:06:46 define any names you want maybe meetup
  • 00:06:49 for your meetup module and the value now
  • 00:06:52 needs to be of course a reference to
  • 00:06:54 your exported meetup module so there
  • 00:06:57 I'll import meetup from / Meetup and
  • 00:07:04 that's not that will automatically pull
  • 00:07:07 the index.js file scientists as a value
  • 00:07:10 and the same for user there are import
  • 00:07:14 user
  • 00:07:15 from user and store it here and this
  • 00:07:19 will map it into this now one problem
  • 00:07:21 we'll have is that in these files we
  • 00:07:25 export stores and that is wrong
  • 00:07:28 we shouldn't export stores in these
  • 00:07:30 files we should export JavaScript files
  • 00:07:34 objects like this export may be a
  • 00:07:38 default object which then has state and
  • 00:07:42 so on that is okay but not new view X
  • 00:07:44 story for that reason we can get rid of
  • 00:07:47 view X in here and also of view we don't
  • 00:07:50 need to register that that's simply a
  • 00:07:52 empty file where we just registered or
  • 00:07:54 export a JavaScript object so that's all
  • 00:07:58 just a JavaScript object we export the
  • 00:08:01 same for the user fault get rid of all
  • 00:08:03 the imports and off the initialization
  • 00:08:05 not all the imports we need firebase but
  • 00:08:07 off the initialization and then simply
  • 00:08:10 export a default JavaScript object not
  • 00:08:14 more
  • 00:08:15 now we merge these objects into our
  • 00:08:18 store together here the question just is
  • 00:08:21 does it now work like this let's save it
  • 00:08:24 and see if it works it compiled but now
  • 00:08:28 we get an error duplicate Keter gallery
  • 00:08:31 loading and error the problem we have is
  • 00:08:35 that in both index and user we have a
  • 00:08:39 getter named loading and error and that
  • 00:08:42 of course is suboptimal now the question
  • 00:08:47 is which of these do we really use well
  • 00:08:51 we need it actually in both we want to
  • 00:08:53 show a loading bar or a loading spinner
  • 00:08:54 whilst you are signing in signing up and
  • 00:08:57 we also want to show one when we're
  • 00:08:59 fetching meetups or creating meetups so
  • 00:09:02 just splitting up like this will
  • 00:09:04 generate new problems what we will have
  • 00:09:07 to do is be clear about which gathers we
  • 00:09:10 want to access and how we use them now
  • 00:09:13 to fix that issue with loading an error
  • 00:09:15 we can basically create like a shared
  • 00:09:18 state so let's create shared because
  • 00:09:21 loading an error are basically not
  • 00:09:23 really connected to either a user or a
  • 00:09:26 meet-up we have operations in both
  • 00:09:28 modules which can make this relevant so
  • 00:09:32 here I'll copy this code from the meetup
  • 00:09:37 in XJS fault and add it to a new
  • 00:09:39 index.js file which is stored in the
  • 00:09:41 shared folder now here I'll paste it in
  • 00:09:45 and now I want to get rid of all this
  • 00:09:47 state except for loading an error and
  • 00:09:49 I'll get rid of all new mutations except
  • 00:09:51 for the mutations setting loading and
  • 00:09:54 error and you guessed it the same for
  • 00:09:56 the actions only the actions relating to
  • 00:09:59 errors and so on should be set so I
  • 00:10:02 think we have no action which is called
  • 00:10:05 set loading or stuff like that so we
  • 00:10:08 only have clear error as action like
  • 00:10:10 that and finally in the gathers we also
  • 00:10:14 only have loading and error and I can
  • 00:10:18 now go to the user actually to both to
  • 00:10:20 the meetup module to you and get rid of
  • 00:10:23 error and loading there make sure to get
  • 00:10:26 rid of all the actions and all the
  • 00:10:28 getters and so on all the mutations
  • 00:10:30 related to loading an error so
  • 00:10:32 everything here in the mutations as well
  • 00:10:34 as well as in this state because we will
  • 00:10:37 now manage this in a shared folder the
  • 00:10:39 same for the user get rid of user and
  • 00:10:42 excuse me of error and loading of clear
  • 00:10:45 error and in mutations clear error set
  • 00:10:50 error set loading and of our two states
  • 00:10:54 now let's add it to our store shared
  • 00:10:59 here should be imported from the shared
  • 00:11:03 folder so I'll assign it here and let's
  • 00:11:07 now save it and see if this works well I
  • 00:11:11 got an error let's see which it is
  • 00:11:13 linting problem firebase is never used
  • 00:11:17 in the shared index.js file which makes
  • 00:11:21 sense because there are just copied
  • 00:11:23 everything in but of course the firebase
  • 00:11:25 import is needed there we don't reach
  • 00:11:26 out to firebase in there that's wrong
  • 00:11:29 file shared index here we never reach
  • 00:11:32 out to firebase so with that let's save
  • 00:11:36 it and let's reload our application and
  • 00:11:39 now this should work really fine Farage
  • 00:11:42 stur confirm this seems to work the
  • 00:11:47 reason for this is that view che s view
  • 00:11:49 X exposes our state we merge together
  • 00:11:53 here your whole application so we can
  • 00:11:56 still commit to set loading and so on
  • 00:11:58 even though that's in a different view X
  • 00:12:01 module because again it's merged
  • 00:12:02 together globally so if in the index
  • 00:12:05 Ches fault in the meetup folder we call
  • 00:12:08 it set loading or we commit this we're
  • 00:12:10 actually committing this to set loading
  • 00:12:12 in these shared in X J's file because
  • 00:12:15 again view X behind-the-scenes merges it
  • 00:12:17 all together into one global store we
  • 00:12:20 only split it up for readability reasons
  • 00:12:23 in the end you could merge that all
  • 00:12:25 together into one file again and have
  • 00:12:27 the same result as before so now with
  • 00:12:29 that we got a finished application we
  • 00:12:31 cleaned up our store as I said you could
  • 00:12:33 split it up even more by splitting these
  • 00:12:35 files into different files where you
  • 00:12:37 have just the actions just mutations but
  • 00:12:39 then in the end you would just have
  • 00:12:41 JavaScript objects with for example this
  • 00:12:43 content in an extra file import it and
  • 00:12:47 assign your import as a value for
  • 00:12:49 mutations here this is the finished
  • 00:12:52 project feel free to enhance it to
  • 00:12:55 continue working on it to practice with
  • 00:12:57 it it's not perfect there are things you
  • 00:12:59 can improve there are things you can add
  • 00:13:01 but I hope it was a great practice and I
  • 00:13:03 hope you enjoyed working with it we
  • 00:13:06 added a lot of features I hope you
  • 00:13:07 learned a lot about beautiful view KS
  • 00:13:10 and firebase and there will be more
  • 00:13:13 projects in the future I'm really
  • 00:13:15 looking forward to dead and I can't wait
  • 00:13:17 to see you again bye