Planning the App | Vue.js + Vuetify + Firebase FULL PROJECT

00:00:01 welcome aboard of this video my name is
00:00:04 Max and I'm excited to get started with
00:00:06 this series I already show you where I
00:00:09 showed you the final project and the
00:00:11 first video of this playlist together
00:00:13 with you in this video we're going to
00:00:16 create the concept behind our
00:00:18 application so we're going to draw a
00:00:20 little bit and see which components we
00:00:22 actually meet before we dive into the
00:00:24 technical implementation in the next
00:00:26 video so let's get started
00:00:31 so let's get started and as I show you
00:00:34 in the first video of this playlist the
00:00:37 application we're going to build is like
00:00:39 a meet-up organizing application where
00:00:42 people are able to create new meetups
00:00:45 and register or unregister for me depth
00:00:48 of course for that will also have an
00:00:50 authentication flow because we need of
00:00:52 medicated users to register for meters
00:00:54 or create new meetups and whilst this
00:00:57 application does sound simple I guess it
00:01:01 covers a lot of features from the view
00:01:03 universe we're going to use to be router
00:01:05 UX it's going to cover a third party
00:01:08 package beautify which gives us a nice
00:01:10 set of components we can use which look
00:01:13 nice and which work knives and we're
00:01:15 going to use firebase on the backend to
00:01:18 have some place where we store our users
00:01:20 where we store the meetups where we
00:01:22 store files associated with the meetups
00:01:25 and where we can then actually work with
00:01:27 all of that so let's get started with
00:01:29 the drawing part though as I said I'm in
00:01:32 this video I want to start by
00:01:34 conceptualizing this application so see
00:01:37 which building blocks we need and how it
00:01:39 should actually look like now typically
00:01:41 of course you don't have the advantage I
00:01:43 have that you already start with a rough
00:01:46 concept of course I already built the
00:01:48 application to prepare it
00:01:50 that was the app I showed you in the
00:01:51 teaser video but still a typical process
00:01:54 is that you know which product you want
00:01:57 to build and there's the thought of
00:01:58 which we're going to start now
00:02:00 for that let me draw a little bit we're
00:02:03 going to build our dev meet-up
00:02:07 application I hope you can read this I'm
00:02:10 drawing this life so if it's not super
00:02:12 pretty I'm sorry about that
00:02:14 so that's our def meetup application
00:02:16 let's start with the starting screen I
00:02:18 like to start from the visuals so by
00:02:22 starting to draw what the end product
00:02:24 should look like of course I have two
00:02:27 features in mind prior to death but by
00:02:30 starting to draw it and starting to
00:02:32 design or create or come up with an user
00:02:35 interface it's pretty clear how all
00:02:37 these pieces should be connected and how
00:02:39 the flow of X should be in our
00:02:41 application and that is what I want to
00:02:43 highlight here so that
00:02:44 see starting page here and on this
00:02:47 starting page let's maybe make this
00:02:49 navigation bar a little bit wider so
00:02:51 that we have some flat place writer I
00:02:53 want to have two well a brand on the
00:02:55 left and if you click this it should
00:02:57 chest take us back to that starting page
00:03:00 here I guess so maybe we draw this in
00:03:03 here too just takes us back the more
00:03:06 interesting part is going to be on the
00:03:08 right here there I want to have three
00:03:11 items I want to go to a list of meetups
00:03:14 so your meet ups I want to be able to
00:03:18 create a new one and I want to be able
00:03:21 to well visit my user profile basically
00:03:24 and we're only going to create a dummy
00:03:27 profile here but of course it's easy to
00:03:29 come up with a more complex profile or
00:03:30 you could change your settings and so on
00:03:32 so these are the free navigation icons
00:03:35 or the free navigation items now from a
00:03:37 visual perspective we're going to make
00:03:39 that more beautiful in the real app
00:03:41 we're going to use icons here and so on
00:03:43 but that is the general idea behind it
00:03:45 now on the starting page of course we
00:03:48 don't just have the navigation we're
00:03:49 going to have the navigation on each
00:03:50 page actually on the starting page what
00:03:53 we'll also have is let's say a caruso
00:03:56 step pronounced correctly I don't know
00:03:58 so basically an image which gets

00:04:00 replaced automatically which flips
00:04:02 through a couple of images and the image
00:04:04 is taken here are actually images from
00:04:06 meetups so here I basically want to flip
00:04:10 through existing featured meetups and
00:04:12 for that we need to grab a set of
00:04:15 featured meetups will implement the
00:04:17 color to do so – of course and if we
00:04:19 click on one of these cards I want to be
00:04:21 taken to the individual meetup page then
00:04:24 we don't have that page yet but that is
00:04:26 the idea have this caruso which flips
00:04:29 through our meetups and maybe below and
00:04:31 we have some dummy text so you say well
00:04:33 telling our awesome page or something
00:04:35 like that so that looks like a good
00:04:37 starting page to me let's continue with
00:04:39 the list of meetups here so with this
00:04:43 link here it should take us to a page
00:04:47 which well gives us such a list of
00:04:50 existing meetups
00:04:52 difference to the Karoo so of course let
00:04:54 me make a little bit more prettier the
00:04:56 dip
00:04:56 to the Caruso of course is that the list
00:04:59 of meetups we're going to have all the
00:05:02 me that's not just a feature set so here
00:05:05 on this page we're still going to have
00:05:08 our navigation and I'm not going to
00:05:10 write all these items again but it's the
00:05:11 stealth same item that's on the first
00:05:13 page and then here why don't we simply
00:05:16 have some cards some list items
00:05:19 basically which represent our me dad's
00:05:22 on an equator aggregated view of course
00:05:25 we could have some thumbnails here on
00:05:28 the left to the actual images we're
00:05:30 using could be here on the left then
00:05:33 maybe the title here maybe the date so
00:05:39 that we can quickly see when this meetup
00:05:41 is and then I'll link to the individual
00:05:46 meetup page so here whatever would be
00:05:52 our links taking out three individual
00:05:54 meters now these links here these links
00:05:58 here would actually take us to the very
00:06:01 same page I click on the caruso will
00:06:03 take us so wait don't we combined it
00:06:06 here here of course we have our single
00:06:10 meetup page so for the individual meetup
00:06:13 we open here we want to see some details
00:06:16 about it so for that let's quickly give
00:06:20 us this wireframe here again um same
00:06:23 navigation as before but now on this
00:06:25 page I want to display information about
00:06:27 the selected Rita because we had a list
00:06:30 of meters you were able to see which
00:06:32 meetups are available now I picked one
00:06:34 and we want to see more details like the
00:06:36 description which should also probably
00:06:38 contain a clue about where it is and a
00:06:41 link to register for the meetup of
00:06:42 course so here we could have like a
00:06:45 central card which has a header with
00:06:49 well maybe the title again but then also
00:06:52 a big image of the Rita the same we had
00:06:55 for the Caruso and we had here as a
00:06:57 thumbnail now maybe here as well also as
00:07:01 an image to add some nice visuals to
00:07:03 this page then here we could have the
00:07:07 date again and then here the the
00:07:09 gription where the creator of the meter
00:07:12 is free to write anything you want like
00:07:14 for example where this meetup actually
00:07:16 is very important at the bottom I want
00:07:19 to have an action bar where I able to
00:07:22 register or unregister if we already are
00:07:25 registered I also want to have something
00:07:28 else I want to have added link here and
00:07:34 all the one next to the date and the
00:07:37 time will we're going to have here and
00:07:39 these links should allow us to well edit
00:07:43 this meter but of course only if we are
00:07:46 the creator of the meetup so we'll have
00:07:48 to check this to make sure that no a lot
00:07:51 dedicated user or no unauthorized user
00:07:53 actually is able to edit this so here
00:07:57 with that I want you implement this edit
00:08:00 feature here through a dialog so through
00:08:04 edit dialogues so we're not going to
00:08:07 leave that page here we're actually
00:08:09 going to stay on that page but a dialog
00:08:12 should open which allows us to add a
00:08:13 title and description or the date a date
00:08:16 or the time and the same for the
00:08:19 registration here I want to open a
00:08:22 register or unregister dialog that would
00:08:30 be altered to so that is the plan here
00:08:32 that we have that open now with that
00:08:36 that looks nice for the meetup flow
00:08:38 we're able to see a list of meetups to

00:08:40 go to an individual meetup and then to
00:08:42 register or unregister or edit up if
00:08:44 we're added edited if we're ready
00:08:47 creator now we're not done of course
00:08:49 because of what's missing we also have
00:08:52 when our link here the new meetup right
00:08:54 so why don't we also have a look at that
00:08:58 and here Glantz go over there where we
00:09:02 still have some space
00:09:03 whoops here I want you be able to create
00:09:09 a new meter like that now the new is a
00:09:14 page
00:09:16 of course also has the navigation we
00:09:18 already know and love but here I want
00:09:22 you well be able to create a new Meetup
00:09:23 and before that we obviously need a
00:09:25 couple of things so we need an input
00:09:27 field for for the title for the
00:09:32 description and very important I want to
00:09:35 be able to upload an image here so that
00:09:41 is something we'll definitely also run
00:09:42 an honest page image upload and preview
00:09:45 feature so that people are able to add
00:09:48 their own images which are associated
00:09:49 with the media now we'll also add date
00:09:54 and time Pickers here because obviously
00:09:58 we want to be able to do that and then
00:10:00 basically a button too well save this so
00:10:05 that would be our new meetup page here
00:10:09 of course in the end it will look nicer
00:10:12 from a visual perspective but these are
00:10:13 the core features someone I have title
00:10:15 description upload and date and time
00:10:17 picker and this allows us to them well
00:10:21 create this meetup and add a new one all
00:10:24 this meat up management over the place
00:10:27 where the meetups are going to be stored
00:10:29 of course is not our front end for that
00:10:32 we're going to use firebase so in the
00:10:37 end what we'll have is will have which
00:10:40 maybe put it here we'll have fire base
00:10:45 sitting behind the scenes as our back
00:10:49 end where we manage our meetups well
00:10:55 that's pretty ugly right so let me
00:10:56 rewrite this
00:10:59 where we manage our meetups and where we
00:11:03 also manage our users and debts
00:11:06 something I haven't talked about yet
00:11:08 obviously this whole flow I draw here so
00:11:13 all these things which are related to
00:11:16 meetups creating meetups and so on are
00:11:19 restricted to authenticated users only
00:11:22 well the list of me that does point be
00:11:24 viewed by an offer on open ahead users
00:11:27 to but you should only be able to create
00:11:29 new me dozens on if you are
00:11:30 authenticated so that's a thing which is
00:11:33 totally missing in our setup here we of
00:11:35 course also need to add a new page here
00:11:39 we have our navigation but on this page
00:11:44 we should be able to sign up or sign in
00:11:47 so maybe have a card with email field
00:11:52 here a password field and then we can
00:11:55 sign in and the same for the signup
00:11:57 process of course we also are able to
00:11:59 create a new account that sign us some
00:12:01 sign ourselves up with firebase because
00:12:03 firebase is to bacchanal use for this
00:12:05 application the open dication status um
00:12:10 let's put it here all status
00:12:17 therefore changes 1/3 sign in through
00:12:22 firebase so that is the flow here and
00:12:25 the status also affects our navigation
00:12:29 bar
00:12:31 so effects navigation because I want to
00:12:34 display different items on the bar
00:12:35 depending on the user authentication
00:12:37 status of course obviously it will also
00:12:40 affect to which pages we grant the user
00:12:42 access we will control this through
00:12:44 navigation guards implemented in the
00:12:46 view router that is basically it from a
00:12:51 application page perspective now as you
00:12:54 can see we only get about five or to be
00:12:57 precise because with more secure about
00:12:59 signup pages on but not that many pages
00:13:01 but they're packed with features
00:13:03 actually we have a really complex
00:13:05 application here we have a back-end
00:13:07 which helps us with manage NIC where we
00:13:08 can authenticate users where we can
00:13:10 reach out to the database and store data
00:13:12 where we can also store images don't
00:13:14 forget that and as I mentioned the
00:13:16 multiple times I'm going to use firebase
00:13:18 as a back-end and I'm going to use two
00:13:19 native firebase SDK actually to interact
00:13:22 with it so that should be interesting
00:13:24 too because I never did this on this
00:13:26 channel and firebase is a great tool as

00:13:28 you will learn in this series which
00:13:30 might be pretty interesting to you in
00:13:32 your next project queue and it really
00:13:34 got it really got banner over the last
00:13:37 months which is why I find it very
00:13:39 interesting but of course you could also
00:13:40 implement this with any other back and
00:13:42 of your choice you're obviously free to
00:13:45 build as a friend back and then use that
00:13:46 I'll just use firebase but as I
00:13:48 mentioned a lot of features we're going
00:13:50 to cover here in this series really
00:13:52 looking forward today what else could we
00:13:55 plan now we could also plan our data
00:13:58 models right because we have like the
00:14:00 visual representation here we have like
00:14:02 a glue how our application should look
00:14:05 like how the user is able to navigate in
00:14:07 this application and we can also see
00:14:09 which components were probably going to
00:14:11 well for them and which components we
00:14:12 need we also want to know what we're
00:14:15 actually storing in the backend right so
00:14:18 why don't we have a look at firebase
00:14:20 here and have a look at the user and the
00:14:24 Meetup now the meetup definitely needs
00:14:27 an ID and firebase actually assigns one
00:14:30 automatically so we can note this here
00:14:33 auto assigned by firebase
00:14:39 we besides an ID we also of course want
00:14:42 to have a title for our meetup
00:14:47 description a date because obviously we
00:14:51 need to know when this meter is we could
00:14:53 also add a place here in this app I'll
00:14:56 just do it like that that it's listed in
00:14:58 the description because it's really
00:14:59 flexible app you're free to well
00:15:01 describe the location however you want
00:15:03 it doesn't just have to be one
00:15:05 coordinate set on Google Maps so that's
00:15:08 well put it in the description but you
00:15:09 can could of course add a location here
00:15:11 tube title description date what else do
00:15:14 we need well we definitely also want to
00:15:16 store the ID of the creator so the user
00:15:20 who created this user who created the
00:15:27 meetup because that of course the
00:15:29 crucial information for us to control
00:15:30 who's able to access order to change the
00:15:33 meter and we also want to store
00:15:37 something else we need to store a
00:15:39 reference to our image so the image URL
00:15:43 we're going to upload this image also on
00:15:46 firebase and there it will get stored on
00:15:48 their file storage service and what we
00:15:50 actually receive once we did upload it
00:15:53 is an URL and this URL is actually
00:15:57 actually what we want to save in this
00:15:59 meetup so that once we fetch the meetup
00:16:01 and use it in our application we know
00:16:03 where to look for the image which you
00:16:06 want to display to you so that is where
00:16:08 we also save the image URL and it's this
00:16:11 set of data fields here I want to use as
00:16:14 a data model in this application for the
00:16:16 media now of course you're free to
00:16:19 enhance this in whichever way you want
00:16:21 you can certainly get more complex than
00:16:24 that
00:16:24 for me this set of rules will do though
00:16:27 the user is super simple we're going to
00:16:30 use two default email passwords sign up
00:16:33 process fire rates provides and
00:16:34 therefore the user really just has an ID
00:16:37 which is automatically generated by
00:16:41 firebase the user then also has an email
00:16:44 and of course the password so that is
00:16:49 what the user has that is how the user
00:16:51 mall looks like it has
00:16:53 everything it needs for our application
00:16:54 purposes here therefore and this is
00:16:57 really looking great to me so there is
00:16:59 the general structure of our application
00:17:02 from a visual perspective or from a
00:17:04 hello a user interaction perspective and
00:17:07 from a data perspective now of course
00:17:09 you could go into much more detail here
00:17:11 make this more complex feel free should
00:17:13 you so I hope this helps you understand
00:17:16 this now in the video description you'll
00:17:19 find a link where you can actually
00:17:20 download this document I drew here I
00:17:22 hope you can read it and in the next
00:17:25 video we're going to start with the
00:17:26 actual implementation this is not going
00:17:28 to be a short series but it's going to
00:17:30 be an interesting one I believe so let's
00:17:32 get started with the technical
00:17:34 implementation in the next video

You may also like