Let me show you how to build a full stack node app from beginning to end. I don't care if create, read, get, post quickly doesn't make sense. I got you. By the end of this class, you'll be able to build a full stack web application. All the code and all the help you need is available on our discord, Leon, well.com slash discord. Let's get into it. Yeah. Hey, does this work? Hey, does this let's go. Good morning. Good afternoon. Good evening. No matter where you're coming from, let's go. Am I late? Aaron?

Now you're just in time. Let's go. How's everybody doing? Welcome through Rascal 2 with the raid 27 before stream. Let's go turn up. Alrighty folks, we're getting into it. Get right into it. I'm going to keep the chit chat to a minimum tonight. We're going to do some celebrations. We got a bunch of jobs that came through. So I'm going to throw up the ones that can. We're going to just do a quick, a quick celebration, quick thank you. And then right into the crud. We've been, we've been delayed a little bit. And so I want to get right into it.

I want to make sure that we go over this to do list this crud app get through it Really go into detail ask any questions you have and then we're gonna add the layers folks We're gonna add NBC to it, which is some of your reading for homework tonight, then we're gonna add authentication to it and then You can build anything You can build anything once you can once you can do the authentication. There's nothing stopping you Nothing stopping you from building whatever the heck you want. All right, folks. Glad you're here. Let's do that. Let me get the little Leon here. Always like to ask some questions. We'll do one. One question tonight. Always got to start with the question. One question and then right into celebrations, right into cred. We called in the big guns. Chill Billy. Hey, thank you for the gift that subs pulled in the big guns. I needed some help, I needed some help, I needed some help.

I was working hard, I was working hard in the agency. You know, I was working hard in the agency, but I needed a little help, so we called in, we called in grandma. So grandma's here tonight. Grandma's helping us out, so we'll get through a full class tonight. We're gonna do all right, all right? We pulled in the big guns, so we're set for tonight. We're getting through this crud, we're getting through this application. Uh, we're going to make it happen. Thank you, grandma. Exactly. All right. I want to answer one question, then we're going to get into it. How long will class be today? We're going to go normal time, about three hours. Try and go as deep as we can with the, with this crowd.

If there's more questions, good. If we finish a little early, that's all right. Definitely going over time. Nah, nah, we're going to be good. Both so good after completing the simple card app. Hope you felt that too. Uh, bots in there said just getting into coding or all the previous videos on YouTube. Absolutely. You can do exclamation point YouTube. Uh, when you do that, you'll see all of our past videos on there. And all the materials everything's on discord shout to the ketchup crew for folks that are working through those videos and shout out rascal to Rascal to who did the raid today? I don't know if you noticed but every single YouTube video they do the timestamps for us. I appreciate it All right We got our question. Let's get right into it checking in when I sent the discord message today, I I linked the wrong tweet, so if you're trying to check in, I can do exclamation point check-in. When you do that, you'll get the link to the tweet today.

And so make sure you go ahead and like and retweet that. That's how I know that you're here. That's how I take attendance. It's also how more folks find us. So if you click the link in the Discord message in the beginning, that was wrong. It was last classes. So make sure you have this classes in there and make sure you check in. Cool. I'll give everybody a second to do that. I was wondering, yeah, some folks let me know. Whenever that happens, just let me know. VapeJuice Jordan, what's going on with the raid? Let's go, how you doing? What are y'all up to? Been a minute.

I heard you're starting a podcast. ass. I'm pumped. I'm pumped. Trash that too. Hey, let's go. I'm pumped. I'm going to, uh, I'm, I'm pumped. I'm ready for it. I need it in my life. So I'm glad you're doing it. Thanks for the raid. Hope you're doing well. What are y'all doing today? What was the stream?

Um, true. Hey, what's going on? Congrats on the new gig. Gang's all here. Uh, when that podcast drops, let us know. We'll, we'll, we'll, we'll pump it on, uh, on the a hundred devs discord as much as we can. Hope you all are doing well. Cool. Thanks for the raid. All right. All right, thanks for checking in folks. Hope y'all had some chance to do that. All right, let's get into it. Health first, all right, health first. We're about to go through a monumental amount of work in terms of the hunt.

Getting the job is the hardest part of the process. There's gonna be lots of things you have to do, Lots of doors you have to open, right? And as you go through this part of the process, we talked about it before. This is probably the most difficult, the most mentally demanding. Put your health first. If you need to take a night, take a night. If you need to not open a door, don't open it. Right? Take the time. Check in on yourself, check in on each other, community taught, right? Make sure we're all doing well, because this is the, this is, this is go time. This is, this is where the, the rubber meets the road where we got to, where we got to do the things, right? So please make sure that you're taking care of yourself. Health first, always. I took time.

You take time if you need it. Cool. Uh, just in case folks are just joining us tonight, uh, this week, this month, full stack apps, we're adding MVC. We're adding authentication. We're doing all that wonderful stuff. Then September is a little bit of react some data structures algorithms Really starting the hunt and everything you're gonna need for that job search process and then October is living the life really doing the hunt Projects prep all that fun stuff and then agency life afterwards cool When I say it again, I'm gonna sing it from the mountaintops folks are already getting jobs Don't let that be the thing that distracts you. I'm not asking you to start the hunt yet. I haven't asked you yet, right? But remember, this is your life, your thing to do, right? Some folks like to start sooner. Some folks like to jump right into it. All my past videos from last cohort, guess what? They're all on YouTube. If you want it to go faster, pop over to YouTube. Boom, you got it.

You can go as fast as you want, right? But when you see these jobs coming in, right? Understand that different folks have different privileges of time. They have the ability to focus on things. We're not, I'm not asking you to be ready for the hunt yet. I'm asking you to start doing the things that we've been saying in class. We're talking about making sure you're doing your daily code challenge. Make sure you're doing your bankie. Make sure you're doing the little things that are getting us ready for the hunt. And then we go hard, right? Then we go hard. But folks are already starting. That's okay. We're all on the same rollercoaster. We're going to get there eventually together.

Know that as we go forward, you already know enough. You're already ready. You are already software engineers. You are already software developers. I can't stand it. It gets my goat when people say aspiring. No, you're developers. You write code. You understand the code we're about to go through tonight. You've built projects. Some of you have clients. Some of you are already interviewing. You are a developer. You already know enough. You can go out there right now and get a job.

We have folks and I showed you last class. I showed you all last cohort. Half our folks weren't doing technical interviews to get these entry-level roles. Don't let it get twisted in your brain that there's all this extra stuff that you have to latch on to. When folks get to the end, they start latching on to all these things that are not the things they're going to help move the needle. Double down on the things that we know work. The bank, making sure your checklist is is complete. Making sure you're doing your coding challenges. Make sure you're keeping up your networking. Do that. And by the time we get to the hunt, I promise you will be ready. I'm going to lay out all the secrets, all the tips, all the tricks I know to help you get the job. But we have just a few more things I want on your plate to open those doors Right. I want to add some organizational paradigms. I want to add a little bit of react I want to add your data structures and algorithms so we can open up as many of those doors as we can and when you do That enables more opportunity to come your way, but you already know enough don't let anybody take that away from you Don't let anybody on Twitter say that you're aspiring.

No, you're fucking software engineers. You're writing phenomenal code. You're doing big things. And folks, it's already working. Hundreds of folks, last cohort. We're seeing dozens and dozens of folks already from this cohort. You're good. Hang in there. This is the hardest part. This is where you're gonna be tested the most. But the other side is so, so sweet. Now, we're gonna be spending a lot of time together. A lot of time and voice calls a lot of time working in projects. It's a reminder to be kind That's all I ask be kind you can't be kind if you can't leave the the weird conversations off of discord You'll probably get a ban. That's okay.

You can always be requested to be unbanned We're trying to build the best community online to learn how to code don't care about any of the other stuff. Can't be kind Deuces, bye. All my content's free online. You can get all the assignments, everything you need, and voice channels are watching you. Some of y'all like to be a little reckless. No more, be careful. Watch your mouth and help me with the sale. Cool. All right. I'm going to start a band band to be mean to each other. All right. Uh, let's, let's power through these and right into the crowd. Like I promised, uh, there are so many folks getting jobs or clients, um, that I'm not adding them all. Like just the ones that like, if you, like, if you like at me on Twitter or like you at me in the celebration channel, there's probably a better chance of it. Um, but there's a lot of y'all.

And so I put a tweet out there. I was like, this is getting a little, getting a little wild, getting a little out of hand here. Uh, but there's so many y'all coming through that it's, it's amazing to see. I'm just going to put a small subset of them here. Um, I love this one. Imagine getting a six figure offer and not being sure about it. What sort of monster have you created? A let's go, let's go. So through my networking exercise, I got a paid client and another interview for October. I love it. Remember, y'all could still be freelancing. Y'all could still be freelancing. We're moving into the phase where folks are starting to ask for like references and for like employment verification, all that fun stuff, which we're gonna talk about probably next week because it's starting to become a lot. But the best reference you could have is your clients, right? People that have actually worked with your code, that have paid you money, like that's huge.

If you still haven't gotten a client, keep working at that. People are on their third, fourth client now for folks that kind of kept up with it. If it's something that you weren't able to achieve earlier in the program, you know way more now, try again. All right, getting a wonderful internship at PMC. The beautiful thing is that if internships pay, do them, they're great. Like some folks get it twisted, like no, getting your foot in the door at a paid opportunity where you can learn and grow, phenomenal. Holy cow, had a second interview today, first round interview tomorrow and another first round on Friday. I get done with my second round interview today and got a call shortly after with a job offer. Let's go, let's go job offer. Let's go a good time to announce. I accepted associate software developer role with SAS. I'll be starting next week, a hundred devs. Let's go. And I love that. Uh, they shouted out the community.

We got some, some good folks here. Love it. to see it, accepted an offer from Apple. Now, I'm not a fang peddler, right? But it's pretty cool to see they got an offer from Apple. They did have an internship at NASA. So I think we were there to help a little bit, but they put in work before they got here. I love that people are still getting clients. New client just agreed to my proposal and set a 20% payment for a new website. Always get paid up front, folks. I love when folks shift from one part of the company to another. We have a lot of folks that are customer service representatives that are in different parts of a tech company that make their way into the developer round. And so I love to see it happen here. A few months of hard work, practice, and preparation, let you know I got a full stack dev role at a really cool company. Love to see it.

Love that they shouted out the community as well. Made it after the trough, I've made it after, after the trough has come a signed sealed contract for my first full-time developer role, uh, grateful. And I love the shout out the mods, the mods do all the heavy lifting. If you'd like the community, it's because the mods have helped mold it to be that way. And so, uh, shout out. I saw, I saw some folks. I saw blah in chat already, but, uh, always please give some big thanks to the mods, right? That we have, we have 38,000 people in that discord. Can we, can we just take a pause for a second, 38,000 people in that discord and the fact that it's not a complete flaming mess, that it's not just like exploding and, and just filth everywhere is because of the mods doing an amazing amount of work. And I can't tell you like some of the stuff that folks like the mods do is it's it's not fun work It's not fun work. Let's just let's be very clear, right? It's it's oh, no the threading tool that we use broke and Divker goes through and clears out a hundred threads Manually so that when you log in it just looks normal Right, or having to have really tough conversations with folks that don't understand that we're all here to learn, right? Like that's a lot of emotional labor that falls on the shoulders of the mods. And I am forever thankful. So I love that they shouted out the mods.

If you love this community, if you like this community, if you get anything from this community, shout out to everyone that's here but shout out the mods for sure so that's my thank you the other thing too it's at the beginning of my slides it's it's a it's a beautiful Drake lyric I don't care about going Milan or the Met I just want to make these songs for the set that's how I feel about a hundred devs I don't care about any of that crap I just want to make a good course that can help folks get jobs and it's amazing to see so many other folks participate and, and help with that, that vision, right? There are folks in the world that just want to help that show up to a hundred devs to put in the work, to help y'all, to help each other and they, you see them, right? You see them, right? The folks that just show up that, that, that jump in discord voice channels to do data structures and algorithms classes, the stream team that is streaming six plus hours that help you cover some of the homework, shout out Wolfpack, right? Like that, that's, that's rare. That's kind of, that's kind of, it's kind of, kind of wild that that happens, right? It's kind of wild that happens that we have folks that come up that aren't trying to sell a book that like that happens all the time. The number of people like, Leon, do you ever have guests on your street? No, I don't just put in the work, come help if you wanna help, just help. And the fact that we have folks that show up day in and day out, that just help, that help push folks into these amazing jobs that they're getting, that help people learn how to code, that give up their nights, their weekends, their mornings, their afternoons, I love it. And so a huge thank you to everyone that does that. Um, a huge thank you to everyone that just shows up that wants to help. I love it. Cool. We're jumping right into the cred folks.

Uh, the thing I need you to realize is that right now it's still just Lego. It's all it is. A lot of folks get, they get really anxious. They get really nervous around the syntax. Guess what? We don't need to really understand every bit and piece of the syntax right now. That's, that's not the goal. The goal is to understand, right? All right. How's the web built? What are the requests? When the requests come in, what are we doing? What are we putting stuff into a database? What what's happening? Right.

And that's where I need you to be. I need you to understand like how all these pieces all these building blocks come together How all these Lego pieces come together don't sweat the syntax you could always copy and paste Right that the codes not going away, right? The codes not going away Casual said oh my god. That's what's killing me right now. It's so different from traditional learning Yes, right like you can you can always Google the next Lego piece. That's what we're doing We're building Legos right now. I don't need you to understand every semi-colon parenthesis. It's just not, not the wave, right? You're, you're taking these Lego pieces and putting them together. And as long as you know where you put your Lego pieces, you're good. So as long as you have your, your repos, you have your code that's saved and in good folders, right? We're just going to be taking those pieces, right? We're gonna be taking those pieces and putting them together, right? And so I really want you to lean into that because I'm gonna show you, we're gonna work through the code tonight that you've seen, that you've tried to comment already. Like we've already seen this code.

Let's focus on understanding what's happening and don't code weenie the syntax, right? Then we're gonna add an organizational paradigm on top of this code. But again, don't stress about the syntax. Understand like, why are we putting this type of code there? Why are we organizing it in this way? And then we're gonna add authentication. And when we add authentication, are you a cybersecurity expert? Maybe you are, maybe there's a few of you. There's a few of you, right? I'm not. I don't think most of us are. So we're not coding that from scratch. We're taking that off the shelf and plugging it in to our code. We're not putting in that work, right? We're not putting in that work to do all that research to make our application secure.

It doesn't mean we don't understand what's going on, but that's not our domain, right? So as our applications get more complex, as our applications get more complex, what are we just adding more of? What are we just adding more of? We're just adding more Legos into our beautiful, beautiful castle that we are building. Right. And so you can't stress that you don't know what's like how that Lego brick was made. Like when you're playing with Legos, you're not stressing over, uh, this injection molding. I don't really understand how injection molding works. Like, I wonder how, what color dye they put in to get the red bricks. Right. Like, like maybe one or two of us had like that existential crisis when we like six or seven where we were trying to like figure out injection molding and the color green. But most of the time we probably just built a castle, right? And that's what we're doing. We're taking all these bricks that others have already put together that have already made for us and we're building with them. So over time, once you get past the understanding, right?

Some Some people hear this and they take it the wrong way. Once we get past the understanding, which is the tricky bit, you're going to build your ass off, right? Once we get past the understanding, you're going to build your ass off. You are going to put a hundred hours into building a project. And as you are building that hundred hours project, guess what you also pick up along the way? Believe it or not, the syntax, right? Right? Believe it or not, the syntax, the curly braces, the where stuff goes, but that's not where we need to be right now. We need to understand how it all comes together. We understand, all right, how do we organize it? How do we add authentication to it? Like we have to do all these things that are understanding exercises, and then we are going to build, build, build. The best way to learn is building. If you just turned off the stream right now and went and build, I'd be a happy camper. I'd be fine with that.

We're gonna get to the point where we understand and then we build, build, build, build and that's where all the syntax and all the pieces come together. If you start right from the beginning with understanding a little bit, and I'm not talking like we're gonna do this for a couple more weeks. We're gonna do this for a couple more weeks, that's it. and then you're build, build, build, build, build, right? And so keep that in mind. You're playing with Legos. Take some of the stress off your shoulders, right? Make sure you understand what's happening. Make sure you understand the concepts. When you don't understand what's happening, when you don't understand what the concepts are, boy, do I have something amazing for you. We have the stream team that's often covering these topics in detail. If you're doing the homework and get stuck, Mind Wolf has been going through the homeworks on stream. Like, go watch those videos. Like, what are you doing? You're getting stuck with the homework.

Go watch those videos. And then we cover that in class again, right? We cover it in class again. Remember, you have our videos that also go on YouTube. Remember that we have the past cohorts video on YouTube. And then also know that you have Discord. Come to Discord and ask questions, right? All right, come to Discord and ask questions. Cool. All right. Before we jump into it, we gotta bring back, I said but first, so I was gonna do but first. How does the internet work, right? We're gonna talk about a CRUD app tonight. We're gonna see the to-do list in action, right? We're gonna see the to-do list in action, right?

We're going to talk about how's the internet work first. Cool. All right. So we have wires. How's the internet work? Yeah, it's a wire, it's a tube. It's a connection of two different kinds of devices, right? We have our lovely client side devices and we have our lovely server side devices. You missed my handwriting. I know you have well now our client-side devices make a request and when they make requests those requests wind up Heading all the way over to the server. Remember our clients and our servers are both just Computers, but there's some code Running on our server that can hear that request What is the code? running on our server that's set up to listen for our requests. Yeah, we're calling that our API. Our API is set up to listen, right? It's set up to listen for certain requests.

And when it hears those requests, we have coded it with what we want to have happen, right? We are coding it with what we would want to have happen. We are in control of what happens when we hear those requests. That's what we're building out. We're just building out really, really complicated event listeners, right? Well, not really complicated, somewhat complicated, right? We hear those requests, right? And then we get to decide what happens when we hear those requests. When we hear those requests, we can make it, when we hear the request, we can make it fire a rocket ship. When we hear the request, we could make it call dominoes. Well, I can't, maybe you can, right? When we hear the requests that come through, we can make it store something in a database. you get to control what happens when you hear those requests. Now it just so happens that there are some really common things that we're going to do on the web, right? A lot of times we're gonna hear a request and we need to like store some data in a database.

Sometimes we're gonna hear a request and we need to get some data, right? Get some data from a request, right? I mean, from the database. Sometimes we'll hear a request and we gotta update something in a database. Sometimes we're gonna hear a request and we just need to say, hey, we couldn't find what you were looking for, right? So what we are gonna do tonight is look at a very simple application, a very simple to-do list. And we're gonna look at some of the common requests and some of the common things that we're gonna do when we hear that request. And we're adding these Legos, right? We're adding these Legos into our repertoire. By the end of tonight's class, you should at least be familiar with each of the different pieces that we've done and be able to say, you know what? I might not be able to code this from scratch. I probably couldn't, right? But I know that, oh, in my to-do list, I was able to store something into the database. With my to-do list, I was able to get something out of a database. If I ever need to do those things again, I know where to start, right?

I know what Legos to play with. No stress, we're playing with some Legos. Really, and I stress my ass off playing with Legos. They had to get the perfect castle. If it wasn't perfect, I was stressing, right? Cool. Now, the common requests that we're going to see are our cred requests, right? are creating, are reading, are updating, are delighting, right? These requests where we're typically saying, hey, make something, get something, change something, remove something, right? These are the common requests we're gonna see across pretty much all web apps, right? Coming across pretty much all web apps, right? And so what we are going to do is break down these requests into a to-do list, see the creating, see the reading, see the updating, see the deleting, see the making, the getting, the changing, the removing, and see the code associated with it. Cool? All right. Now, some other things we're putting into the mix that we've seen in the past couple of classes, right?

MongoDB is the database we're using for now, right? It's the one we'll use for most of the program. We'll see a little SQL at the end as well. The reason why I like MongoDB, right, is because if you've used objects, you know how to use MongoDB, right? If you've used objects, you know what the heck you're doing. We don't have to make it any more wild than that. In MongoDB, we have collections. Inside of our collections, we have documents and those documents are just objects. Just think about that for right now, right? If we know that we're dealing with a grouping of objects, we could start to add objects to that group. We can update objects that are already inside that group. We can remove objects from that group, right? And so the wonderful thing here is that we are able to use the things that we should feel a little bit uncomfortable with at the moment to have all the wonderful benefits of being able to store stuff long-term, right? To have a database where we can put stuff, get stuff, update stuff, delete stuff, too, using just the stuff that we feel already comfortable with. Now, the bane of some folks' existence is EJS.

I love EJS. I really do. It just, in my brain, makes sense. I understand that that's not the case for everyone. That's okay. We're gonna introduce a lot of other kind of templating languages and some other stuff we'll see. And then we get to react. You can, you can let it go if you want, right? EGS to reason why I like EGS is because once you learn two things, that's it, right? It's really just two things, right? It's really just two things. One thing is this code block right here, which is this like carrot, the modulus equals, right? That's just how you plug in stuff. Like you plug in variables. It's like a very fancy, it's a very fancy Mad Libs, right?

You just plug something in, you're dropping a value in, right, you're just plugging in some sort of variable, you're plugging in some sort of value and that's it, right? It's a template rule, exactly. It's just like a template literal, right? I'm here for fancy Madlibs. It's just a template literal. Exactly. We've used template literal so much in JavaScript already. Just think of it as that way as well, right? You're just plugging something in just like you would use in JavaScript, right? Then you have this block right here, the carrot modulus, carrot modulus, right? right, carrot, modulus, modulus, carrot, right, right. That's just a code block. You can throw in any type of JavaScript that you want, right? You could throw in any type of JavaScript you want. You wanna throw in conditionals.

You wanna throw in for loops. You wanna throw in pretty much anything that we've learned thus far, just throw it inside a set of these, right? and you're done. That's it. And so I like EJS because if you can just keep those two things in your brain, right? You can keep those two things in your brain, then you're just kind of like reading HTML with some JavaScript mixed in. And maybe that was my bad for hammering in separation concerns so early. We could talk about presentation logic versus others, but for me, I learned those two things and it opened up a world for me, right? I use other things now, right? I use other things now, of course, but when I first understood that to write EJS, I'm just writing HTML. If I wanna plug in a value or a variable, I use the equal. and if I want to have like a code block where I'm like doing a little bit of larger JavaScript inside of it, I just have this little block here and I open it and I can close it to whatever I want. Those two things I think opened up a world for me. I went wild. I was building apps on apps on apps.

Anything I wanted to do, I could throw in, right? And it would just work. I could plug things in, I can plug in code, right? And it just worked. Is it pretty? Eye of the beholder, right? Does it work? Yes. So don't let the code block versus inserting kind of mesh you up inside. It's really just those two things. And as you see it more and as we go through it tonight, hopefully it makes a little bit more sense. You said it had to be pretty. I want things to be pretty. Yeah. All right.

So here's what we're gonna wind up seeing. Most of the apps that we build going forward, right? We're going to have our client, which can make requests. We're gonna have our server, which has our API code on it that's listening to the requests that are coming in. and when we hear those requests, we're gonna do different stuff, right? So many times, right? So many times, I'm just gonna put stuff into a database, get stuff out of a database, right? So this kind of layout or system is what we're gonna use over and over again, right? Everyone said there are so many options, handlebars, views, next, so hard to know what to use. Just build. Build, that's the biggest answer, right? That I think is a really important question, especially at this point in time. At this point in time, and this is from my own experience too, right? From my own experience, I felt like I was, I felt like I was a fish in a really big pond chasing anything that was shiny, right? When I was first learning to code, I'd be like, ooh, and I would run off, right?

Or ooh, and I'd run off and I'd do something else, right? And what I was doing is I was getting myself in a trap where I wasn't like actually doing stuff that would get me my goal, right? If your goal is to learn something new every other week, go for it. Chase the shiny thing. Don't let me stop you. If your goal is to get a job, stop. Build an application using Express, which we've already learned. MongoDB, which you've already seen, right? EJS, which we've already seen, and you only have to learn two things, and build. As soon as you hit a roadblock where you can't do the things that you want to do, right, when you hit a roadblock and you're like, this is too limiting, then add that other thing. That's it. That's what I wish somebody would have, like, I wish somebody would have, like, grabbed me and just, like, stared deeply in my eyes and told me, you know enough. You know MongoDB, you know Express, you know EJS. You can build whatever you want with just those things. And an employer is gonna be way happier having seen a hundred hours project where you've learned and built and three other smaller team projects where you've learned and built than seeing the tutorial that you did in that shiny thing over a weekend.

You know enough, right? JDB says, bro, I wish I would have known this too, right? And so, like I always say, don't let some person on the internet tell you what to do. Don't let some person on the internet tell you what to do, but the stuff that we've covered and the stuff we're finishing tonight is enough to build whatever the heck you want, right? Get out there, build, build, build, build. And I guarantee some of you will hit a point where you're like, this is frustrating, or I can't really do exactly what I want to do, or I'm doing something over and over again. and that feels icky because I'm a software engineer and we don't like to redo stuff, right? And when you hit that point, then you'll go, oh, that's why that tool is so popular and you'll incorporate it into your project. Most 100 hour projects start off with just EJS, Node Express, MongoDB, you get 75 hours in and you're like, oh crap, I would be really happy if I incorporated this other thing. And then when you're in an interview, not only can you show the project that you've built, but you have a real world use case as to why that thing you added was beneficial. I can't tell you how much realer that sounds when you're talking to another engineer and you're like, you know what, I hit this roadblock. I hit this like, um, I hit this, I hit this point where I just felt like I wasn't being efficient, and that's why I added this framework, right? That comes across so much better, right? Then I decided I wanted to pick up this thing and I ran with it, right? Get there, get there, get there, and then feel like if you need to bring it in, cool.

All right. My project is kind of too big for one person. Build an MVP. Every project, I don't care how big it is, has something small that you can start with. Right? Right? Something small you can start with every idea, every project, right? Figure out what that is for your project, right? Your minimum viable product, right? Figure out what that is for your project and start there. Every single project could be started with just these simple tools that we're talking about, right? And then evolve into something more. My own challenge project I picked up by a tech company. They still ask for an MVP. N.W.

Smith said, is a project with a political slant a bad idea to showcase? Remember how we talk about having as many doors open as possible? When you do things that are going to make one group of people really happy and another group of people really unhappy, you might close some doors, but it might close the doors that you don't care about, right? Um, so I had a student, I think I've talked about this on, on, um, I've talked about this on stream. I had a student that wanted to build, uh, a weed delivery app. It was like an app to deliver weed. And I was like, or it was like, and I was like, okay, that's, that's great. Can we do coffee instead? Like, can we just, can we just like make it a coffee delivery app and like, wink wink between me and you. Like we, we know what it really is. And they were cool with that, right? They were, they were cool with that. They're like, all right, we'll just make, it'll be a coffee app. And then when they were done, they just like had their own internal version that was like the thing they actually really wanted to build. Local commodities delivery app.

Right. And I thought that was a really good compromise because they got to build the thing they really wanted to build. But to anyone that was like looking internally, um, they saw a coffee delivery app. And then like three years later, some, another student had the same idea, right? Student had the same idea. And I was like, Hey, the person that passed me the coffee app. They're like, nah. I'm like, what do you mean? They're like, nah. I was like, okay. Like, that's cool. You know, you're closing doors. They're like, great. I want those doors to close. Like we had that conversation and it boiled down to like, I want the places that aren't comfortable with me, like smoking to, to, to like, I just not going to be a good, good fit for me.

And they went on to have a phenomenal job. Right. So I've seen both tokens. It's up to you how you want to play the game. I'm going to show you how to play the game. It's up to you to figure out how you want to play it. Right. Always, always up to you to figure out how you want to play the game. And so you got to think about that. That's like an internal, um, that's like an internal, like I can't make that choice for you. Mm-hmm. Well, all right, so we're gonna build a to-do list We're gonna build a to-do list and the to-do list is gonna follow this pattern So let's take a look at our to-do list here The code is already on discord if you are new around these parts Discord is the best place to kind of figure out what we're doing day to day I can do exclamation point discord to join join 38,000 other people. We're now discord partners. Let's go. Um, so yeah, if you need the code or you need help as you're working through this code, definitely join us on discord.

That's where it's all at. All right. So here's our to-do list. Uh, on my to-do list right now, I have get oat milk and get fancy bread. Uh, I can, I can remove stuff. I can add stuff. Most bread is horrible these days. I don't know how we've messed up bread so much, but it's really hard to find good bread. True. I couldn't get that. So I joined a staff, a turn up. Any means necessary, let's go. Congrats on the new gig again. They're so lucky to have you. Mess shit up.

Help us out. Discord is poised to be amazing. And so I'm glad you're there to help make it that way. Cool. All right, so we added items, right? We removed items, notice that we have something really beautiful here in that it tells us how many things are left to do, and we can even mark things as kind of complete. So when I mark it complete, notice my to-dos have dropped. To-dos have dropped. And so last thing we can do is we saw that we were able to add, remove, update, and delete. That sounds pretty, pretty cruddy to me. Oh, got him. It's like, uh, my, my child was born and I was like, ah, dad jokes. My, my sister got me a dad jokes book. It's lit. I'm all about it.

You got good dad jokes send them to me. That's the only DMs I want. The only DMs I want are like good dad jokes. You got good dad jokes, blow up my Twitter DMs please. All right, so we have our fancy to do list. It's working. what I wanna do before we start really getting into code, right, before we get really into code, I wanna break down what's happening here. Like I wanna talk about the requests that are coming through, what's happening, and then we're gonna look at the code, okay? All right, so when we're looking at our to-do list, what are some, what's the create request that we're seeing? We're talking about CRUD, create, read, update, delete. What's the create request that's coming through? Yeah, when we're adding an item, right? We're adding an item to our list. And so if we're adding an item to the list, there are some steps that are gonna come through. How are we actually making that request?

Like, how are we saying, hey, get fancy bread? How did I make that request chat? Yeah, there's a form, right? We have this lovely form and we're submitting this form. And when we submit the form, we are sending a request to our server, right? So if we were to draw this out, We have a client-side, or you have a client-side, and on that client-side is a form, right? And when we submit that form, we are sending our request to our server. Now, there is some code running on our server that is set up to hear that request and what is that code? Will we call the code that's set up to hear our requests? Yeah, we got our API, right? And there's some code running on our API, right? And when we make that create request, we're actually making a very specific kind of request, All right, we're making, when we submit that form, we're making a POST request, right? We're making a POST request, right? That's just the method that we're using, right? That's coming from that form submission is a POST request.

That request is making it all the way to our API and our API is set up to hear that POST. App.post, and don't worry, we're gonna dive deeper into the code after we like walk through how all this is coming together. It hears that post and once it hears the post, what do we do? Like when we hear that post, what do we need to do once we hear that post? Respond is the end. We got a lot of steps in between hearing and responding. A lot of things that we gotta do once we hear that request. All right, so we're gonna set up our application, right? Our application is going to grab whatever came along with that request, we're gonna grab the thing that came along with it. Remember, we're trying to like add something to our list. So we're gonna get, I'm gonna use a different word. We're gonna grab the item that came along With that post request right when we submit that form we send a request and along with that request was all this data Including what was inside of the form Yeah The rec dot body had all the information about what was inside that form and we're gonna grab The value out of the form All right. Once we have that value that was in the it was in the form What are we going to do with it? We have the fancy bread that was in the form when we submitted it. What are we going to do with it?

Yeah, we're going to add it to our database, right? We're going to add it to our database. Great, and then once we've added it to our database, what are we gonna do next? What's the last thing we're gonna do? Here for the fancy bread. Yeah, we're gonna tell the client, hey, everything went well. All right, we're gonna respond. saying everything went okay, and that you should probably refresh. All right, everything went okay, and you should probably refresh. All right, and so that everything went okay, and you should probably refresh goes back to the client. The client's like, okay, everything went okay, and I should refresh, and it refreshes. And when it refreshes, what type of request does that actually make? It makes a get request. And a get request is a whole other separate set of instructions. Remember, we got our Smurfs on the block by themselves, holding it down.

We have a Smurf that's listening for a post request. We're gonna have a Smurf that's listening for a get request and they're all gonna do different stuff, right? They're all gonna do different stuff. So our app.post grabbed the value that was in the form and added it to the database, right? The get request is gonna hear that request, it's gonna go get stuff from the database, right? So each of these requests are gonna do different stuff. And when we come back from break, we're gonna see it in action. So let's go ahead and take our five minutes on the clock, please. When we get back from the five minutes, We'll look at the next request, which is our get. We're gonna look at our put. We're gonna look at our delete. And once we feel comfortable with that actually happening, we're gonna look at the code, right? We're gonna look at the code and make sure we understand what's happening in the code base as well. When we come back, we'll also, we'll look at one, I'm not gonna say it cause then people will do it. But when we come back, we might look at some, I don't know, there might've been a secret raffle or something, I don't know.

Maybe, maybe, maybe. All right, I'm getting dissected in interviews. Oof, the hunt is rough. I'm telling you, the hunt is rough. It's the hardest part of the process, right? Hardest part of the process. Yeah, somebody said, who are they? They're exactly amazing tech folks who build, right? Build stuff in public, really just fun people to hang out with while you're coding. I I like streams where I can just kind of like Be entertained, but I'm also like motivated at the same time because sometimes that's what you need Sometimes I sometimes you don't need me showing you how to code Sometimes you just want to watch somebody just ball out or just have fun with it Like you sometimes you're just in that moment where you're like, you know I just want to have fun with it. And so I always watch them because it helps me have fun while I'm coding and It's a good community, too I'm literally just watching you work and watching you right now, yeah. I'm glad we trade off, that's awesome. I got lucky, the only tech question I got was explain double equals equals triple equals. You know enough folks. You know enough.

You know enough. See, and when I try to tell people this, they think I'm just like the wildest person. I get like these, like, like weird DMs that are like, you're, you're leading people astray. Like this is not the way to do it. I'm like, bruh. Have you seen them? People have gotten jobs. Like there's like, they can't believe it, right? Most people only have like the microcosm of their experience interviewing. And they think because they had to Leak code their eyeballs out. They were applying for the wrong jobs. They weren't connecting They weren't actually networking the way in opportunities They were just clicking apply when they see someone that has double equals versus triple equals as their interview question Their whole like internal system just like shuts down Exactly, they're big mad and so So when I get out here and I tell people, look, half the people had interviews. When half the people I'm telling you get interviews, that's it. That's double equals versus triple equals. I got what's the difference between while and do while exactly like these like simple like like you kind of got to know your stuff like to get these, but they're not like the the things that are just like completely out there that you're like grinding away from.

No. network your way into applications, study the bank, know how to talk about yourself, have strong projects that you can show folks, right? Right? And then we'll add all the other stuff, but you are enough, you know enough, you have the skills to get a job. The hunt is the hunt for a reason. Every time you go out on a hunt, you don't get a kill, right? Every time you go out on the hunt, you don't get a kill right and so sometimes you come back to feed it Sometimes you come back hungry Right. Sometimes you put you put a lot into these interviews and you come back hungry Part of the process, but I'm telling you there's so many opportunities That you are ready for you. Just gotta keep pushing along with the process That's pretty cool, yeah. Crispy nugget, what's going on? Been a minute, good to see you. Discord asks very practical front end questions. I had to build two things out. You can use any framework, but I picked React and TypeScript. That's dope, yeah.

My Wolf and Rufio had a great stream on learning how to talk about yourself positively last week. Let's go. All right, everybody. Let's take a look at this again. And, uh, we're going to delete this here. Leon, we've done this, or I know we've done this already. We're, we're, we're, we're, we're hammering it in because this is the most important stuff, right? Like this is it. If you can, if you can understand what's happening in this to-do list, you can build whatever you want. Yeah. You're gonna have to, you're gonna have to Google a lot. You're going to have to like use other frameworks libraries, but like this is it. This is, this is, this is the, the, the taking the lid off the cookie jar. And you can have as many cookies as you want scenario, right? And so we've been away for a little while we were on a break, right?

I want to make sure that we're transitioning back into the stuff that matters. Give me, give me a class to transition back into the stuff that matters. Let's get our spaced repetition in and let's do this stuff. That's actually going to move the needle as you start to build your projects. I don't know if I talked about this on stream, but my uncle one time was sitting in the kitchen eating cookies out the cookie jar and my grandmother says, what are you doing? Those are dog biscuits. And my uncle just looks at her and goes and kept eating the dog biscuits They're good they're good right and Apparently most most like I think it's like a I don't don't quote me on this Don't don't don't go out eating dog and cat food because somebody on the internet told you that it was true But I've heard that most cat and dog food is actually like human safe because people do eat it like it's a thing like during the depression people ate dog and cat food like people are out there and they use it as a means of sustenance so apparently in the u.s. it is a real deal so my uncle was a G and just ate the dog biscuits cuz he liked them all right Cool. Let's go ahead. I saw true. I don't know if you're still here or not, but there's something very different about streaming versus like trying to do YouTube videos. Like I've been trying to do, like I've been like building up a backlog of videos before I start releasing them. Like shorts, tic talks, whatever, um, it's been a lot of fun, but the amount of edits I have to do to get like one video as opposed to just talking on stream is just like, it's just astronomical. I have no idea what the difference is. My brain just talks when I'm on stream and doesn't when I'm trying to record a video.

And sometimes we wind up with silly stories. So I'm sorry you had to deal with the silly stories sometimes, but it's just how my brain works. If I don't, if I don't do it, then we don't get class. So, all right, let's get back into this. We talked about CRUD, the creating, right? The creating. So we're gonna add biscuits to our to-do list. And when I add the biscuits, I have created, I submitted this form. I submitted this form and out here in the internets was my server, right? When I click submit on that form, What type of requests did I make chat? What type of requests did I make when I submitted that form? People forgot about the engagement. People forgot about the engagement. Thank you for the engagement. It's a post request, exactly.

So we make a post request to our server. Now, there's something on our server that hears that POST request, right? That hears that POST request and then knows what to do. Yeah, that code is our API, API. Cool, there's some code on our server that we wrote, that we wrote that's on our server that hears that request. and when it hears that request, we've coded it to do something very specific. So that code said, all right, if there's a post request, right, if there's a post request, what I want you to do is when that post request came through, there was a bunch of data that came along with that post request, right? Somewhere in that data that was sent with the POST request, somewhere in that data that was sent with the POST request, deep in that request body exactly, there was the value that was in that form of biscuits. So what we're gonna do is we're gonna grab that value out of the request body, right? We're gonna grab that value out of the request body. And once we have that value, what are we gonna do with that value? Yeah, we're gonna put it in the DB. We're gonna put it in our database. We're gonna take that value and put it in the database. Beautiful.

And then once that value is in our database, right? Once that value is in our database, we're going to respond. We're gonna respond saying everything was okay and that you should probably refresh, right? Everything was okay and you should probably refresh. And when that page refreshes, right? When that page refreshes, what type of request have I made? Just that simple act of refreshing. Gotta be careful with that one. That simple act of refreshing, right? Makes a get request, right? We have our server. We have our API code that's listening for these requests. and we make that git request to our server and the API code is listening. It says, all right, app.git, this is a little different. A different smurf hears that git request, right?

A different smurf hears that git request, right? And it's like, all right, that smurf's on the block by himself, they know what to do. Here's that get request, right? Right? Here's that get request, and what does it do? What do we do when we hear the refresh, the get request? What's gonna happen? Yeah, we're gonna go to the database, we're gonna go to our database, the smurf is going to get every single thing that is in that database, right? It's gonna get oat milk, it's gonna get fancy bread, it's gonna get biscuits, right? It's gonna get the oat milk, it's gonna get the fancy bread, it's gonna get the biscuits, right? And once it has all those things from the database, what are we gonna do with all that data, to all those things that we got from the database. What are we gonna do with it? We're gonna throw it into our EGS. We're gonna render out some EGS. Remember, our EGS is a template, right?

It's a template, and we're gonna plug some stuff into that template. We're gonna take the things we got from the database, and we're gonna start plugging them into our template. And when we're done rendering out that template, when we've taken everything that was in our database and we've plugged it, right? We've plugged it all into that template. What gets spit out of that template? What gets spit out of that template? Oh. You're all ready to work at the agency. We don't, we can, we can, we can, you're all ready to work at the agency. We could, fresh coffee's in the coffee machine, go for it. Feel free to go grab you some. You deserve it. Go get yourself some coffee. We'll come back. We render it out, right?

We render it out. We get HTML, right? We render out the HTML. And then we respond with it, right? We respond with the HTML, right? And that's how we can see what's on the page. we're responding with that HTML. Right? So now we've talked about the creating and the reading. And I want to stop here. I want to see that code. I want to see the creating. I want to see the reading. I want to see the database. I want to see how it's all right.

I want to see how it's all coming together. and then we'll do the updating and deleting as well, right? So if you don't have the code, the code is on our Discord, exclamation point, Discord, if you're new around these parts, right? Game tech said, hey, newly joined, how do I catch up? Exclamation point, 100 devs will tell you everything you need to know about the program that we're running. Join us. Amazing community to learn how to code online. All right, so let's go ahead and take a look at our code here. We're going to ignore all this stuff for right now, and we're going to look at our get request, and we're going to look at our post request. Which one should we start with? Let's do get or post, get, post, one minute, start poll. All right, I'll let you decide, get or post. That's what we'll start with. Dealers choice will catch choice. Yeah catch choice Bob we are voting on whether we look at the gits or the post first Get's winning I think post may be a little easier to start with but we'll go again all right we're approaching the minute I'm gonna end here, 65% in the lead with Git.

Post is creeping back up. The Gits have it. All right, Gits won. Let's go ahead and take a look at the Git first. All right, so here's our Git code. Real quick, what are some ways that I could trigger this Git request? What are some ways I could trigger my get request? Refresh is probably the way that we're going to see it right now. So if I was to refresh my page on localhost 2121212121, and I got to record that. 2121212121. Hey, does this work? 2121212121. Hey, does this work? 2121212121. Hey, does this work?

21, 21, 21, 21, 21. All right, all right, we're back. We're back. We're back. All right, all right, we're back. Sorry, I had a little too much fun. All right, so we refresh the page. We refresh the page, right? We refresh the page and that makes a get request to our API code, right? Let's see how our API code is coded to hear that get request. Let's take a look. Here's the get requests. Now, I have some stuff commented out here, this comment that code out here is if I wanted to do like an asynchronous function, which we definitely want. We're going to move towards that, but I want to show you the slightly kind of older school way, our lovely promise chains, right? And so the idea here is like, we'll do this in the future because it's cleaner and easier to do, but I want to show you everything, right?

And the async is still there. It doesn't really matter, right? Cool. So we are listening for a get request and here is our route. Why is it a forward slash? Like why is the route forward slash? What is that telling us? Yeah, it's telling us the route. Yeah, it's the root. Exactly. The main page, the root page, right? So we could listen for Git requests on any of the different pages, any of the different routes, but the home page, the main page, the root page is always represented with the forward slash, or is typically represented with the forward slash. So we could have many Git requests, and eventually our applications will have dozens and dozens of Git requests, but we're listening for the one on the root, the main, right? Great. When our code hears that get request, we're going to do some stuff.

The first thing we're doing on line 28 is we are going to our database. Now, above our API, we connect it to our database. I'll show you connecting to our database in a little bit, Right, but we can just trust that the DB. Right, DB is holding that connection to our database so. Wherever we see DB, we know that we're already connected to that database and that's what we're talking about. We're talking about the database are Mongo DB database, right? So we heard the get requests. We go to our database and we find the collection in our database called to do's Now remember our MongoDB databases are made up of collections and Inside those collections are what what goes inside of our collections? Documents, nice. So we have our collections and inside of our collections are our documents, right? And our documents, we're going to say, find them all. So we're gonna find all the documents inside of our to-dos collection. So let's go ahead and look at our database. Let's look at the to-dos collection and see all the documents that we're gonna find. So here we go.

This is my Mongo database, right? It's not refreshed. Let me refresh it just to make sure that we have all the latest information. Beautiful. And we can see here that I am in the to-dos collection. right? We see that we're in to do's collection and here are my documents that are inside of that to do's collection, right? We can see right now, right? We can see right now that there are three documents inside of my to do's collection. So when I'm looking at the code and I say, All right, go to the database, go to the todoist collection and find all the documents. We're gonna find three documents inside of that collection. Now, what's something that we can use to hold all three of those documents? Remember, those documents are really just what? Those documents are really just objects. So what's something that we can use to hold all three of those objects, right?

Is an array, exactly. I see a lot of you saying those documents are objects, which is correct. And we're gonna put them into something that can hold all of those objects, which is an array. So that's why we say to array, right? We're saying, hey, go to the database, find the todo's collection, find all the documents. We found three of them in that todo's collection. And now we're like trying to juggle them and we can't juggle them, so we put them in an array. That make sense? Right, we went to the database, we found the right collection, we found the documents, and we put them in an array. Cool. We put them in Bill Gates' toaster, got it, exactly. Man, we should, I wouldn't do that. I went, I've been trying, like, I, I, I, like when I set my mind to something, I'd do it. Right. And so I really want to do more like shorts content.

Cause I, I think that's where I could add some value to folks. And so I've just been consuming way too much Tik TOK and YouTube shorts and stuff like that. So my brain's a little mushy. but I think it'd be really funny to do like videos that were just like our memes. So like we're teaching, but we're only teaching using our memes, right? Like we put it into Bill Gates' toaster, right? We didn't get got, we went and got, right? We carried some boats and logs, we put it inside the toaster, just like this 100% memes that only we would get, but it would make sense, right? The Smurfs heard it, right? We got enough to do it. All right, cool. So we went to our database, we went to the to-dos collection, we found all the to-dos, all the documents in that collection, we put it in an array, and what we're going to do is pass that value, that array, that array that is holding, right? That array that is holding all of the to-dos, we're gonna pass it into this then underneath the variable data. And this is where it gets a little tricky, right? Does toArray return a promise, right?

Well, let me ask, that's a good question to ask. Does this return a promise? Good question. Does that return a promise? We're gonna say yes. And we can see that it does because we got the then chain, right? We got the then, we got the catch, right? And so technically underneath the hood, that's kind of what's happening. We don't have to know that though. We don't have to worry about that at all. Like let's not get deep into it. But what we're gonna have happen is that this is going to return an array and that array is gonna be held in the variable data or the parameter data. So wherever we, yes, cause the documentation says it does, exactly. Wherever we see data, right? Wherever I see data inside of this den, what is data?

It's the array. All right, that's the biggest jump. I think it's where I lose the most people. So I'm gonna say it again, right? I'm gonna say it again. We went to the database. We went to the todos collection. We went to the todos collection. We found all three documents, right? All three documents in that todos collection. and we put all three of those documents into an array. So now we have an array holding all three of those documents. We said that those documents are really just objects. We have an array holding three objects. And we pass that array into the parameter of data.

So wherever I see data, it's really just that array holding those objects. Cool, now we got some other complicated stuff that's happening here. I'm going to ignore this line for a second. I'm gonna ignore this line here and this line here just for a second, just to take a look at line 32. Take a look at this line. So I went to the database, I found all the to-dos, I put them into an array, and now I have to take those objects and what am I gonna do with those objects that I got from the database, right? My objects are sitting in an array. What am I gonna do with those objects? What am I gonna pass those objects to? Yeah, I'm gonna pass all those objects into my template, into my EJS, right? So that's what this line here is saying. This line is saying, hey, I am passing data, I am passing data into my EJS template, right? I am passing all of those objects that are inside of my array into that template. Now, I've given that array of objects a name. that array of objects that I am passing into my template, I've given them a name.

And what is the name that I've given them? Items, exactly. I've given it the name of items. So when I am looking in my EJS template, but I'm not gonna see the word data anymore. I'm gonna see the word items. And wherever I see items, that is my array of documents. Cool. So, we went to the database, we found the todoist collection, we found all the documents in that collection, When we put them in an array, we pass those documents that are inside of our array into our EJS under the name of items. Why rename it? This pattern has more use the deeper we get into this stuff, right? It's a key value pair. We could have kept it data and been fine, but getting used to this idea of key value pairs being passed in is helpful. It can help with readability. There are some benefits of doing it this way, but for now we don't have to big brain it. We can just say, all right, we gave it a new name of items.

That's it. Went to the database, found the collection, found all three documents in that collection, put it into an array. Now we're gonna pass that array into our EJS template with the name of items. So if I'm ever looking in this EJS template and I see items, I know that it is my array of documents. Cool. So let's look at that EJS template. template. Views, views from the six. Running through the six with my wolves. I was running through the six with my wolves. All right. Cool. Here we are. Here's our EJS template. Here's my EGS template.

I'm gonna see some things in here. I'm seeing items, items, items, items. When I see items, what is that really? What is items holding? What is items holding? I was running through the six with my code. That's great. All right, it's our array of data. It's our array holding all of our objects that came from the Mongo database. Exactly, let's go. We out here learning. So wherever I see items, it is really my array of three objects, right? Wherever I see items, it's really my array of three objects. So what am I doing in line 23? What am I setting up here?

I'm setting up a for loop that's gonna run how many times? Yeah, I'm iterating over the array, all right. How many times is this loop gonna run? Yeah, it's gonna run three times because items.length, right? If items is my array holding all of my objects and there are three objects inside of it, right? And that means that this loop is gonna run three times. And the cool thing is each time it runs, I is gonna go up by one, right? So the very first time this runs, we have this item zero here, this item zero here, right? This item's zero here. And item zero is gonna enable us to grab the first what out of the array. Exactly, gonna enable us to get that first element out of our array, our first object out of the array. And once I have that first object, I can access all the properties on that object. Let's look at the first object that we know would be in our array. Where can I go look to see the first object that would be in our array? Mongo, exactly, MongoDB.

Let's go back and take a look. Here we go. Here we go. All right, so we have getOatMilk. And if we look, here is the first, the first object, right? The first object in our database. And so that's the first object that would come out of items, right? Item zero is this get oat milk, right? We can see that it has an ID property, a thing property and a completed property, right? Alright, so if I did items zero thing, what am I going to get? If I do items zero thing, what do I get? Get oat milk. All y'all getting oat milk ads. All y'all getting oat milk ads now. Oatly going to be all up in your Twitch feed.

Y'all got got, you know what? I was in the a hundred devs boardroom, right? And I was trying to get new sponsors to help the community. And so, uh, we we've came to conclusion. If Oatly you want to sponsor, uh, any of the major oat milk manufacturers, We'll take it to the board. We'll get you involved. Let us know. I'm happy to help you come to the 100 devs agency. If you need help with your web presence, we got you. All right. So just saying. All right. Now, the first document that came out of this array, would have an ID property, a thing property, and a completed property. So let's go back and look at our EJS. All right.

Let's ignore like this complicated bit right here, and let's just look right here. Items, zero, thing, right? Items, zero, thing, would, excuse me, it would give us getOatMilk, right? Items zero thing would give us getOatMilk. That's the first, right, we have three. It's the first document and it has a thing property. So if we're really talking about an array of objects, right, an array of objects, this zeroth index would be this document right here. It would be that document right there. And so, when we are looking at our EJS, that first document, item zero thing, would actually be, get oat milk. Right? It would be get oat milk. Beautiful. And what we're doing is we're putting getOatMilk into a span, and when we put it into a span, that's what enables us to see it inside of the DOM here. Right? I'm still a little confused about the thing property.

I made it up. Right? When it came time to put the values into the database, because remember, we decided to do the get first. You chose to get first. You chose to get first, right? When we put all that data into our database, we chose to give it the thing property. That's it. We could have called it Lord of the Rings, right? And it would have been Lord of the Rings get oat milk, right? We just chose thing, okay? Okay, now is that a good naming convention? Absolutely not, bad naming convention, but I threw up Tina, we're being bad, he's writing bad code, all right. So we saw that items zero dot thing was get oat milk. What would items, on the next run of this loop, I will be one, right, I will be one, So what would items one dot thing give us? Yeah, that would totally give us fancy bread, right?

The next object in the lovely array that we got back from our MongoDB would give us get fancy bread. And then we could also say, all right, items two dot thing would give us what? Items two dot thing would give us what? We can take a look. Fizz cuts, right, it would give us fizz cuts, right? Fizz cut, right? Fizz cut would be the third thing that would show up. And we can take a look and we can see like, all right, we got like a span. It's inside of an li. So each time this loop runs, is gonna run once for each item, right? Gonna run once for each item that's in our collection. And each time it runs, it's building an LI and that LI has a span in it. And that span has the value that we got out of the database, right? Cool. ChocoPie with the prime, thank you.

Missed you too, I appreciate that. All right. Somebody said, wait, isn't items.length three? It is, right? It is. So what happens? What happened here? So we're on two, right? So we did zero, one, two, right? We did zero, one, two, and now we're at the end of our loop, and we try to add one, so we're at three. Is three less than three? No, so our loop stops. All right, our loop stops and we never get to the three. Good question, good question. Because it's the less than, right?

We had the less than there. Cool. All right, now there is something slightly more complicated happening here, right? There's something slightly more complicated happening here and it's this conditional that is inside of the LI. It's this conditional that's inside of the LI. Now what is happening inside of this conditional? What is this conditional helping me to do? Well, what is it doing? It looks like it's the same thing. We're saying All right, add a span here or add a span here It has the same content in each of the spans. So why have a conditional there? Yeah, it is the giving it of the completed class. So I'm saying, hey, if this property is true, then I want the span I build to have the completed class. If this value is not true, I don't want it, the span just doesn't have the completed class. So I'm either building a span that has the completed class or I'm building a span that doesn't have it.

And if we look at our CSS, go to our public folder, go to our CSS, go to our style.css. If we look at our style.css, the completed class gives a gray color and a line through. Right? And so eventually what I can do, Eventually what I can do as this page is building, I can always just check, hey, has the task have the value of completed or does it not because if it does, we're gonna make it have the line through. And if it hasn't been completed, it's just the normal span, right? We're just toggling it. Now, somebody said, when do I know to include this in JavaScript or something like this. We're still kind of in the early stages of seeing some of this more advanced stuff. But the thing I'm asking myself is, I want to store this over time, right? If it was just client side JavaScript that was doing this stuff, what problem would I run into? If I was just keeping track of this stuff by a client side JavaScript, what would happen? Yeah, no data persistence. Every single refresh, right? Every single refresh, poof. I wouldn't know what was completed or not completed.

So where am I actually storing whether or not a task has been completed? Where am I storing that? Yeah, I'm storing that in the database. We could use local storage. I see some folks throwing out local storage. That's true. I am storing whether or not the task has been completed in the database, and it's just one very simple thing. If the task has been completed, I change this from false to true, right? And if it's not complete, if it is complete, sorry, if it's not complete, it just stays false, right? So if I have to complete the task, it stays false. If I have completed the task, I change it to true and this sounds like a really good case for what type of requests to our server What type of requests to our servers gonna handle this like complete it or not? Yeah, our put or our update exactly our put or our updates gonna handle this stuff Cool All righty, so that's everything for the get, right? So we, let's go back and take a peek at this. We went to the database, we found the todos collection, we found all the documents in the todos collection, we put all three of those documents into an array, then we pass that array into the variable or the parameter data. we can see that we then pass that array into our EJS template underneath the name of items.

So wherever I see items inside of my EJS, wherever I see items inside of my EJS, that's really just the array that's holding all my objects. Since there are three objects in my array, this lovely for loop in our EJS is gonna run three times. And then I'm gonna build an LI for each time this runs. And I'm either gonna build a span that has the class of completed, making it like gray and strikethrough, or I'm gonna build a span that's just normal, right? And so whether or not it's completed or not, just has to do by looking at that document or that object and seeing if it has a completed class of true. We'll handle that completed or not when we get to the update and that'll be a little bit further down the line. Cool. Questions while we're here about the get. Oh, where's the response coming from? That's great. So once, when I say render, like I just highlight this piece here. What is getting rendered? What is getting rendered? When I say, when it says render EJS, what does that mean? What is being rendered out?

Yeah, the HTML. So you can think of all this rendering winding up being an HTML file. Great. And what the heck do I do with that HTML file? you I respond. I respond. I respond. I respond with the HTML file. I respond with the HTML file. Okay. Got that, cool. Somebody said, does this thing work? My version works, your version doesn't. If you just clone down this repo, it won't work because you haven't connected your database. Hey, does this work?

No. You would have to do like your MPM install. You have to create your ENV file. All of that, all of those steps can be found in the what? All those steps are at the end of our what? At the end of our slides. The slides have like the step-by-steps on how you're gonna do that. But somebody actually submitted a pull request for an updated readme that I'll approve with the pull request after class that had like more detailed instructions on how to get it running. So I love that. I love to see it. Community taught folks, community taught. Thank you. Cool. All right, so we respond with that HTML file that came from the EJS and that is how we see everything that is now on the page in the DOM. Questions before we take our break.

We're gonna walk through how to set up the EMV file. We're gonna walk through how to do the rest of this, yep. Mayim Wolf already did it too. Mayim Wolf, can you DM me the video where you walk through that just so I can link you after class, please? Someone please tell me how to make my VS code smaller. You mean like the text? You can change the font size inside your settings. Is the database to do's an API? It's part of our API. The API is all the pieces, right? The API is the get, the post, the put, the delete. Like all the code that we wrote to hear what's happening in our application, right? All the code I wrote to hear like those requests and then the stuff that I do, that's our API. Like we get to write the code that hears those requests and we get to decide what happens. All of that is our API.

Oh, if you have my code, there's probably the VS code settings.json. And you'll notice that I have my editor set to 42 and my terminal set to 42. so that folks can see it easier on the screen when I'm streaming. But you could just change that size or do it in your settings. Delay-tay that folder. That folder should technically be in my what? I just forgot it. That folder should go into my what? My git ignore, yeah. So when I push changes, I'll put it in my git ignore so it doesn't pop up. All right, any other, one more question before we take our break. DB's like, I got this, seven minutes on the timer. Cool, all right, gitignore, somebody said let's gitignore. Gitignore is a file that you can put the things that you don't want to be pushed to GitHub, right? So I don't wanna push my node module folders because it's typically huge.

And I don't wanna push my .env file because that's where all my secrets are, right? And I don't mean like my deep dark secrets. I don't want anybody to know about. I mean, my connection to my database or stuff like that. So I put that in my env file. I'm going to show you how that works. If we don't get to it tonight, we'll do that on Thursday. I'll walk through how it works and all that stuff. But I don't want those going up to GitHub so people can't, can't yoink them. I keep my emotional issues in there. All right, folks, let's take our break. Should we do LeetCode over CodeWars? I think you should do CodeWars until you feel pretty comfortable with code wars. And then once we hit the hunt, we switch to leak code. So for folks that are like data structures, algorithms, ah, right, we're like data structures, algorithms, ah, we're not there yet.

I'm gonna, we're gonna do daily data structures and algorithms prep. I'm gonna walk you from like very simple code to another coding challenge, to another coding challenge, another coding challenge. And through these coding challenges, is we're gonna build up from kind of like no data structures and algorithms knowledge all the way through like hash mapping with the best of them, right? And so we did it last cohort and it was probably one of my favorite parts of the whole cohort was just like being in those Discord voice calls working through the code together. And so we're gonna do that. You're gonna work from like just very basic like functions all the way up to the complex data structures algorithms that you'll need for your interviews. So we're just not at that point yet. It's coming for now. I think code wars are good because they're easier to get into. You can do one a day, but if you're already done, I just like somebody's tweet. I'm going to retweet it later. They did all the eight cues like there's no eight cues left. So if you've done all the eight cues, you're like done the seven cues, like you're halfway through and you want a little bit more of a challenge, start throwing in some of the leak codes as well. Like I'm asking you to do a coding challenge every day. You don't have to make it hard on yourself.

Do the easy ones for right now, right? Like do the easy ones, get the habits. The important part, the whole part of this, right? Is the habit, right? Remember we are going to be software engineers for our career, right? And so we want to, we want to develop these habits so that we can do the heavier lifting when it comes to data structures, algorithms, leak codes, stuff like that, right? We want to be able to carry these concepts into like our day-to-day life as a software engineer. So when you're working on code at the agency, these data structures and algorithms might pop up. And so it's not something that you want as like a one-off thing, right? Develop the habit now of doing the coding challenges so that by the time we get to the hunt, you feel comfortable ramping up your data structures and algorithms knowledge. and then that knowledge stays with you. Like once you understand certain concepts, right, once you understand certain concepts, they just don't leave you as a software engineer. Once you understand, I'm gonna say HashMap again, but once you understand HashMaps, like the funny thing that a lot of my students do is every problem is solved with a HashMap for like two weeks, right? Like I don't care, it could be like a CSS problem and they're like, how do I HashMap this, right? Like, um, and so those, those, like, it's, it's like a, it's like a, it's like, it's like a level of, I don't want to say enlightenment, but it's like, it's like a, it's like a whole new level unlocks in your brain.

Uh, once you start to add these data structures and algorithms to your repertoire and we're just, we just don't need them yet. So don't burn out and don't push yourself if you don't need to. Right. They're really fun. They are really fun. Cool. All right, let's keep pushing here. So we did the get first, now it's time to do the post. So let's go back and take a look at our post and I'm going to add something to the to-do list. And so let's go ahead and oh, yeah. Hold on one second, let me pull that up. There was a raffle today. I'm going to grab those responses from the raffle real quick. All right. Let me pull up the raffle, raffle names, name picker.

All right, so we have 819 people that opened the, that opened the email and filled out the, the, the, the form for the raffle. Um, one of the, the interesting things I find myself doing, uh, is kind of, I have a lot of time where I only have one hand cause I am holding baby with the other, I've gotten really great at like responding to like emails I've gotten really great at, um, like even like doing some mild coding. But a lot of times I'm just by myself like in a dark room holding my child and they're knocked out of sleep, right? And so I was like, this would be a really good time for coffee chats to keep myself awake to help some folks that may be struggling with things as we get into the hunt. And so to help me stay awake and to help folks that might need it, I'm going to open up some coffee chats. I'm just going to do, I'm going to go slow, but coffee chats are one of my favorite things to do with last cohort. I really want to incorporate them with this cohort. So the people that win this raffle will be the first people that I will do coffee chats with. So let's just pick three for now. And you'll get a message from me on Twitch about setting up the coffee chat and we'll We'll make it work. So three for now, pick random names. All right, Jappel, ZRT, and James, congrats on the win. You'll get a message from me on Twitch. I'll try and do it after stream, but probably tomorrow if I can't write after stream. So you'll get a message from me.

Let's do our coffee chat. Congratulations on the win. Let me put this over here so I don't forget it. and we'll start the coffee chats up again. Back in the day, I was doing like 10, 20 a day. I don't think we're gonna get up to that level, but I do wanna incorporate them back in. So super excited to start talking to some of you all one-on-one. Happy to talk about anything that you wanna talk about. Sometimes folks want to just kind of get some help with crafting their story or just wanna shoot the shit. That's cool with me. Folks that have redeemed the portfolio reviews and things like that through the channel points. I'm gonna start reaching out to you all now that I'm back in the mix, okay? All right, so let's get back into this. Let's get back into the mix with this to-do list. And so let's go ahead and do our post.

How am I going to, how am I going to submit this post? Thanks grandma, exactly, thanks grandma. How am I going to do this post? Yeah, I'm going to submit the form. Yeah, I'm going to submit the form. And when I submit the form, it's going to make a post to my server. So let's say we put in something, let's put something in here, Let's put in coffee, because we were talking about coffee chats. I click submit. When I click submit, I make a POST request to my server. So POST request leaves my client side, goes to my server side. On the server is my API code. Part of that API code was an app.post. And where does the route come from? Where does the route for the post come from? Yeah, if we look at the form, let's use our inspector.

If we look at the form, there is an action on the form. Sorry, it's kind of hard with the stuff on top of it. There's an action on this form called add to do. So that's gonna wind up being the route for this post request coming from this form. The action is what Express, which is handling our API is gonna listen for to know which post we're talking about. Cause we could have 20 different forms on this page that are all making posts, right? And so the action exactly Grizzly is the route in this case. So let's go ahead and draw that out again. So we had the post request that made it to our server. Server had some API code, right? That's beautiful. And then we had an app.post that had the route of add to do, and that came from the action that was on the form. Now, when I sent this post request to the server, what went along with that post request? Yeah, that request body goes along with the post and part of that request body, so like we're sending a lot of data. I showed it before, I'll show it again, but a lot of data goes with these requests And in that request is gonna be the request body.

And part of that request body is gonna be what was inside that form. So in that request body, there's gonna be some coffee, right? That was what was inside that form. In that request body, we're gonna see coffee. And how do we know which input we're dealing with? Like, how do I know like, What if this form was like 40 inputs deep? How would I know which input I cared about? Like, I just want the thing to do input. I don't want any other of the inputs that could be in our form. Yeah, we inspect. We're gonna see that our input has a name property of to do item. That's how I can differentiate between all the different inputs that may be in a form is by looking at their names. So the names on the input. So this has to-do item. So what I'm gonna wind up looking for is rec.body.to-do-item, right?

That's what I'm gonna look for. And in that to-do item input was the word coffee. And so that coffee got sent along with my post. Cool. Now, once the request makes it to the server and the Smurf that's on duty to hear the post request, right, the Smurf hears the post request, what's the first thing my Smurf is gonna do? What's the first thing my Smurf, we all know what coffee means. Oh, I got a VIP hold on where's where they at oh y'all went too fast y'all went too fast There we go. All right, Maxwell wins gets VIP you make me giggle out loud on stream, you know what That does. Oh, all right. Coffee chats, whole new meaning. Where's dab shout out dab. Where's dab when we need the coffee chats of a whole new meeting. All right. Where are y'all finding these coffee chats? All right.

Leon's coffee chat going to be lit. All right. So we made a POST request along with that POST request was all the information that was in that request body, including that word coffee that was in our form, right? And all that gets sent to our server. The first thing that our Smurf hears, right? Right. The very first thing that our Smurf hears is that POST request. And the first thing it's going to do is get the value, It's going to grab that value of coffee. So it's going to grab that value from the request body. It's going to look at the request body to do item that came along with the request. And we know that that is coffee. So once it's grabbed that value of coffee, what's the next thing the Smurf is going to do once it has that value? All right, Sage, I see you. It's gonna add it to the database, right? It's gonna add that value to the database.

So we're gonna go to our database. We're gonna add that value to the database. Add to DB. And then once we're done adding that value of coffee to the database, what are we gonna do? Yeah, we're going to respond, we're going to respond and we're going to say everything went okay. All right, we're going to respond saying everything went okay and that you should probably refresh. All right, you should probably refresh, cool. And once we refresh, what's going to happen? Once this refreshes, what's going to happen? What type of requests are we going to make? Yeah, we're gonna make a get request, right? And that get request is going to go to the database. It's going to find all the documents that are in our database. But now, instead of there being three documents in our database, there's going to be four, four, right? There's gonna be four, right?

And that's why we're seeing four items in our to-do list. Cool, all right, let's break down the code behind what's happening with this post. Let me refresh the DB here. Cool, you see that there are four in here, makes it a little bit smaller. Cool, yeah, there's one of four, so one, two, three, four documents now in our to-dos collection, cool. All right, so let's look at this post, all right. The post, app.post on the add to-do route. One more time, chat, where did the route come from? Where did the route come from? Yeah, that route comes from the action on the form that made the POST request, right? Comes from the action on the form that made the POST request. Beautiful, so we could have plenty of different forms that could all be making requests and we could differentiate between the different forms based on the different actions that each form had and then our API set up to hear a post on that particular form's action. Cool, so the Smurf hears that post request come through and we go to our database that we're already connected to, we find the todo's collection. And the reason why MongoDB is so beautiful is we don't have the big brain and we can just go ahead and say, insert one. We don't have to learn some fancy querying language.

We don't have to learn some dusty documentation that we have to read through. No, you wanna put something into the database, insert one into the database. I love it. Batty's friendly, exactly. Batty's friendly. All right, so we went to our database, we found the todoist collection, we insert something into that collection. Why does this look like we're inserting an object? Why does this look like we're inserting an object? Because we are, exactly. Documents are just objects, right? And so we're gonna insert that document into our todos collection. We're inserting that object into our todos collection. And we can tell right off the jump what properties that document is going to have because we set them up here. Right? This now is going every single document that goes into this collection is going to have a thing property and a completed property.

I could change these to whatever the heck I want. Right? I could change this to rainbow unicorn attack. Right? And now when I insert a document, right? When I insert a document into my database, right? It's gonna have a property of rainbow unicorn attack. So instead of it saying thing, it would say rainbow unicorn attack, right? And I could change this to complete it to something else. So I could change that to, I can't spell it. Pretend I spelled out zaboomafoo. Just pretend I spelled out zaboomafoo, right? I could put zab in there, right? Right? And that would work.

And then each of my documents inside of my collection would have the property of rainbow unicorn attack, and it would have the property of zaboomafoo. total control of what we put into our MongoDB, right? But that's not really best practice. So I'm gonna leave it at thing for now. We could probably find a better name for thing, maybe like to do item or something like that and complete it, right? Is this how we make user accounts and such? Bev, it's gonna be the exact same process. When we have user authentication and we're storing those users into our database, we're gonna have a collection called users and each user is gonna be a document in our collection. The only thing that'll be a little bit different is that we're gonna do something called hashing So we're not storing their password like in plain text in the document, but it's the same same idea Whatever type of data we're trying to store. We're just gonna make a collection for that data Right, and we're gonna have a document for each piece that we care about Cool Has anyone seen a good article explaining schemas? We're not there yet. We're gonna get into MVC and then we're gonna talk about, once we have a basic idea of MVC, like model view controller, we'll get into schemas and stuff like that in depth. At first, you don't really have to really worry about it when you're first building, but over time it makes it way more maintainable to have that type of stuff. Cool. Alright, hey, just started.

Can you start at the beginning? Catch the VOD. So the VOD is always immediately available after stream, and then all of our classes make their way over to YouTube as well. Exclamation point YouTube. If you get stuck or have questions, come to our Discord. Exclamation point Discord. Is it clicking more tonight? Glad to hear that, Ferry. I'm excited for you. Excited for all of us, but that's great to hear that that's clicking more for you. All right. All righty. So we had that to-do request, sorry, that post request that came along. When that Smurf heard the post request, we went to our database, we found the to-dos collection, we inserted a new document, a new object into that collection and that object had a thing property and a completed property. Now, the completed property, we hard code it, right?

There's no way that we could change what this was. Like we just hard code it, right? We just hard code it false. So it doesn't matter what the user submitted in the form. It doesn't matter what they did. Every single document that we're creating is going to have a completed property of false, right? So right now there's no way for somebody to like submit a to-do that's already been completed. We've just hard coded it. However, the thing we can grab from the form, right? So when that post request comes through, right? When that post request comes through, we can grab from the request body the information they sent with that form, right? So if we look at our EJS, we can see that our input has the name of to-do item. When this form submits a request, that request body is going to be sent. All the information that was inside that form is gonna be sent and we can yoink it. We can do request.body and grab the value that was in that, grab the value that was inside of that input by using the name, right?

So we see it has the name of to-do item. We can grab that value should we want it. Rec.body.to-do item will give us the value that comes out of the input. Cool. Let's see if we can console log this actually. So let's go ahead and just do a console.log. And we're going to do, we're going to do rec, or sorry, I'm so used to shortening it with rec. Request dot, well, let's just do the whole request. And then let's console.log the request.body just so we can see it. Cool. So I'm going to show my server, restart it. All right, port 21, 21, 21, 21. All right. And let's go back here and refresh. All right, and let's add something to our stream to-do list.

Watch my stream tomorrow. Tomorrow. There we go, beautiful. Cool. So I'm going to submit it. And so I now have on my list, watch mine will stream tomorrow. And if I look at my, this is going to be wild. I look at my terminal here, look at all this crap that was sent with the request. I'm not even going to scroll all the way up, but there's just a lot of crap here, right? All that stuff is being sent, right? All that stuff is being sent with the request, right? Look at all those chickens, right? All that stuff is being sent with that request. And what I was able to do was then to just look at the body part. Like we can see that the body is here.

Like here's the body that was part of, like this up was the request. All that crap is set with every single request that you're making. Let's just think about that Right You're on your phone Every single request you're making sending all that data whizzing around the internets through the wires through the tubes around us right Going across the ocean going out through Starlink satellites, right? Like all this stuff is being sent with every request Every request, every request, right? And we're able to pick apart the piece that we care about, pick apart the piece that we care. Say that five times, pick apart the piece, pick apart the piece, pick apart the piece. Request that body, right? So we just grabbed, we yoinked the body and we can see part of that body was the to-do item, right? The to-do item and the value of watch mine with tomorrow. So we were able to grab that value that we wanted, right? Out. And then we can go a level deeper and say to do item. Like I want from that request body, I want the to do item property. And that is what gave me watch mine Wolf tomorrow, right? We're able to dig through and grab the pieces we want and out of these requests, I'm gonna delete these.

So we don't have the request each time blowing up my terminal. Let me restart real quick, right? 21, 21, 21. And so we're able to grab the piece that we want and we're then able to create a new document, right? Create a new document in our collection that has a thing property and a completed property. And now we know what's also gonna be stored. So if we go and look at our mongodb And we refresh You can see at the end we have a new document thing with watch mine with tomorrow completed false Can you talk a bit about preventing adding duplicates to the db we're not there yet We're not there yet. There are many ways that we can do that down the line. It's not something we want to think about right now. There's tons, yeah, there's upsert. There's all that fun stuff we can get into. It's just, it's just, it's a little too much for right now. I'm happy to do it like during an office hours or something like that where we can go a little bit deeper. I just don't want to confuse people right now, but yeah. So we'll get into it.

And eventually one of the easiest, one of the things that we're going to eventually do is right now we are actually like modifying and making changes by grabbing stuff from the DOM. What does each individual document in our database have? What does each individual document in our database have? It has an ID. So to kind of answer your question, eventually we won't really be using the data itself to find stuff in the database or anything like that. We'll be using the IDs and IDs will make it so that we can edit individual things, right? To be able to make sure we're targeting that document and only that document. And then there'll be some other strategies we can use to stop duplicates as well. All right, questions about the post, well, sorry, we did the post, right? Let's finish it up. We added the document to our to-dos collection that then fires. I have a nice little handy-dandy console log so I can see that something happened. And then my response to the client is to do what? My response to the client is to do what? My response is to refresh.

Exactly. My response is to refresh. When I refresh, I trigger a what? When I refresh, I trigger a what? A get. Exactly. I trigger a get request. Wonderful, wonderful, wonderful, wonderful. All right, questions about the get and the post. I know we're spending a lot of time on this, but it's really important. This is honestly like the most important stuff that we'll cover, because if you understand how to do a get, a post, and then a put and a delete, you can build whatever you want and it's super powerful. So if you're already leagues ahead with this, right, and you're feeling really comfortable with this stuff, Great. Hop in Discord, help folks that are struggling with it a little bit, right? And if you're just catching up tonight, that's great. That's where I want you to be.

I want this stuff to make sense. We're going to spend significant time on it because it's just that important. Once you get crud down, the world is yours. Can you explain the add to do route again? Sure, Major. So the add to do, like how do I know what form is making the post? Well, if I look at my actual forms, they have an action called to do and very clearly a method called post. So when this form submits, like when I either click the submit button or hit enter, it's gonna make a post request to my server, right? And how do I differentiate between which form is making the request? Well, it's the action. The action is what I use to make the route for this post. If I had another form with a different action, I could have a different post for that. I was having a lot of trouble finding the crumbs going back and forth between server and EGS, but tonight has been so helpful for that. That's good to hear. Some concerns about how like we're editing the database.

Yeah, like right now, like our updates are like really, they're not like how we would do it. Eventually we're gonna be using the IDs that'll make it a little bit easier. We'll be sanitizing, all that fun stuff. We're just not there yet. Well, let's get the CRUD basics down and then we'll do all this stuff that makes our applications a little bit more robust. Yeah. What does it mean that the completed false? I want to keep track of whether or not I have completed the items on my to-do list. So I got oat milk yesterday. I got fancy bread yesterday. I got biscuits yesterday. I got coffee today. So all of those things are already done or completed, right? So the way I'm keeping track of whether or not they are completed, I can actually show you When I look at how they're all false right now, right? But as soon as I refresh my view of the database, you're gonna see that all of them are now marked true, except for watch mine will stream tomorrow, because that hasn't happened yet.

I just haven't marked it as true yet. It will be true, but I haven't marked it as true yet, right? And so that completed is just, is this what I'm using to keep track of whether or not the user has marked that value complete. And when I insert my documents, I'm just hard coding a completed of false. And eventually when we get to our updates, right? When we get to our updates, we'll use the update to change this from false to true in the database, or what we can do is if I click it again, the completed goes back to false. And so then it just shows like normal. Is MongoDB reliable for production or just for learning purposes? Super reliable for production. Lots of really big companies use it effectively. I think it's great for MVPs. I think it's great for simple apps that you're trying to get out the door. My speed using MongoDB is like next level. For a lot of my more robust apps, I use Postgres, but I'm no stranger to using MongoDB for stuff in production, I love it. Some people have quirks with it, but I'm a person that likes to get shit done, and if I can get it done faster, that's always a good thing for me.

I'm not gonna try and write the best, most performant code for an MVP, you know? You can always refactor later. Refactoring's for closers. But for teaching, I like teaching with MongoDB because it helps, it's way more visual. You can see what the heck's happening. And yeah, we'll do a little bit of Postgres at the end. A little bit ahead, are we gonna learn passwords? Are we gonna use something that hashes them for us? Yes, anything that has to do with like passwords or user login. We don't want to get gots. So we're going to use tools off the shelf that do it for us. Um, Bcrypt, things like that. Right. Um, we're, we're, we're not going to ever write that from scratch unless like you go do your PhD in cybersecurity or something like it's just not, it's not worth it. My husband works for a bank and they use MongoDB.

Yeah. It's used all over the place. It's a really wonderful tool. And that's all coming down the pipeline, folks, where, like I said, we're going to add MVC on top of this, and we're going to add user authentication on top of this, and then we'll add new ways of doing the front end. Basically, if we act on top of this, we got some other fun stuff that will do some other projects that will build with all the pieces, and then we'll move into our data structures and algorithm. Major said shroud is live got to go all right me too. Yeah. Hey. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah. Yeah.

Yeah. Hey. Let's go. Good morning. Good afternoon. Good evening. No matter where you're coming from. Hope you all are doing well. Hello is Rufio with the raid. Let's go. Rufio, Rufio, Rufio, Rufio. What is going on, everybody? Welcome back. Happy Thursday. We online.

Let's go. We online. Hey, Rufio, thank you for the raid. I appreciate stream team pulling in. I love the stream team, folks. You just got to love it. Makes me so happy to see the raids. It makes me so happy to see all the 100 devs community hanging out, even when we're not live on Tuesdays and Thursdays, it's wonderful to see. Rufio, Fox, Mayan Wolf, gotta love it. We outside, we online. Hey, everybody, welcome back. We got some crud to finish. We gotta finish this API because we gotta get the MVC and authentication because once we finish the MVC and the authentication, the world's ours. But whatever the heck we want. Nobody can stop us.

Let's go Yeah Indifferent in the house a different ghost. How you been man? How you been? Good to see you. Thank you so much For being here. Hope you're doing well. It's good to see you All right, everybody we We got to get we're getting right into it Slides are the same from last class. So don't worry If you have the slides, you're ready to go. If you need the slides, exclamation point slides, they're really just a tool for us to think and move through our code together. We're gonna add the updating, the delay tang. We're gonna look at all the glue. A lot of folks are kind of asking questions about like the ENV files and stuff like that. So we're gonna see all that come together. We're gonna make sure you understand all the bits and bobs of the to-do list. Then you got some homework, which is to look at the MVC version of this code.

I updated it on discord so that you have that take a peek You have a video to watch on MVC and you have to finish the traversing media course if you have not already So you got a action-packed weekend ahead of you? My wolf will be doing their office hours on Sunday as well. They sent me a message So you got some extra help if you need it as you're doing the homework and then next week. Oh next week the MVC Oh The authentication, oh, I can't tell you, like it's superpowers. It's superpowers. You are about to unlock some of the most amazing superpowers you will ever unlock in your life. The idea to build an app that can create, read, update, and delete. After today, you'll be able to do all those pieces. You'll have the to-do list to start with whenever you want to build that. And by the end of next week, you'll be adding MVC and authentication. Like what? I love it. So I'm glad you're all here to partake, To get into it out to work through this in detail so we can see it ask all of our questions And then we're gonna start picking up the pace a little bit because we got to get through the MVC We got to get through the authentication. We got to build some apps and then we got to get on the hunt. I met with a blal yesterday, I Don't know if they're ready for this, but I don't know if they're ready for for for for hunt over What Hunt-ober?

Hunt-ober? We got a lot that we're planning for you. A lot of fun stuff that we're going to get into. We're planning. Me and Blob are putting in work. You ain't ready, but we're going to get you there. Alright, so So as always, as always, we got questions, I got answers. Always like to give folks a few seconds to get in here. None of my lights are on. What am I doing? Hold on, wait a minute. There we go. Hold on. This is dark mode. Exactly.

Here we go. Oh, there you go. I need my, my beauty light. It's moves things out, you know? All right. Anything to catch up on if it's my first time. Yeah. You got about 44 other classes to catch up on. Uh, you can do exclamation point discord. Uh, and when you join that, we have a catch up crew that you can join. I can do exclamation point YouTube and see all of the past 44 videos of our cohort two playlists. There we go. All right. I'll do another couple of questions before we get started. We're just getting right into the cred tonight.

So we're not even, we're just gonna skip right to cred. So let's give folks another minute or two to get in here. I'm gonna answer some questions and we're right into it. Yeah, I love them. We saw something that Ketchup Crew was doing, which I thought was really neat. They created a thread for the month. Like if you're starting in August, you join that thread. So that's something we're going to make official. Blah and I are talking about that yesterday about like having a specific thread with some extra goodies in there so that each month as folks are starting in the Ketchup Crew, They have like a place to latch on and if you go faster you join a different thread if you go slow down you join A different thread and so we're gonna help organize that a little bit Yeah, some some good changes coming to discord because we made we're discord partner now Which is it's actually not super easy to get I actually think that was the heart like one of the harder ones to get because we're now twitch partners YouTube partners and and Discord partners, which is pretty cool. So, you know, no big deal. Let's go. All right. We don't get got, we go. I'm thinking of doing a hundred days of code. I'm catching up.

What I stitch to myself, if I do the challenge because of recruiter seeing. So what I say is like, once you're ready for the hunt, right? Like once you're ready for the hunt, You kind of chill out the stuff you do on Twitter No recruiters like digging through like months of your Twitter history to like see. Oh, they did a hundred days of code Also, anyone can do a hundred days of code like you don't have to be Like new you could be like senior and picking up a different language or something like that So the only thing I say is if you're gonna be public about your learning journey That's one of the best things you could ever do because you get encouragement you get other folks that are willing to help and support you. And then once you're like really ready for the hunt, you start kind of smoothing stuff out on your social profiles. But I'm gonna help you with that. We're gonna bring up some examples to like, when I tell you I'm gonna get you ready for the hunt, I'm gonna get you ready for the hunt, right? There's a lot of stuff that past 100 devs folks have done that really moved the needle in helping them to get a job. And it's a lot of stuff that's not really out there. It's really hard to kind of come across this information because not a lot of people have been like on the ground Helping hundreds of people get jobs at in different places locations stuff like that so there's a lot of stuff that I've picked up and I've been privileged to pick up because I've been doing this for 10 years I try to bake into a few classes and so we'll get you there, but we're not really ready for it yet I wouldn't stress about it Building in public learning in public is one of the best things you could do Shrewd said your resume helped me get a job. Hey, congrats. That's good to hear. The resume is lit. Some people like, people don't get it, right? There's a system.

And if you don't do the system, the stuff by themselves often doesn't work. So like every once in a while, the resume will go like viral on Twitter and they're like, ah, it doesn't like, The robots aren't able to pick up this like specific thing in the resume I'm like, yeah, because if a robot is looking at your resume, you've already fucked up Like why would I optimize for robots when that's like not the way to get the job, right? Like we're here to network our way into opportunities. So I'm gonna optimize for the thing that actually works. I don't know No, no, I don't know How good do the projects in my portfolio have to be to confidently start the job hunt? You want one really meaty project. If you have one really meaty project that you can talk about from beginning to end, the things that you had to learn, the things you had to do, the things you had to build, that's better than like five tutorials that you followed off of YouTube, right? That's why we really switched to you building projects. And this whole time you've been building small projects, right? Because just following the tutorials, never enough. You always want to do something that's your own from beginning to end that has your own flavor, your own personality baked into it. And that's the point of the 100 hours project. That's what helps you set apart from other candidates when they're comparing two candidates. And there's a candidate that's done 10 tutorials. And you can clearly see that the code is following a tutorial versus somebody that sunk 100 hours into their own project.

The person that sunk their hundred hours into their own project is getting hired every single time. I didn't even apply. A recruiter reached out to me. It works. Let's go. Let's go. I wish I could actually get interviews to talk about my hundred hours project. I'll get you there. We haven't really started the process to get the inbound interest from recruiters or the outbound pulls that we'll be doing. So don't worry, you're in the place you need to be. When we get there, you'll be ready. Here, this is class 45. And the other thing too is, I'm not the biggest fan of like, right now there's a lot of recruiter spam. And one of the things that I see a lot of students get Caught up in is they lean into the recruiter spam before they're ready for the hunt and When you lean into the recruiter the recruiter spam before you're ready for the hunt it goes nowhere and You get demotivated right like you have these like some really big companies reach out to you you get really, really, really excited. You're like, oh my gosh, AWS just reached out to me.

You spend three weeks like getting prepared for that interview. And then they like ghost you or you like do the first round and that's it. So I see so many folks at this point in the process that stall out because the recruiter spam is really enticing. When you see a big company that you know, reach out to you. You're like, Whoa, like I got to respond. And it detracts from their process that if they would have stayed the course in a month, they could have reached back out to that recruiter and have been a better spot and would have been a better experience. So just be careful with the recruiter spam. Um, I see a lot of folks that really get their hopes up. Um, and not that if you're ready, you're ready, right? Like, don't, don't let me say that you're not ready, but if you're ready for it is great. If you're not ready for it, it can be something that really distracts you and something that can really stall your forward momentum and your motivation. Like the hunt is so much about a managing like the first thing I asked you to do is learn how to manage your frustration. The hunt is all about that managing your frustration and those first couple big interviews almost never go your way and you don't want that to stall you out and make it so you can't continue on in the process. So be careful, um, know that the spam is off the charts right now. Um, and don't, don't over invest in interviewing at just one place, invest in yourself to be ready for multiple places that you'll be interview ready for.

Yeah. This is so true. My first rejection hurt real bad. It took a week to recover. Yeah. It's this is a really sensitive time. And so just be careful take care of yourself and Just keep investing in yourself, right? Like making sure right now you should be investing in understanding how to build full stack web applications and the reason why that investment is really important is Because in a month when we're really starting to think about the hunt You will stand out from all the candidates that can't build full stack web applications, which is a lot of folks that are looking for jobs that can't build a back-end CRUD API. You will be able to do that. You will have projects in your portfolio that prove that. And it's one of the puzzle pieces that's going to open a door for you. That's where you should be. You should be investing in that part of the process so you can open those few doors that would be closed to others that didn't. we'll have time to get the other pieces. We'll have time to get those interviews coming your way.

But like I said, we're all on the same roller coaster. We all get there at different speeds. Some folks really do have to jump right into the hunt. Like time is of the essence. They don't have time to wait until we get there. All of our past classes are on YouTube, right? Like if you're somebody that really needs a job tomorrow and the pace that we're going is not right for this moment, that's fine. Still join us for class when you can, But all the past classes on YouTube go go full speed ahead But for most folks that I think are going at the pace that we've been going we'll get you there give me another month Cool Already thank you for the questions I was getting a lot of, do you want to own your own business venture? No, please stop. I get that when I go to Ikea, when I go to Ikea, my wife and I always get approached by these, um, like people that are like, Oh, do you want to own your own business? So I was like, I'm like, I'm trying to get a couch, bro. Like, thanks, I guess. But no, I'm good. I don't know what it is about Ikea these days, but maybe out there. Leon versus the Odin project.

What do you pick? The Odin project, cause Leon's just a person. Now 100 devs, that's the bee's knees, I heard. All right, let's get into this. If you haven't already, please go ahead and check in. Exclamation point, check in. Please go ahead and do that. I'll give everybody a second. The link was in Discord. And also remember, check-in doesn't actually check you in. You still have to click the link to Twitter to like, retweet. It's something that whenever, like right now, we're, Blah and I met to start talking about how we're handling kind of the influx of like verifications and reference requests. And so that's something we're working on right now. One of the things that we look at before we say yes is, all right, where are you checking in? Where you're retreating?

Were you actually here? Have you submitted the projects, all that fun stuff? We'll be talking about that more next week. Um, and we'll be letting you know what that process looks like. So you can get the support that you need. Cool. All right. Remember health first health first, this part of the process is a lot, uh, every day and this is something that I'm trying now. What? What? No, that's wild. Sipsy with The 50 gifted subs, that is wild. Sipsy, thank you so much. I really appreciate that. Whoa, ballin', that's wild, thank you so much.

Yo, if you all just got a sub from Sipsy, can you throw some emotes into the chat, please? Let's show Sipsy some love. Thank you for the subs, I appreciate that. That's wild 50 bomb. Wow. I don't, I haven't seen a 50 bomb in a while at that. That's something that might be the most. There we go. Hey, Sipsy. I appreciate it. Thank you so much. Thank you for being here. I hope you're doing well. That's how we start off a stream as a wild. Yeah, and thank you everybody for the the primes and a lot of folks are resubbing and all that fun stuff I really appreciate it Probably next week.

I'm gonna show you what we brought in last year for RC It's it it's it it's it was substantial it really does help I appreciate everybody. Oh All right. Let's keep pushing here. I'm not gonna go back through the slides I just want to make sure that we're talking about putting your health first and there's something that I've been experimenting with Because I think I might want to make it a recommendation for students but whenever I give advice on what I think you should be doing in terms of like productivity or Learning to code I always trial myself. So here's something that I've been trying that has been really successful for me In the past week or so, especially as times been at a premium Every day, there are certain things that I'm asking you to do. I'm asking you to do Banky. I'm asking you to do your Code Wars. I'm asking you to network. I'm asking you to start on your 100 hours project unofficially, officially very soon. I'm asking you to do reading. I'm asking you to watch some videos. I'm asking you to comment to code. There's a lot of little things that I'm asking you to do. that I'm asking you to do pretty consistently, and it's a lot. What I'm trialing is listing out all the things I have to do every day and only doing like, let's say there's like, so let's say there's six things I have to do.

I'm only doing four of them. And every day that four out of six can change. I have to hit four out of six. Right. But the four out of six I have to do, I get to like pick and it enables me to, whatever I have the energy for that day to do, right? And to me, that's been a lot more freeing than trying to be super regimented with a set of six every day. Because sometimes I just don't, right? Like, sometimes I just don't have the energy to do all six. And what I find is if I go a day or worse, like two days without doing all six, I feel really bad. Um, like I feel really bad. And then that like negativity carries over into the next couple of days. Right. And so I've been experimenting with this, like four out of six idea. like it must be a minimum of four, but if you do five, it's okay, right? Minimum was like, yeah, around 70%.

And it's been like really successful, like way more successful than I've been in a very long time because I can say, you know what, I really don't want to network today or I really don't want to do X, right? And that having that like wiggle room Has been very very freeing And so I've been really productive using that method over the past couple of weeks And so I'm gonna keep trying it and then I think that maybe would be a recommendation to the core I don't know if it's 100% of recommendation yet But if as all this stuff is coming up make sure you're taking care of yourself make sure you're evaluating your needs giving yourself some room and grace to to get through these next few months that are asking a lot of you. Yeah. Yep. Yeah, it doesn't matter what you do all the time, it matters what you do most of the time. Yep, I really like that bit of advice. And I was watching a video the other day, it was like consistency is like doing something more often than not, right? And I was like, okay, that makes sense. But yeah, so as I keep doing it, I'll update, but do what you need to do to take care of yourself in these next couple of weeks, because it's really important that you get a lot of stuff done. Now, there's one thing that I think is really important to do every day, and that's pushing your code to GitHub so you get those delicious green squares. But if you miss a day, hello, it's Rufio had a wonderful stream on showing you how to backfill your GitHub history to get those delicious green squares should you need them. Cool, all right, I'm gonna skip everything here and we're just gonna get right back into the code here. So we went through the beginnings of CRUD last class, right? We went through the creating the reading and now we have to get into the updating and the deleting. So I'm gonna skip here to the updating and let's look at our wonderful to-do list here.

Uh, what, what Rufio Vod is that, uh, it's actually in the, um, learn follow along materials channel, um, but Rufio, if you're still here, if you messaged me that video, I'll put it in the follow-up to discord today. Yeah. Well, yeah, I'll make sure that it goes in the, in the follow-up from, uh, in today's class on discord. All righty, so here is our wonderful to-do list. And we have two things. We have the, we saw the creating, right? The creating was adding something to our to-do list. Like, I don't know, get oat milk, get fancy bread. What's something else we should do? So we should get pickles, I like pickles. All right, get pickles, right? So we create it, right? When we create it, we made a request to our server. The server had some code on it called our API. There was a Smurf listening for that create request.

When it heard the create request, it took the data out of the form that was sent along with the request. It sent it to our database and then told our browser to refresh. When we refresh, we made a get request, which made a request to our server. The Smurf heard that request. It went to the database, found all the documents, plugged those into our EJS, and then spit out HTML from the EJS, and then sent that as a response, right? So now we have two last things that I wanna walk through before we get to the glue, and that is updating and deleting. So should we do updating or deleting first? Let's do a poll. There we go. New poll started. U or D, update or delete? What do you want to do? I think delete's harder to spell than update, So I think that might be the Good lucky wishbone delete wrong. It's okay. I don't I can't spell it either I'll y'all woke up and chose the hard ones today That's not even close the updates coming in clutch first Not even close Already We're about 20 seconds left here.

You wanna thank you for the hydration. Cheers to you. Scam VR, hey, thank you for the posture check. Get in here. Be good. Here we go. And with 77% the update has it. All right. So chat, what is the update here in our to-do list? What can we, what, what, what can we update here? We are here for the challenge, exactly. Yeah, we can mark stuff as completed or not. So, if I click on get pickles, let's say I went to the store and I got my pickles, we can see that it is striked through, it's grayed out, and also like our to-dos like left went down. That's something separate that we'll see in a second. But the idea here is that we can update whether or not something has been marked completed or not So if I click on pickles again Um what will eventually I click on it.

There we go. When I click on it. We'll see that it is no longer grayed out All right, and the strikethrough is gone so I can complete something Like mark it completed like I did that to do and I can uncomplete it. I can mark it uncomplete and so So we have two different things that we're really doing here. We're completing and we are uncompleting. Like we're saying, hey, I didn't do that. Like let's bring it back. So if we were to start with what's actually happening here before we look at the code, let's see if we can talk through what's happening. What's the only thing that can hear me clicking on pickles? It's an odd question, But what's the only thing that can hear me clicking on pickles? Yeah our client-side Event listeners our smurfs are the only things that can hear us clicking on get pickles Remember our application is still two parts. We have a client-side And we have a server-side in fact, we can just do this because this is our client-side Client-side makes requests to our server. Beautiful. And so when I am clicking on pickles, I am actually clicking on something client-side. So the only thing that can hear that would be my client-side JavaScript.

Yep, the JavaScript that's running in our browser, right? So it doesn't matter what's happening over here just yet. We need to write the code that can listen for that click. And once that code hears the click, then we get to decide what to do with that click. We're probably gonna make a request to our server, but that's an extra step, right? So the very first thing that has to happen is that we need some javascript running client-side that can hear our clicks now once that javascript hears the click What are we going to do like what what what is what are we going to write that code to do? Yeah, some people are saying it yeah, we're gonna we're gonna make a fetch right We're going to make a fetch. And the cool thing about making fetch happen, right? The cool thing about making a fetch happen from the client side, right? Is that we get to describe what type of method we want it to be. So we could say, make a put. We could say, make a delete. And when I say put, I really mean what? When I say put, I really mean what? Update, exactly.

So I can say to my fetch. Hey make a put request, which is an update request Which is an update request anybody got like a Skillshare class on like handwriting Is there a Udemy course on like how to write I need it Alright, it's hard on the iPad. I wish it was the iPad. I really do. I wish it was the iPad at 8. So I did very well academically all throughout my schooling. The only time in elementary school I didn't make straight A's was third grade penmanship. They tried to give me a B for, for my handwriting and my mom tore them. I still feel bad for that teacher. I still do like now as an educator, I just, I feel bad, but my mom, my mom went in, how dare you keep my son off the honors roll, like, yeah, it was not pretty. That's all I'm going to say. Not pretty. But hey, my handwriting never got better anyway, so yeah, all right, so we can, we can click, we can click on pickles there, sometimes it's just too ridiculous. We can click on pickles. There is some client side JavaScript, right?

some client-side JavaScript that could hear that click. And when it hears that click, right? When it hears that click, it's going to send a request to our server, right? Right? Right? It's gonna send a request to our server. So that click, right? That click is heard by a smurf and that smurf says a yo make a fetch and Make that a put request. All right, so the smurf here is the click on pickles says a oh, all right makes the fetch Does make a fetch and that fetch is a put request, right? It's a put request to our server. So it leaves the client side and makes it to our server Now, on our server, there is some code that is running that can hear this request. What do we call that code that can hear the request? Yeah, we call that code our API, right? And over there, it can't be Smurfs. We can't have Smurfs on the client side and Smurfs on the back end.

So we got Smurfs on the client side. What do we have on the back end that's doing the listening? Gnomes, I'm feeling gremlins. Oh, we were using gremlins before. We'll stick with gremlins. Yeah, so we got the Smurf that heard the click on the client side, said, hey yo, sent a fetch request, right, sent a fetch request, right, that said, hey, make a put. There was a gremlin, right, there was a gremlin that was listening that heard that put request. So there was an app.put, right? And when it heard that put request, it did some stuff. So what are the things that's gonna happen server side, that's gonna enable all these things to happen? Like what do we need to do on the server for this put or this updating to happen? Yeah, eventually we need to update the database. That's good, right? So when we made this fetch, this put request, we probably sent along some data. We probably sent along the fact that we had clicked on pickles.

So pickles was in that set of data that came across with the request. And when our gremlin heard that request on the server side and it triggered the app.put, the first thing it's going to do is grab that pickle data out of the request. So it's gonna be like, all right, I have pickle now. Now that it has pickle, it's gonna go to the database and find the document that has pickle. Pickle. And when it finds the document that has pickle, what's it going to do? What's it going to do? It's going to change. Yeah, it's going to update that, it's gonna update that, oh, this needs to be refreshed, one second. It's gonna update that getPickles property of completed to true. We saw on Tuesday when we created a document, it starts off as false, right? When we create a document, it starts off as false. So, when we did the update, we found getpickles and we change completed from false to true, right? From false to true. And then once we have changed it from false to true, then what do we do?

Then what do we do? Yep, we respond. And for now it's all, hey, why don't you refresh? So we'll say, all right, we'll respond. And we'll say, you know what? You should probably refresh, right? You should probably refresh. And when the server refreshes, right? When the server refreshes, what type of request does it make? sorry, when the client-side refreshes, what type of request does it make? It makes a git request, exactly. A git request goes to our server, and this time, when the app.git runs, right, when the app.git runs, it goes back to the database, right it goes back to the database and this time this time when it looks at all the documents it's gonna notice that the pickle document is different the pickle document used to say false and now the pickle document says true that's gonna to change what happens, right? This is what's gonna change what happens when we try and pass all that data into our EJS. Now things are a little bit different and the EJS is gonna render a little bit different, right? Meaning that our pickles are now going to look crossed out because it gets that class that we saw before.

So I think the really, really hard thing here, especially for folks that are new to this CRUD and the way that we're really breaking it down, eventually we'll use things that make this, like not needing the page refreshes and things like that, but I still want you to see the request and really have them broken down, right? And so we had to do two requests to see this pickles get updated, right? We had to see two requests to see a change, sorry, in the DOM, right? We had to make a put request, which actually changed what happened in the database. And then we had to make a get request so that the user could actually see it in the DOM. If we had just triggered a put, our database would have changed, but the user would not have seen anything. Does that make sense? We're going to walk through it. We're going to see the code, but it's really two different things that are happening here for us to see this change. Cool. All right. Let's take a look at some of the code, right? Let's take a look at some of this code. And when we look at this code, we're gonna start off with our EJS. And I'm gonna take a look right here, because this is again, this is where it can be a little tricky, right?

This is eventually what will be in the DOM that we will be clicking, right? So this is my index.ejs. If you need the code, make sure you're in our Discord, exclamation point Discord. The starter code for today is in our Discord announcement before we went to class, right? If we look at it, we talked on Tuesday about how this page gets rendered out. Basically, we find all the documents in our database, right? Right now, we have one, two, three documents inside of our database. So when And this runs, this for loop will run three times, meaning that we will have three LIs that make it into the DOM eventually. Now, when we look at each LI, there is some conditional logic here that is really, really important. We are going to look at each document to see if it's completed property is true. If it's completed property is true, then the span that's gonna hold that text, like the get bread, the get pickles, the get oat milk, that will have a completed class, and that completed class is what makes it grayed out and the line through. However, if the completed class is not true, All right, the else will automagically run and the span that we put into the li will just be a regular degular span. There will not be any class added like we have here. This class completed is not there. So it's just a regular span.

Cool. So let's play a little game here. If just by looking at our database, we should be able to make some guesses about what's gonna happen in the DOM, okay? So when I look at this first document in my MongoDB database, I can see that getOatMilk has a completed property of false. What does that mean in terms of what we're gonna wind up seeing in the browser, in the DOM? What does that mean? What do we know about getOatMilk? Yep, it's going to be visible. It will not be gray and it will not be strikethrough. It's just going to be plain get oat milk. Cool. Same thing for get fancy bread, right? No style on it. Completed as false. That means it's going to be exactly a span with no class of completed, which means that it won't be gray and it won't be strikethrough, it'll just be normal text saying get fancy bread.

However, when we get down to get pickles, when we get down to get pickles, we can see that get pixel, not this again. If you're a real OG, you know where I was about to go. All right. Center, all right. when we get down to get pickles, right? When you get down to get pickles, we see that completed is actually set to true. So what do I know about how this is going to be visualized in the DOM? What's gonna happen? What are we gonna see? Yeah, we know that when the EJS renders this out, this get pickles is going to be striked through gray, right? It's gonna be very different looking than the other two. Beautiful. All right, so let's go ahead and see if we can follow the whole path of what is happening when we click on these bits of tech. So I'm going to start with get pickles being, I got to change this. It's going to get me in trouble.

Let's change this to get donuts. There we go. Oh, get coffee. I like get coffee better. Cool get coffee. There we go get coffee. All right Third grade Leon's coming out and we're from pickles the doughnuts. All right get coffee safe Easy. Oh shit. We all know what coffee is. Never mind. Can't do coffee either get pizza. There we go. Pizza safe. Get paid.

All right. There we go. Get pizza. All right. So we have get pizza here in our to-do list. I'm going to click. You ready? I should come Oh, I should come this way. I'm clicking. Boom, there you go. The click, the click happened, right? All right. Now, what did I just click on? Question for chat. What the heck did I just click on?

I clicked on a span that is inside of an LI. We can see that when we look at our EJS, right? There is this LI that was gonna be created and inside that LI was going to be a span. Did that span have a completed class when I first clicked on it? No, it did not have a completed class. It had just been added to the list. It did not. So it was this span right here. This span was the span I actually clicked on that had get pizza in it, right? It was get pizza, that's the span I actually clicked on. Now, if we look at the end here, this page has a script tag, a JavaScript file that is running. So when we see that, we know that there's something that might have been listening for that click on that span inside that LI. There might have been some client-side JavaScript listening for that click. So we have to start by looking at that JavaScript file. And since we are using Express, where would this JavaScript file probably exist?

If we had to like go find that JavaScript file, where is it going to exist because we're using Express? Gonna be in our public folder. Remember, all of our static files that are going to get served up, our CSS, our JavaScript, are all going to be in the public folder. So, we don't have to hand code a route for those files. We throw it in the public folder and Express magically handles all of it. Right? So, we can see in our public folder here, I have a JS folder, which is the path that says go into the JS folder. Remember, this means like go into the public, find the JS folder, and then find the main JS. So here we go, JS folder, main JS, beautiful. Here we have our client side JavaScript that's listening for these clicks, right? Listening for these clicks, right? And so we actually have three, what are these? We have three, what we have three, what chat. Yeah, we got three Smurfs, right? Three event listeners that are listening for those clicks.

Now, did we click on a delete button? No, that didn't work. Did we click on a span? Yes. And so this is very specific. We're saying find all of the spans inside of something that has the class of item. Let's go back and look at our EJS real quick. Span, all right, here we go. Span, oh, the LI has the class of item, right? So we are actually able to listen for clicks on the span that are inside the LI that had the class of item. And so here we grabbed all the spans inside of the LIs because there are at least three LIs that are on our page right now. And so we grab all those spans and we actually loop through them adding a Smurf. All right, we've looped through adding a Smurf, adding an event listener to each one of our spans that we can click on, right? This line right here, line nine through 11, goes through and adds a Smurf to each of our spans. All right, so that loop ran through three times, adding, right, adding those Smurfs, those event listeners that could listen for the clicks, clicks, clicks don't come for free, right?

There are some elements that have stuff built in, like forums can submit on their own, but when you're clicking on regular texts, there has to be something that's listening for that click. And so we set up our client side JavaScript to hear those clicks, right? All right, so now we can see that every single one of those spans, all three of them wind up with an event listener that runs a function called what? Every single one of our Smurfs is gonna follow a specific set of instructions. When they hear the click, what set of instructions is going to run? You gotta earn this click exactly. Yeah, all right. I wanted to see who's there. We have the mark complete, we can see, right? For every single one of those spans winds up with the event listener and that event listener is gonna call the mark complete function. So let's go ahead and take a look at this mark complete function and then we'll take our break. So mark complete function, Delete item, not what we're looking for. Mark complete. All right, here's what we are looking for. Boom.

Mark complete function. And we can see that it does what we said it was going to do. Line 37. What is line 37 doing here? It's really complicated. I'm gonna show you how to clean these up a little bit later. I hate using the child node, parent node stuff, but I want you to be exposed to it so you can at least see it once, and then we'll we'll move away from it what's it doing yeah it's grabbing the to-do right it's grabbing the text right it's grabbing that to-do so this is the thing that grabbed the text of get Pizza right is the thing that grabbed the text of get pizza. How did that get past? How did that get past the moderator? Rip. That's funny, alright. All right, we were able to go ahead and grab that text of get pizza, right? Get pizza out of the DOM, right? So item text is gonna hold get pizza. And then what am I gonna do with that get pizza text?

What am I gonna do with that get pizza text? I'm gonna send it with the request, exactly. If we look here, we can see that I'm going to make a fetch. That fetch is gonna be a put method, and I'm gonna send along that item text. that item text is right now the text of get pizza, right? When I clicked on get pizza, that client side JavaScript heard the click and it ran this function, it ran this mark complete function. The very first thing we did is grab the text. We need the text, right? Because we're gonna update something in our database. We need to know what we're going to update If we don't have the text that was clicked on if we don't have the get pizza There's nothing we can do on the server side, right? There's nothing that we can actually we just don't know what to update Right, we won't know What to update right so I am sending along This right here and I'll show it when we get back from break how it does it this right here grabbed Get pizza All right this grab get pizza now wherever I see item text. It's actually it pizza All right, it's get pizza so I am now going to put Going to make a put request to the server and I am going to send along the request body that now has get pizza. What will be the name I have to use if I want the text get pizza on my server side? What's the text I'm gonna have to use if I want get pizza on my server side? Exactly, it has a property here.

It has a property of item from JS. So when I look on my server side and I see request.body.item from JS, that's what is going to be holding GetPizza. And so this request leaves the client side and makes it all the way to our server where there is a server set up to hear this request. And if we look, here we go, app.put. We said it was a put request. We can look at our main.js that we made a fetch to mark complete. That's our route, right? That's our route. Mark complete is our route. So we made a request to mark complete. It's a put, so we're able to find app.put with the route of mark complete. And when the server, when the gremlins hear that request, right? When the server hears that put request, it's gonna do some stuff. And we already know that we have to go to the database and update something. So that's what we're gonna do.

We're gonna go to our connected database. We're gonna find the todos collection, and we're gonna update one thing. We're gonna update the first document that has a thing property of what? We're gonna update the first document that has a thing property of what? Get pizza. Exactly, remember we said, If we looked for request.body.item from JS, that was getPizza. So now we've gone to the database, we've looked in our todos collection, and we're gonna update a document that has a thing property of getPizza. And when we find it, we're gonna set the completed property to true. So it was false before, but now we found it and set completed to true. And if we look at our database and we refresh, we're going to see that getPizza now has a completed property of true, right, has completed property of true. Now, there's a lot of other crap here that we'll talk about when we come back from the break, but we set it to true, and then all we do is we respond saying what? We respond saying what? We've updated a value in our database, and we respond saying what? Pernick, it is not. Mark complete.

All right, so let's go back. Where is that response going to be sent though? Where is this response going to be sent though? Yeah, it's gonna be sent back to the client that made the request. Let's go back and look at our javascript. Our client-side javascript, right, will console.log hey mark complete and then what does our client-side javascript do? It refreshes the page and when it refreshes the page it triggers a what? It triggers a get, the get goes to the database. However, this time the get pizza document is different. So when it goes to build out the HTML, it now has to add that completed property, which is gonna make the get pizza look different. So I think a lot of folks, this is the trickiest one, right? because there's a quite a few steps that you have to be kind of up on, right? You have to understand that the client-side JavaScript is hearing the clicks. Then you have to understand that that makes a request to the server. You have to understand this server hears that request, updates something in the database and then responds back to the client.

And still at this point, nothing changes for the user. Nothing has changed for the user until what happens? Until it refreshes. When it refreshes, then the browser has permission to go back to the server, ask for all the updated documents, and now that the document has changed, our EJS and what we show the user can change, and that's when we see the results in the DOM, right? So when we come back from break, we'll run this back, so we'll see the whole process from beginning to end again, and I'll explain some of the little extra things that are in there, like the upserts or all that fun stuff. So let's go ahead and put five minutes on the clock here You're new around here. We like to Take a break at the top of every hour to stay healthy if you are able, please get up move around hydrate and I'm gonna run some ads so that folks don't have to sit through commercials when they come back to class And I will see you all in five minute All right, folks. Be well. See you soon Alrighty, so we did have a lovely raffle that was in the newsletter. Exclamation point newsletter, if you did not get the newsletter, it's where all the good stuff happens first. All the big announcements, all the cool sponsor stuff, all the raffles, all go to the newsletter first. So if you haven't, please subscribe to the newsletter. Exclamation point newsletter, it really does help out the community. All right, so we had a raffle for coffee chats. We're gonna do three more coffee chats.

For folks that went on Tuesday, you'll get a message from me today with these three and then we'll schedule them for next week. So we had 716 people that have already filled out the newsletter raffle, which is wild. So I'm gonna go ahead and run, I'm gonna pick three. Three, two, one, beautiful. Not a big deal. Mel and Eddie, hey, there we go. I'll get a message from you later today. Folks that want a Tuesday, I'll get a message from you later today too. And we'll set up those coffee chats. Let's go, congrats. All righty, let's keep pushing folks. So close, congrats everyone. All right, so let's see here. We were talking through the update or the put request and let's run through it one more time. There's a lot of little steps here, right?

There's a lot of little steps here, but what we have to realize is that there's kind of like two big pieces here. The updating is actually separate from what the user actually winds up seeing. Like the updating happens, but it's the refreshing that makes another request to go get the changes, right? And so it's not until the request go gets those changes that the user only actually sees something. And this is actually really hard for a lot of people to tackle because it looks like it happens instantly. It looks like we click and it immediately changes. And that's just because it's so fast. We sit on the shoulders of giants that have gone through the muck, building out IPTCP, building out the HTTP protocol, making it so that our broadband speeds can go to a server and back and it looks instant but we have to get good at at at breaking down step by step what is happening uh i actually just saw this there is um so i've been watching a lot of like youtube because it's one of the things i can do while i have little one and uh i'm like getting into like these like really like i don't know i just like i'm like in weird youtube holes right now, but I've been really into like cool, like computer sciencey stuff. And there's this one person, Bob Metcalf, they invented Ethernet. Like they're the person that invented Ethernet. Uh, and I, in Boston, especially in the tech scene, uh, they would always start off their talks with like, Hey, I'm Bob Metcalf. I invented Ethernet. They invented Ethernet. Can you imagine inventing Ethernet? So shout out Bob Metcalf for inventing Ethernet so that all of this stuff that can happen super fast, right?

Cool. So what we have to do is realize that this is actually two really big steps and a lot of other little things that are happening. So I'm going to refresh and uncomplete this. There we go. So it's uncompleted. And so right now, if we were to go and look, this is a tricky question. If I was to go and look at get pizza in the database, what do we expect that document to have? Like, what do we expect that document to have? What properties and values do we expect the get pizza document to have? Right, it's gonna have a thing of get pizza and a completed of false, exactly. And so let's go ahead and refresh the page. I didn't know that in different, kept it secret for 10 years, that's wild. All right, so if we look at get pizza, all right, we're doing good. It had a thing property of get pizza and a completed of false. We are in good shape.

Now, when we click get pizza again, boom, some big steps happen. Ooh, give me your suggestions. I'll keep an eye out for those. I want those, right? Two big steps happened, right? Two big steps happened. One step was updating the database and the other step was getting those changes so we could see what happened in the DOM, right? So the first step, the updating, right? It heard that click on get pizza. What's the only thing that could hear that click on our client side? What's the thing that heard that click on the client-side? Our Smurf, our event listener, and our client-side JavaScript, exactly. There is some client-side JavaScript that heard that click on get pizza. Let's take a look at it. Here it is.

We set up the click event, We grabbed all the spans that were inside those allies with the class of item and we gave every span the ability to run the mark complete function that means Get oat milk if I was to click on it would run the the mark complete function If I was to click on get fancy bread, it would run the mark complete function and before I clicked on it, so would get pizza, right? So when I clicked on get pizza, that mark complete function ran, right? That mark complete function ran. Now, if we look at that mark complete function, it's really doing one really important thing. It is grabbing the thing we just clicked on. this.parentNode, childNodes1, innerText. It's going to go and grab the thing we clicked on. So if we look, the thing we clicked on item was the span. The thing we clicked on was the span. Now we're gonna do some complicated stuff while we're here. Let's look at the EJS. We clicked on the span. What would be the parent node of the span? What would be the parent node of the span? Good.

Parent node of the span would be the LI. Beautiful. And then if we say, all right, the LI's the parent node, and we say, all right, parent node is the LI, child node one, what would be the child node of the LI? What would be the child node of the LI? The span, right? If we look back in this EJS, it's going to be the span. Now remember, there's only ever gonna be one span here. It could have been this one, or it could have been this one based on the conditional logic. Where we're at right now, right, right? Where we're at now, this span is the child node one, right? Now, why is it one instead of zero? Well, it's because all the stuff that takes up space winds up being a node. So there's things like bullet points, there could be carriage returns, there could be stuff that like gets in between what's actually being rendered in the DOM. So remember the DOM is really like this weird thing that's not directly just your HTML, right? It's like all these nodes that are being connected that we can go deeper into later.

But there's things that are just, the text is not zero, it is one, right? So we have the span, which we know is the child node of the LI. and then we're going to go ahead and grab its inner text. Right? We're going to go ahead and grab its inner text. So if we had clicked on get pizza, we went up to the parent node, which was the LI. Then we went into the child node one, which was the span itself, which would give us the thing we just clicked on. And then we got the text, which would give us get pizza. Right? Which would give us get pizza. So now we have the text of get pizza. What does this do again? It's the thing that we're clicking on, right? Cool. So this is the thing we're clicking on, and this changes context, but in this case the thing we're clicking on.

So now we have the text of get pizza, right? Jazzypants said, this is clearly not the best way to do it. Leon's getting ready for us for terrible legacy code. Yes. This shows up all the time and it's super confusing. So I like to show it at least once before we start doing things a little bit more optimally, right? Now we have So we have clicked on the span, we went up to the LI, we went back to the span, and we got the text out of it, right? We got the text out of it. So wherever I see item text, it's really what in this scenario? It's as though we kind of crossed this out, and item text is actually what? It's actually get pizza, yep, great. So wherever I see item text, it's actually get pizza. So it's as though item text here is the string get pizza. Now remember, we are trying to make a request to our server and here's us setting up that request. We are gonna make a fetch with, oops, sorry, this is delete item, not mark complete.

There we go. We are going to make a fetch, right? We're going to make a fetch that is a put. So we are making a put request to our server. and when we make that put request, along with that request comes the body. Remember, we saw on Tuesday that the request has all this information, it's wild. So much information goes along with that request, including the request body. Now, here we are hard coding the request body. We get to construct the body. Where else have we seen a request body come from? Where else have we seen a request body come from on Tuesday? Yeah, all right, Chad, I see you. The form, right? The form on Tuesday, when we made that post request, along with the request came all the info from the form. So when we make this put request, we're sending all this information along with the request, including this body that's an object, right?

It has an item from JS property and it has a value. So when I send this request, right? When I send this request to my server, the server can look at the request body and it can look at the item from JS property and it gets us what? what is the item from JS property in our request body actually holding? What is its value? It's get pizza. We're exactly, we're sending along get pizza. If we were to console log this, We would see get pizza coming along with that request body to the server, right? Now that request makes it all the way to our server. There is a gremlin that is ready to hear that request. It's a put request and it's on the mark complete route. We got the mark complete route because that was the name of the fetch. the fetch here and the route here have to match, right? Cool. Now, Gremlin hears the request, checks that it's a put, checks that it's the right route, and so we get to do all the stuff inside of this lovely put.

And we are gonna do a few things. we are going to go to our database. We are going to go to our to-dos collection. So let's go to our database. Let's find our to-dos collection. Here it is. All right, we went to our database. We found our to-dos collection and we are going to update one. So when we use update one, we have to find the document that we want to update, right? The cool thing for right now is that there was only one document that had the text of get pizza. So that's what I'm gonna look for. Request.body, that item from JS was actually get pizza. So I am going to look in my database, in my todos collection, I'm going to look for a document that has a thing property of get pizza. So let's go ahead and take a look. All right.

All right. Get oat milk, that thing, get oat milk, that's not it. Thing, get fancy bread, that's not it. Thing, get pizza, match. Winner, winner, winner, winner, chicken dinner, right? That is a match. So what do I do? Oh, I'm gonna update that document. And how am I gonna update it? well, I'm going to set its completed property to true. Going to set its completed property to true. And so, if we were to refresh our database here, we would see that our completed property goes from false to true, because we told it to do that, right? All right, we told it to do that, right? We told it to do that. Yep, these are methods built into MongoDB exactly.

All right, so we told it to set that completed property to true. Now, there are a couple other things that are here. And once again, please, hold on, I gotta get big for this. You know what, let's go to the boardroom. Please. All right, please. When you're looking at all this syntax, I do not need you to have this syntax memorized. That's not where you need to be right now, right? I don't need you to have all this the semicolons the the curly braces. I I don't Do I get a chair? Heck? Yeah, you get the big one. You get the you get the nice one See, I like to sit. I like to sit I can't draw on this screen, but I like to sit with my back to the wall. So hold on that one That one's mine.

I have to have my back to the wall. That's mine. And then indifferent, that's yours right there. Right there. Yep, there we go. So I don't need you to have all these curly braces, all of these parentheses. I don't have to, you don't have to have this memorized. It's a Lego brick. Know where you put your Legos away, right? It's really important. We've been a lot of you been training your whole lives for this. All right, mom dad parental guardian told you to put the Legos away Because they wanted you to get used to Knowing where to go and get your Legos at the end of the day I need you to know where to go and get this code Right so that you can use it I don't need you I don't need you to have this memorized, right? This is too much right now to have memorized. Eventually as you build your a hundred hours project and you're doing this crap over and over and over and over and over and over again, you'll get comfortable with it. You'll understand it.

You could probably do most of it from memory, but right now we just gotta know where we put the Legos away that we can go later on a week from now, grab the Legos that you need, right? grab the Legos that you need and put them to work. Now, inside of here are some things that even if you didn't know what the heck it was doing, you could have still used this totally fine. Right now we have a problem. And our problem is that our sort, sorry, our problem right now is that there technically could be two things called get pizza. There can be two things that have getPizza, right? And if there were two things that getPizza, what thing am I updating? And right now, right? Right now I am sorting in a specific order, top to bottom. You can sort top to bottom or bottom to top, right? And so just grab the first thing that had getPizza. Eventually, we're gonna use IDs. Eventually, we are going to use very specific things, right? But for now, right, for now, we are going to just say whatever one came first, that's the one we're gonna update. All right, that's it, cool.

Now, the upsert false, if you set this to true, Does anybody know what happens if you set this to true? Something really interesting can happen if you set this to true. Yeah, exactly. So if you set this to true, what can happen is that if you tried to update something that wasn't there, it would just create the document for you, which can save you a lot of headache, especially if your templating language is a little bit more stiff, right? If it's a little more stiff and always requires something to be there. And so the opposite would just literally create the document for you that had the thing, right? So if I tried to update get duck, right? There was no get duck in the database. So it would just literally create get duck with a completed property of true. So that exists. Do you have to know how to use it right now? No, but there are these types of things. Great, so we updated the document that had the thing property of get pizza. we changed it from false to true. At this moment, at this moment we have updated our database but would the user have seen any changes yet?

Would the user have seen any changes yet? Not yet. We haven't even responded back to our client side yet so let's do the response. We're gonna respond with some JSON that says marked complete. So that response gets sent back to our client side. Our lovely main.js is set up to actually handle that. It's gonna grab that response as data. We will console log to the client side that it was marked complete. And then our client side is gonna do the heavy lifting for us here and do what? And refresh, exactly. So it'll refresh, and when it refreshes, we are going to make a, what type of request? A get request. That get request will trigger the Gremlin that will go to our to-dos. It will find all the documents. However, one of our documents is different this time.

when we pass those documents, right? When we pass those documents into our EJS to be rendered, well, this time the EJS is going to render out this span with the completed class for GetPizza as opposed to this span, which means it's going to show up as the strikethrough line through when it responds with that updated HTML. It's going to respond with that updated HTML. And finally, finally, our users can see the strike through grade out get pizza. Questions while we are here. How do you decide whether to refresh from server or client side? So it depends on what you're trying to do. none of this is like actually 100% how we're going to do it in production right now. This is really demonstrating how requests and responses are being made. I really want you to understand that there's this, there's these requests and these responses, right? And as long as you know that there are requests and responses being made, then you can start getting deeper down the rabbit hole as to like, all right, How can I do this without having to force a refresh? How can I do this so that it happens a little bit more seamlessly? And we're gonna get there. We're gonna build up to it. But for right now, this is kind of just so that we can see, all right, we have a concept that the web isn't magic, that it builds off of these requests and responses.

We can trigger the request ourselves on the client side, and we can build our API to listen for those requests. It's really fancy event listeners. and once that clicks, you can do whatever the heck you want. You can eventually make it more optimal. You can eventually add more layers to this, but at its core, you're still doing that fundamental thing. And for most folks, they could leave tonight's class and build whatever the heck they wanted. They can now create, read, update, delete. Next week, we're gonna add the MVC to give us a little bit more structure and we'll be adding authentication so that you can have users log in. That's it. Welcome to the agency. Sit down, start building some code for real clients. Like that's it. That's all we gotta do, right? And so you're closer than you think, right? You're closer than you think.

And so we're gonna get there. We're gonna keep adding some more layers on top. We're gonna add some other stuff That makes our lives easier, but the building starts next week next week. You're ready to build. That's it All right, oh my god, did I just get hired all right Does a checkbox status update work the same way? It can. You could code a checkbox to do exactly this. In fact, like if you're like, I don't know, I'm dating myself. I've been on the web for a long time. Back in the day, the way we used to do checkboxes, and this wasn't like accessible at all, but they weren't actually checkbox. Well, they were, they could be check boxes, but we would put images in them. And so you would have an image of a check box. And then when you checked it, it would add a class that showed a different image. Right? And so we were actually just toggling images for it to be checked and unchecked.

Yeah, I'm glad I don't do that anymore. Will you add more help channels for backend, crud, et cetera? We already have a node.js channel for all your back-end needs. You should use that channel also For folks that are using the help channel One thing that's really difficult for folks to help you is if you're posting like lots of images some folks will like post tons of images of their like code and that doesn't help somebody that wants to help you right if they don't have like your repo or or adjust where they could copy and paste code is very difficult. So please, if you're using the help channels, try and limit the number of photos that you're sharing and instead share the actual code. GitHub Gist are really easy to create. Replits are really easy to create. The less friction you can give between somebody looking and playing with your code and helping you, the better, especially as we get deeper into this stuff. Not that you can't always use, that you can't use photos to show stuff, especially like HTML, CSS stuff. But as we get deeper and deeper into code, especially when we get into like data structures and algorithm, give somebody a replet or a gist or something like that, that'll be way more helpful. You can use Markdown and Discord, exactly, yeah. Yeah, cool. Yeah, if the photos don't kind of slow down in the help channels, we might have to turn off embeds because they're really taking up a lot of room and it's really hard for folks to get help when they share them. So try and emphasize code instead of photos. Yeah, Mr.

said, thank you. I try to help every day. I prefer they post repos. Exactly. Repos, gist, and replits are super easy to set up. Dreamin A, thank you for the hydration. Cheers to you. Markdown discord helps a lot. Yep. You can do shift enter for next line and backticks for code. Exactly. Could we cover those in office hours? That's a good idea to cover in office hours. Yeah. Just a really easy, just from within your GitHub, like you don't have to use the terminal or anything.

You can just like click the button to create a gist where you can, it's just like, it's like a paste bin basically. And then replit, you just create an account and you can put in your code. Like, I don't know if I should share this idea yet. I'll share it and then we'll move to the delete. For the agency I was thinking like through, I was like thinking through, I was like, all right, What if we did a hundred projects and each project got more expensive, right? Like for the agency, like I want everything to be in the open, how much money we're making, how much we're, what we're doing, like I want all the codes, maybe even be open source if we can get clients that would want to do that. And I was thinking like, all right, what if we start off at like a thousand dollars and then every project goes up by a thousand, so like the first person that comes to the agency pays a thousand dollars, we build their project. The next one's 2000, 3000, 4000 with the goal of a hundred projects. Right. Um, and so early on people jump in to do it cause they want to get it cheap. Right. Um, and then I was like, well, how much money is that? Right. I was like, I don't know what, like, what's the, like, is there a way to use like Gauss's summation to figure out how much money that would be? And I was like, I don't want to sit here and like, I don't want to sit here and like add it in a calculator.

So I just, I just, I just wrote. The code in a replica, right? I just threw in a replica with a simple loop and I was like, Oh, boom, got it. And that was it. Right. So like code helps day to day. Uh, which is pretty, pretty fun. Yeah, exactly. People are throwing gauss's summation in chat. Exactly. Sounds like a code words. Yeah, life just boils down to practical code wars. What else is it? Cool. All right.

So we did the updating. I just wanna make sure we don't have any other questions about updating and then we'll do deleting. So updating, any other questions before we move on? No questions, too simple here. Next week, we're getting into the real meat, folks. MVC authentication, you definitely don't want to miss next week. Is there a difference between put and patch? Sort of, I guess, but in this case, not really. There's like different things that it should technically be doing, but nobody really uses it correctly. I wouldn't worry about it for right now. All right, nobody uses it correctly, exactly, indifferent. All right, cool. Let's go ahead and do this delete. Maybe we take our break a little earlier. Let's take our break a little early.

We'll take our break a little early, that way folks can get a mental relaxation to then come back and do the deleting. We'll finish the deleting and we'll, if we have a little bit of time, maybe we'll do a little bit of just kind of office hours type stuff until we're out of time. Let's go ahead and take our five minutes on the clock. When we come back, we'll finish up our crud. We'll be done in the crud, let's go. We'll be done in the crud, let's go. Indifference said, put syntactically means that we need a whole object to update and patches just to update a part of the object, but no one ever cares. Yeah, exactly. Yeah. AKA Code Weenie stuff. Alrighty. And gods, you're asked the, with the two minutes added to the timer, we're getting one of those luxurious seven minutes, folks. Woo! A seven minute break. Let's go.

Man, these would be fire. All right. All right, let's go ahead and we're gonna do the delay tang. And when we're done our delay tang, we are going to look at the glue, how all the little pieces come together so this actually runs. And then if we have some time, we'll do some questions. All right. All right. The funny thing is like the song is not true. That's not what I was playing, right? Yeah, no, it's always stream beats by Harris Heller, I don't know where that comes from All right Let's go and take a look at this deleting then we'll take a look at the glue All right So here we have this get pizza and I want to eat it. So I'm gonna click the trash can Yoink gone now What we learned from the updating is that deleting actually happened across two steps, right? What two requests were made to the server to get the result we see on the screen right now? Yeah, exactly. It was a delete request to the server and then a refresh that triggered a get, beautiful. All right, let's go and take a look at this.

What's the only thing that could have heard the click on the trashcan? Yeah, our client side smurf, our event listener is the only thing that could have heard the click on the trash can. So let's start there. We can see in the EJS that there is this span of trash can here. and the interesting thing is we're gonna have to go from this trash can the thing that's being clicked to the text that was inside the span right so we're gonna have to use that pattern that we just saw with the update to go from the trash can up to the Li and into the child to get the text that exists there right Cool, so let's go ahead and take a look at the client-side JavaScript. Remember, this EJS spits out HTML and the HTML link to this client-side JavaScript. If we look at the client-side JavaScript, we have selected all of the trash cans. We're using that font awesome for the trash cans, and that's the class that came with the trash cans. We went along here and added, right? an event listener to each of the trash cans called delete item. So every trash cans now has this function that we're gonna call called delete item. So when I clicked on the trash can, it ran the delete item function. And once again, we clicked on the trash can, right? We clicked on the trash can. So this was the trash can that we clicked on.

We went up to the parent node, which was what chat? What was the parent node? The LI exactly went up to the LI from the span to the LI. And we looked at the first child node, which had the span that had text inside of it. So we grabbed that span, we grabbed that text. That text was get pizza. There was text in there. And as though we crossed this out, we just had get pizza, right? Get pizza was the text. Once again, we are going to make a fetch to our server. That fetch is going to have the route of delete item, and it's going to send along that request body that has the item text of get pizza, right? It's going to have that item text of get pizza. And so that request leaves our client side, goes to the server where there is a gremlin ready to hear that request. All right, app.delete, app.delete. The route matches the route from our fetch, so we are good.

We are going to go to our database. We are going to find the to do's collection and we are going to delete one. So. Hello. So beautiful. No querying language. You want to delete something? Delete one. You want to update something? Update one. What? That easy? Let's go. Let's go. Leon, somebody had a good question.

Leon, why don't we have to put the full URL there? Why is it the route for each of these fetch requests? Why don't I need like the full route? Like I don't need a URL here. Why don't I need a URL here? Yeah, because we're already running on our local server. Right, like it's already running on our server. So we're already at the root. Like if we look, we're already at localhost 2121, right? And so we're already there. So we're already there and everything else is just a route off of that. When we put things on Heroku, things might be a little bit different as we get a little bit deeper into it, but we're already connected. Yep, Express is doing the heavy lifting for us. The Express knows to like, all right, take that and then append the stuff after it. All right, so back to the API here.

We went to our database. We went to our todos collection. We're going to delete one. Well, what one are we going to delete? The thing that has the request body items from JS, which is in this case, get pizza. So we are gonna go to our database. We are going to find something that has the thing property of get pizza. And when we find it, we are going to delete it. Brilliant. It's beautiful. Don't have to learn anything else. We just say we want to have happen and it does it. That's amazing. All right. So delete one.

Let's go to our database. Let's find the one that has the thing property of get pizza. I found it. And so once I found it, I'm going to delete it. So if I refresh, yeet, gone. There's only two documents left. Only two documents left. The other one was gone. Yeah, it's gone. It's gone. It's deleted. Beautiful. Uberfly said, I really can't believe I understand this. Let's go. So hold on 10 second warning.

10 second warning for Uber Flystorm getting this 10 seconds. 54321 let's go. Hey, does this work? Let's go. Let's go. Y'all right here understanding how to build full stack, full stack web applications. You know how to make, create, read, update, delete requests. Next week, you're gonna know how to organize it using MVC. You're gonna add authentication. Let's go. Let's go, let's go, let's go. Come on now. So many of us started off the beginning of the year not even knowing what JavaScript was. And you all are out here building full stack web applications. Let's go, look at you, look at you.

All right, so we deleted it and then we just responded back to our client side, right? We're out here delay-taying, right? We're out here delay-taying and we just responded, hey, the to-do is delete it. our code knew what to do. It said, all right, let me console log that we deleted. And then we refreshed. And when we refreshed, we made a get request to the server. Our server was set up to hear that get request. It heard that get request. It went to the database. It went to our todos collection. It found all the documents, but this time there was one less there used to be three now there is two from three to two right and so our array just had the two documents we passed those two documents into our ejs and so now when the ejs renders and it sent back that html it was missing the document that was deleted it. Beautiful. Keshia, you're looking at it. You're looking at it.

This is the template for you. Boom. If you need the code, it's in our Discord. All right. So that's the deleting. So now we've gone ahead and we've been able to do get, post, puts, deletes. There's actually something pretty interesting here. Let's make sure there's any questions And then I want to show one other thing before we talk about the glue Should we use this file as a template? Hell yeah, this is your start We're gonna add we're gonna have a better template next week once we get to the MVC So you can definitely use this this weekend, please this weekend build something Don't ever just watch a tutorial and then go home and be like that was great Leon was on one tonight, but it was a good class. Like, I feel great. And then like, you don't do anything until Tuesday. No, take this code and build something. Make the to-do list, do something different. Tweak it, make it a little bit better. Make it your own.

Don't make it a to-do list, make it a done list. I don't know. Take this and make it your own in some way, shape or form, right? Please, at this point in program, don't just consume, you have to do, right? You have to do. At this point, you should feel a little bit more comfortable with the creating, the reading, the updating, deleting. Now is the time for you to actually learn by getting in the code, playing with it, breaking it. When you get lost or stuck, jump on Discord, jump into those voice channels, get help. Don't suffer in silence. Get the help you need, build it, break it, play with it. What if I break it, clone down a fresh copy? I can't tell you how many times I've utterly destroyed my code and just pulled down the most recent push to GitHub. That's it. I've done it hundreds of times throughout my career where I've just gotten so lost in the sauce where I'm just like, fuck it. and pull down the last place I was at.

Yeah, you can roll back and all that fun stuff, but back in my, you know what I used to, what I did for the longest time was I would just, I would delete the whole repo. I would just delete everything and just clone down the repo again. Like I didn't care, I'd just delete everything, right? There was a point where I was like keeping zip files on my computer before I knew how to use GitHub. and I would just like, I would get lost and I would just delete the whole folder and unzip it again and be right back where I started. Cool. All right. Questions about the delete? Ooh, Ants asked a really good question. Is it best practice to delete from the database and most CRUD apps or keep the data and just remove from the client side render? We could all do that right now. That's actually really fun. A really cool like extension to the to-do list would be to build a to-do list that never deletes the data from the database. Think about that, right? If we're looking at our Mongo database, right now we're setting like this complete it to false or true, there could be like a, another thing that we're keeping track of that's like deleted and set it to false or true.

Right. So yeah. In different settings, soft leads are popular patterns. So what I could do is I could just set the deleted property to true. And when I render out my like get request, I only show documents where the deleted property is false. So all of the to-dos stay in my MongoDB database, but the users are only seeing the ones that they haven't deleted yet, but I get to keep all the data. So that's an interesting pattern. But you all could do that right now just by extending this idea of completed to being deleted as well, or like a deleted one. Kind of freaky. Welcome to how all the social media apps that you use work when you delete stuff. It's not actually deleted I'm sure like the EU regulations are gonna start changing some of this. But yeah, a lot of stuff is like not ever actually deleted That blew my that like if you think snapchat is like deleting photos. I Don't know y'all have some trouble And then the act of deleting something too, right? Like we talked about this, I think at the very first, like how the internet class works, like when you delete something like in a lot of computer systems, when you delete something, you're not actually deleting anything. You're just marking that space in memory to be overwritten.

So even if it was deleted, that data is still sitting there until the space gets overwritten with new data, right? Like that's going a little deeper, but like on like phones and stuff, if you ever had people that were able to recover, delete stuff off of like hard drives and stuff like that, it's because the space was just marked for to be overwritten, but the content was never actually like deleted, yeah. Yeah. All right, so I think that'd be a really cool extension, right? I think that'd be a really cool, like if you're going to try and like build on top of this, make this app your own, if you want something cool to try, try deleting it so the user doesn't see things that were deleted, but you keep the data, right? That's cool. Like, that'd be fun to try. Um, but do something with this app this weekend, please, please do something with this app as well. Cool. All right. So we walked through the creating, the reading, updating, deleting. There was one other interesting thing here. And that other interesting thing was that there's actually a third type of click that we were listening for. And that third type of click was if we were clicking on something that had the completed class, right? So if we're updating these things, So if we're looking here and I click on get fancy bread, that changed it to the strikeout, but then I can change it back to the, I can change it back to without the strikethrough, right?

And I can do the uncomplete, right? And so those were actually two different clicks. One click was marking it complete. the other click was marking it on the complete. And so what I have is another click event that's listening for like one that's listening for things that are not completed and one that's listening for things that are completed. And they're slightly different requests, right? One's going to mark something complete, which means I have to change something on the database to true. And then mark uncomplete is very similar, but when this request makes it to the server, the server is gonna mark it as, let's see, false, right? So we can see that markComplete sets it to true and markUncomplete sets it to false. So we actually have two different puts here in this application, one to handle the completing and one to handle the uncompleting. So just in case you were kind of a little confused about what that was, that's just gonna help you to see those two different routes. All right, so if you look at the slides, there's a quite more bit here in the slides that I really recommend that you look through. In the slides, there's a breakdown of each of the key steps. So if you were trying to set up this project, here's some of the steps you might follow if you're going to do it from scratch. Connecting your database, you would kind of just copy and paste this lovely set of code here.

And what you'll notice is that in my code, I don't have the Mongo connection string just like chilling in there. So if you look at my code, you can see that I'm using my environment variables. We've done this in a past class and members of the stream team have walked through this as well. And so I'm actually storing my connection, my DB string in my ENV file, right? So that when I push this to GitHub, my Mongo connection string doesn't get pushed up to GitHub. And I have my MongoDB set so that it only works with my IP address. So even if you did have my connection string, you wouldn't be able to write to this database at the moment, right? Cool. So we do have like me using the ENV files. And so I'm just gonna walk through, I'm just gonna show the other slides that are here, and then I'm gonna walk through everything. So if you wanna use the ENV files, there's some slides on it. The database with the ENV file is here. Setting up the server stuff is here. Creating public files. Like all the little steps are here, like piece by piece, should you need them.

But let's look through this code base. Yeah, and MindWolf that we linked to has walked through kind of all this step-by-step and we've linked to it in the Discord as well. So of course we're using Express, we're setting up apps so that we can use Express. We're using, the main way we're gonna talk to MongoDB, we're just using this Mongo client. Eventually we might use things like Mongoose to talk to MongoDB. be we're setting up our port at 21, 21, 21, 21, 21, right? And I am setting up that I'm gonna use my ENV files, right? I'm gonna use my ENV files. And so the reason why I use ENV files, like I said, is I don't wanna put my connection to my Mongo database on GitHub. Let's say I whitelisted all my IP addresses, then anyone could start making changes to the database. So I put that in my ENV file and having this line on line 5 is what enables me to use the ENV file Otherwise what you see here is not something that you would have memorized you would just copy and paste this So it's not like something that like you would pull out your your brain and be like, oh I gotta do this This is no this is a Lego brick It's a Lego brick that you want to connect to a database. You grab this Lego brick and you put it at the top of your file. But the best thing is you don't need to even know where to go to get those Lego bricks anymore because you could just start with this template. You could just start with this template and everything is already here for you. The only thing that you would need to do would be to do an npm install.

right, would be to do an npm install and then to have an env file, an env file that lists the MongoDB string. You have those two things, you can just use this template and off to the runs there. Somebody submitted a PR on this actual repo, so I'll approve that, that walks through step by step how to do all those things, but once you have it, you're connected to your database. We have this lovely variable called DB, which is the actual database that we're connected to. So wherever you see DB inside of your API here, you know you're connected to the actual database. Cool. We're using EJS. This is a lot of stuff we've already covered in the past, so I'm just gonna go into it quickly. We're using EJS as our templating language. We have one of my favorite lines of code, which just means that we are using our public folder to hold all of our static files, like our CSS and our JavaScript files. And then we have our lovely code that helps us kind of do what body parser used to do, where we're able to look at the requests that are coming through and pull the data out of those requests. That's how we're able to get the text out of the requests so that we can and update our database or delete stuff from our database. Cool. And that's kind of the big stuff here. No other really big glue except for the app.listen.

We've talked about in the past how we have this line here. So it can be using Rport or eventually if you put your stuff on Heroku, you're gonna use the environment variables. When we get through MVC next week, the glue changes a little bit. So I'm not gonna spend too much. I don't want to spend too much time right now going through all this glue Because it is gonna change a little bit next week. And so once we get through MVC next week We'll spend like a whole class talking about the end Env files and the connection strings and all that fun stuff because it does change a little bit And so I don't want you to stress about this right now Just copy and paste it for now and know that it'll change a little bit next week and then we'll go deeper questions while we're here. Let's do a slide out real quick. We got some time. So I will not be holding office hours on Sunday, but mine will be doing office hours on Sunday. So let's go ahead and do a little bit of just like mini office hours for me. If you got questions, I got some answers for you. Let me go ahead and just open up a slider real quick. One second. When I go, I'm gonna go while we're here doing this. What is office hours, office hours is just a time for folks to ask questions.

And so, um, normally I do office hours every Sunday. It's probably gonna be like another one or two Sundays before I'm back doing office hours. I'm probably going to do, um, like discord call or something else like that and replacing my office hours for the next two weeks. And then, uh, once, once I, um, I'm done with that, I'm going to get through like the next week or two, they'll come back and we'll have our normal office hours. So no need to worry. They will come back eventually. I know a lot of people really get a lot of value out of them and really liked them. So we'll do that soon. I was not logged into it. One second, folks. I definitely recommend sticking around for the office hours a little bit. A lot of folks ask a lot of really good questions that I knew you'd want to know in terms of the cohort. So let's do it. Get a new one here. Class.

Cool. All right, so we got a new Slido I'm going to post it into our chat a few times here, so you can grab it if you need to. Boom. There we go. All right. So, if you got some questions, I will be able to answer them there. Go ahead and bring your questions if you have them. Also take a look at chat. All right. Will office hours be held in 100 devs agency? We'll eventually leave cat space. We'll come back to earth and we'll be doing it in the 100 devs agency space. We need channel points for Leon to shave his beard. I shaved it. It went down.

and it's way smaller than it was before. I wasn't taking care of it. EJS is the frustrating part. Can I jump straight to studying React? Templating languages are hugely popular and different as saying, especially in like Ruby PHP. Yeah, you definitely wanna make sure you understand the basics of templating languages. The thing for me is like, there's some things that I have a heart, like I've been doing it for so long, there's sometimes things I really try to like check my like beginner biases, but for me, EJS just makes so much sense. It's just HTML that you can plug stuff into, right? And so when you're trying to build really basic stuff, You only need to know how to do like the open and close and then like the open and close with the equal sign And then you could do whatever the heck you want like to me that just makes a lot of sense like templating languages Just like they just work right you don't have to like learn this whole other toolchain all this extra stuff Like you don't have to spend like a month learning something else to just like get text on the screen Okay Um, so for me, like I, I, it's, it's one of the hard ones where it's like coupling languages, just enable you to do stuff pretty quickly. Now I love react. Like it helps me do a lot of stuff. Like, but when you're just starting out, just get it to work, you know? Hey, never got a chance to say thank you. I program helped me get a job at Amazon as a software developer, engineer, Under in 10k with a 10k sign on I'm in my second month came back to support the channel a Seawalker, I appreciate that. Thank you so much for swinging by See Walker.

Can you send me? I'll grab your name, but send me a DM send me a DM on discord I would love to talk to you and see how things are going Congrats, that's huge And grab your name here before I forget it Yes. I'm a DM. Um, we got to, we really need to start like a, an employee resource group at Amazon. Cause there's a lot of a hundred devs folks there now, we got to like get you all together to hang out or something. That'd be fun. Quite a few. Leon, are there any productivity apps that you use that you would recommend? I live through my Google Calendar, Notion, and probably Forest if I'm gonna use a Pomodoro timer. And that's about it. Pen and paper occasionally. I don't really like any other Things than that at the moment. I try to like narrow it down to like one place to dump my brain one place to like Actively work and like one thing to keep me keep me focused so right now notion is like my brain dump pen and paper is like my like active work and Calendar is like what I have to do every day. So my entire day gets put in Google Calendar. If it's not in my Google Calendar, I'm not showing up, I'm not gonna be there.

And so that helps me just like, my brain doesn't work unless it's in the Google Calendar. Is it Notion a paid application? No, you can use Notion for free for like a very, very long time. It's only if you're storing and like a lot of really big stuff in there. So don't like store like videos or like images in there. Otherwise it's free. Like I have like a couple of them that I don't pay for and I have a lot of stuff in them. Some other things too that people use are like, get book is becoming pretty popular because you can just like use markdown inside of it. There are a bunch of other tools and it's all that like does doesn't make you think, right? I like Notion because I have a lot of templates that just make it so that I can just type and it organizes stuff for me, yeah. When is the office in CSGO opening? I gotta get somebody else to work on it. The person that was working on it disappeared, but I'll add that to the weekends musings because I really wanna get it up to. But yeah, I just gotta find somebody else to work on it. We have everything working except for the 64 people.

Like everything I want it to do, it does. It just doesn't have all 64 on it. Is there any free domain hosting? Every once in a while you'll find something, but typically not. Sometimes you can get your first year free, but you can just use like Netlify and like use whatever your project is, .netlify.com. I just recommend that in the beginning, just throw it on Netlify's domain. Do you think we should be able to solve these coding challenges from Fang companies with what we know now? Absolutely not. No, we haven't done data structures and algorithms yet. Also like Fang really shouldn't be the goal. Like if that's your goal, sure, go for it. But there are so many other amazing companies that will pay you really well, treat you really well and you'll have a way easier time getting into than Fang. Fang is because some YouTuber sold you on a dream, which is okay to have those dreams, but you could probably be supporting a really wonderful lifestyle and then work up to Fang. One of my students I was just literally talking to, I'm going to get them on either, we're building out the agency site and there's gonna be a section for like students, um, but one of my past students, they took their first offer was 60 K. Um, and then the 60 K turned into a hundred K, uh, after their three month trial period, and then they jumped up to, I think it was one 40.

It was like a bigger jump than I was expecting. It was 140 and then the company opened a new office in San Francisco and they asked if they wanted to be one of the first engineers to work out of the SF office and they say yes and they got bumped up to 220 and this is in under three years. This is like two and a half years starting at 60 to 220 at the same company. So there are tons of companies like that and they had really great mentorship. Like they got trained really well. They were able to work on really exciting projects. So like There's so much opportunity out there that you don't have to go for these like super hard Leetcoding your brains out type of companies to get the things that you probably want if you're looking at those types of companies Um Um, I feel a lack of, this is another question coming from the Slido. I feel a lack of inspiration or creativity when thinking of projects or just coding in general, lost in ideas for the a hundred hours project. Any advice, uh, the advice for your a hundred hours project is to make something that you wish exists or something that like something that you want or something that you hate and want to fix, right? So I always say like build something that you want and div Kerr one of our mods always said or you can like build something That fixes something that you hate, right? And so one of those two things are gonna be the best probably project you could build because you'll be passionate to build it If there's like nothing that you are passionate about right? Like it could be something simple to like it could be like you love to play CS go and you have a really hard time finding other folks that want to play CS go with you So you create a site that helps gamers connect, right? Beautiful idea for $100 project, brings your passions into it. You'll probably sink a hundred hours into it. Some people think it has to be like these really big grand ideas.

It just doesn't have to be. It's up to you what you want it to be. If you really, really are stuck and you really have no idea what you want to build, just build something that you think a lot of companies might hire for. Build a e-commerce experience. So many e-commerce companies are hiring to build something that's like an e-commerce shopping cart type experience, right? So if you really can't come up with an idea of something that you love or something that you hate, build something that a lot of companies would find useful. And also when we start applying, when we get into the hunt, you're gonna be building like a lot of mini projects for those companies. Like we're gonna have 60 companies that we network our way into. Our top 10, you're gonna build simple node apps for those companies. So if you are applying to Shopify you're gonna build a simple music player if you're if you sorry Spotify if you're applying the Shopify you'd build a simple shopping cart if you are applying to At a last thing you build a bug tracker like Jira, right? like we're gonna build a lot of mini projects for the top tier companies we want to work at Or not top tier with the companies that we want to work at the most Will you be posting the answers to Banky? Someone actually started a GitHub repo with all the questions and is crowdsourcing the answers. So Curtis Bernard is the person, Curtis did it. So I, you can just look at my Twitter feed and I retweeted it. I will link to it in discord next week.

I actually don't want to link to it. Like I like, it's a catch 22. I love that people are doing it. I still think you should write your own answers. So if you're not going to write your own answers, you don't have the time, that's okay. Look at my Twitter, but I still think you're going to get the most value out of writing your own answers. It just does something different in your brain that actually helps you remember And remember in your own words so that you interview better, but if you don't have the time just look at my Twitter and You'll be able to find it Can we do Pokemon cards soon when we do office hours, I'll do the next batch and I have somebody helping me now with kind of like admin stuff the agency's gonna make its well technically just made our first hire because there's a lot of little admin stuff that I just legitimately, I keep getting backlogged on. And so I'm gonna have somebody helping me with all of like a lot of these like smaller stuff in the background, yeah. So we should see a lot of that stuff go out soon. How do I make my projects look pretty? Use templates. What's the best way to make or place to find good UI? Templates on top of templates, you can use any UI stuff bootstrap on like the old schooler way tailwind. Anything that you think could just help with your UI material, whatever you want when we get when we get to react, it'll you'll open up a few more UI things that could be helpful, but in the beginning just use that plain old HTML CSS template. Yeah, or a really good UI library like indifferent saying yeah.

What's your favorite Pokemon ever, Bulbasaur? I want to incorporate scrape data from other sites into a project. Do you recommend any libraries like Axios? Yeah, I mean, Axios is amazing. We'll use it towards the end of program. Depends on how you're scraping data, beautiful soup, stuff like that can help with scraping. It depends on what you're trying to do. Can you tell us more about the 100 devs agency? Yeah, as we get a little bit further along, the idea is that I want to have an agency that helps support the program in two ways. One, I eventually would like people to be able to be paid for working on code. Like, I think it's great that so many folks want to give up their nights and weekends for free. Um, but if there was a way to get paid while you learned, I think that's the ultimate, um, equitable way for folks to learn. Uh, the cool thing about RC is that we raise money. Um, we raise money as a nonprofit to pay our students and there's a lot of upsides and downsides to it. I would love if there was a for-profit entity of a hundred devs that helped with stipends for folks that need it and also gave real world experience to developers that just completed the program.

I think a lot of bootcamps are really good at like zero to learning how to code. I don't think a lot of folks have really cracked like I've been coding for a year. How do I become like a senior developer? And I think that could be the agency pathway. I think like once you've graduated bootcamp, you could be in an agency surrounded by some really amazing developers, uh, indifference that are you looking for hires? Yes. Uh, so you'd be surrounded by really good developers like indifferent that help you really grow as an engineer and takes you from that, I know what I'm doing to becoming a really good senior developer and then the money that's coming in could help fund the boot camp experience for folks that need it. Um, also it's pretty expensive to run all this stuff, like, like really expensive. And so there needs to be some way to do it sustainably. And I don't like taking money from students. So I'm never going to take money from students to help like run stuff. And so the agency I think is a little bit more of a sustainable way, um, to do the things that I want to do and make sure that I'm just not eating significant costs, yeah. Yep. Cool. Let's see.

What is all the job verification stuff that you've been mentioning recently? Yeah. So when you apply to jobs, you need to like verify what you've been doing. And so all of you are part of an agency that has a training program. You were all in the training program. And when you start applying to jobs, some jobs are going to ask, Hey, can someone verify that you were in this training program? And so a lot of my time right now is, is verifying that yes, they were in the program and then probably hopping on a call and talking about the things that they were able to build, learn and do. And so last cohort, that was pretty easy. It was a couple hundred people, right? So I can make that work. But now we're looking at a couple thousand, especially with the catch-up crew coming behind. And so that's the reason why I needed to bring on a hire because managing thousands of requests coming in verifying that everyone has been part of the program and like responding in a timely manner just won't happen so Blah and I are working on a really good process for that so that when you do need those references or you do need those verifications there's a system that you can follow for it and then on the back end we're gonna have somebody that's helping me to like set up my calendar and make sure all that stuff's happening and going through it. Yeah. Yep. And a lot of people are saying like, Leon, I'd volunteer to do it.

I love that people want to volunteer. There's so many other things I'm going to ask you to volunteer for, but something that important, like that, that's to be equitably hired, right? Like people should be getting paid for that. Yeah. Uh, Atlas pug said, what's the best way for us to volunteer at times? We want to help a hundred devs and different handed out the park. Yep answer questions in the in the in the discord So many folks come and say they want to help that's the best way to help Jump on discord answer people's questions when they get stuck jump in voice channels to help people when they're stuck Sometimes that's not sexy enough for folks, but that's what it that's what we need. That's what that's the thing that could help the most A potential employer asked me how many years of experience I have, what would you say to them if I only touched code for the first time at the beginning of this cohort? So it depends. If you really have never coded anything, then you would say, you could say one year. You could, you would never just say, I only have one year. What you would say is I've been involved in technology for a number of years, first doing X, Y, and Z. But way back in the day, I started off with MySpace. I would always customize my MySpace page. I customized my Neopet page.

So I've been writing code since I was little, but I've been taking it very, very seriously since the pandemic. I wanted to switch careers. So I wanted to switch my focus into web development. And so I really went deep into building really robust applications. I went really deep into building applications I thought would help other people. Here are the projects that I've built. Here are the clients I've worked with. So you would never actually just say one year because then you get dismissed, but you say, oh no, I've been in technology for this long. You highlight the things that you've done. A lot of folks have gotten clients. A lot of folks, if you did the homework, I asked you to build something that helps others. Well, guess what? You can bring that up in interviews, right? And so if you did all the things that we've been asking you to do, So once we get to the hunt, we spend a lot of time on how to talk about your experience. That's like the biggest part of the hunt is like actually talking in a way that gets you past the gatekeepers and to the folks that are gonna actually care about your code quality.

Will there be a next cohort? Who knows? We might get so busy with the agency, But there's always the catch-up crew you can always join right now get the support you need work through the classes and get up to Joining us live Hey, Jason Carr, that's amazing. Congrats Asking For the homework with the PR a trouble linking my repo with 100 does repo Can you go over how to link it? Just fork my code and make your changes. That's it. If you're having trouble with that, I've actually linked on Discord in the follow along materials channel, members of the stream team doing exactly that step by step. In dire need of work by the end of August, Unhoused soon recruiters are all over me many from agencies that provide 1099 contract. Should I hold out? I don't know if you need to work work, especially 1099. That's not a you're not committing to Long-term work get the 1099 get paid and when you find a a better position or a more long-term position take it Yeah, don't ever turn down 1099 work, especially if you need monies Also, I'm not one of these, like, I have no loyalty to companies. I really, I don't give a fuck at the end of the day. They don't care about me. I don't care about them and I'm there to make money. I'm not there because I like them.

I'm not there because I love what they do. I'm there because they pay me money and I show up to do the thing that I'm there to do and The moment somebody else wants to pay me more for the same thing. I'm doing Deuces because when the pandemic hit or when the layoffs happened recently, they didn't give a fuck about us. So now Mm-hmm. Nope I'm there to get mine and Everyone understands that they just don't want to hear it So when you're interviewing, you never say any of this stuff. You never say any of this stuff when you're interviewing. It's all about how passionate you are, how much it aligns with your values, out of whatever, blah, blah, blah. Nah, but everybody knows what's up. We just can't say it. Get the bag. Is there a way to look at a website server-side code using DevTools? No. Some servers will expose APIs or you can look at their API documentation, but a lot of time you don't want to expose what's happening on your server because that can lead to some really bad security stuff. So a lot of times they'll open up, they'll expose certain API endpoints that you can use, but anything else is typically not available for you to see. You can see different stacks and technologies they're using sometimes based off of how they respond to stuff.

Yeah. How long are your coffee chats? I believe right now they're set to 15 minutes. Normally I do 10 to 15 minute coffee chats. I must not have phrased it right. I repo with a project. How I submit my repo to yours, I forked it. You gotta submit a pull request. Yep, submit a pull request. Oh yeah, the difference that so much so that some APIs will remove info headers to prevent letting you know the framework they're using. Is there a way to download an entire website like on GitHub to study? You can download like the full client side code for a lot of sites, but you won't be able to download like backends unless they have it on GitHub or something like that already. Can you go through the end part of update and delete? You went through fast. What happens once the client side hears the request?

How does it update the EJS. So once the change has been made on the database, we send the response back to the client telling it to refresh the page. When it refreshes the page, that makes a new request to the server where it gets all the data out of the database, plugs that into the EJS, and then that EJS spits spits out HTML that is sent back to the client. So if you missed that part on Tuesday, you definitely wanna go back and watch Tuesday's class and look at our get requests, because the get requests are how we get data out of the database, plug it into the EJS, EJS spits out HTML, and then we respond with that HTML. Hi Lynn, do you have any offer negotiation tips in your previous cohort? Yeah, we had a whole class on negotiation, like legitimately a whole class on negotiation. Here's the big heavy hitters about negotiating an offer. When you get an offer, you should say, thank you so much for this offer. This company is the company I wanna work at. I'm so excited to join the company. I wanna be here for the long haul. So that means that this decision affects me and my family for the next five years. Like this is where I want to be. This is where I want to grow. I'm over the moon.

Can you give me the week to talk through with my family, my loved ones? And I will get back to you on Friday. Just making sure I could read through all the details and really know what the next five years of my life are going to look like. I'm super excited to join your company. They say yes. You immediately follow up with an email saying super excited. Really looking forward to talking to you on Friday at 8 a.m. I'll send you a note leading up to it or a calendar invite. That gives you some time to think about the offer. And when you get an offer, the only thing you want them to think about is how excited you are to join the company, but also knowing that it's a big decision for you. Because if it wasn't a big decision, then maybe you don't really wanna work there. So emphasizing it's a big decision for you that affects your family, But you want them at the end of the day to be believing a hundred percent that you're joining that company Like you you need to get that across that like you're super excited. You love the offer This is where you want to be you want to hammer that in so that's what they're thinking about then When you go back and you say hey, I'm super excited to join this company, right? I had a chat with my loved ones. We're super excited.

Like I'm all on board to join this company. However, the starting salary is a little lower than what I'm seeing in the market. Is there any wiggle room on the starting salary? And that's it, that's all you say, right? Is there any wiggle room on the starting salary? You don't make any demands, you don't give a price, you just say wiggle room. And the reason why you say wiggle room is because if they really don't have any wiggle room, they'll say, no, I'm sorry, we gave you our best offer. And then you get to make a decision as to whether or not that's the price for you. It's a phrasing that doesn't make people scared that you don't wanna work there, right? And then it gives them the ability to say, actually, we don't have any wiggle room. And then they say, no, or they say, actually, we do have some wiggle room, how about X, right? And then they'll give you the counter and then you can take that if you want. If you have multiple offers, you can say, I really want to join this company. This is the company I want to be at. However, I have an offer from another company that is higher than the offer that you have made to me.

Is there any way that you can get me close to X? And X is like 20K more than what they offered you, right? Is there any way you can get me close to this other number? And the phrasing of is there any way you can get me close to that number is really important because it gives them the freedom To say, you know what we couldn't get you all the way there But we can get you here without triggering that reflex in their brain that says Oh, they don't want to work here. No. No, no, is there any way you can get me close? This is the company I want to work at can you get me close to this other number that I'm seeing right now? Right, and so if you use these very specific phrasings the world is yours You will get better offers. You will get better counters. And we have whole classes just on this stuff. I've been doing this for 10 years. I know how to have these conversations. I know how to help folks negotiate better offers. And so if you're excited about this type of stuff, boy, do we have some classes coming up for you. When we get into authentication, will each user have their own database or collection?

No, we will have a user's collection with all of our users in it. And then we tie users to other data and other collections based off of their IDs. How much does hiring slow down after the first year? How much does hiring slow down after the first year? I'm not sure what you mean by that. Like after your first year on the job, like how often do you jump? A lot of folks will jump every two years in the beginning, two to three, depending on if you really like your company, because it's just often easier to get more money by jumping. Oh, you mean like at the end of the year? Like, uh, so there's like a gap, like December, very few offers go out in December. Um, yeah, very few offers go out in December and then it picks up around like middle January where like they kind of make up lost time. Yeah. Yeah. It's very rare to see, like, that's why it's Huntober. Like Huntober is really important because like that's where a lot of the last kind of offers the year start being formulated into November. And then December, everyone's on holiday.

Yeah. So it's hard in December. I we've had, we've had cohorts of RC that graduate in December and did. Okay. Um, but it's definitely like, that's kind of a hard month. Um, how do you phrase your expertise to convince an interviewer that you had the same experience as a two year candidate? Uh, I mean, the years don't matter. Nobody really cares about the number of years. If a company really cares with the number of years, they just, they're just, they're shooting themselves in the foot. They're not going to get good candidates. What they're using is years as a proxy for how much you might know. Right. So if you can show them that you have paid clients, you can show them that you've volunteered for nonprofits. If you can show them that you have built stuff that helps others. If you can show them that you've built a hundred hours project if you can show them the agency projects that we work on at The end of cohort if you can show them all the little things that you've built You have a really good get help.

You have a really good LinkedIn a good resume a good portfolio You have all these things you can just go like I don't have to tell you I can show you Everything that I'm able to do. That's how you do it And then the actual interview process is how we beat out people You can give me you can give me all day long people that have more experience But don't know how to interview and I will run circles around them Because knowing how to interview is a whole skill in of itself And if you know how to interview and you know how to do it Well, you will constantly beat folks that have way more experience than you and so that's why we spent a big portion of the end of program on like how to interview how to network your way into positions and how to to stand out in the job search. Is end of program time being extended since we had a long break? Yeah, a little bit. We're like a month over, so month over where I want it to be because I'm gonna make up some time. We're gonna chop some stuff that I did last cohort that we're gonna do this cohort because it wasn't really, it was more like sponsored stuff. So I'm chopping out some of the sponsored stuff to make up the time. So we're kind of like a month off by the end, but we're at class 45 of around 60, yeah. Cool. When will the agency type be live? Very soon. We have it on staging, we just gotta push it. Code War is really helpful for me to learn JavaScript syntax. Are there similar ways to learn EJS Express? Building and breaking the code that I just shared with you.

So the code I just shared with you tonight, build it, break it, play with it. You can add those pieces to your Anki deck. At this point, you need to be building. That's where you're gonna learn the most. Build, break, troubleshoot errors, get lost in it. Like that's how you learn backend, similar to how you would do like Code Wars S stuff. Eventually, it should be project-based more going forward. Cool. All right, let's see. We're almost at our time right now, so let's go ahead and do a raid. Let's go get those sweet, sweet channel points. Ooh, Juicebox Hero is on. So let's go ahead and raid Juicebox Hero.