Coding

MERN Stack – React.js Node, Express & MongoDB Crash Course – Tutorial for Beginners

  • 00:00:00 welcome to this course it's amazing to
  • 00:00:02 have you on board as a student now in
  • 00:00:04 this course you will learn all about the
  • 00:00:06 merge stack you will learn how to build
  • 00:00:08 amazing full stack web applications with
  • 00:00:11 MongoDB Express reactors and Noches and
  • 00:00:15 you will learn all of that not just in
  • 00:00:17 theory but actually applied in practice
  • 00:00:19 to a real course project which we will
  • 00:00:22 build from scratch a project that shows
  • 00:00:24 you how these pieces work together and
  • 00:00:26 which will also include important topics
  • 00:00:29 like file upload and user authentication
  • 00:00:31 so that by the end of the course you
  • 00:00:34 will be able to build your own full
  • 00:00:36 stack web applications with these
  • 00:00:37 technologies now that's the course but
  • 00:00:39 Who am I
  • 00:00:40 my name is Max and I will be one of your
  • 00:00:42 instructors in this course I will be
  • 00:00:44 responsible for the parts about react
  • 00:00:46 note Express and how we combine all
  • 00:00:48 these things including authentication
  • 00:00:50 but in this course I'm joined by Manuel
  • 00:00:53 a MongoDB expert who will be your
  • 00:00:55 instructor and guide in the database
  • 00:00:57 related sections hi I'm Manuel I'm a
  • 00:01:00 data scientist and MongoDB expert now
  • 00:01:03 you know what this course is all about
  • 00:01:05 but what are the course requirements
  • 00:01:06 what do you have to bring to the table
  • 00:01:08 to succeed in this course in this course
  • 00:01:11 you will learn how to connect node
  • 00:01:13 Express MongoDB and react and the
  • 00:01:15 connection is the core focus of this
  • 00:01:18 course
  • 00:01:18 therefore this course does not dive
  • 00:01:20 deeply into each of these technologies
  • 00:01:23 the course comes with refreshers on
  • 00:01:25 react MongoDB and note but the
  • 00:01:27 refreshers are well refreshers if you
  • 00:01:30 really want to dive deeper make sure to
  • 00:01:32 check out dedicated courses on these
  • 00:01:33 topics but for this course basic
  • 00:01:36 reactions knowledge is highly
  • 00:01:37 recommended and also basic knowledge of
  • 00:01:39 nodejs helps a lot to succeed here these
  • 00:01:42 are the core requirements of this course
  • 00:01:44 and with that it's now time to type into
  • 00:01:47 the course
  • 00:01:49 so what's myrn what does myrn stand for
  • 00:01:53 the M stands for long go DB and that is
  • 00:01:56 a database solution the e stands for
  • 00:01:59 Express I'll come back to what this is
  • 00:02:02 in a second the R stands for react J s
  • 00:02:06 and this is a browser side javascript
  • 00:02:08 library that helps us build amazing user
  • 00:02:11 interfaces and the N stands for node.js
  • 00:02:14 this is a server-side JavaScript runtime
  • 00:02:17 and environment where JavaScript code
  • 00:02:19 can be executed outside of the browser
  • 00:02:21 and now Express Reyes is a framework for
  • 00:02:25 Noches Soudan Yente makes building
  • 00:02:27 nodejs applications easier now combined
  • 00:02:31 these technologies form the so called
  • 00:02:34 myrn stack they work together
  • 00:02:37 particularly well and you can build
  • 00:02:39 amazing full stack web applications with
  • 00:02:42 these four technologies working together
  • 00:02:44 so let's take a closer look at each of
  • 00:02:46 these technologies to understand which
  • 00:02:49 role it plays exactly in that tech stack
  • 00:02:52 so what's react react is a client-side
  • 00:02:55 so on the browser library which allows
  • 00:02:58 you to build highly reactive user
  • 00:03:00 interfaces so it's all about building
  • 00:03:02 user interfaces with react you write
  • 00:03:05 JavaScript code that will be executed in
  • 00:03:07 the browser and since it runs there it
  • 00:03:10 is responsible for controlling what the
  • 00:03:12 user sees on the screen and how things
  • 00:03:15 they are changed when a button is
  • 00:03:17 clicked when something is entered into
  • 00:03:19 input box it's really all about that
  • 00:03:21 it's about rendering a user interface
  • 00:03:24 with dynamic data and about updating it
  • 00:03:27 when data changes or when certain events
  • 00:03:29 occur
  • 00:03:30 it's about handling user input and
  • 00:03:32 providing feedback to the user and it's
  • 00:03:35 also and that is where the everfree
  • 00:03:37 technologies will come into play it's
  • 00:03:39 all about communicating with back-end
  • 00:03:42 services and with back-end I mean
  • 00:03:45 services or technologies that don't run
  • 00:03:48 in the browser of your user so react so
  • 00:03:51 to say is the front-end the other three
  • 00:03:55 technologies node Express and MongoDB
  • 00:03:57 together make up the backend now we use
  • 00:04:01 libraries like react
  • 00:04:03 and there are alternatives like angular
  • 00:04:05 with which you would have to mean stack
  • 00:04:07 instead of the myrn stack which do the
  • 00:04:10 same but we use such technologies to
  • 00:04:13 provide users with a mobile app like
  • 00:04:16 user experience where everything happens
  • 00:04:19 instantly where we have a great
  • 00:04:21 reactivity where things on the user
  • 00:04:23 interface really feel great and and
  • 00:04:26 instant and we simply provide a really
  • 00:04:28 awesome and amazing user experience now
  • 00:04:31 what about the other technologies what
  • 00:04:32 is node exactly it's a JavaScript
  • 00:04:35 runtime typically used or often used to
  • 00:04:38 create server-side JavaScript
  • 00:04:41 applications now technically that's not
  • 00:04:43 the only thing you can use it for but it
  • 00:04:45 is one of the most prominent use cases
  • 00:04:47 and scenarios you can use node.js to
  • 00:04:51 execute JavaScript outside of the
  • 00:04:53 browser and since it runs out of the
  • 00:04:56 browser you can for example use it to
  • 00:04:59 create a web server with it
  • 00:05:00 so to run it on some machine which is
  • 00:05:02 exposed to the Internet which then
  • 00:05:04 accepts requests and sends back
  • 00:05:06 responses so we can then use JavaScript
  • 00:05:09 as a server-side programming language as
  • 00:05:11 an alternative to PHP asp.net Java
  • 00:05:15 Enza on basically with no trace we can
  • 00:05:18 listen to requests and sent back
  • 00:05:20 responses we can execute server-side
  • 00:05:22 logic and we can also interact with
  • 00:05:24 databases and with files things we
  • 00:05:27 typically don't do in the browser or we
  • 00:05:30 can't do in the browser since we're not
  • 00:05:32 tied to the browser anymore there are
  • 00:05:35 certain things we can't do anymore for
  • 00:05:37 example interact with the Dom because
  • 00:05:39 there is no Dom it's running outside of
  • 00:05:41 the browser but there are new things we
  • 00:05:43 can do for example well write files or
  • 00:05:46 do things like this and therefore as I
  • 00:05:48 said it's an alternative to other
  • 00:05:50 server-side programming languages and
  • 00:05:52 just like those languages it's all
  • 00:05:55 important to note that it's rarely used
  • 00:05:57 stand alone instead typically we use it
  • 00:06:00 combined with Express and Express is a
  • 00:06:03 note raised framework so we still write
  • 00:06:05 node.js JavaScript code but we get
  • 00:06:08 utility functions and assert the way of
  • 00:06:11 structuring and building our
  • 00:06:14 applications so a certain rules
  • 00:06:17 that we adhere to basically which makes
  • 00:06:19 building no trace applications much much
  • 00:06:22 easier so it's based on node.js but
  • 00:06:25 gives us new functionalities it's
  • 00:06:27 strictly middleware based and you will
  • 00:06:29 learn what that means throughout the
  • 00:06:31 course which means we have a clear way
  • 00:06:34 of handling requests a clear funnel
  • 00:06:36 through which all requests are passed
  • 00:06:38 where we then can extract data or
  • 00:06:41 prepare the response and in general with
  • 00:06:44 our features like routing view rendering
  • 00:06:46 and more we got a lot of tools and clear
  • 00:06:49 rules that almost force us to write
  • 00:06:51 amazing and really well working node.js
  • 00:06:54 applications so it really simplifies the
  • 00:06:57 usage of nodejs
  • 00:06:59 and if you know PHP it's a bit like what
  • 00:07:02 level is for PHP an amazing framework
  • 00:07:05 that simplifies the usage of the
  • 00:07:07 language and that leaves us with MongoDB
  • 00:07:10 what is MongoDB about MongoDB is a no
  • 00:07:15 sequel database engine which allows us
  • 00:07:18 to store documents in so called
  • 00:07:19 collections instead of Records and
  • 00:07:22 tables as you would have it in sequel so
  • 00:07:25 it's a database engine it's all about
  • 00:07:27 storing data
  • 00:07:28 it's about storing our application data
  • 00:07:31 specifically we use MongoDB in this
  • 00:07:33 course and in general to store for
  • 00:07:36 example our users our products or
  • 00:07:38 whatever our application is about unlike
  • 00:07:42 sequel it doesn't enforce a schema for
  • 00:07:45 our data we can still build one and use
  • 00:07:48 one if you want to but we're not forced
  • 00:07:49 to and we also don't need to work with
  • 00:07:52 relations we can still set up kind of
  • 00:07:55 relations but it's all a lot looser than
  • 00:07:58 it is in sequel you're not forced to do
  • 00:08:01 these things and this is the case on
  • 00:08:03 purpose of course because it also gives
  • 00:08:06 you many advantages for example no
  • 00:08:08 sequel databases like MongoDB often give
  • 00:08:11 you amazing performance because they're
  • 00:08:14 way more flexible it's also very easy to
  • 00:08:18 connect it to node and Express because
  • 00:08:20 as you will see throughout this course
  • 00:08:22 writing queries against MongoDB is
  • 00:08:25 really straightforward and super easy
  • 00:08:27 when working with JavaScript anyways so
  • 00:08:30 it's
  • 00:08:30 really fun and easy to use MongoDB in
  • 00:08:33 JavaScript applications now for security
  • 00:08:36 reasons as you will also learn
  • 00:08:38 throughout this course we don't connect
  • 00:08:40 to MongoDB directly from inside our
  • 00:08:43 react application instead we do that
  • 00:08:46 with the help of node and Express and
  • 00:08:48 that is how we then have all these
  • 00:08:49 technologies work together so it's a
  • 00:08:52 powerful database which can easily be
  • 00:08:54 integrated into a node Express
  • 00:08:56 environment technically however you
  • 00:08:58 could also swap MongoDB for our database
  • 00:09:01 engines it wouldn't be the myrn stack
  • 00:09:03 anymore because well our M would be gone
  • 00:09:06 but of course you could also you build
  • 00:09:08 an app with react node Express and some
  • 00:09:11 other database but as I said MongoDB
  • 00:09:14 really works well and it's super easy to
  • 00:09:16 use
  • 00:09:20 so we learned about the individual
  • 00:09:23 technologies what's the big picture that
  • 00:09:25 how do these things work together now we
  • 00:09:28 can differentiate between the front end
  • 00:09:30 and the back end if we want to or client
  • 00:09:33 and server what happens on the client is
  • 00:09:36 our front end what happens on the server
  • 00:09:38 side is our back end and on the client
  • 00:09:41 we use javascript or specifically
  • 00:09:43 react.js
  • 00:09:44 to build an amazing user interface on
  • 00:09:46 the server side we use node Express and
  • 00:09:50 MongoDB now we use javascript here for
  • 00:09:54 the presentation and user interface we
  • 00:09:56 will build a single page application
  • 00:09:58 with it and it will come back to that
  • 00:09:59 later in the course and on the server
  • 00:10:01 side we have all our server-side
  • 00:10:04 business logic we can store data
  • 00:10:07 persistently either in files or in a
  • 00:10:10 database we also implement our
  • 00:10:12 authentication logic there for example
  • 00:10:14 and technically on the server we even
  • 00:10:16 can split node Express from MongoDB
  • 00:10:19 because as you will learn throughout the
  • 00:10:20 course MongoDB will actually also run on
  • 00:10:23 its own server its own machine but it
  • 00:10:26 all happens outside of the browser so I
  • 00:10:28 all consider this to be the back end now
  • 00:10:31 that of course leaves us with the
  • 00:10:33 question how client and server
  • 00:10:34 communicate and that will happen with
  • 00:10:36 help of requests and responses HTTP
  • 00:10:40 requests and responses which are
  • 00:10:42 exchanged between these two ends we will
  • 00:10:45 send back ground HTTP requests from
  • 00:10:48 inside our react JavaScript app to our
  • 00:10:50 server side to our anode Express
  • 00:10:52 application and this application will
  • 00:10:54 then reply with responses and we will
  • 00:10:57 also exchange data typically in the JSON
  • 00:11:00 format this is how this will generally
  • 00:11:03 work together this is how this will be
  • 00:11:05 connected but we will have an entire
  • 00:11:07 theory module where we will take a
  • 00:11:09 closer look at this and then of course
  • 00:11:11 we have a huge course project which we
  • 00:11:14 build from scratch where we will build
  • 00:11:16 all these different areas where we will
  • 00:11:19 build the front and aunt back and and
  • 00:11:21 connect to a database and so on and
  • 00:11:23 there you will of course also see all
  • 00:11:26 these things come together
  • 00:11:32 so this is the big picture but what's
  • 00:11:34 inside this course now we are almost
  • 00:11:37 done getting started and in the next
  • 00:11:39 module we'll dive into the moon in
  • 00:11:40 theory so we'll have a look at all the
  • 00:11:42 four core components of the burn stack
  • 00:11:44 MongoDB Express react and nodejs
  • 00:11:47 we'll see how these work and how they
  • 00:11:49 are connected to both finally build the
  • 00:11:51 myrn stack with that theoretical part
  • 00:11:54 out of the way it's time to dive into
  • 00:11:56 our course project then we will start
  • 00:11:58 with the react front-end for this we'll
  • 00:12:01 use features like components hooks
  • 00:12:03 routing and we'll also add front-end
  • 00:12:05 user input validation and with that
  • 00:12:08 towards the end of this module we will
  • 00:12:09 have a nice looking and from a frontal
  • 00:12:11 perspective working application what's
  • 00:12:14 missing here of course is the back and
  • 00:12:16 then he will focus on two node and
  • 00:12:17 Express we'll create our own REST API
  • 00:12:19 implement our own routes use controllers
  • 00:12:22 and models and as we did it for the
  • 00:12:24 front and now it's time for the back and
  • 00:12:26 user input validation besides that we'll
  • 00:12:28 also learn how we can connect our
  • 00:12:30 back-end to a real database mom would be
  • 00:12:33 in our case here with that the back end
  • 00:12:35 will be finished what's missing here of
  • 00:12:36 course now is the connection of these
  • 00:12:38 two ends and that's what's going to
  • 00:12:39 happen in the next module with that we
  • 00:12:42 will have our first draft of the working
  • 00:12:44 myrn application here few things are
  • 00:12:47 missing though at this stage one thing
  • 00:12:49 is file upload covered in the next
  • 00:12:51 module here we'll learn how we can store
  • 00:12:53 files images in our case on our own
  • 00:12:56 server following the file upload we'll
  • 00:12:58 work on authentication the
  • 00:13:00 authentication module will mainly cover
  • 00:13:02 the user signup in the user log in logic
  • 00:13:04 so that only if you are logged in for
  • 00:13:06 example you can access certain parts of
  • 00:13:08 our application and with that our
  • 00:13:10 application will be built we will have a
  • 00:13:12 full moon stack application at this
  • 00:13:14 stage there is only one less thing
  • 00:13:16 missing and this is the last module
  • 00:13:18 which concludes the course the
  • 00:13:19 deployment module because up to this
  • 00:13:21 point we were working in a local
  • 00:13:23 development environment here we will
  • 00:13:25 learn how we can deploy our app to a
  • 00:13:27 real server in the internet so as you
  • 00:13:30 can see lots of topics to cover in this
  • 00:13:32 course lots of things to learn and to
  • 00:13:34 explore and before we dive into the
  • 00:13:37 course now let's have a look at how you
  • 00:13:39 can get the most out of this course
  • 00:13:45 our goal is that you get the best
  • 00:13:47 possible learning experience why it's
  • 00:13:49 following along this course so how can
  • 00:13:51 you get the most out of it
  • 00:13:52 well first watch the videos sounds easy
  • 00:13:55 it's an on-demand video course in the
  • 00:13:56 end but it's important to watch the
  • 00:13:58 videos and to also watch the videos at
  • 00:14:00 your speed you can adjust the playback
  • 00:14:02 speed in the YouTube video player so
  • 00:14:04 make sure to use this feature to watch
  • 00:14:06 the course videos conveniently watching
  • 00:14:08 the videos is nice but also code along
  • 00:14:11 this is a very crucial part of the
  • 00:14:13 learning process the whole course is
  • 00:14:15 interactive so take the chance code
  • 00:14:17 along and important pause and rewind
  • 00:14:19 don't just code along and don't
  • 00:14:22 understand what type of code you're
  • 00:14:24 writing and why you're writing it in
  • 00:14:25 case something is unclear pause and
  • 00:14:27 rewind watch the lecture again until you
  • 00:14:29 really understand what you're doing here
  • 00:14:31 and why you're doing it
  • 00:14:32 besides coding along practice is of
  • 00:14:34 course something that we highly
  • 00:14:36 recommend following along the course is
  • 00:14:39 great and you learn all the core things
  • 00:14:41 you need to create your own nonstic
  • 00:14:42 applications in this course but you
  • 00:14:44 should advance on your own create your
  • 00:14:47 own projects or enhance the course
  • 00:14:49 project according to your needs
  • 00:14:51 these are all things that will help you
  • 00:14:53 in the long term practice play around
  • 00:14:55 and with that become a myrn stack master
  • 00:14:57 now on the way to become a master
  • 00:14:59 debugging and searching is also
  • 00:15:01 something that will happen to you things
  • 00:15:03 can go wrong when writing code this is
  • 00:15:05 also a crucial part of the learning
  • 00:15:07 process in the end but it's important to
  • 00:15:09 have the right approach for debugging
  • 00:15:11 the code and for searching for solutions
  • 00:15:12 for that you can find the used code
  • 00:15:15 attached to the last lecture of each
  • 00:15:17 module in the course so in case you're
  • 00:15:19 stuck make sure to download this code
  • 00:15:21 and compare it to your code you might
  • 00:15:23 have a tiny little mistake and with that
  • 00:15:24 approach you can quickly find it and
  • 00:15:26 continue with the course also Google
  • 00:15:29 incase you of any kind of error message
  • 00:15:31 chances are that if you have this
  • 00:15:33 problem another person had this problem
  • 00:15:35 to you and with that a solution can be
  • 00:15:37 found quickly via Google
  • 00:15:39 besides Google you can also use the
  • 00:15:41 integrated udemy search function that's
  • 00:15:44 also really helpful with that you can
  • 00:15:45 search through the course content and
  • 00:15:47 you can also search through the Q&A
  • 00:15:49 section because that's the last
  • 00:15:51 important step to make sure you get the
  • 00:15:53 most out of this course ask and answer
  • 00:15:55 questions in case you're stuck and you
  • 00:15:57 can't continue
  • 00:15:59 in the Q&A section of the course and we
  • 00:16:00 do our best to help you as quick as
  • 00:16:02 possible but in addition to asking it's
  • 00:16:05 also important to answer questions
  • 00:16:07 because answering is so much more
  • 00:16:09 rewarding asking is easy right but
  • 00:16:11 answering and helping others this is
  • 00:16:13 really great
  • 00:16:13 because nothing can go wrong here if you
  • 00:16:15 give a wrong answer somebody will
  • 00:16:17 correct you and you will learn or if you
  • 00:16:18 gave the right answer you practice your
  • 00:16:21 knowledge and the person who asked the
  • 00:16:23 question gets an answer and that's
  • 00:16:24 basically a win-win situation for
  • 00:16:26 everyone now with that you are
  • 00:16:29 well-prepared for the course and this
  • 00:16:31 means we cannot dive into a course and
  • 00:16:33 continue with the myrn stack in theory
  • 00:16:35 now
  • 00:16:39 now in order to build an application
  • 00:16:41 with the myrn stack we need to
  • 00:16:43 thoroughly understand how it works so in
  • 00:16:46 this module we'll dive a bit into you
  • 00:16:48 learn and how the different pieces work
  • 00:16:51 together in theory towards the end of
  • 00:16:54 this module we'll also have a look at a
  • 00:16:56 simple Mirnyi
  • 00:16:59 application but of course throughout the
  • 00:17:01 course we'll then build a bigger one but
  • 00:17:03 learning this theory and understanding
  • 00:17:06 the big picture is crucial specifically
  • 00:17:09 in this module we will have a look at
  • 00:17:11 all the different pieces react note
  • 00:17:14 Express and MongoDB and understand how
  • 00:17:17 these pieces are connected or how these
  • 00:17:20 pieces are working together because of
  • 00:17:22 course data is in the NT essence off the
  • 00:17:25 moon stack do you understand how to
  • 00:17:27 combine all these technologies you will
  • 00:17:30 all learn in this module that there is
  • 00:17:33 more than one way of combining these
  • 00:17:35 technologies and therefore we'll have a
  • 00:17:37 look at those different approaches and
  • 00:17:39 I'll explain the pros and cons of the
  • 00:17:43 different approaches and which approach
  • 00:17:44 we'll use in this course and the Wiz
  • 00:17:47 debt let's dive right in and let's have
  • 00:17:49 a look at the big picture of the marin
  • 00:17:52 stack and how that all works
  • 00:17:58 myrn of course stands for MongoDB
  • 00:18:00 Express react and note and we want to
  • 00:18:03 have these four technologies work
  • 00:18:06 together we want to build a full stack
  • 00:18:08 web application where these four
  • 00:18:11 technologies are used because they tend
  • 00:18:14 to work together really well but how do
  • 00:18:17 they work together how are they
  • 00:18:18 connected the are react is responsible
  • 00:18:23 for the client-side for the browser side
  • 00:18:25 for what they user sees so the
  • 00:18:28 presentation and the user interface this
  • 00:18:32 means that we will use react j/s to
  • 00:18:35 build our front-end facing web
  • 00:18:37 application the thing that runs in the
  • 00:18:40 browser react yes as you should know is
  • 00:18:43 of course based on JavaScript it's a
  • 00:18:46 JavaScript library and it's JavaScript
  • 00:18:48 that is executed in the browser so react
  • 00:18:52 is used to build beautiful and highly
  • 00:18:54 reactive user interfaces in the browser
  • 00:18:57 it's there to render something onto the
  • 00:19:00 screen and re-render it whenever
  • 00:19:02 something changes update the user
  • 00:19:04 interface and provide a great user
  • 00:19:07 experience to our end users put in our
  • 00:19:09 words react is responsible for what the
  • 00:19:12 user sees in the end react alone is
  • 00:19:15 great and we can build stunning user
  • 00:19:18 interfaces with it but of course if we
  • 00:19:21 only work with react we have some
  • 00:19:23 limitations most importantly we're not
  • 00:19:26 really able to execute any logic on a
  • 00:19:29 server so in a place where users can't
  • 00:19:32 see our code they can see it in the
  • 00:19:34 browser anyone can use the browser dev
  • 00:19:37 tools to look into our code and in
  • 00:19:39 addition to running code user can't see
  • 00:19:42 or running more performance intensive
  • 00:19:45 tasks which we also don't want to do in
  • 00:19:47 the browser in addition to that we
  • 00:19:49 typically also want to store some data
  • 00:19:51 in a persistent storage and the browser
  • 00:19:54 site is not such a persistent storage
  • 00:19:57 users can clear the data there the
  • 00:20:00 browser might clear data on its own if
  • 00:20:02 it's running out of space so data there
  • 00:20:04 is not persistent it's also not
  • 00:20:07 shareable across all users of our web
  • 00:20:09 applications because if we stored a
  • 00:20:12 in the browser of course it's only
  • 00:20:13 readable by that browser sounion by that
  • 00:20:16 user and not of other users of our web
  • 00:20:19 application for an online shop where
  • 00:20:22 users are able to create products which
  • 00:20:24 should be visible to any user that would
  • 00:20:26 be bad so that's why we need a so-called
  • 00:20:29 back-end a server-side this is a web
  • 00:20:33 application that runs on a dedicated
  • 00:20:36 machine a server somewhere in the
  • 00:20:38 internet reachable by anyone so open up
  • 00:20:42 to incoming Internet connections and
  • 00:20:44 that server is created and run with the
  • 00:20:48 help of node.js and a node framework
  • 00:20:51 Express j/s these two pieces are used to
  • 00:20:56 write JavaScript code that runs on a
  • 00:20:59 server detached from our client from our
  • 00:21:03 browser there we can run any business
  • 00:21:05 logic which we might want to hide from
  • 00:21:08 our users or which is more performance
  • 00:21:11 intensive since we run it on a dedicated
  • 00:21:13 machine a dedicated server we don't rely
  • 00:21:16 on the machine of our users which is
  • 00:21:18 great we also can use node and Express
  • 00:21:20 for file storage and we will in this
  • 00:21:23 course and therefore this is an
  • 00:21:26 important part of a real web application
  • 00:21:28 now this server side and the client side
  • 00:21:32 so the browser communicate with requests
  • 00:21:35 and responses HTTP requests and
  • 00:21:38 responses specifically so-called Ajax or
  • 00:21:42 as I like to call them behind-the-scenes
  • 00:21:45 requests and responses requests and
  • 00:21:47 response is triggered from client side
  • 00:21:50 JavaScript so that they are sent to the
  • 00:21:53 server and the response is handled in
  • 00:21:55 the client without reloading the page on
  • 00:21:58 the client that is achieved by
  • 00:22:00 exchanging data which is not a HTML page
  • 00:22:03 which would be rendered by the browser
  • 00:22:04 in which would therefore lead to a page
  • 00:22:06 refresh but instead which is a so-called
  • 00:22:09 JSON format there also are other formats
  • 00:22:12 you could use and we'll have a look at
  • 00:22:14 one other format in this course but
  • 00:22:16 Jason is by far the most common format
  • 00:22:19 for exchanging data jason stands for
  • 00:22:22 JavaScript object notation and it's a
  • 00:22:25 machine readable
  • 00:22:25 and all the quiet human readable data
  • 00:22:28 format which me and is used to exchange
  • 00:22:30 text data numeric data and structured
  • 00:22:34 data in any form
  • 00:22:36 this data is attached to both requests
  • 00:22:40 sent from the client to the server and
  • 00:22:41 response is received by the client
  • 00:22:44 incoming from the server to then re
  • 00:22:47 render something on the client side so
  • 00:22:50 using react to re-render parts of the UI
  • 00:22:52 or to do something on the server side if
  • 00:22:55 the data is received there for example
  • 00:22:57 store it in a database now speaking of
  • 00:23:00 that the database MongoDB is missing in
  • 00:23:04 this picture now that's our third
  • 00:23:06 building block if you want to call it
  • 00:23:08 like this we also have an extra database
  • 00:23:11 server which runs our MongoDB engine and
  • 00:23:15 that's really important to understand in
  • 00:23:17 the end of this picture there are three
  • 00:23:19 big blocks working together two servers
  • 00:23:22 one running our node Express app and one
  • 00:23:24 running database engine and the client
  • 00:23:27 side that's also involved of course now
  • 00:23:29 that database server can run on the same
  • 00:23:33 machine as our node Express server or on
  • 00:23:35 a totally different machine that doesn't
  • 00:23:37 really matter the database server in
  • 00:23:40 MongoDB is then used for the persistent
  • 00:23:42 data storage not file storage
  • 00:23:45 you should always store files on a file
  • 00:23:47 system not in a database but any other
  • 00:23:50 data like the name of a product the
  • 00:23:52 price of a product the users of our web
  • 00:23:54 application things like that would be
  • 00:23:56 stored in a database like MongoDB now
  • 00:24:00 the important question when we have a
  • 00:24:02 look at this incomplete picture here is
  • 00:24:04 who's talking to the database server and
  • 00:24:07 that is our node Express application
  • 00:24:11 that application sends database queries
  • 00:24:15 using the MongoDB SDK or a MongoDB
  • 00:24:19 library to be precise to that database
  • 00:24:22 server we don't send requests from the
  • 00:24:26 client side directly to the database
  • 00:24:28 why because to send these queries we
  • 00:24:31 need to include our database credentials
  • 00:24:33 so the username and password to log in
  • 00:24:37 to our database so to say
  • 00:24:39 as I mentioned earlier all the code dead
  • 00:24:43 runs on the client side so in the
  • 00:24:45 browser is readable by all your users
  • 00:24:48 there is no way of disabling this this
  • 00:24:50 is how the web works so if that code
  • 00:24:53 would include the credentials for your
  • 00:24:55 database your users could hack your
  • 00:24:58 database they could gain access to it so
  • 00:25:02 we do this on a server side where the
  • 00:25:04 code is not readable by our users and
  • 00:25:07 from the client side we just send
  • 00:25:09 requests and responses to the server and
  • 00:25:11 on the server we decide which requests
  • 00:25:13 who want to handle and which responses
  • 00:25:15 we want to send back so we have full
  • 00:25:17 control on the server side and the
  • 00:25:19 client is only able to communicate with
  • 00:25:21 the server within request response
  • 00:25:24 patterns we allow and that is of course
  • 00:25:27 what we will build in detail throughout
  • 00:25:29 this course this is the big picture for
  • 00:25:32 the myrn architecture this is how all
  • 00:25:34 the pieces work together and which
  • 00:25:37 pieces are involved in the first place
  • 00:25:39 and this architecture allows us to build
  • 00:25:41 amazing web applications highly scalable
  • 00:25:45 and very fast web applications with a
  • 00:25:48 beautiful and highly reactive user
  • 00:25:50 interface powered by react attached to
  • 00:25:53 them now with that let's take a closer
  • 00:25:56 look at some of these building blocks
  • 00:26:02 let's take a closer look at the front
  • 00:26:04 end the client side the browser site I
  • 00:26:06 will use these terms interchangeably by
  • 00:26:08 the way and that of course is powered by
  • 00:26:11 react specifically there we build a
  • 00:26:14 react SP a a single page application now
  • 00:26:19 this simply means that react is in
  • 00:26:21 charge of re rendering everything in the
  • 00:26:24 browser only one HTML page that single
  • 00:26:29 page that makes up this term single page
  • 00:26:31 application is served from some server
  • 00:26:34 to the browser in the end and thereafter
  • 00:26:37 react takes over and whenever something
  • 00:26:39 needs to be drawn onto the screen or
  • 00:26:42 whenever something needs to change on
  • 00:26:44 the screen or needs to be rear-ended
  • 00:26:45 react will do that for that will also
  • 00:26:48 handle front-end or client side routing
  • 00:26:51 with an extra library react router DOM
  • 00:26:54 and this will help us render totally
  • 00:26:57 different react components react is all
  • 00:27:00 about components you will by the way
  • 00:27:02 also get our react refresher in one of
  • 00:27:04 the next modules so the react router
  • 00:27:07 will help us render react components
  • 00:27:10 based on a path the user enters into the
  • 00:27:14 URL bar of the browser so we will have
  • 00:27:16 the feeling of having multiple pages but
  • 00:27:20 in the end it's all react and therefore
  • 00:27:22 Java Script re-rendering significant
  • 00:27:25 parts of our page so of what the user
  • 00:27:28 sees when we change to URL or when we
  • 00:27:32 get new data from the backend and so on
  • 00:27:34 now in our reactor plication we also
  • 00:27:38 typically handle some front-end State
  • 00:27:41 State in the end is data you could say
  • 00:27:44 that influences what is shown on the
  • 00:27:47 screen and when our state changes
  • 00:27:49 chances are that we want our rerender
  • 00:27:51 parts of the screen react is all about
  • 00:27:53 managing such state and it has built-in
  • 00:27:56 mechanisms to automatically rerender the
  • 00:27:58 parts of the screen that need to change
  • 00:28:00 when something changes now for state
  • 00:28:03 management we can use react state in
  • 00:28:05 class-based components we can use hooks
  • 00:28:09 relatively kind of new feature in react
  • 00:28:12 and or also for application wide stay
  • 00:28:16 the redox library now as I mentioned you
  • 00:28:19 will get a refresher all react later in
  • 00:28:21 the course but it will not dive into
  • 00:28:23 every aspect of react that would be
  • 00:28:26 enough for its own course and indeed I
  • 00:28:29 do have such a standalone react course
  • 00:28:31 which I strongly recommend that you have
  • 00:28:33 a look at before you dive into this
  • 00:28:35 course now whenever important part of
  • 00:28:38 your react application are of course all
  • 00:28:41 these components you build because react
  • 00:28:43 is all about components and how you
  • 00:28:45 style those so the styling is also part
  • 00:28:48 of the front and work or off the front
  • 00:28:50 and application that your application
  • 00:28:52 looks good now as I mentioned for the
  • 00:28:55 routing we'll use react router Dom and
  • 00:28:58 there we can basically set up a route
  • 00:29:00 configuration and then define which
  • 00:29:02 react components are rendered for which
  • 00:29:04 path we can implement state management
  • 00:29:07 with react hooks with our custom hooks
  • 00:29:09 which will all be built throughout this
  • 00:29:11 course and/or with redux and for
  • 00:29:15 components and styling we will build in
  • 00:29:18 this course some utility and UI
  • 00:29:20 components though I will also say that
  • 00:29:22 throughout this course I will also
  • 00:29:25 provide some finished UI components to
  • 00:29:27 you and some finished styles so that we
  • 00:29:30 don't spend the majority of the time of
  • 00:29:33 this course on writing basic button or
  • 00:29:36 input components and managing the style
  • 00:29:39 of these components because that's
  • 00:29:41 really not the core of react and off
  • 00:29:44 this course and therefore some finished
  • 00:29:47 components will be provided to you for
  • 00:29:49 this part in general of course we'll
  • 00:29:51 build the entire react application from
  • 00:29:53 scratch though and this is what react is
  • 00:29:56 about it's all related to the fraud and
  • 00:29:59 how we update it and when things should
  • 00:30:02 change there now let's have a look at
  • 00:30:04 the backend
  • 00:30:08 if we dig a bit deeper into the backend
  • 00:30:11 of course we have to keep in mind what I
  • 00:30:13 explained earlier that we have decoupled
  • 00:30:16 ends which means we have the front end
  • 00:30:18 powered by react with the back and
  • 00:30:21 powered by node Express and then we also
  • 00:30:23 have the database server with MongoDB
  • 00:30:25 now because of that decoupled ends thing
  • 00:30:29 our back-end is built as an API which
  • 00:30:34 stands for application programming
  • 00:30:36 interface now the term API is not just
  • 00:30:39 related to web development or to note
  • 00:30:41 Express apps API is a general
  • 00:30:44 programming term and it describes things
  • 00:30:47 which expose certain entry points you
  • 00:30:51 could say which other things can use for
  • 00:30:54 example if you're building a third-party
  • 00:30:55 library that should do some user input
  • 00:30:59 validation you might offer certain
  • 00:31:01 functions the application that uses your
  • 00:31:03 library can call in a certain way to use
  • 00:31:07 your library so basically any library
  • 00:31:10 you create needs clearly defined entry
  • 00:31:12 points and a way of using them so that
  • 00:31:15 our users who did not build your library
  • 00:31:17 can interact with it and for our
  • 00:31:20 back-end it's basically the same we
  • 00:31:22 build a node express application which
  • 00:31:24 defines some entry points some ways of
  • 00:31:28 communicating with it and only these
  • 00:31:30 ways are supported thereafter if some
  • 00:31:34 client which tries to talk to our
  • 00:31:36 back-end for example the react tab later
  • 00:31:38 wants to interact with some entry point
  • 00:31:41 we didn't define it we'll get an error
  • 00:31:44 this pattern is important because it
  • 00:31:46 allows us to keep control over our API
  • 00:31:49 and control which actions we want to do
  • 00:31:52 which actions we don't want to perform
  • 00:31:54 and what should happen on each action as
  • 00:31:56 well as which data we need to perform
  • 00:31:58 each action and when it comes to
  • 00:32:00 building such an API of course we'll do
  • 00:32:03 that all step by step throughout this
  • 00:32:05 course it's important to understand
  • 00:32:07 though that there are two major kinds of
  • 00:32:09 api's which you can build when you build
  • 00:32:12 such a baguette you can build a REST API
  • 00:32:15 where rest stands for representational
  • 00:32:18 state transfer and you can build a graph
  • 00:32:22 QL API now both kinds of api's can be
  • 00:32:25 built with any server-side language not
  • 00:32:28 just with nodejs
  • 00:32:29 but of course in this course we will use
  • 00:32:30 nodejs and both kinds of api's can do
  • 00:32:33 anything on the server store data and
  • 00:32:35 the database validate user input get
  • 00:32:38 data from a database and so on now they
  • 00:32:42 work differently when it comes to how
  • 00:32:44 requests are received or how requests
  • 00:32:48 which are sent to the API should be
  • 00:32:50 formatted a REST API which is by far the
  • 00:32:54 most common and used form of back and
  • 00:32:58 Web API uses a combination of different
  • 00:33:01 URLs or paths which are the things after
  • 00:33:05 the domain and HTTP verbs which is this
  • 00:33:08 get post patch delete thing you might
  • 00:33:11 have heard of to build so called
  • 00:33:13 endpoints which trigger different
  • 00:33:16 actions and I'll show some examples and
  • 00:33:18 come back to that in a second so for a
  • 00:33:21 REST API it's the combination of the URL
  • 00:33:23 and the work used for the request that
  • 00:33:26 defines what happens on the server and
  • 00:33:29 when we build such a REST API we define
  • 00:33:32 the combinations of urls and words we
  • 00:33:35 want to support and for unsupported
  • 00:33:37 combinations an error will be sent back
  • 00:33:40 if a client tries to use it for a graph
  • 00:33:43 QL API that's different there we have
  • 00:33:46 one URL and one HTTP wurp typically a
  • 00:33:49 post request so we have one endpoint
  • 00:33:52 which Dan in term however accepts query
  • 00:33:55 commands so since this HTTP verb is a
  • 00:33:59 post request when you build a graph QL
  • 00:34:01 API the body of the request contains a
  • 00:34:04 query expression that adheres to the
  • 00:34:07 graph QL standard in the end which
  • 00:34:09 describes the operation you want to
  • 00:34:11 perform still on the server side when
  • 00:34:14 you build such an API you define which
  • 00:34:17 query commands you want to support so
  • 00:34:19 you still don't support everything but
  • 00:34:21 you don't work with different paths work
  • 00:34:23 combinations but instead with that query
  • 00:34:26 language to trigger different actions
  • 00:34:29 and so on now in both scenarios we
  • 00:34:32 execute code on the server and in both
  • 00:34:35 scenarios
  • 00:34:36 we don't directly talk to the database
  • 00:34:37 graph QL and query commands that might
  • 00:34:41 all sound a bit like we're already
  • 00:34:43 talking to a database but always keep in
  • 00:34:45 mind from your react app you'll always
  • 00:34:49 send requests to your node express app
  • 00:34:51 no matter if that's built as a REST API
  • 00:34:53 or a graph QL API it just influences how
  • 00:34:57 the requests look like what you send but
  • 00:34:59 in both cases you talk to your node
  • 00:35:01 express app and that node expressive
  • 00:35:04 will then do something based on the
  • 00:35:05 action which is triggered because of
  • 00:35:07 your path work combination or because of
  • 00:35:10 your query comment and then it's your
  • 00:35:12 node express server which will talk to a
  • 00:35:14 database
  • 00:35:18 so let's take a closer look at this rest
  • 00:35:21 and graph QL thing how do these api's
  • 00:35:24 look like in detail well as I mentioned
  • 00:35:27 we still have that client-server
  • 00:35:29 combination and the server uses node
  • 00:35:31 Express and then we talk to a MongoDB
  • 00:35:34 database from that node Express server
  • 00:35:36 the client of course uses react now how
  • 00:35:39 does such a request look like which we
  • 00:35:41 send to the node Express server if that
  • 00:35:44 server is built as a REST API well as I
  • 00:35:47 mentioned it's a combination of a
  • 00:35:49 specific URL or specifically the path
  • 00:35:52 which is the thing after the domain
  • 00:35:54 because the domain of course will always
  • 00:35:56 be the same your page comm for example
  • 00:35:58 is the domain but the thing they're
  • 00:36:00 after / products / nothing / nu / user
  • 00:36:04 whatever it is that is the path and that
  • 00:36:08 combined with a specific HTTP werp
  • 00:36:10 triggers a specific action at least if
  • 00:36:13 we support that path where combination
  • 00:36:16 on the server for example we could be
  • 00:36:18 sending a post request with the post
  • 00:36:21 HTTP verb to the slash post URL or a get
  • 00:36:25 request to slash posts or a get request
  • 00:36:28 / posts / and then some dynamic path
  • 00:36:32 segment which node express all the
  • 00:36:34 supports so that we for example could
  • 00:36:37 have different IDs of posts which are
  • 00:36:39 parts of our incoming requests these are
  • 00:36:42 our so-called API endpoints and as I
  • 00:36:45 mentioned multiple times it's up to us
  • 00:36:47 the developer of the node Express REST
  • 00:36:50 API to decide which endpoints you want
  • 00:36:52 to support and then upon getting a
  • 00:36:55 request on such an endpoint we run some
  • 00:36:58 server-side logic to do whatever you
  • 00:37:00 want to do for example to reach out to
  • 00:37:02 the database and then store data there
  • 00:37:04 get data from there and so on now when
  • 00:37:07 it comes to these HTTP methods post and
  • 00:37:10 get might be methods or words you
  • 00:37:12 already know but there's more than just
  • 00:37:14 get and post of course we have get which
  • 00:37:17 we typically use to get data or get a
  • 00:37:19 resource from the server and we have
  • 00:37:21 post to post data to a server so to send
  • 00:37:24 data there and then create new data a
  • 00:37:27 new object new resources on the server
  • 00:37:30 we got more than that we also got put
  • 00:37:33 which we typically use to create or
  • 00:37:34 override a resource patch which we use
  • 00:37:37 to update an existing resource on a
  • 00:37:40 server delete to delete a resource and
  • 00:37:42 also actually options which we won't
  • 00:37:45 send on ourselves but which the browser
  • 00:37:47 automatically attaches for certain
  • 00:37:49 requests which the browser then uses to
  • 00:37:51 find out if the request we actually want
  • 00:37:54 to send is supported I will come back to
  • 00:37:56 that later
  • 00:37:57 now what's really important to
  • 00:37:59 understand here because it's a common
  • 00:38:01 misconception is that just because you
  • 00:38:04 send a post request you don't actually
  • 00:38:06 store something in that database
  • 00:38:08 automatically as I mentioned it's up to
  • 00:38:11 you the developer of the API to decide
  • 00:38:14 what you want to do which code you want
  • 00:38:16 to execute for which word path
  • 00:38:19 combination and you typically want to
  • 00:38:22 map the words in a way that's logical so
  • 00:38:25 you want to create data when a post
  • 00:38:27 request is received you want to delete
  • 00:38:29 data when a delete request is received
  • 00:38:31 but theoretically you could also return
  • 00:38:34 data so you could get data upon a delete
  • 00:38:37 request or return data upon a put
  • 00:38:40 request or return it up on a post
  • 00:38:43 request dead would just not be logical
  • 00:38:45 and therefore you want to avoid it but
  • 00:38:47 it's really important to understand that
  • 00:38:48 the word path combination alone does not
  • 00:38:51 dictate what happens on the server that
  • 00:38:54 is up to the logic you wrote there for
  • 00:38:56 the different word path combinations so
  • 00:39:00 let's rest
  • 00:39:02 now what about graph QL when we have a
  • 00:39:05 look at that same picture for graph QL
  • 00:39:07 we have the same general logic and
  • 00:39:09 that's important to understand we sent
  • 00:39:12 their request to the node Express app
  • 00:39:14 then but how does this look like now as
  • 00:39:15 I mentioned with graph QL there are
  • 00:39:19 multiple endpoints there is one single
  • 00:39:22 endpoint and that typically is a post
  • 00:39:24 request on some path of your choice
  • 00:39:26 often the pathes /r ful but that's not a
  • 00:39:30 must use now the trick here is that this
  • 00:39:34 requests since it's a post request has a
  • 00:39:37 request body and that request body
  • 00:39:39 contains a query expression written in
  • 00:39:42 standardized graphical
  • 00:39:44 curry language which is then parsed by
  • 00:39:47 your node express server and if you then
  • 00:39:49 wrote code to support that specific
  • 00:39:51 expression which will send you can then
  • 00:39:53 well use the data which is part of that
  • 00:39:55 expressions on to store data or to get
  • 00:39:58 data and so on the query which could be
  • 00:40:01 in the post request body typically look
  • 00:40:04 something like this
  • 00:40:06 we describe the operation we want to
  • 00:40:08 perform alternatives to query which we
  • 00:40:10 typically use to get data would be
  • 00:40:12 mutation to add or change data or
  • 00:40:14 subscription to the set up a live
  • 00:40:16 subscription we then have an identifier
  • 00:40:19 of our choice which we also could call
  • 00:40:21 endpoint therefore and then the data we
  • 00:40:24 for example want a request or we want to
  • 00:40:27 send now I do have a free serious on how
  • 00:40:30 to build a basically a simple miranne
  • 00:40:34 application with a graph QL backend and
  • 00:40:36 attached you find a link where you learn
  • 00:40:39 how to build such a graph you'll back
  • 00:40:41 and from scratch so that might always be
  • 00:40:43 interesting for to you if you want to
  • 00:40:45 learn more about graph QL in this course
  • 00:40:48 when we compare rest to graph QL we will
  • 00:40:51 go with rest and here's why the REST API
  • 00:40:55 approach uses this path HTTP method
  • 00:40:59 combination to identifier resources or
  • 00:41:01 actions on a server and that's very
  • 00:41:03 intuitive and very easy to learn such an
  • 00:41:07 API is stateless and decoupled from any
  • 00:41:10 front-end which means a REST API you
  • 00:41:13 build cannot just be used with your
  • 00:41:15 react single page application any client
  • 00:41:18 could talk to it so if you later build a
  • 00:41:21 mobile application with iOS or Android
  • 00:41:23 you could talk to the same API because
  • 00:41:26 the API is totally separated from the
  • 00:41:29 front-end which is the cool thing about
  • 00:41:31 this API approach you can reuse the API
  • 00:41:34 and just attach different front ends one
  • 00:41:36 of the reasons why such api's are so
  • 00:41:39 popular these days now we will use the
  • 00:41:42 REST API in this course because it's the
  • 00:41:44 most common type of API you see a lot of
  • 00:41:47 API is built in that way out there in
  • 00:41:51 the wild because it's easy to use easy
  • 00:41:53 to learn easy to document and very
  • 00:41:56 intuitive in the end
  • 00:41:57 now a graph QL API does not use the path
  • 00:42:01 HTTP method as you learned but instead
  • 00:42:03 such a clear expression using a certain
  • 00:42:05 query language to identify a resource in
  • 00:42:07 action and just like the REST API it's
  • 00:42:10 also stateless and decoupled so just as
  • 00:42:13 with the REST API you can attach any
  • 00:42:15 client to that API which is great but
  • 00:42:18 the reason why we won't use it is that
  • 00:42:20 despite graph QL being very popular and
  • 00:42:23 very useful and powerful you need to
  • 00:42:26 learn that extra query language which is
  • 00:42:28 some extra effort which not everyone
  • 00:42:31 wants to do
  • 00:42:32 in addition out there in the wild you
  • 00:42:35 see way more REST API than graph QL
  • 00:42:38 api's so I find it more important to
  • 00:42:40 learn that nonetheless as I mentioned
  • 00:42:42 attached you find a link to a free
  • 00:42:45 series I created in the past where we
  • 00:42:47 also built a graph QL API and actually
  • 00:42:50 all the node Express and react
  • 00:42:51 application that works with it for free
  • 00:42:54 in a complete serious so this might be
  • 00:42:56 interesting to you if you want to learn
  • 00:42:58 more about that in this course we'll
  • 00:43:00 build a REST API from scratch because it
  • 00:43:02 is so important and so powerful and we
  • 00:43:04 will build it from the ground up so that
  • 00:43:07 you definitely learn everything that's
  • 00:43:09 to it
  • 00:43:13 and with that we're almost done with the
  • 00:43:16 theory now there's just one more thing
  • 00:43:19 left and that is right – how we host our
  • 00:43:23 different parts you know from the big
  • 00:43:27 picture that we have three big blocks
  • 00:43:29 the react app the node Express app and
  • 00:43:32 the MongoDB database and the server that
  • 00:43:35 database runs on now the question is
  • 00:43:37 where are the different pieces served
  • 00:43:41 from now we've got two main options here
  • 00:43:43 we can have one server one computer
  • 00:43:46 which hosts both our node API and the
  • 00:43:49 react single page application under the
  • 00:43:51 same domain
  • 00:43:52 so my page.com slash nothing might
  • 00:43:56 return our single page application and
  • 00:43:59 then under my page calm slash api we
  • 00:44:03 might have the endpoints for that single
  • 00:44:05 page application to talk to the
  • 00:44:08 alternative is that we have two
  • 00:44:10 separated servers one very simple server
  • 00:44:13 which simply serves our single react.js
  • 00:44:16 application HTML page and all the
  • 00:44:19 JavaScript files that application needs
  • 00:44:21 and one server which hosts our API so if
  • 00:44:26 we take a closer look for the left case
  • 00:44:29 that we have one single server we have a
  • 00:44:31 node Express API which handles incoming
  • 00:44:33 requests on that server for example
  • 00:44:35 under a slash API any requests
  • 00:44:38 targeting these paths might reach our
  • 00:44:40 API and requests which are not targeting
  • 00:44:44 our API routes would return to react
  • 00:44:46 single page application in the end so
  • 00:44:49 these requests would get us the single
  • 00:44:51 HTML file and the Associated JavaScript
  • 00:44:54 files that are required to run the react
  • 00:44:56 app between the reactive and the node
  • 00:44:58 API even though they're running on the
  • 00:45:00 same server we have that separation you
  • 00:45:02 learned about so they don't really know
  • 00:45:04 much about each other other than that
  • 00:45:07 they run on the same server data is
  • 00:45:09 still exchanged with these Ajax
  • 00:45:12 background requests in JSON format if we
  • 00:45:16 have the two separated servers then we
  • 00:45:18 really have two different machines one
  • 00:45:20 which has our node API on it our node
  • 00:45:22 Express API and one which is served from
  • 00:45:25 that very simple
  • 00:45:27 static host static because it will be a
  • 00:45:30 server which doesn't need to execute any
  • 00:45:33 server-side code because it is a server
  • 00:45:35 that doesn't run any node or any other
  • 00:45:37 programming language application on it
  • 00:45:40 instead it's just a server which returns
  • 00:45:42 our HTML file and to JavaScript files
  • 00:45:44 and to CSS files and so on so therefore
  • 00:45:47 we got our two ends served on different
  • 00:45:50 servers and data is exchanged in JSON
  • 00:45:54 format when we send these background
  • 00:45:55 HTTP requests so that's always the same
  • 00:45:58 in one case they're just served from the
  • 00:46:00 same machine in the other case from two
  • 00:46:02 machines in both cases we got these
  • 00:46:05 logically separated apps now regarding
  • 00:46:07 the MongoDB database that always has its
  • 00:46:10 own database server but just like the
  • 00:46:13 node server and the react app this
  • 00:46:16 server could be installed on the same
  • 00:46:18 physical machine as our node and maybe
  • 00:46:20 all the react that runs on or on a
  • 00:46:22 separate machine and often you want to
  • 00:46:25 use different machines here to make sure
  • 00:46:27 that just because you're getting a lot
  • 00:46:29 of requests you're not slowing down on
  • 00:46:32 your database requests or database
  • 00:46:34 queries and the other way around
  • 00:46:36 so therefore separating a node Express
  • 00:46:37 app and the database server onto two
  • 00:46:40 different machines is a good idea
  • 00:46:42 technically you could run everything on
  • 00:46:44 the same machine you'll always have the
  • 00:46:46 same logical separation though now
  • 00:46:49 actually there also is a third way which
  • 00:46:52 I really don't want to talk too much
  • 00:46:53 about though you could have your node
  • 00:46:55 Express server and not build a rest or
  • 00:46:58 graphical API there but instead render
  • 00:47:02 HTML pages on the fly on that server
  • 00:47:05 with templating engines like ejs or park
  • 00:47:08 if you took my know just a complete
  • 00:47:11 guide course you'll learn about this
  • 00:47:13 approach as well now
  • 00:47:15 you therefore really render different
  • 00:47:17 HTML pages for different requests on the
  • 00:47:19 server and that rendered HTML code is
  • 00:47:22 returned
  • 00:47:23 now to get react into the equation you
  • 00:47:26 could have some parts of these
  • 00:47:28 pre-rendered HTML pages which are
  • 00:47:31 controlled by react in a widget like way
  • 00:47:34 so react only controls parts of the page
  • 00:47:36 instead of the entire page this is
  • 00:47:39 possible but it
  • 00:47:41 takes away from the great highly
  • 00:47:43 reactive user experience we can build
  • 00:47:46 with single page applications since we
  • 00:47:48 create and return HTML pages from the
  • 00:47:51 server for everything the user does we
  • 00:47:54 constantly reload pages we add a slight
  • 00:47:57 delay and we don't have that highly
  • 00:48:00 reactive mobile app like feeling we can
  • 00:48:03 achieve with single page applications
  • 00:48:05 therefore this is not the approach we
  • 00:48:08 will use here technically of course
  • 00:48:10 though you could build an application
  • 00:48:12 with the same technologies MongoDB
  • 00:48:14 Express reactant note so myrn
  • 00:48:16 with this approach but you would not get
  • 00:48:19 the same great user experience and
  • 00:48:21 therefore typically when we talk about
  • 00:48:23 learn we talk about the logically
  • 00:48:25 separated ends no matter if they're
  • 00:48:27 served by the same physical machine or
  • 00:48:29 not we don't we talk about this approach
  • 00:48:31 well and with that all out of the way
  • 00:48:35 let's have a look at that very simple
  • 00:48:37 first myrn application so that you can
  • 00:48:40 see the big picture also in code before
  • 00:48:43 we then dive into the different course
  • 00:48:45 modules where we will get a refresher on
  • 00:48:48 react node express in long would you be
  • 00:48:50 and then more importantly build the
  • 00:48:53 different building blocks of our course
  • 00:48:55 project which is such a mirna and then
  • 00:48:57 all to connect these building blocks
  • 00:49:03 so let's see that big picture or at
  • 00:49:06 least parts of it because MongoDB
  • 00:49:08 requires this extra database server
  • 00:49:10 setup which we'll tackle in a separate
  • 00:49:12 module but let's see this part at least
  • 00:49:15 the react and node Express API
  • 00:49:17 communication part in action in a simple
  • 00:49:20 application and no worries this is just
  • 00:49:22 a short demo application we'll build one
  • 00:49:25 away bigger one the course project from
  • 00:49:27 the ground up throughout the rest of
  • 00:49:29 this course attached you find a sip
  • 00:49:32 folder which can unzip and in there
  • 00:49:34 you'll find a front end and a back end
  • 00:49:36 folder now combined this makes up your
  • 00:49:39 myrn application and this is a very
  • 00:49:41 simple dummy application which I
  • 00:49:43 prepared for you the front end holds our
  • 00:49:46 react application the front end folder
  • 00:49:49 here was created with this project here
  • 00:49:51 was created with create react app which
  • 00:49:54 is a tool by the react team to create
  • 00:49:56 react projects and it holds a react
  • 00:49:59 application with some components because
  • 00:50:01 react is all about components as you
  • 00:50:04 will also learn again in the react
  • 00:50:06 refresher in a separate module for now
  • 00:50:08 you can just take it for granted so
  • 00:50:10 we'll have two different components to
  • 00:50:12 building blocks of our front-end user
  • 00:50:14 interface so to say and with the
  • 00:50:16 backhand folder with exactly one core
  • 00:50:19 file server j/s now to run these ends
  • 00:50:24 here you need to install node.js you can
  • 00:50:28 install it from node.js org and there
  • 00:50:30 simply download the latest version 13 in
  • 00:50:34 my case but that of course will change
  • 00:50:35 over time does not really affect the way
  • 00:50:38 node works or looks like however and
  • 00:50:41 simply download that latest version and
  • 00:50:43 walk through the installer you get there
  • 00:50:45 the default settings are fine and this
  • 00:50:47 will install nodejs
  • 00:50:49 so this special JavaScript runtime onto
  • 00:50:53 your machine it will also install
  • 00:50:55 whenever to launch your machine and
  • 00:50:57 that's NPM the node package manager this
  • 00:51:01 is a tool which is required anyways to
  • 00:51:04 install the various dependencies so
  • 00:51:06 third-party libraries we use in both our
  • 00:51:09 back-end code as well as our front-end
  • 00:51:11 code because even though the front-end
  • 00:51:13 code is not run by nodejs
  • 00:51:15 it still will use
  • 00:51:17 third-party libraries which are then
  • 00:51:19 simply used by the browser or also an
  • 00:51:22 important part by our build setup our
  • 00:51:25 development setup where we have a dummy
  • 00:51:28 server that serves our front end which
  • 00:51:30 reloads the page whenever we change
  • 00:51:32 something which optimizes our code and
  • 00:51:34 so on these are all steps which are not
  • 00:51:37 run once we deploy our finished
  • 00:51:39 front-end but which help us during
  • 00:51:41 development and for dad we also need
  • 00:51:42 third-party libraries and actually also
  • 00:51:45 denote run time which runs this entire
  • 00:51:47 front and build process so we definitely
  • 00:51:50 need nodejs to do anything here now you
  • 00:51:54 also see I opened this project here in
  • 00:51:57 an IDE in an integrated development
  • 00:52:00 environment
  • 00:52:01 this is Visual Studio code a great free
  • 00:52:05 to use IDE you can find if you google
  • 00:52:07 for a vs code which you can then install
  • 00:52:09 from the page you get to code Visual
  • 00:52:12 Studio comm it's free and available for
  • 00:52:15 all operating systems
  • 00:52:17 so simply download it and walk through
  • 00:52:19 the installer if you want to use that
  • 00:52:21 same IDE here as I do now
  • 00:52:24 in that IDE here I also install some
  • 00:52:27 so-called extensions you can get to the
  • 00:52:30 extensions menu with view extensions and
  • 00:52:32 they are specifically the extensions I
  • 00:52:35 recommend that you install are the
  • 00:52:38 material I can seem to make sure your
  • 00:52:41 file icons look like mine if you like
  • 00:52:43 that look path intellisense which can
  • 00:52:47 help you with Auto completion of file
  • 00:52:49 names prettier which helps you with Auto
  • 00:52:52 formatting your code so that it is easy
  • 00:52:55 to read and you don't have to format it
  • 00:52:56 manually and with all that installed
  • 00:52:59 also if you go back to the Explorer or
  • 00:53:02 use the shortcut you see here I also
  • 00:53:04 recommend that you look into the themes
  • 00:53:07 you got configured under a code
  • 00:53:09 preferences color theme there you can
  • 00:53:13 switch it to a different theme I'm using
  • 00:53:15 the dark plus default dark theme here
  • 00:53:17 which gives me the look you see here you
  • 00:53:19 also here see the file icons I got from
  • 00:53:21 the material I can see last but not
  • 00:53:24 least I already talked about prettier
  • 00:53:26 and that auto formatting you can always
  • 00:53:29 check out your keyboard shortcuts
  • 00:53:31 and they are specifically the format
  • 00:53:33 document shortcut is one you should bind
  • 00:53:35 because that will help you use that
  • 00:53:37 prettier extension to automatically
  • 00:53:39 reformat your code but with dead that's
  • 00:53:42 basically a setup I have here then I
  • 00:53:45 opened dead extracted folder which holds
  • 00:53:47 to back and in front that folder and I'm
  • 00:53:50 now ready to go well or almost first of
  • 00:53:54 all as I mentioned every end has some
  • 00:53:58 packages some dependencies it uses
  • 00:54:01 you'll find those in the package JSON
  • 00:54:04 file which is your project management
  • 00:54:06 file you could say and you see that I
  • 00:54:08 treat back-end and front-end as
  • 00:54:10 separated projects because they are
  • 00:54:13 logically separated now you see here for
  • 00:54:16 the backend in the package JSON file I
  • 00:54:18 got free dependencies free third-party
  • 00:54:22 libraries this project uses for the
  • 00:54:25 front end for the react application I
  • 00:54:27 got these free dependencies react
  • 00:54:31 library we use react Dom which is all
  • 00:54:34 the part of react and react scripts
  • 00:54:36 which nyan helps us with our build setup
  • 00:54:39 and with this dummy server that serves
  • 00:54:41 the react application and so on now to
  • 00:54:44 install these dependencies you need to
  • 00:54:47 open up your terminal or command prompt
  • 00:54:49 and you can use the one integrated into
  • 00:54:51 your IDE you can go to terminal new
  • 00:54:53 terminal here to open it and then
  • 00:54:56 navigate into your front-end folder and
  • 00:54:58 in there run npm install and this uses
  • 00:55:01 the npm tool which was installed
  • 00:55:03 together with no chairs to install all
  • 00:55:06 the dependencies which are mentioned in
  • 00:55:08 the package.json file it will then
  • 00:55:10 create such a node modules folder where
  • 00:55:13 these dependencies and their
  • 00:55:15 dependencies are actually stored in now
  • 00:55:18 we're doing this just for the front-end
  • 00:55:20 alone it's not enough so i will open a
  • 00:55:22 second terminal and also navigate into
  • 00:55:24 the backend folder because there i also
  • 00:55:27 want to install all the dependencies so
  • 00:55:30 that for both the front end and the back
  • 00:55:32 and we got that installed so let's wait
  • 00:55:34 for this installation process to finish
  • 00:55:36 and thereafter let's start our two
  • 00:55:39 servers and see how they communicate
  • 00:55:42 with each other so the installation of
  • 00:55:44 all the dependency
  • 00:55:45 in both the front end and back and
  • 00:55:47 folder finished and now let's simply see
  • 00:55:49 what we got there before we have a look
  • 00:55:51 at their code now keep in mind we have
  • 00:55:53 to logically separated ends here and
  • 00:55:55 here during development at least we will
  • 00:55:57 also have Q separated servers now of
  • 00:56:00 course both runs on our machine here on
  • 00:56:03 our computer but actually we will run
  • 00:56:07 these two different ends under two
  • 00:56:09 different domains now let's see what we
  • 00:56:12 got here in the front and folder you can
  • 00:56:14 run NPM start to start a development
  • 00:56:17 server that's part of the set up
  • 00:56:19 basically added by this react strips
  • 00:56:21 dependency which will host your react
  • 00:56:25 application this react single page
  • 00:56:27 application so it's a development server
  • 00:56:29 which the end how is this single
  • 00:56:31 index.html file which you find in the
  • 00:56:33 public folder there which then in turn
  • 00:56:35 will import all the scripts it needs and
  • 00:56:38 launch your react app you find that
  • 00:56:41 application it should open up
  • 00:56:43 automatically actually under localhost
  • 00:56:45 colon
  • 00:56:46 3000 localhost might look strange but
  • 00:56:49 this is your domain it's available on
  • 00:56:51 your local machine it's a special domain
  • 00:56:52 there and colon 3000 is the port on
  • 00:56:56 which we're visiting this and combined
  • 00:56:58 this actually is a domain as it would be
  • 00:57:03 the case for your page com so this
  • 00:57:06 combined is the actual domain and if you
  • 00:57:09 would visit another page on let's say
  • 00:57:12 localhost 5000 that might look very
  • 00:57:15 similar but it would actually be a
  • 00:57:17 totally different domain as if it were
  • 00:57:19 served by a totally different machine
  • 00:57:21 so here react automatically runs on
  • 00:57:24 localhost 3000 and that's our react
  • 00:57:26 single page application now let's go to
  • 00:57:29 the backend folder and there you can
  • 00:57:31 alter run NPM start now you're nothing
  • 00:57:34 opens up automatically but you will see
  • 00:57:37 that you're now in a process which
  • 00:57:39 doesn't stop so you can't enter a new
  • 00:57:42 command by the way it's the same for the
  • 00:57:43 front end that is the default and that
  • 00:57:47 is what should be the case because that
  • 00:57:49 means you have a running server you can
  • 00:57:51 always stop these processes by hitting
  • 00:57:54 ctrl C on your keyboard but then of
  • 00:57:57 course the server will be
  • 00:57:58 so as long as you're developing you
  • 00:58:01 should have it up and running so we get
  • 00:58:03 these two running servers and the node
  • 00:58:05 back and server here actually will run
  • 00:58:08 under localhost 5,000 however if you
  • 00:58:12 enter that you will not see anything
  • 00:58:14 because this specific endpoint slash
  • 00:58:17 nothing is not supported remember when I
  • 00:58:20 said that you as a developer decide
  • 00:58:22 which endpoints you want to support and
  • 00:58:24 you want to execute code on well that's
  • 00:58:27 not one of them things change if you
  • 00:58:30 enter slash products there however you
  • 00:58:32 see now you get back in the end of
  • 00:58:35 JavaScript object this is actually this
  • 00:58:37 JSON notation I was talking about which
  • 00:58:41 holds a products key and an empty array
  • 00:58:43 so here we seem to get back some data
  • 00:58:46 even though it's empty and that already
  • 00:58:49 looks quite promising and now really
  • 00:58:51 keep in mind localhost 5,000 is a
  • 00:58:54 totally different server than localhost
  • 00:58:56 3000 now obviously here we have some
  • 00:59:00 communication problems with your node
  • 00:59:03 server up and running however reload the
  • 00:59:06 react app on localhost 3000 and you will
  • 00:59:09 see that the loading part goes away and
  • 00:59:11 instead we see could not find any
  • 00:59:13 products now let's add a book here for
  • 00:59:17 let's say $12.99 and click Add product
  • 00:59:20 what you see is it now appears down
  • 00:59:22 there now that's nice but what you will
  • 00:59:25 also see if you reload now and you keep
  • 00:59:29 both servers up and running in between
  • 00:59:30 you still get that you see loading for a
  • 00:59:34 fraction of a second and then you see a
  • 00:59:36 book here so it looks like the book we
  • 00:59:40 created here really was stored somewhere
  • 00:59:43 was stored on our back-end server and
  • 00:59:46 when we reload the react app we're
  • 00:59:49 fetching data from that server and since
  • 00:59:51 the server runs on its own domain but
  • 00:59:54 technically of course on the same
  • 00:59:55 machine as our front-end that request is
  • 00:59:58 super super fast which is why we see
  • 01:00:00 that loading text only for the fraction
  • 01:00:03 of a second if we see it at all but the
  • 01:00:06 really important thing here is that we
  • 01:00:08 are storing data on our back-end so on
  • 01:00:11 the node X
  • 01:00:12 zapper with help of denote Express help
  • 01:00:14 and we're fetching it from there now
  • 01:00:17 that's how it works let's now have a
  • 01:00:19 look at the code to get a rough
  • 01:00:21 understanding of what's working together
  • 01:00:24 there
  • 01:00:28 now I want to start with the back and
  • 01:00:30 for that let's have a look at the server
  • 01:00:32 JS file this is in the end our node
  • 01:00:35 Express server and one important thing
  • 01:00:38 about node and Express is that unlike
  • 01:00:40 with for example PHP when you're
  • 01:00:43 building a node application you launched
  • 01:00:46 a server itself with node.js
  • 01:00:49 with PHP you need some extra software
  • 01:00:52 like Apache to launch a server which
  • 01:00:55 then runs and interprets your PHP
  • 01:00:57 scripts with node you use node itself to
  • 01:01:00 launch that server so the server JS file
  • 01:01:03 has all the logic it needs to run the
  • 01:01:05 server but also then to handle incoming
  • 01:01:07 requests now we'll dive a bit deeper
  • 01:01:10 into how node and Express works in a
  • 01:01:13 standalone refresher module so I don't
  • 01:01:15 want to lose too much time on that right
  • 01:01:17 now
  • 01:01:17 in the end what you'll just see at the
  • 01:01:19 end here is that we have some a listen
  • 01:01:21 method which we call which the end will
  • 01:01:23 start your server and listen on port
  • 01:01:25 5,000 so this is also where you could
  • 01:01:28 change the port but not all ports will
  • 01:01:30 work some are not allowed by your system
  • 01:01:32 and for example 3000 is not allowed
  • 01:01:35 because that's where our reactive runs
  • 01:01:37 already so you should leave that at
  • 01:01:39 5,000 and in addition besides some other
  • 01:01:43 setup you will see a app get and the app
  • 01:01:48 post method this registers so-called
  • 01:01:52 middleware for certain paths so here you
  • 01:01:55 see that path thing for certain HTTP
  • 01:01:59 methods namely here a get method and a
  • 01:02:01 post method so here you see that method
  • 01:02:04 path combination thing I was talking
  • 01:02:06 about and then some functions that
  • 01:02:09 should be executed when a request
  • 01:02:11 reaches such a method path combination
  • 01:02:14 and then here in the end I sent back a
  • 01:02:17 response with some products here I
  • 01:02:20 create a new product I validate the user
  • 01:02:23 input before we do anything else and
  • 01:02:26 then I create the product create a
  • 01:02:28 unique ID with some third-party library
  • 01:02:30 added here to this dummy products thing
  • 01:02:33 I will have a look at in a second and
  • 01:02:35 then send back a response upon
  • 01:02:37 successfully creating that product this
  • 01:02:40 is our core
  • 01:02:41 back and logic now what we're not doing
  • 01:02:44 here is talk to a database because for
  • 01:02:48 dad we need to set up a separate
  • 01:02:49 Longwood EB server which is a bit more
  • 01:02:51 work not horrible but a bit more work
  • 01:02:54 and therefore we will do that in a
  • 01:02:56 separate module but what we do have here
  • 01:02:58 with dummy products is a dummy
  • 01:03:00 JavaScript array this however is only
  • 01:03:03 stored in memory of this running node
  • 01:03:05 application which means whenever we
  • 01:03:08 restart the server which we can do by
  • 01:03:10 quitting our node server with ctrl C and
  • 01:03:12 then re running NPM start all that data
  • 01:03:15 will be lost
  • 01:03:16 so after restarting that server if we
  • 01:03:18 reload the react app you see it doesn't
  • 01:03:21 find any products anymore because as I
  • 01:03:23 mentioned this is only stored in memory
  • 01:03:25 of the node app which of course is not a
  • 01:03:28 great storage it's just a dummy storage
  • 01:03:30 here later we'll of course store data in
  • 01:03:33 a database you will also see this
  • 01:03:35 strange thing I will come back to that
  • 01:03:37 later that is important to allow
  • 01:03:39 communication between our front-end
  • 01:03:42 which runs on a different server than
  • 01:03:43 our back-end but again I will explain in
  • 01:03:46 detail why we need this and what this
  • 01:03:47 does later in the course well and that's
  • 01:03:51 already it for our back-end you might
  • 01:03:53 not understand everything here but again
  • 01:03:55 we'll have a refresher on node Express
  • 01:03:57 later but it should be relatively clear
  • 01:04:00 that these are our endpoints and that
  • 01:04:02 this is where our main logic happens on
  • 01:04:04 the back end now let's have a look at
  • 01:04:06 the front end there we have a react
  • 01:04:09 application and react applications are
  • 01:04:11 all about components components can be
  • 01:04:15 functions or JavaScript classes and in
  • 01:04:19 this course I will use only functional
  • 01:04:21 components in my react a complete guy
  • 01:04:23 course you'll learn about both though so
  • 01:04:26 there you can learn more about react
  • 01:04:28 components and different ways of
  • 01:04:29 building them now here in the front-end
  • 01:04:31 folder you see that index.js file this
  • 01:04:34 isn't the empty entry point for our
  • 01:04:36 front-end application this is where we
  • 01:04:38 render our react app which is imported
  • 01:04:41 from the app.js file so let's maybe have
  • 01:04:43 a look at that here this is the JSX code
  • 01:04:47 by the way if you've never seen this
  • 01:04:49 before
  • 01:04:50 this looks like HTML it's HTML in
  • 01:04:53 JavaScript and invention by
  • 01:04:55 in the end it's called JSX and it is
  • 01:05:00 transpiled to valid JavaScript by the
  • 01:05:03 build setup which we use behind the
  • 01:05:05 scenes here with our npm start process
  • 01:05:08 in the from that this is simply a
  • 01:05:10 special syntax which allows us to write
  • 01:05:13 code which is translated to instructions
  • 01:05:15 that should insert or remove elements in
  • 01:05:17 the Dom in a highly readable way to ask
  • 01:05:20 developers so here what I got is I'm
  • 01:05:24 rendering a couple of react components
  • 01:05:27 header new product product list these
  • 01:05:30 are all react components and also some
  • 01:05:33 default HTML elements like main and
  • 01:05:35 paragraph based on certain conditions
  • 01:05:38 for example if we're currently loading
  • 01:05:40 or not and I'm passing some data to my
  • 01:05:43 components now these components are all
  • 01:05:46 imported here at the top and you can
  • 01:05:48 find him in their separate files for
  • 01:05:50 example a button component which wraps
  • 01:05:52 the native HTML button and add some
  • 01:05:54 extra styling the input component which
  • 01:05:57 combines a label and input element and
  • 01:05:59 adds extra styling and behavior the
  • 01:06:01 header component which looks like this
  • 01:06:03 and some product specific components for
  • 01:06:06 example our new product form here our
  • 01:06:09 product list and a single product item
  • 01:06:12 this together is responsible for getting
  • 01:06:15 onto the screen what you saw there and
  • 01:06:17 in case that's totally new besides that
  • 01:06:20 react a complete guide course I would
  • 01:06:21 recommend to you you will also get that
  • 01:06:24 brief refresher I also already mentioned
  • 01:06:26 multiple times now in app tray as we
  • 01:06:29 also got more than just our components
  • 01:06:31 which are rendered we also got some
  • 01:06:32 front-end logic so logic that decides
  • 01:06:35 what should be shown on the screen and
  • 01:06:38 which also is responsible for sending
  • 01:06:41 these background HTTP requests to our
  • 01:06:44 well back-end which is our note Rhea's
  • 01:06:46 Express server now you see that logic
  • 01:06:50 here in the app function in this app
  • 01:06:52 component and there I use a feature
  • 01:06:55 called react hooks these are special
  • 01:06:58 functions provided by the react library
  • 01:07:01 which help us with managing state which
  • 01:07:04 is data that when it changes leads to a
  • 01:07:07 rerender cycle of decompose
  • 01:07:09 so which basically tells react to update
  • 01:07:13 the real Dom if the data changes and we
  • 01:07:16 also used to use a fact hook this is in
  • 01:07:19 the end hook which allows to run some
  • 01:07:21 code when certain pieces of data change
  • 01:07:23 and here specifically I configured it to
  • 01:07:26 run when our application launches and
  • 01:07:28 only then now here in this when the
  • 01:07:31 application launches code I in the end
  • 01:07:34 reach out to the backend the fetch API
  • 01:07:36 is a native JavaScript API built into
  • 01:07:39 browsers
  • 01:07:40 I send the request to this back-end URL
  • 01:07:43 here it automatically is get requests
  • 01:07:46 and this is a combination which is
  • 01:07:48 supported there get two slash products
  • 01:07:50 as you can see in the backend code
  • 01:07:52 triggers this function and then I expect
  • 01:07:56 to get back an object which has a
  • 01:07:58 products array which I indeed do send
  • 01:08:00 back here on the backend and I extracted
  • 01:08:04 response then access this product key
  • 01:08:06 and set my loaded products so this
  • 01:08:08 loaded products state data to the data I
  • 01:08:12 got from the backend and as I mentioned
  • 01:08:14 this state data is special when it
  • 01:08:17 changes react will rerender DUI which is
  • 01:08:19 the reason why when this loading
  • 01:08:21 finished it swaps this loading keyword
  • 01:08:25 here for IVA our products or this
  • 01:08:27 fallback text I also got the add product
  • 01:08:31 handler function a function in a
  • 01:08:33 function which is totally fine and
  • 01:08:35 JavaScript it is supported in JavaScript
  • 01:08:38 without any special tricks and in this
  • 01:08:41 add product handler here are Indian
  • 01:08:43 build a product object and then also
  • 01:08:46 sent this to the backend but to a
  • 01:08:48 different URL slash product and also
  • 01:08:51 with a different HTTP method the default
  • 01:08:54 one is get but here I override the
  • 01:08:56 default to set it to post and post to
  • 01:08:59 slash product that is also supported on
  • 01:09:03 the back end and a triggers this
  • 01:09:05 function here
  • 01:09:07 now there I attach my data and send some
  • 01:09:11 extra headers to let the back and know
  • 01:09:13 that I'm sending JSON data this is a
  • 01:09:16 helper method available in JavaScript to
  • 01:09:18 create JSON data I check if the response
  • 01:09:21 is okay otherwise in the end I will show
  • 01:09:24 an alert for example if invalid data was
  • 01:09:26 entered in the inputs and if everything
  • 01:09:28 is fine and we stored our data in the
  • 01:09:31 backend I update the products I work
  • 01:09:33 with on the front-end to re-render DUI
  • 01:09:36 and reflect the newly added product this
  • 01:09:39 is what happens here now again more
  • 01:09:42 detailed refreshers all the ends will be
  • 01:09:45 provided later but I hope that with that
  • 01:09:47 this big picture is clear in general now
  • 01:09:51 as I mentioned multiple times
  • 01:09:52 we'll build a complete app for all this
  • 01:09:54 course from scratch you just get this
  • 01:09:56 finished app here
  • 01:09:57 later we will build it from scratch no
  • 01:10:00 worries and therefore then you will
  • 01:10:02 learn how these pieces are built and how
  • 01:10:04 they work together but the general
  • 01:10:06 structure should already be clear right
  • 01:10:08 now with that big picture here
  • 01:10:14 so we got a basic idea of how the myrn
  • 01:10:17 stack works and how the different pieces
  • 01:10:19 work together as I mentioned throughout
  • 01:10:22 this course you will not only get
  • 01:10:24 refreshers about the individual building
  • 01:10:26 blocks but most importantly we'll build
  • 01:10:29 an entire application where you can see
  • 01:10:32 all these pieces built out individually
  • 01:10:35 and then come together when we connect
  • 01:10:37 all the different blocks with each other
  • 01:10:40 now this project which we're going to
  • 01:10:43 build is a project we of course have to
  • 01:10:45 plan before we dive into it so in this
  • 01:10:48 module I want to plan a react or
  • 01:10:51 specifically the entire myrn project
  • 01:10:53 with you because this hopefully also
  • 01:10:56 helps you approach your next project and
  • 01:11:00 get an idea of what you might want to
  • 01:11:03 keep in mind what you have to think
  • 01:11:04 about before you get started and how you
  • 01:11:06 can create a plan for the thing you're
  • 01:11:09 trying to build now for that there are a
  • 01:11:13 couple of general planning steps through
  • 01:11:15 which we'll walk in this module so that
  • 01:11:18 by the end of the module we have a clear
  • 01:11:20 plan of what we want to build and how we
  • 01:11:24 want to build it the first step for that
  • 01:11:27 of course is that you need an idea you
  • 01:11:30 want to solve some problem that often or
  • 01:11:33 typically will not be a step you have to
  • 01:11:36 think about and specifically dive into
  • 01:11:39 you because more often than not you will
  • 01:11:41 have an idea and then you want to start
  • 01:11:44 planning an app that solves the problem
  • 01:11:46 or that works on that idea so this is
  • 01:11:49 only a rough first step which typically
  • 01:11:52 can already be checked off the list by
  • 01:11:54 the time we were getting started so the
  • 01:11:57 next step the real first step after you
  • 01:12:01 have an idea you want to solve a problem
  • 01:12:03 is that you create a design you sketch
  • 01:12:07 out the application you want to build at
  • 01:12:10 least this is what I like to do if I'm
  • 01:12:13 building a front-end and that by the way
  • 01:12:15 is really important the steps I'm giving
  • 01:12:18 you here are not the objectively correct
  • 01:12:22 steps you have to go through whatever
  • 01:12:24 you're trying to build these are the
  • 01:12:26 steps that
  • 01:12:27 work for me for you the order might be
  • 01:12:30 different maybe you have some other step
  • 01:12:33 maybe you don't need a specific step I'm
  • 01:12:36 really just sharing my personal approach
  • 01:12:38 here with you so I got an idea and now I
  • 01:12:41 want to create a design I want to sketch
  • 01:12:44 out the application now when I talk
  • 01:12:46 about creating the design here you could
  • 01:12:48 really work with design tools like frame
  • 01:12:51 or X or a Sketchup or Photoshop and
  • 01:12:54 build your design there now I'm not a
  • 01:12:57 designer and this is not a design course
  • 01:13:00 so we're not going to do that here often
  • 01:13:02 this is all the tasks you will probably
  • 01:13:04 outsource because chances are you want
  • 01:13:07 to focus on writing the code and you
  • 01:13:09 also are not a designer hence here in
  • 01:13:12 this module we'll just draw the general
  • 01:13:15 skeleton we'll sketch out the
  • 01:13:17 application will not really set up a
  • 01:13:19 specific design for this application
  • 01:13:22 here of course you want to make sure it
  • 01:13:24 looks nice but that's something we'll do
  • 01:13:26 when we implement it I already prepared
  • 01:13:28 some nice styles and colors for you
  • 01:13:30 there so once we got the general
  • 01:13:33 skeleton we sketched out the general
  • 01:13:35 front end of this application we of
  • 01:13:38 course also have to think about the data
  • 01:13:40 we work with both in the front-end but
  • 01:13:43 also more importantly on the backend of
  • 01:13:45 our application so we want to plan our
  • 01:13:48 data models the data we or our app will
  • 01:13:52 work with which entities do we need and
  • 01:13:55 which data do we need to send across the
  • 01:13:57 wire from front and to back-end and then
  • 01:13:59 also from node expressed to the database
  • 01:14:02 this of course is a crucial part because
  • 01:14:05 that is a part that will affect all
  • 01:14:07 building blocks of your myrn application
  • 01:14:10 now once the data model is clear and we
  • 01:14:13 got our front and sketched out we of
  • 01:14:15 course have to plan our back-end
  • 01:14:17 endpoints and the pages you could put
  • 01:14:21 that into quotes because we don't really
  • 01:14:23 have more than one page but the
  • 01:14:24 different components you could say you
  • 01:14:26 want to have on the front end in your
  • 01:14:28 single page application these are the
  • 01:14:32 steps I want to go through together with
  • 01:14:35 you we'll do it here in this module and
  • 01:14:37 this is my rough planning process I go
  • 01:14:41 through
  • 01:14:41 ever I approach a new project now
  • 01:14:44 obviously you can do way more work on
  • 01:14:46 all these steps you can also come up
  • 01:14:48 with a complete design on your own but
  • 01:14:51 as I mentioned since this course is not
  • 01:14:53 primarily about the signing and so on I
  • 01:14:55 want to keep this module short and just
  • 01:14:58 give you a general idea of how this
  • 01:15:00 works
  • 01:15:04 so let's dive into you the first step
  • 01:15:07 which is the idea which we need now as I
  • 01:15:09 mentioned often this is a step you can
  • 01:15:12 skip or which is skipped automatically
  • 01:15:14 because you already have a pretty clear
  • 01:15:16 idea of what you want to build and which
  • 01:15:18 problem you want to solve in this course
  • 01:15:21 I want to build an app with you where
  • 01:15:23 users can share places their favorite
  • 01:15:27 places or any places they feel like are
  • 01:15:30 worth sharing where each place has an
  • 01:15:33 image and a location and a tidelands on
  • 01:15:35 with our users so they can share it with
  • 01:15:38 our users or put in our words if you're
  • 01:15:42 a user a visitor in this application you
  • 01:15:45 can view a list of users you can click
  • 01:15:48 on a user and then you see the place as
  • 01:15:51 this user shared the great thing about
  • 01:15:53 this app is that it's not too complex
  • 01:15:56 and yet it has all the important pieces
  • 01:15:59 you want to have in such a demo app
  • 01:16:01 which you will probably also need in the
  • 01:16:04 apps you are trying to build after this
  • 01:16:06 course specifically we have all the core
  • 01:16:08 crud operations in there so create read
  • 01:16:11 update and delete thing we'll cover all
  • 01:16:14 of that we'll be able to create users
  • 01:16:15 create places get users and get places
  • 01:16:19 which is basically reading the data
  • 01:16:21 update places enter lead places so
  • 01:16:24 that's all in there which is super
  • 01:16:25 important in addition we have more than
  • 01:16:28 one data model we have users and places
  • 01:16:31 and that helps us work with
  • 01:16:32 relationships as well we also work with
  • 01:16:35 images and hence we'll cover image
  • 01:16:37 upload which is also a very important
  • 01:16:39 topic and of course we'll also validate
  • 01:16:42 user input to make sure that only valid
  • 01:16:44 data ends up in our database and on our
  • 01:16:47 back-end in general and last but not
  • 01:16:50 least we'll have authentication and
  • 01:16:52 authorization in this course the
  • 01:16:55 difference is that authentication means
  • 01:16:57 that users need to sign up or login to
  • 01:17:00 work with some parts of our app in this
  • 01:17:02 example new places should only be
  • 01:17:05 created by logged in users and
  • 01:17:08 authorization means that even if you are
  • 01:17:11 a locked-in user you're still not able
  • 01:17:13 to do everything for example in this app
  • 01:17:16 updating or deleting
  • 01:17:18 places should not be possible for all
  • 01:17:20 authenticated users but only for the
  • 01:17:23 users who created that place so we got a
  • 01:17:26 lot of core important things in this app
  • 01:17:29 which is why this makes for a great demo
  • 01:17:31 application for this course which is why
  • 01:17:33 this is my idea for the course project
  • 01:17:40 so let's now have a look at the design
  • 01:17:42 sketching part and as I mentioned will
  • 01:17:44 not worry too much about the design when
  • 01:17:46 it comes to picking colors and zhan
  • 01:17:48 there I will just provide you some
  • 01:17:51 colors I came up with in advance instead
  • 01:17:53 here I now want to focus on sketching
  • 01:17:56 out the front end of this application so
  • 01:17:59 how this app should roughly feel how the
  • 01:18:02 pages are connected what should be
  • 01:18:04 visible on the user interface for that
  • 01:18:07 you can now have a look at my amazing
  • 01:18:10 drawing skills not but I hope it will
  • 01:18:13 still be helpful so what do we have in
  • 01:18:17 the front end of this application well
  • 01:18:20 it all starts with the page we're
  • 01:18:22 visiting and by the way I'm drawing the
  • 01:18:25 desktop view here we'll also build this
  • 01:18:27 applications such that it looks and
  • 01:18:29 works great on mobile but here I'm just
  • 01:18:31 sketching out the desktop view so we'll
  • 01:18:34 start on the page where we probably want
  • 01:18:37 to have a header with some title of our
  • 01:18:40 applications or the name of the app or a
  • 01:18:43 brand something like this and then also
  • 01:18:46 some menu items on the other end of our
  • 01:18:49 header here now I'll come back to these
  • 01:18:51 menu items let's think about what we see
  • 01:18:53 on the starting screen there I want to
  • 01:18:56 have a list of users so a couple of list
  • 01:18:59 items in the end which simply are
  • 01:19:01 rendered beneath each other where for
  • 01:19:03 every user we have like an image of that
  • 01:19:06 user the name like max or menu and then
  • 01:19:10 the number of places off that user so
  • 01:19:13 the number of places that users shared
  • 01:19:14 so maybe here I shared two places and
  • 01:19:18 man you shared one place let's say and
  • 01:19:21 of course we have more users here so
  • 01:19:24 that's the starting screen now when we
  • 01:19:27 tap a user something should happen
  • 01:19:29 before we think about that though let's
  • 01:19:31 talk about the menu items that want to
  • 01:19:34 have in the header there it depends on
  • 01:19:36 whether we are authenticated or not if
  • 01:19:40 we are not authenticated then here in
  • 01:19:45 the header I want to have an
  • 01:19:48 authenticate option here I'll just name
  • 01:19:51 it off you could name it login so
  • 01:19:54 basically option which we can tap to be
  • 01:19:55 taken to the authentication screen if we
  • 01:19:58 are authenticated then here I want to
  • 01:20:03 have an option to create a new place so
  • 01:20:06 to be taken to a screen where we can
  • 01:20:08 simply well create a new place I also
  • 01:20:11 want to have a option which should
  • 01:20:13 always be available and that's basically
  • 01:20:15 the the users list so this starting
  • 01:20:18 screen here that should always be
  • 01:20:20 available no matter if we are logged in
  • 01:20:22 or not we could also say that this
  • 01:20:25 option when we tap this is basically
  • 01:20:27 also happening if we tap the title
  • 01:20:29 because that is our starting screen of
  • 01:20:31 the app so these two options here are
  • 01:20:34 basically equivalent we could say I
  • 01:20:37 think that would be a setup which should
  • 01:20:39 generally work but now let's see what
  • 01:20:41 happens when we tap a user here so when
  • 01:20:44 we click our user here like menu then I
  • 01:20:48 want to be taken to a new page now on
  • 01:20:51 that new page here which is loaded of
  • 01:20:54 course we have the same header as before
  • 01:20:56 with the title and with our different
  • 01:20:59 menu options here not going to write
  • 01:21:01 them out again these are the same
  • 01:21:03 options as you see up there
  • 01:21:05 so instead let's focus on the main area
  • 01:21:08 of this page what do we see there well
  • 01:21:10 menu has one place right and here's one
  • 01:21:13 place so here I expect to see that one
  • 01:21:17 place if you had more places then I
  • 01:21:19 would expect to see a list of these
  • 01:21:21 places here now that place should have
  • 01:21:24 an image and we'll see how exactly we
  • 01:21:27 create this we could have the image at
  • 01:21:29 the top here for example then the title
  • 01:21:32 and then all the options that allow us
  • 01:21:35 to interact with the place for example
  • 01:21:37 we can have a view on map button here
  • 01:21:42 the idea is that when we click this or
  • 01:21:44 when we tap on this option we open up
  • 01:21:48 this place or the location of this place
  • 01:21:50 in a modal so in an overlay to the
  • 01:21:53 screen where we can see that place
  • 01:21:56 marked with the help of Google Maps in
  • 01:21:58 addition I want to have cue our buttons
  • 01:22:01 on the right here and edit and delete
  • 01:22:04 button which we only see if
  • 01:22:08 we are the creator of that place so
  • 01:22:10 that's only visible if creator so its
  • 01:22:15 menu in this case so if they're locked
  • 01:22:18 in user who is viewing this screen is
  • 01:22:20 also the creator of the place otherwise
  • 01:22:22 only the view on map button is visible
  • 01:22:24 now when we tap that view on map button
  • 01:22:28 as I said I want to open an overlay
  • 01:22:31 which has a map so which uses Google
  • 01:22:36 Maps to display the place on the map
  • 01:22:39 with a marker that's the idea what
  • 01:22:42 should happen when we tap this view on
  • 01:22:44 map button so this is roughly how that
  • 01:22:47 could look like we might also add a
  • 01:22:48 description so that we have the title
  • 01:22:50 and description here but that's my
  • 01:22:52 general idea the idea is not that we can
  • 01:22:55 tap this place to be taken to a new
  • 01:22:56 screen where we den view all the details
  • 01:22:58 but that we can see all details or reach
  • 01:23:01 them like in the case of the map from
  • 01:23:03 this screen but of course there is
  • 01:23:05 something you could build differently
  • 01:23:06 it's just the approach I want to go with
  • 01:23:08 here okay so that is our list of places
  • 01:23:12 where we can all the view place details
  • 01:23:14 we get there from our list of users
  • 01:23:17 because every place is mapped to a user
  • 01:23:19 so we have to tap a user first before we
  • 01:23:21 can see the places now what about the
  • 01:23:24 other buttons we have there the off
  • 01:23:26 button and the new button up there well
  • 01:23:29 let's start with the off button when we
  • 01:23:32 press this off button I of course again
  • 01:23:36 when I have my header up there with the
  • 01:23:37 same menu options we saw before but then
  • 01:23:40 here I want to have a form where the
  • 01:23:43 user has to enter some data namely D
  • 01:23:47 email the password and also any other
  • 01:23:53 data we might need for example also a
  • 01:23:56 button which allows us to pick and
  • 01:23:58 imagines on this all should be here and
  • 01:24:01 then we need a button which allows us to
  • 01:24:03 log in or also switch the login mode so
  • 01:24:11 that we can basically toggle between
  • 01:24:12 login mode and sign-up mode and this
  • 01:24:14 will all the effect what we see up there
  • 01:24:18 so when we're in login mode we of course
  • 01:24:21 only have two
  • 01:24:21 your email and password if we are in
  • 01:24:23 signup mode we will also need to provide
  • 01:24:25 the image and the name of the user and
  • 01:24:27 so on so let's see authentication form
  • 01:24:30 which we only are able to reach if we
  • 01:24:32 are not authenticated yet now what about
  • 01:24:35 the use case that we are authenticated
  • 01:24:37 well then we can of course press this
  • 01:24:40 new button here in the menu and go to a
  • 01:24:43 new page where we also see the good old
  • 01:24:46 header but where we then can create a
  • 01:24:48 new place and that is very similar to
  • 01:24:51 the authentication page with totally
  • 01:24:53 different fields but the idea is the
  • 01:24:55 same here we have input fields to create
  • 01:24:58 a new place also our image picker for
  • 01:25:01 the place and so on and then of course a
  • 01:25:04 button too at that place that is the
  • 01:25:07 general idea here we simply have a page
  • 01:25:10 which allows us to create a new place of
  • 01:25:12 course when we tap this Add button or
  • 01:25:14 when we tap the login button down there
  • 01:25:17 we send that HTTP request to the backend
  • 01:25:20 where we will then basically send or
  • 01:25:23 attach all the day that we picked here
  • 01:25:24 in the forum and then on the back end we
  • 01:25:26 can extract that data and create a user
  • 01:25:29 create the place and so on now creating
  • 01:25:33 a new place is one thing we also have
  • 01:25:36 this edit button here right so when we
  • 01:25:38 tap this we all want to go to a new
  • 01:25:41 screen and that should be a screen with
  • 01:25:44 the good old header we already know and
  • 01:25:46 on that screen I also want to see a form
  • 01:25:49 a shorter form though where we can edit
  • 01:25:51 some data specifically the title and
  • 01:25:54 let's say the description of a place not
  • 01:25:58 image an address but these two fields
  • 01:26:00 should be editable here so we basically
  • 01:26:03 have like a shorter form of that create
  • 01:26:06 new place
  • 01:26:07 form here we have a well shortened form
  • 01:26:10 to update title and description this is
  • 01:26:12 what we could have here now when we
  • 01:26:14 click the delete button I want to open
  • 01:26:17 up a modal where we have to confirm the
  • 01:26:22 choice and basically have a chance to
  • 01:26:25 cancel the deletion process in case we
  • 01:26:27 click this button accidentally well and
  • 01:26:30 that is my beautiful drawing which
  • 01:26:32 basically lays out the front end of the
  • 01:26:35 application now I can guarantee you it
  • 01:26:37 will look prettier than what I drew here
  • 01:26:39 but this drawing here this skeleton
  • 01:26:42 which I sketched out here basically
  • 01:26:44 gives us an idea of the flow of our app
  • 01:26:47 and how users can navigate through it it
  • 01:26:49 gives us a rough first idea of the pages
  • 01:26:53 and components we will need there and it
  • 01:26:55 basically helps us build the right
  • 01:26:57 application the right react application
  • 01:27:00 for the app we want to build in the end
  • 01:27:03 so that's my sketch for the front end
  • 01:27:06 now let's analyze which data we got in
  • 01:27:09 our application and which endpoints we
  • 01:27:12 need on the back end
  • 01:27:17 now we have an idea of how our
  • 01:27:19 application should roughly look like
  • 01:27:22 which data are we going to work with
  • 01:27:24 well there are two main entities we
  • 01:27:26 heard over and over again in the last
  • 01:27:29 lectures we have users in this
  • 01:27:31 application and of course we have places
  • 01:27:34 now it's up to you which exact data you
  • 01:27:38 want to have on your user model and
  • 01:27:40 which exact data you want to have
  • 01:27:42 Stewart in your places for me in this
  • 01:27:45 demo application I came up with I want
  • 01:27:48 to have users who have four key fields
  • 01:27:51 or attributes every user should have a
  • 01:27:53 name and email address a password and
  • 01:27:56 also an image now name and image are
  • 01:28:00 optional we'll definitely need email and
  • 01:28:02 password in order to implement
  • 01:28:04 authentication which of course requires
  • 01:28:06 an email password combination now for
  • 01:28:09 the places it's also up to you but there
  • 01:28:12 I want to have a title in a description
  • 01:28:14 for every place a human-readable address
  • 01:28:17 so basically street name city name
  • 01:28:20 location which is a pair of coordinates
  • 01:28:23 latitude and longitude and also an image
  • 01:28:26 now besides these two standalone
  • 01:28:30 entities it's important to understand
  • 01:28:32 that of course they are related every
  • 01:28:35 user can create multiple places and
  • 01:28:38 therefore owns multiple places and on
  • 01:28:41 the other hand every place belongs to
  • 01:28:43 exactly one user so implementing this
  • 01:28:47 relation and updating it correctly will
  • 01:28:49 also be a part of the application we're
  • 01:28:52 going to build so we know about our data
  • 01:28:54 and how the front and should look like
  • 01:28:56 before we plan the different routes we
  • 01:28:58 want to have on the front end and which
  • 01:29:00 pages we need there let's have a look at
  • 01:29:03 the back end which API endpoints will we
  • 01:29:06 probably need there well since we have Q
  • 01:29:09 main data models here user and place I
  • 01:29:12 got two main endpoint areas let's say we
  • 01:29:17 want to accept requests which reach our
  • 01:29:20 back-end domain.com slash API slash
  • 01:29:24 users and then there a couple of
  • 01:29:27 specific routes which all start with API
  • 01:29:29 users
  • 01:29:31 typically slash nothing if a get request
  • 01:29:33 reaches our back-end domain / API slash
  • 01:29:37 users slash nothing else then I want to
  • 01:29:41 return a list of all users will need
  • 01:29:44 that for the page where we display all
  • 01:29:46 users and the number of places they
  • 01:29:49 created if we send a post request to
  • 01:29:53 slash API slash user slash signup then I
  • 01:29:57 expect to have data attached which
  • 01:29:58 allows us to create a new user and then
  • 01:30:00 after this creation succeeded also
  • 01:30:03 automatically locked user in and you
  • 01:30:05 will learn what logging users in means
  • 01:30:08 in the context of Amer nap in the
  • 01:30:10 authentication module when we send a
  • 01:30:13 post request to slash login we'll just
  • 01:30:16 lock the user in so I expect to have a
  • 01:30:18 password and email attached to that
  • 01:30:20 request and then we'll skip the creation
  • 01:30:22 part because we assumed this user
  • 01:30:24 already was created we just try to lock
  • 01:30:27 the user in so these are our user
  • 01:30:29 related routes but of course we also
  • 01:30:32 have places so let's say for requests
  • 01:30:35 which reach our domain / API / places /
  • 01:30:40 user / UID if that's a get request then
  • 01:30:45 I want to retrieve a list of all places
  • 01:30:47 for that given user ID so the idea here
  • 01:30:50 simply is that we are able to get all
  • 01:30:52 the specific places a user created if we
  • 01:30:56 get a get request to just API / places /
  • 01:31:00 some place ID then I want to get that
  • 01:31:03 specific place by that ID an important
  • 01:31:07 both UID and PID which have this colon
  • 01:31:10 in front of them are dynamic segments so
  • 01:31:14 what exactly is part of the URL here is
  • 01:31:17 up to the front end this will be
  • 01:31:19 interpreted as a user ID or a place ID
  • 01:31:22 though now if we send a post request to
  • 01:31:26 just API / places / nothing then I want
  • 01:31:30 to create a new place and I expect that
  • 01:31:32 the data which is needed to create a new
  • 01:31:34 place is attached to that request if we
  • 01:31:37 send a patch request to slash API /
  • 01:31:40 places / some place ID then we want to
  • 01:31:44 update
  • 01:31:44 that place buyers ID this request will
  • 01:31:47 carry data in its request body as well
  • 01:31:50 it needs to carry the data which we need
  • 01:31:52 for updating the place namely the new
  • 01:31:54 title and the new description and of
  • 01:31:57 course updating is nice but sometimes we
  • 01:31:59 also want to delete a place and
  • 01:32:01 therefore our walls want to have a
  • 01:32:02 delete route where we accept a delete
  • 01:32:04 request targeted at API / places / some
  • 01:32:09 place ID which will well delete that
  • 01:32:12 place by its ID these are the endpoints
  • 01:32:16 we need we have all the crud operations
  • 01:32:18 in there we have authentication in there
  • 01:32:21 and we will build them out step by step
  • 01:32:23 throughout this course now let's have a
  • 01:32:26 look at the front-end we already
  • 01:32:27 sketched it out
  • 01:32:28 but now let's plan the specific page
  • 01:32:31 components we need there
  • 01:32:37 so on the front and we got a couple of
  • 01:32:39 pages and namely when we open the app
  • 01:32:42 when we just visit this website for the
  • 01:32:44 first time we are on my cool page comm
  • 01:32:47 slash nothing what should be visible on
  • 01:32:50 this starting page well I want to show a
  • 01:32:53 list of users there so this list of
  • 01:32:56 users where we can click a user to then
  • 01:32:58 be taken to the places off that user
  • 01:33:01 speaking of that we need a route and now
  • 01:33:04 these are all front-end routes which are
  • 01:33:07 interpreted by react or to be precise a
  • 01:33:10 library that supports routing and react
  • 01:33:12 and which will not be interpreted by our
  • 01:33:14 back-end so we also want to have a route
  • 01:33:17 dare on the front-end for some dynamic
  • 01:33:20 user ID which we don't know in advance
  • 01:33:21 slash places which should load all the
  • 01:33:25 places for dead specific selected user I
  • 01:33:28 also want to have a slash authenticate
  • 01:33:31 or slash off route which shows us a page
  • 01:33:34 that holds to sign up and log in forms
  • 01:33:37 between which we can toggle and all the
  • 01:33:40 / places / new route which shows us a
  • 01:33:43 new place for in addition we need a /
  • 01:33:47 places / some place ID route which leads
  • 01:33:51 us to the page where we see the update
  • 01:33:53 place forms so where we can enter the
  • 01:33:55 new data Forest select a place now on
  • 01:33:59 the front that not all pages are visible
  • 01:34:01 all the time the list of users is always
  • 01:34:04 reachable and so is the list of places
  • 01:34:06 for a selected user these are always
  • 01:34:08 reachable no matter if we the visitor of
  • 01:34:11 this page are logged in or not the only
  • 01:34:15 difference is that when we're viewing
  • 01:34:16 the list of places when we're not locked
  • 01:34:19 in or if we are logged in but we didn't
  • 01:34:22 create the places we're looking at will
  • 01:34:24 not see the edit and delete buttons will
  • 01:34:27 only see those if we are logged in and
  • 01:34:30 we're the creator of a given place now
  • 01:34:33 if we are trying to authenticate this
  • 01:34:36 page should only be reachable if we're
  • 01:34:38 currently not authenticated because if
  • 01:34:41 we are authenticated it makes no sense
  • 01:34:43 to try to login again we already are
  • 01:34:46 logged in after all now for a new place
  • 01:34:49 and update place
  • 01:34:50 it's the opposite these pages these
  • 01:34:53 front-end routes should only be
  • 01:34:55 reachable by users who are authenticated
  • 01:34:58 so who did login or who did just sign up
  • 01:35:01 and these will be our front-end pages
  • 01:35:05 now you don't need to memorize all of
  • 01:35:07 what we walked through in this module
  • 01:35:09 instead I hope that this module just
  • 01:35:12 helps you plan your next project we will
  • 01:35:16 now go ahead and implement all these
  • 01:35:18 different things step by step in the
  • 01:35:20 different modules of this course this is
  • 01:35:23 just our general agenda and with that
  • 01:35:26 we're well prepared to start working on
  • 01:35:28 the real code
  • 01:35:30 [Music]