- 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