Coding

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