Build a FullStack Application with MERN - Part 1 | Sandra L | Skillshare

Build a FullStack Application with MERN - Part 1

Sandra L, Front Development

Build a FullStack Application with MERN - Part 1

Sandra L, Front Development

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 10m)
    • 1. 1 [mern] mern presentation

      9:55
    • 2. 2 [mern] package json

      3:45
    • 3. 3 [mern] npm packages cors,bodyparser

      6:12
    • 4. 4 [mern] set up server

      5:33
    • 5. 5 [mern] mlab database

      8:41
    • 6. 6 [mern] mongoose Schema

      6:30
    • 7. 7 [mern] express Router

      5:37
    • 8. 8 [mern] HTTP post

      4:28
    • 9. 9 [mern] Postman

      3:51
    • 10. 10 [mern] put delete

      6:22
    • 11. 11 [mern] testing routes(postman)

      8:45
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

209

Students

--

Projects

About This Class

React provides the perfect solution for creating JavaScript-based interfaces, with a huge range of uses for it including building native mobile apps and web apps.

This class will teach you to build dynamic website components and real-time applications with React.js.

===============TOPICS===========================

  1. Intro to React: Getting Started - watch
  2. Intro to React: Learn the fundamentals - part 1 - watch
  3. Intro to React: Learn the fundamentals - part 2 - watch
  4. Build a Countdown Timer with React.js - watch
  5. Simple Todo List with using React & HTML5 Localstorage - watch
  6. React, Node.js - Build a Quote Generator with a Restful API - watch
  7. Build a Weather App with React, Bootstrap & HTML5 LocalStorage - watch
  8. Learn React Redux in less than 1 hour - watch
  9. Getting Started with React Router - watch
  10. Introduction the React Hooks - watch
  11. Build a FullStack Application with MERN - Part 1 - watch
  12. Build a FullStack Application with MERN - Part 2 - watch

===================================================

React is a Javascript library, developed in 2013 by Jordan Walke of Facebook. You’ll find React is both very popular (it’s the 5th most starred JS library on GitHub) and used on major sites including on Facebook, Netflix, and Khan Academy.

You’ll love the flexibility of using React with your favorite web technologies (except for jQuery!), and this path will take you from the fundamentals all the way up to building full apps with custom styling. With this class, learn the A-Z of React :

  • the basics and fundamentals with snack-bite size video lessons. From simple to complex, tutorials and exercises will help you get up to speed fast with the main concepts of web development with react.js
  • Understanding React Components (stateless and stateful components)
  • writing and displaying data with JSX
  • Networking with asynchronous HTTP requests & RESTFul APIs
  • Maintain your Application's State
  • Passing dynamic data with props objects
  • Component lifecycle (componentDidMount, componentDidUpdate)
  • Communication between components
  • Events and event binding
  • Working with State and HTML5 LocalStorage
  • Creating maintainable code with JavaScript Modules
  • Data Persistence with Redux
  • Routing with React Router 4
  • Taking advantage of new ES6 Features
  • The React Hooks (useState, useEffect)
  • + So much more

What we will be building together?

  • A real-time and single page application - Countdown Timer - stating how many days, hours and minutes are left until this awesome event you look forward to.

  • The classic Todo List example to get up to speed with the basics and main concepts in a short amount of time

  • An interactive - checklist - developed with the Bootstrap Library, Font Awesome icons & HTML5 Localstorage

  • A front to back example with MERN (MongoDB, Express.js, React.js & Node.js)

  • a weather widget with the Restful API openweathermap(dot)org

  • + So much more

Who is this class for?

  • Anyone willing to learn and build solid frontend skills

  • Developers who wish to grow and sharpen their javascript skills

Meet Your Teacher

Teacher Profile Image

Sandra L

Front Development

Teacher

My name is Sandy. I am a freelance Front End Engineer based out of Toronto, in Ontario, Canada.

- Check out the latest Learning Path Series :

React.js - Front End & Fullstack - React 16.8 + 

Intro to React: Getting Started - watch Intro to React: Learn the fundamentals - part 1 - watch Intro to React: Learn the fundamentals - part 2 - watch Build a Countdown Timer with React.js - watch Simple Todo List with using React & HTML5 Localstorage - watch React, Node.js - Build a Quote Generator with a Restful API - watch Build a Weather App with React, Bootstrap & HTML5 LocalStorage - watch Learn React Redux in less than 1 hour - watch Getting Started with React Router - watch Introduction the React Hooks - ... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. 1 [mern] mern presentation: this part of the course is gonna be more advanced, so we gotta be building a single page application with react. So that's something that we know. But this time, we're going to be looking at implementing a back end solution that we're gonna be doing with the stack, which is me murder. It's not mean it's actually murder was looking at this title. But that's just, you know, remember that React is can adapt to any other solutions. So that's a nice example to show that was react. You can you can use react to build your from end And that can be easily combined with any of the solutions to build that the back ends which will be the case. Because for that, we're gonna be using Murren, though that stands for the Emmys for mongo DB, which is the database solution. So that won't be. In that case, we won't be using a traditional type of database with creating dropping tables, columns and rows. It's gonna be no SQL as opposed to SQL with the new SQL is gonna be in the Justin format like like a tree. So you're gonna have data that you're gonna be able to nest within each other, and we're gonna be creating models by creating scheme us that will be blueprints off objects. What that we want to create. That's something that we're gonna be looking at. So it looks a little Q through and Express is going to be the solutions to create your A P I get away interface in order to interact with this database. So this is with expects express that we're going to define the path and endpoint. So you know, when you have a euro and you have a path, for example, here search, that's the path. So that's something that we're going to be able to define with express react, that we know already that we're gonna be using to build the front different and a note which is for the server. However, in that case, that's the nice thing with the Marine stack. We have expressed to take care of these parts, which is very tedious to we don't We don't have to create a server from scratch. That's gonna be the job of express to build an interface on top off note in order to allow us to interact like an A p I get away. So this is what we're gonna be doing. So what I'd like to show you is one illustration of what Marin can be eso how it's organized, the architecture off this of this stack, so that can be a nice way to represented. And so Murn you have? Yeah, lots off tutorials, documentation about that. So what we have here is first what we know. So the application, the front, which is delivered to the user so to the client. So that's the client parts. So you have the browser, so the front can be there, reacts or anger. So that's nice to actually see both because it can be main omer, um, earn stack. So the difference with between the jury that is just the solution javascript that you use for the fronts will be different. So that could be frank of jazz, like angular. That could be react that we're gonna be using. Or that could also be view of you, Jess, which is another lightweight from work and JavaScript. So that is the part that we know. So we're gonna build the clients, and, um, it's gonna be indirect. So that's gonna be actually something that we know already. So you'll see the projects which is ready, ready to use. That's gonna be the classic to the least that we've done so far. So we don't need to be to a complex in attitude. Present a nice example off a Murren stack full stack application. And then here what we have in the middle is the note back and server that we build with Note Express, which will be on top of note and which will be the FBI that we're going to be building with Express. So this part to note we won't be we're gonna be setting up the server. But it's not gonna be too much work to define the path. We can be very tedious task. Whenever you do, you create a new path with the server. You have to do validation. It's very tedious. Express is going to be, um, a good, nice, easy introductions. In order to do that, it's gonna be less complicated with express because it's going to take care of this part off doing the validation and everything. So that's gonna be a nice way to do to provide with this solution. So we're gonna be working with express and note. Come back. And finally you've got this mongo DB, which is the database where your story or data and for that particular purpose for the database, uh, we're gonna be using, actually mongo DB. Let's check this out. You'll see, actually, if you scroll down so that you have a different type of solution, you know? So, like, this gives you like the architecture off full stack applications with the clients and back . And here you see a different example of mongo db at last, which is mongo db, but actually in the cloud. So this is what we're gonna be actually using if this one is called and lab and this one is one Manco db service mongo db. As a service from former good to be database as a service for mongo DB was this mentions that it's a database you can store your data just like with the database, except that this is this will be on the clout, So everything is gonna be handled virtually so That's very, um, very convenient. And you'll see as well. That's the walk through. The documentation is very easy user friendly, because basically What you're gonna need to do is to set up a new end up accounts created that of a subscription you'll need to register for a cluster. So that's will be a space in the cloud that you can use for your applications to save your data. And, um, from that, we're going to see how to load data out to read data and how to delete data. So that will work. Just like, um, a database. We're gonna be able to build a crowd, rest ful ap I by using express and using M lab as a database as a service for Among Good. So that's gonna be super easy to set up. We'll have all the instruction, but I'm gonna walk you through. It is gonna be the moment. So what I'd like you to do instead, in order to get started, is to down with the project the starter projects. Actually, you get some resources during the class in order to make it easier for you to follow along . Our there's gonna be lots of coat, lots of new things. But for now, what you'll do is taking this starter projects and drag over to the visual codes to geo application, and we're gonna go through. It's actually we're gonna install it because it's gonna take. Sometimes we have. We have talked some dependencies to install eso. Let's do that's You can either use NPM remember or yarn. So both is gonna be fine to install. The dependence is so inside the components you'll get some dummy data you can use. It way may or not use it, but it's just data to to start with in order to, uh, to have something to play with. And we've got the index for our company based react application for the front on Lee. So it has a few functionalities. So you see, it's it's organized, incompetent, so that's pretty nice. So we've got the header. The header is just like the title with the text. Input the body for the list actual, the actual least of items. When we add a new object, an item to the list and the food er, which will include if you remember, that's ah, buttons. That's something that we don't before. But actually, I'm gonna assume as this is done, we're going to start the project in. You'll see inside the photo you have a button which will be displayed conditionally, meaning that is hidden as long as you have no items crossed off the list. As soon as you have something which is crossed out, it's gonna display a delete button as an option to delete all the items that you have crossed off the list that's gonna be in the food and you have a few functionality. So that's the classic ones like you can add. It's gonna handle the change whenever there's a change in the text field to capture the text that you that you type the using put you can add. You can, Marcus completes. But that's gonna be when you decide to cross an item off the least, and you're gonna be able to also deal. It's off the least. Okay, pretty straightforward. So for that example, with the with the crowds full stack application that we're going to be building with me burn Sorry with Murray and we're gonna be doing something simple, OK, but it's still gonna be a crowd full stack application. So we're going to see how to add to the database how to update how to delete from the dead Amis here ago. And just to finish with the explanation of what we're gonna be doing with the full stack, we're gonna be going through all the set up of the environments to actually be setting up a server, creating an A P. I get away with express, we're gonna be defining the routes with Express and finally see how to our creates a database, a collection with a database, and that's gonna be with the cluster. By using this solution, you'll see, that's gonna That's gonna be a lot of things. So we'd better with ready. But for now, let's see what we're gonna be building as a full stack application. So that's gonna be these application, which for now is just front. You'll see that nothing is persisted. So everything is going is disappearing when we're refreshed the page. But with murder, we're going to be able to then persists our data. So this is we're gonna be This is what we're gonna be doing starting with the next video. Listen, 2. 2 [mern] package json: This is the first thing we do. So we put our project so you insult all your dependency. So that's the clients section. I'll show you, actually, how it's gonna be organized. So basically in our project now, what we have is a client. We have a single page applications for the clients. No, what we're gonna be doing, he's creating a backend, the back end solution built with me with the Murn stack. So, you know, I'm gonna be creating a new folder and back in visual codes. We should have, like, now, this organization, OK, and you can feel free to actually go. So if you want to start actually your react applications, you gonna need to make sure that you CD so for changing directory, going to make sure. So I think it's still running, but just in case, let's go. So now we are in the starter, So we're gonna make sure to city into the client and then go ahead if you want to start this one so you can actually do it from the client folder now. Okay, so that works just like as before. But we're gonna need to also build the back end now in a different section, so we're not gonna be mixing up everything. So now lets open in your terminal a new window terminal like this, and this time from the starter route project, I'm gonna BCD into the back end. And this is where we're gonna be creating the environment and everything. We're gonna be setting up the server starting with creating a new package just because it's gonna work. It's gonna be working, just like for the clients were gonna be having It's gonna be with the note environments, and we're going to be using note packages with, um, npm that we're gonna be instilling with NPM. So for that, we need a package. Jason on two, Um, create a new one we're gonna do in PM in its to create a new package. Chisholm. Now it's gonna ask you for the name server back end. I mean, it's murder Mani's for like, it's exactly the same stack, except that for the front, use anger instead of reacts. Okay, so that's mean. Actually, it doesn't accept. I think a back cap letters so back ends. I think I Fenice fine. It's gonna be murdered. Here is version is just Murn dip. I'll say back and you can leave it blank. But I'm just typing into show you, Myrna demo entry point is gonna be index suggests. Actually, we're gonna be changing. This one is gonna be server that, Jess, Let's do it right here. You'll see that's gonna change in your pockets, Chisholm. Because whenever you start your products, it's gonna need an entry points. Okay? Just like, just like for your clients with react. Your entry point is in the index touches yet that you find in the roots folder. Okay, Get triple. Not for now. A key words. We can leave it blank. And author, feel free to type your name. Here you go. License. We can leave it blank. And if it's okay, you can type type entry. And now you have your package, Jason. Okay, So this is your package, Justin, we're gonna need to script. So when you start the project we got I need to have, like, a script to actually start this one on a server. We're going to be doing that so right after. But for now, what we need is setting up the back end. Um, just projects okay with a packet ships. And so let's move on. Because after that, what we're gonna be doing is creating setting up the server. 3. 3 [mern] npm packages cors,bodyparser: so in this part is gonna be crucial. We start with the server that we're gonna be setting up with note. So that's something. I'm gonna be working Syria. Look, there's not much. It's not like this complicated. But you just need like to go through a few steps, though. What you need to understand first is that you'll need to have your package, Jessen, because in order to set up the server, you'll need a few dependencies note models that we're gonna be installing, starting with express. That will be a sour A p I. This would the This will be the interface so we can interact with the database with crowds operations in order to make the http request like get post put and elite, it's gonna be with express. Okay, so we're gonna be setting this up. So for that, we'll need to install it as a module. We're gonna need to require it, like, as a model inside the server and then create a new instance of it. So that's gonna be up, and that's gonna be like the starting point off our server, which is built upon no GS. There's another module that we're gonna be installing, and this one is Body Person. It's super important. So that's a middleware which will allow us to parse the data that we receive role in order to parse. It's enough to make it possible to make it like in just informants, so we can actually work with it. So that's gonna be body parts up so we can parse it. You'll see course he's, um, another utility middleware, which is important because whenever you make you built an application, you may be prevented to make requests if it's not from the same origin. So in order to bypass these restrictions are in order to be able to make requests with multiple origin, we're gonna be using course. Okay, we're going to read more about this in a moment and next we're going to be defining the port. The port is where you're gonna be running your application. So for that, to understand this one, you can actually go to, uh, where you whenever you run your application with react, the default port is always 3000. Okay, by default. Okay, you may have 12 in the case. You already have this one which is running. It's gonna offer you to run your application on a different ports. But the port is this OK? You're going to run on the local locally on local host, own a port. So this is what this one is defining right here. Okay, so once we've done that, So once we have all of that install. So we're gonna be requiring express Buddy Person course. So we're gonna mean style installing all these dependencies. We're gonna define the port. Then finally, we're gonna use course for the hour up. We're gonna use body Parsa Jessa. Okay, that's important. Because where we're gonna be working with, um, with data objects JavaScript object that we pass as data to our routes, it needs to be something that we can parse. Okay? And finally work it. What we're gonna be doing is we're gonna execute up that we're gonna listen on one port, which will be the one that we define right here at the top. Then we're gonna be if everything goes well, we're gonna be able to read this in the terminal. Okay, so let's do that. Starting with ah, few dependencies that we're going to need to install. I'm gonna go ahead. And actually, you've got this song. Well, you're gonna find lots of tutorials online about the mean of the murder and mean stack. Um, but basically, you can just in one line take all of these and go ahead and install are gonna explain what Mongoose is in the moment. You're gonna go ahead and insult all of this. We're gonna do come and see and go to the German. Also, make sure that you are, um, in the back and holder. Okay, You can do a PWD for presents, working directory, and it's going to tell you that now you're in the back and folder where we have just created created the new package. Justin, and we're gonna go ahead and install this in just one line. You so you'll see that you're gonna have new dependencies. Added Teoh, Your packages, um, talk. It needs to my class words year ago. Let's refresh. Maybe. And here you see all the dependencies here. So the body parts, sir. Course express mangoes, mangoes. I haven't explained yet, so that's gonna be later. So when you create a crude application, so you obviously need to define a blueprint for your objects So this is a way to create to implement a schema for your objects. So, like your blueprints, it's a model ization. Actually, when you work with object oriented programming, you define the way you want your objectively defined. So it's actually, if you have object for the to do, for example, for every to do object, you're gonna have an I. D. You're gonna have a text. So that's gonna be the input you're gonna have. Ah, property that says, if this is completed, owner so that's gonna be a bullion type. So this is what schema what Mongoose is gonna allow us to do to create schema. As for the models, okay, for now. So that's already installed and next. What we'll do is are adding a script because that's not, um, we're gonna be able to start anything yet. We're gonna need to have a script. And this one is gonna allow us to start our, um, server. It's gonna be note server, Jess for the intra points. You see, when we created the, um, this package Jessa, it was asking for an entry point, meaning that it's gonna look for this, um, server Justin, that we were about to create. Okay? And then start the application. So this is where we're gonna do next. Actually, we're gonna be creating a server, so that's that next. 4. 4 [mern] set up server: it's not. We're ready to create to set up the server. So let's do that by doing touch. Survey suggests. So that's the inter points off the back end Here. Go. And here, what we're gonna do is first require all the young dependency that we've just installed starting with express. So we're gonna do that worth require express. Then we're gonna create enough with express. So that's gonna be our backing up express they were gonna need. Also, we're gonna need also to use body parts and remember So this one is going to be a middle where two parts to allow us to parse Jessen. So for that, we're going to require body person. Then we're going to use coarse as well. Remember that we have installed this one, so we'll talk more in details. About course. It's gonna basically allow us to make requests with multiple origins without any restrictions, very often. So we're gonna be blocked if your request is not coming from the same domain origin. So that's gonna allow us to prevent that. Prevent that to bypass this, um, this restriction next, what we'll do is define the port as we've seen actually, in that, uh, example. You see many examples like that, but here, we're gonna define a port of where we're expecting the server to be running. Okay, so that's gonna be 4000 on local host 4000. So let's set this up by making sure that we use course every time that we make a request An http request that's gonna be enabled with course, to avoid any restriction we also gonna allow to parse the Justin. Otherwise, we may have, like, gonna tell cues, tell you that it can a purse or it cannot understand what you're sending as information because you're having said you're not sending information that it can read, so it's gonna be dangerous and formats so we can parse Jessen and finally, what we're gonna do. So once we start the server, we're going to listen on one port that listen. So this one takes two parameters, its first, the ports where you are executing, you see one at the top, and then we're going to read. So what we do after that is, um we're going to read something in the console, and we're going to read something like server running, running own port we're just gonna, you know, congrats innate and allowed Teoh to say which board it is. Okay, so let's do that. So that's the starting point of our server. So we have our entry points. Okay, so that is set up and in the package. Jason. So let's go back. We have defined the scripts which will allow us to execute NPM run starts in order to execute this one, which is note surveyed RGs. And let's see what happens. Here you go. So you can read that now. The server is running on ports with 4000. Actually, I could have written servers running. Make it a full sentence. Okay, that's not gonna be, like, updated right away. You need to actually start to uni directly, shut it down and start again. The server in the case, there's in each any change in that foul. There you go. So now you can read servers running on Port 4000. So that's great. So next step, we have a server set up, so we have defined. So that's the starting points off the backhand. We have the the package disarm, be the modules, but also the server. So and then what we're gonna do next is see how we can connect with a database, and this will be with I showed you earlier with M Lab. I m not database. Um, you're gonna need you create in your account. Okay, So that's the base to create in your accounts. So I will invite you to open this page so from the fronts and go to the documentation or go straight to sign up to be prompted. Don't know. You're not going to be doing that. Actually, from here, actually, yes. I'm gonna let you do that. This part because it's it's the same at less is also mongo to be as a service on the cloud . So you're gonna be setting up in your accounts right here. Follow the instructions. And once you're old sets, you're gonna locate. So already have my logon credentials so I can go to my accounts. I'll do that. And then we're gonna go through the documentation so we can see how to create. Um, so this set up in your account. So that's the first place we see if it directs you to the same page. Okay, that's gonna be the first step for you okay? Setting him sending up a new M lab accounts right here. Then together, what we'll do is create a new database subscription. So that's something that will be doing together next. 5. 5 [mern] mlab database: so Internet. You're creating accounts. I'm gonna leave these to you. So this park, this is for you. So just follow the instructions. So creating your accounts, you may receive an email asking you to confirm theory the creation of your accounts, and then go back. Go ahead and log in That you're gonna be able to do from Ah, the front page off lab. And right here. So you can, um actually, I was already connected from Page this one, actually. So the front page home, you can go here if you already have credentials, and I already have mine. So Okay, make sure that you can log in. And, uh, when we already thank you, once we're ready so we can go ahead and create a new, um, deployments. I mean, uh, right here. So I have a few just for demos, and those ones are free. So let's look at the documentation, actually, so from here, we're gonna be able to create a new data basis subscription provided for free by amazon. So you are. You actually have three providers for this cloud service for mongo db. So you have Amazon Google Cloud platform and make Recep as you're so the one which is providing for free. So that's great for testing and demo. It's gonna be amazing. So we're gonna be selecting this one here ago, so we're gonna lend right here. And from here, you can select these send books. So you have the choice between U S or Europe. Okay, so you can click. Continue. Select here. Okay, continue. And it's gonna ask you for it out of his name. So, you know, they moved at a base. Actually, you can't. So we're going to make it more descriptive, descriptive, like to juice database, for example. Okay. And then continue. And then it's gonna ask you to submit the order, but that is free. So don't worry. So that's gonna give you, like, a storage for half, um, gigabytes. Just forearm testing. Total price is free for the other ones. The other providers, they're charging something so you can look that you can look into it if you're considering having, um a more complex. I mean, something which is more advanced than huge, of course, require more storage, but for now, which is gonna be sticking to the free tier and submit the order I think it's gonna take, sometimes before it's actually available. So it's gonna tell you that this is success are your database is created. And if we go inside this one to connect, using the mongo to be shell and actually we're going to be using our, you know, server. So we're gonna be using this one, the Yuri, and I think that it's, uh Yep, I think it's ready to use for now. Okay, so what we'll do is take this this section There are a few things that we're gonna be because obviously when you want to be able to redirect with the database, it is with permission. So you are. You're allowed Teoh jokes at the database to do operation, interaction with it requests and everything, and that's gonna be asked a user with a password. So that's gonna be the next part. We're going to see how to create a user. So I'm gonna show you how who has take this first. What we're gonna be doing here is first create an instance for our database with this urine . Okay. And with this, your yuri, we need to specify the user and the password. So let's do that going here. We're gonna add a new database user. So I'm gonna create something super simple, like something hot. And then the password, which I will define not recommended. But that's gonna be very simple. Like test. And remember this one actually remember it because you're gonna need to use this one. This password, you're gonna need to specify it. So I'm gonna click rates a year ago. So my user for the password is Sandra. So I'm going to replace this section with some drop and my password, something like, uh, not super secure, which is gonna be test 123 That's it. Okay, this 123 So we have a database tear provided with the, um, Amazon. Now we're going to see how it can connect for that. We're gonna need mongoose that we have installed. So let me add this one mongrels, an instance of one mongoose require mangoes, and we're gonna connect because we're gonna be doing all our interaction with mongoose. Anyway, v a mongoose we're gonna be are creating object safety database and everything. So, with bongos, we're gonna connect this one text to paranoia the first DB, and it's actually, just one options that, um that we're going to specify which is which is gonna allow us to use you neural processor that we're gonna set to True. Let's close. Shut down the server again. Every start, and we'll get something. Let's make sure that we save a year ago. So we've got this warning, like, for example, So we need to pass this option. So indicating, like, we've got a warning indicating that there's gonna be something duplicated. So for future versions, So we'd rather make sure that we are able to monitor the engine by actually enabling this. We're gonna at this to our list of options like this. That's cut again and restore it. We should be fine. Okay. Cool. And this connects method actually returns a pra mice. So we're going to be able to then console log jamming, do something once we know that, um, we're connected. So we're gonna be able to handle that, then. I mean, I mean the outcome if this is successful, but also to catch errors, if there's any air. So we're gonna look out if there's any error, um, then you console log and say, like error and then prints out the air and finally say something like here. We know that this is successful, so we can just say OK, successfully connected to the server. Actually, the database, in that case connect you to the dead Abi's because we're connecting through thanks to the service. Okay, let's do that again. So we're going to shut it down and then start again, and this time, So you've got So So this is running up and running just fine. And also, we've been able to connect successfully to the database. So the one that we created here, you see, So the step against So you need to connect using the uric mongo db Yuri. So this one. So this is the name of the database. Okay, so that's the one that you have set up. So when you created your new database and next we created a user, so we're gonna be interacting with the data bees as these user. Okay, So make sure to set this one up, because otherwise it's not gonna be working. You got any to hear? Replace with your user name and here with the password okay. Of this unit. Finally, so you can just capture this one. So store this one in a variable. Constance connects and make sure that you connects to get the feedback further to the connections to make sure that this is also so We're good. So what, we're gonna be doing this next. He's see how we can, um, defined the route. So there are two things that we're gonna be doing is defining the schema for the to do objects. Okay, So, as I was explaining, So we're gonna be using Mongoose to handle all the model ization to define a blueprint off How we want to describe it. Objects Every instance off a to do type. Okay, so this is to create a type off object. Next, we're gonna be defining the routes on. This will be with experts as well. 6. 6 [mern] mongoose Schema: so we're going to read more about Mongo. So with bongos, we've been able to connect to the database. So first, what we did is installing Mongoose. That's another package module. And what we did is having an instance of Mongoose by requiring mangoes inside our server file, and then we connected by using this method connect. Okay, that's one step. And then secondly, what we're gonna be doing is creating and you did a type with mongrels. We can look at this example. So where we define a new cats data type, we use this method model which allow us to define a constructor with first, how we want these data types to be named. So that's gonna be cats. We're gonna be able to create a new instances, objects with this to the type cats. And for every new instance off the cat did a type. We're gonna need a Nate as a property in the stranded A type. So the string formats Okay, so let's see one example of how you define a new object off the cab data type. So you've got this example kitty, and we have a new constructor with the keyword new so By defining this as such, you can have a new constructor that allows you to create a new instance off a cat data type . So new cats and inside you define. So these new instance object with a name, Okay. And finally, you're going to be able to save to the database. So with this new objects by using the same methods and it is, it returns in your pram ice as well. So to just to say, ah, successful or errors. So we're gonna be able to catch errors as well. Okay, so that's in your pram ice. That's it's going to return. So we're gonna follow with the exact same battering we're going to read through the ducks. So whenever is there is a question. So it's something that you want to check. You can always go to the documentation, obviously, and here it's gonna walk you through how to define a schema creating a model, an instance method, etcetera. So basically, you're going, you want to make sure, so that's already done. You want to make sure that you have here that you're pulling the modules, came up among us and also have a new instance of schema in your server digits. So we're going to do that because we're already requiring Mongoose. But we're gonna need to also, um, recording schema so we can actually create new scheme. It's so we've got that nice example. Quite complex. So that's is it an example of a new schema? So for a blogged. So for every new piece of blood, you're gonna need a title. It's gonna be a string you're gonna need an author. Body commenced, etcetera, which is another object, by the way, we're gonna need to dates, which is another object, actually inside the schema and exit arrest. So our, um to do schema is gonna be more simple. We're gonna go ahead and create and you schema So this one is gonna be Let's. So first we defined the schema, and then we're gonna be defining So the data type OK, so we could do it all in one line. So you see, like when we looked at this first example so the example of a cat, So this one is quite complex, But let's go back to these example cat, so you could actually just go straight and are create when you did a tight by doing among ghost model and defined the how you wanted to find the data type. So that's gonna be a cat's you get, and then how you want to define it. So that's the schema. But instead we're gonna do it separately by doing schema. So that's the young I'm doing it outside. Okay, so that's why that's what I meant. That's gonna be traduced chema, and that's continue schema. And here you open pregnancies and curly braces, and here you're going to find, so every property that you expect him that's came up. So first the state of the text. Okay, so how I know that I need that. So let's go back for a moment to our clients, remember, that's for every new, Um, not here. It's gonna be in sight components for every new to do object. What we need is an I. D. Um, this kind of this is gonna be handled by by, um, the database. We're gonna have one generated automatically, so we're gonna live this one out. Ah, but what we need to set up for us is a text and also saying if it's completed or not, So that's gonna be first text, which is gonna be of type String and is completed, which is gonna be of type Boolean. So that's gonna be a very basic simple came out here and this one is gonna be uptight. Boolean very go. So this is our schema. Next. What we need to do is then, um, create a new data type and that's gonna be mongoose model. We're going to define this as to do, and then we're gonna press to do schema as per energy in order to create our new schema. Okay, so here ago. So now we've got we have defined our schema. So we know that every time that we need to create in your instance of an object for that, you do it's gonna be with these skim up. So we're all sets. We're gonna be able to use some methods in order to, uh, to create objects and then save to the database. And, for example, if we read through the ducks once you create a new object, for example, that's one So query helpers here you define your your schema for this game, I it's pretty straightforward. So it's just the name. Okay, unnamed property. So we're gonna be able to find, for example, so first you'd save to the database, but you're going to be able to find by doing queries. It's allowing us to to do that by interacting inter in term, interacting with the Della bees and allow to find ah, name binding which corresponds to that it's gonna look through one object that cars must to fight for the name priority for one object inside the dead appease. Okay, that's pretty straightforward. But for now, so what we're gonna be doing is, um, defining the routes now with express. We're gonna do that next because this is with the routes from that, we're gonna be able to interact with the database, create new object and save to the denim. So let's do that next 7. 7 [mern] express Router: Okay, so here is express. We're gonna move on to defining the route. So that's will be the part where we define the path and one points allowing us to interact with the database. I mean, the servers. So we won't be doing that with note from scratch. So that's the nice thing with Express is that it's going to allow us to have a quick introduction as to how to define a P. I get away for our back in back in solution. So first, what we do is installing express. So that's another package model which we've done already. So this part is done, and we make sure that we require express and that week rates in your instance of express like so. So once you've done that, so you're gonna want to define the routes. So we're gonna be calling one class sexually. It's not specified here, but you're gonna need to create the roads, have an instance of rotor actually with Rex Express, and that's gonna allow us to then define routes this way. So you're gonna have app and gets and here we're gonna define the end point. So that represents, like the root folder so anything which is like the roots. So, for example, this one is the root like that, the base off your project. It's gonna be, um, the routes where you want to maybe just display your your objects. Okay. And here it's gonna be It's a simple, very basic representation Of what? How you define around so would simply simply sent him the word. And finally, we're gonna allow to listen to one ports which we define also for us, which will be on the port 4000. So every time that you want to interact with them with the back end, you want to make sure that, of course, your application is running on one port, so that's one requirement. So here we are, up and running. Okay, let's go back. So what we're gonna be doing is defining path and points for our, um that a base. So let's do that. We're gonna first start by creating routes, so that's gonna be with express. And we caught were to call this class rotor. Okay. And next we're gonna be are creating gonna allow to use so up use. We're going to find an end point. So this will be to Jews for the roads. Basically, what I'm doing here is, uh, anything related to, uh, displaying that you do is it's gonna be with this path, okay to deuce. This is gonna be for the gets. OK, so that is that That that's what that represents the roots path for my projects. Okay, finally, right below, over. And we're gonna test this one very quickly. We're gonna do routes and then define the routes with roped these methods. Okay, This represents the roots off my, um, off my projects, and then we're gonna do it gets OK, so this one will be a default gift. Http. Request this one is going to return like I request. Actually, it's gonna be just a resolution, A response, and from there. So I'm gonna allow to find with my schema to do. I'm gonna ask you to find I've got one type of here function. Okay, let's go back. I can't. I'm gonna allow so to find with my scheme up find. And what I wanted to find is to, um fine. So first, if there's any errors, so it's gonna define, it's gonna we're gonna check if there's any error and I want it to return the items. I'm going to define it as items. It could be traduced, but we're gonna check first if there's any error, if there's any error. So let's console on the error. Otherwise, we want Teoh. I'm gonna do if l sexually Harry don't. Otherwise, if it's here, we're gonna send a response. And this will be the items and self. So once we do these requests so this will come response to my path. Actually, when I but for now, it's not set up. But when I do this, I'll do this. I'm gonna be able to display my to do's Okay, So this will be this will make a get request and http get requests to into ask the database for the information off from my database. And if there's any items in my collection, it's gonna fetch it and then dis plates and then return it. If this is successful, if there is no air, Okay, so we're gonna continue with defining the routes before we actually make some actual testing with the routes. And this time it's gonna be an edge to be opposed to requests we're gonna be doing a post, meaning that we're gonna allow to interact with the database to add to the database. So let's do that next. 8. 8 [mern] HTTP post: Okay, so now we want to add to the database. So let's so define this routes so we would derives and define roots. And first, what we do is defining the path. Basically, we would want to allow to add okay, And here is not gonna be gets, but it's gonna be posts, and it's gonna follow with the exact same better. And so, except that this time we're gonna need to pass requests, request bills. There is a response and basically let me past one function, request and response. And basically, what it's going to do is to allow to pass an object which will be the body were going to pass data over to the database. And this will be the body, the actual object that we want to create. And further to that, we're going to create a new, um, objects for the to do with the constructor, remember? And this will be by using the request, buddy. Okay. And that's good, because here, so something that is nuts, which is obstruct for you is that it's going to use the body parts of Giessen because remember that it's not gonna be able to deal with any raw data it's gonna be is gonna need to be something that we can parse as Jessen. So we're going to create a new object for that to do. Then we're gonna be able to use this method which is safe on any new instance with the schema, and that's going to return a pra mice, which will be to then return something if this is successful. So first it's going to do the job off, you know, saving to the database. And we're gonna we're gonna send a response as a result of these operations. This post this post request, If this is okay in this section, we're going to send it to 200 and we're gonna be able to read as a response that it's been successfully saved into database were going to say to do successfully saved to the devotees , okay, otherwise will have away also to catch any errors justly, um, we need to also handle error, and before that, it's gonna be also rez status. But this time we're going to send it 400 and we're going to say, uh, it's gonna be Justin that we're gonna send. We're gonna write something like saving to do, uh, to the data. Bees failed with air, uh, take space and then air here and then display the air so allowing to get some feedback in the case, the operation, the post operation felt Okay, So this will be their routes for, um when we want to add any objects, Let's say so. For now, it's not gonna be working because it's not set. It's not even connected Teoh to our front end, but is just to show you. So what's is the path that we're gonna be using inside our application? Okay, Well, before going any further anyway, we're gonna test this path. We're gonna test if this is working, because this is all set by using express. What we want to allow is first to do get http requests allowing us to ask for the database for every items it has gained. The collection that corresponds to the traduced using that path case that there's gonna be two Duce and we're gonna test as well. So the posts request to test if we are able to actually create in your objects by using this schema and saved to the database. And if we are all correct. We should be able to read this. Okay, So I'm gonna show you what we're gonna be using. It's gonna be postman. So you're gonna be feel free to download their application. Okay, So go ahead, go to this Web page and down with the up because we're gonna be using this nice applications to test our endpoints and a P I. 9. 9 [mern] Postman: Okay, So make sure through Donald is up because you'll see that this is super user friendly. So we're gonna be doing some testing together with this with this application, and it has a nice into face, you'll see. So you're gonna be able to test with, just like, all the tools. So the purpose is to see what we get back when we get when we make a response. But you're gonna be also able to inspect the response eso Now we've got the gets, which will be actually local hosts. Sure, you already have a few set up. So if I do get But you should make sure that your servers running so that's one requirements and make sure that you're running on the sports. But now we've got an into an empty right. So you got nothing to show. What we're gonna be doing is testing these other path, which is add. So for that, we're gonna need to pass the body. You see that we need to create a new objects from this constructor in you to do and then save it. Two identities and if it's successful, so we should be able to read this Okay, so let's switch to post. And then here, we're gonna be doing a request to these path, and we're gonna use to passive buddy as well. So we're gonna do that by typing the text. Um, actually, the body we're gonna actually Britain objects on for every object with that you do. What we're expecting to have is a text which is of type String and also a 1,000,000,000 to say if this is completing or not completed on it. So it's gonna be texting changes, which is gonna pass some text, and then it's do comma, separated, and then we'll have is completed and this one is gonna be false. Okay, so here ago. So we have a path that's the route. As we have defined it in our server, that's gonna be a post request and is what we're gonna pass as a body for these requests, and that's gonna go along with the request, will pass this body to create a new objects with the scheme at you Do M. And safe to the database. Let's do that and send. And here ago we can read to do successfully saved to the database. And if we go to our M lab interface here. So this is our database. Let's go to the collection we're gonna refresh. And now we should be able to see a new document in that collection in our database that corresponds to what we just created, which is some text is completed. Okay, so this is working just fine. And you see as well that it generated a 90 to identify your for us. So we didn't do it. It was done automatically with, um mongo DB. And this is thes spirit. Er dis poverty for the identify. So we're gonna be using that as well. So whenever we want to ask for one specific item in the collection so that's going to be the identifier that we're gonna be using to target one specific item in the collection. Okay, so that's great. We know that this is working, so we're gonna go ahead and create off the path. So with that's application, we're expecting to do all the crowd operation. So at with posts, we're gonna update with put, that's gonna be the updates. Parts. We're going to define a route to also be able to deal it. Um, actually, if we go back to our clients. What we expect as operation is to be able to add, so this is done. Needs to be able to updates. Mark has completed and be able to do it. So we're going to do that. Next, we're gonna need to define more routes with express. 10. 10 [mern] put delete: So let's continue and define the other out. So what we're gonna do is create a dynamic route. This time it's gonna be a diamond corrupts because here we're gonna allow to update one specific item. So by marking as completed and for these type of request, it's gonna be a put and to define the dynamic routes, it's gonna be this way. It's gonna take one parent, which will be the i. D of the item that we're targeting. So we're gonna do put two that it's gonna be the same process. Just as above. It's gonna be it's gonna take one barrier function. We're going to return a request request and also response. And as a result of that, we're gonna allow to find by i d and updates. Actually, just find by 80 is gonna be no find by 80 like so and find my idea. It's gonna be the request. Haram's Haram's because it's from the perimeter off the path and I d. And further to that, it's gonna be function what, we're gonna get back these two types of response. I mean, output is gonna be either an air or to do actually, as a response. I'm getting to some stuff with the studio. So first way check. If we have no Arab so that's the first step would do some control flow by checking if there's any error. And if there's any errors, were going to send the area as a response sound era to raise sound and we're gonna send the air. Otherwise, we're gonna do I'm gonna do like so, Actually, if else otherwise, if it's good, we can go ahead and save by doing to do save, and this will be just like the top here. It's gonna return opera mice, you know, as soon as we save. But before that, we're gonna need to have dates, because the purpose here is to, um, remember, that's it's when you actually click on one item. Do you wanna be able to cross it out? This is what we'll do like this. So that's the purpose. So we need to target with the i. D. The idea of the item, which is safe but also target. It's, um, updates by saying that this is completed and then save again to the database. So we're going to do that first. If it's okay, we're gonna do to do is completed. We're gonna find the girls money one and we can get requests of the request, buddy. The body and it's gonna corresponds to is completed. And we're going to reverse. Its gonna be the opposite, actually. OK, Thea posits of whatever we get back from the request is going to be the opposite that were signed. Teoh what saved in the database. And then we say, if it's successful, we're gonna get this. If it's not, we're gonna get this next. What we want is to be able to delete. Okay, um two deletes it's gonna be all the items which are completed. We're going to come. We do not get them and then remove them one after another. Okay, I'm saying that because remember that this is all the ones that are selected as dilated that we're gonna delete, So it's gonna be particular. So we're gonna first define the routes on this time. It's gonna be here as well. It's gonna be a dynamic path. We're gonna take the i d now to do you find the path, and here it's gonna be delete. It's the same. We're gonna return the function I mean, it takes the function of the Permian, will get a response so that this time we're not gonna be only finding by i d But we're gonna find by i d and remove. This is what will do. And first barrier will be just like the top. We're gonna get the the I d from the perimeters from the Ural, and it's going to return either an error or to do and objects that we're gonna move. And first we check saying same same process here is gonna be an even else control floor when a check. But we're not gonna be doing this step because we're gonna be removing directly. So basically, um, we're just gonna be drinking if and we could be returning false, But basically, we're just gonna do this step. And once it's done, we're gonna save. It's gonna return an error. If there's any era, we're gonna do function era to check if there's any air honest to the same right here. So we'll check if there's an Arab. But I'd rather do this than and catch. It's fine and I'm going to remove these parts so there is a different way to proceed. We're gonna keep you disease if if Okay, this one is not record. Here we go. And here we close. OK, there's an extra current justice here. It that's up function. Uh, this and Curly braces, year ago. Okay, so now we have defined IRA route. So we've got one to update with. Put another one with Dill. It's what we're gonna do now is making some tests. So just like we did before. So if there is any change to do, we'll do it. But what we're gonna do first before we connects our back and with the front end, we're gonna be testing with Post Matic again. Postman. That's a good way. That's a good way to validate if everything is working as expected, so we'll do that next. 11. 11 [mern] testing routes(postman): Okay, so let's make some testing. But first, we're gonna add a few of them. So we already have the one post set up. We're gonna make sure that we've got the server up and running. Okay? It's connected. It's running on the port for 1000. That's good. So we're gonna add a few of them. Okay? 1st 1 I mean, that's the second. Because we already had one in the collection. Um, yeah, well, say, um, here you go. We're gonna make some true. I mean, why not true. And you to do, for example, we're gonna get it. We're gonna add a few, and that's check outs in the database. We're gonna be able to see that now we have a few items in the collection. Okay, So we're gonna be able to work with them. So what? We'll do first, Let's make a get requests. Okay? So we can actually see what we have in the collection, so that will be a basic at request. And here you can see that we're able to return. So every item, every new documents in the collection Okay, we have the corresponding i d. And this is what we're gonna need in order to target one specific document in the collection. So let's do that this time we're gonna test this route, which will be to find by D, and what we want is do you put? Actually, I'm just gonna do it. Get for now. I don't think I have defined this one, but let's try, Okay? There is. It is not working is because we haven't defined it. But if I waas to define this routes, let's say, um, it's not defining this part, you know, But let's do, um This, uh, right here. Yep. This will be a gets just like here. Realistic. The whole thing gets and we're gonna and we're gonna find it. Okay, We're going to find it and just simply send it refined it It's gonna be fine by D Ah, like this one. Find my i d. Okay, this one. So with this routes we want to get and find by i d. And as the results were going to send that to dupe, we're gonna be able to read. We're going to write something to do. Plus, we're gonna then display just print this to do. I think that could prints and objects that would work. Eso Let's try that. So now that we have defined this 18 there is in the air and that should give us an era's Well, let's write that. I know we got this gets Okay, let's make sure because I think that now. So now, because I had an error, so I have to make sure that is up and running. Okay, so but we haven't air. I would check, like a syntax error. Airlines 74. And, um, basically So what I was attempting to do is directly Jewish with the pro mice. But you see that it's actually a function that we want to create year. So we're gonna check inside if we've got any error. So we're gonna forget about this prom ice, so it's gonna be this. We're gonna make sure that we close it off, Then we'll check inside if we actually have an air. So if it's not the case, then we can proceed by simply lookouts and errors. So we're gonna be able to read with the message that it was successfully deleted. This is what we want to read to do, successfully deleted. And if it's if it's not the case, that will say, That's air. I will just say error and read something like, What is the air? Ok, okay, so we're going to proceed that way. It's going to the work. OK, so I shouldn't have a neat syntax error. Okay, so we're gonna try to stop the server again and try to read from the database by sending this request to target one specific idea. And you see that we can actually see this one corresponding to this idee here ago. So that's good. So now we're going to try to update this one by doing a put request this time. So that corresponds to this route. So that's a dynamic route path. Um, that's the roots followed eso that's gonna be traduced. So they're the main route. Ah, the base zero, followed by the i d. Unique identifier off the one that we want to target. So that's why this is dynamic. So this is preceded by this to this column. So this time we're gonna need to specify that. Um, actually, we don't need to do anything, so it's gonna do the job right here to update the complete it Okay, so let's try that. So I know it's false. And here ago to do successfully saved two database. I think I should change the texts. I should say something like to successfully updated for that instance. Cannot hear boats right here. Okay. For the put right, we're going to state. Successfully updated. That makes more sense. And if we check out for this one in, um, our database, we'll look up this this one, and we should see that for not really to refresh for the 1st 1 We should be able to see that this is true. Actually not. Okay, a mistake. It's actually this one nine again, etc. It's the nine. A. D at the end or nine. A unarmored. I don't really which one I targeted. Okay, this one sits duty. Uh, no. Those ones were saved as true. I think I remember. Okay, so that didn't seem to work. So we only to check specifically for this one, but will fix it after after that. But what I like to do now is to test my deal. It, um, my delete path if we go here. So that's gonna be this The same dynamic a path on it should be during that. If this is successful, well, let's try that. Deletes and successfully deleted. So we'll see if this is actually deleted, so we'll have not for we should have Not for birds. Three. Okay, so this is working just fine. So we're gonna need to fix the one for the poots. So let's fix the one for, um, here update. So we're gonna make sure to find this one by i d. But instead, we're just gonna We're gonna proceed, just like for the fronts. We're gonna take the current value and then a date with that current value in reverse negates the current value, meaning that if we have a value, which is false, we're gonna then tuggle from false to troop and vice versa. If it's true, we're gonna tuggle from church of False. So this is simply what we're doing with this operator to say that this is not true on that false if it's the case. Okay, we're gonna do that. Um, we're gonna need to restart the server so it takes into account with your changes, and then we're gonna make sure to targets one item we have in that collection. So, for example, this 1st 1 commence see, and let's go here. And then you put that support and here go to do successfully updated. And if you check in our database now, we should see that now this is true. Okay? And if I do that again, if I send again, it's gonna then refers back to false a year ago so that that's working just fine. So we can at again to the post request we can add to the database we can delete from the database. We can updates, and we can also read with a simple get request. So that's good. This is all set for the back, and we have defined the routes. We have defined a model further to do every new to do objects. What's left to do now is to connect at the back end with the front so we can actually make three interaction to the database from the front, and finally, so we'll have a full stack, fully functional full stack application. So let's go to the next parts of where we're going to connect. We're gonna hook up the front of the reacts application with the back end