Introduction

In this video, I show you how to add user authentication to your Node application. If you ever wanted to have users be able to log in with an email and password, this is the video for you. It's a three classes combined into one video that are part of our free 30-week software engineering bootcamp. If you ever wanted to learn how to code but didn't feel like shelling out thousands and thousands of dollars to do it this is the place for you join 40,000 plus of us on discord and hundreds of folks that have already gotten a job let's get into it a good night we're gonna add some authentication to our full stack node applications and then we are starting project week over a Thousand-plus people signed up to work on projects tonight. That's wild. That's wild. Let's go What's going on? Everybody get in here get in here rascal to at the raid a thank you at the raid Hope you're doing well. Welcome in everybody Got a paid client yesterday tie a congrats. It's huge Can we still sign up? Absolutely for folks that didn't sign up last week You're going to join Remo2 on the fifth floor and up, and that'll be your playground for tonight and Thursday. All righty, folks. Welcome in, welcome in. EA Sports, it's in the game. Exactly.

All right. People are hearing a little bit of an echo they're saying. Hold on, let me see if I can fix that real quick. One second. it. All right, sorry about that. There's a little bit of a background noise that I turned off. We should be good going forward. Already folks. Welcome back. Hope you all are doing well. Good to see you all. Lots to get into tonight off project night, but it come together to build something amazing. Let's do that. All right, let's go ahead and Turn off your second stream of Leon.

That's where you're here in the double. Let's go. All right So tonight we're gonna talk a little bit about 100 devs. We're gonna talk about what's due for hack for hunt over. I'm said October we're gonna talk through what's due today, which is the professional checklist We're gonna look through our application with off and we're gonna jump right into building this night. So, let's jump right into it. As always, I'd like to give folks a few seconds to get in here. If you got some questions, got some answers. Give me some questions, folks. Give folks a chance to get in here. I know they're running late, coming in from work. The confirmation email to me by surprise, yeah. With the checklist, I made it so that it lets you know that you submitted it, that way there's no confusion as to whether or not you submitted stuff for Huntober. Is the MongoDB thing addressed? What do you mean?

Should catch up folks bother with HUNTTOBER, so like I said, HUNTTOBER is going to be a focus group of folks that are ready to get a job right then and there. So for HUNTTOBER, we're still going to have some regular streams, but that daily group that meets with the sole purpose of getting a job is only going to be a fit if you got done all the work that we need, right? Like going into the hunt, you need to be prepared. You need to have the things that I'm asking for done. So it's not me asking for these things or setting up deadlines just for the fun of it. Is these are the things that I've seen time and time again that have helped folks get jobs So for everyone that has that stuff ready locked and loaded ready to go We're going to focus all throughout october to get the jobs. That's that's the goal Uh, do we need to submit the checklist if we already did it before yes Uh, so you're submitting everything these all are new submissions Uh, it should be all your most updated stuff and that way I have it all in one place Yep, you definitely, if you want, if you want to be part of Huntober, you have to submit everything, uh, in the, the, the, the submissions that I'm sharing going forward. Yeah. No matter if you already turned stuff in. Cause I have been asking for it since April. But anyway, so please get it in the submission will be open tonight. It'll be open for this. I'll keep it open for the full week. Just as a little extra for folks that are still trying to catch up for it. We'll leave it open until next Tuesday and we'll talk all about that stuff as we kind and get into it.

All right, a lot of folks in here. Can we do daily code wars even if we're not part of Hunttober? Absolutely, so I think we talked a lot about this on Monday, but just to kind of echo it again, nothing changes if you don't participate in Hunttober, right? So we have a lot of folks that are part of the catch-up crew that obviously probably won't participate in the hunt tober That's absolutely okay. You're you're only missing like that focus group of Individuals that are going through that that portion of program together And what it is is it's daily data structures and algorithm stuff and also just trying to get Listening to what folks are going through on the hunt how the job hunt search is going how the interviews are going, things that they should be doing when they're negotiating salaries, all that stuff. The beautiful thing is all that core material is already on my YouTube, so everything's already on YouTube. We're gonna have so many classes that cover all that stuff. It's really just a group of folks coming together to focus on those things for a month, but catch up crew and anyone that's not participating, totally fine. You're gonna have a wonderful experience as well. Cool. Struggling with the creative part of starting projects, especially the 100 hours, any suggestions? Pick something that you're passionate about, something that you hate that you want to fix, or better yet, something that aligns with what you've done in the past, right? Right? Aligns with what we've done in the past, like what you've done in the past. So if you were a teacher, build something that would help you in the classroom.

If you were a barista build something that would help you in the coffee shop, right? Like make sure that you're doing something that like links your past to your present That's an easy way to kind of think of a hundred hours project Hmm If we submit the checklist months ago, we aren't getting confirmation No, because you have to resubmit the checklist you submitted before it doesn't count. I want it now That way I have all of it in one spot Yeah Sorry for spamming this kind of anxious when filling out my hit list with mostly junior entry level the requirements are still very intimidating How much do we ignore when it comes to years of experience at other technologies you ignore every single thing? That's on that job requirement because you are not clicking apply You are not clicking apply. You are talking to a real living breathing human being that works on that team or at that company and you are getting your resume in front of them and when they ask about your requirements, you can massage the details to make it fit what they're looking for. Those requirements, especially for entry-level roles, are wishlist but what most companies are looking for is someone that is going to be able to join day one, learn very quickly, get up to speed on their technology, their stack, right? Work well with others on their team. Wait a minute that sounds an awful lot like what we're doing tonight. New code base, stuff we you might've never seen before, new team, we have to come together to build something? Hmm, hmm, oh, interesting, very, very interesting. So yeah, the entry-level requirements really don't matter because you're never clicking apply, right? You're talking to a real human that can qualify those things for you, right? When you're talking to a living, breathing human being, and you say, hey, this is my, this is what I've built. Here are the things I've built. Here are the clients I've worked with.

Here are the open source contributions that I have. Here's all the code that I've committed over the last month, right? When you're talking to a human, those requirements kind of really don't matter as much because they can see your aptitude to build, to learn, to grow quickly. And that's what they care about most of the time. Now, are there some companies that are curmudgeons about having certain years of certain experiences because they're stuck in the dark ages? Absolutely. You chalk it up, you move on. It's a numbers game. It is always a numbers game, right? You are always going to run into opportunities that seem cool, that seem like something you'd want to do, but for some reason and there's a barrier, you move on. One of 60, right? One of 60, one of 60. Yeah, cool. All right. Including the tech stack, yes, if it's a company that you'd want to work at.

Most folks will leave 100 devs and work at a company that uses technologies that we did not cover here together. I think out of the last cohort, a lot of them went to kind of JavaScript focused places, but a lot of them use different tools on the back end. They use different languages entirely. You are not being hired for your years of experience with a specific technology. You're being hired for your ability to pick up new things very quickly, to learn, to grow, and to be molded into the engineer that they need at that company. DB says I'm working in Java. Exactly. I can't tell you the like out of the hundreds of students I've helped get jobs. It's never what they've learned. It's more about those other skills that you can apply on the job. That's why this isn't really a coding bootcamp. This We got a lot to get into tonight. We're gonna spend quite a bit of time just talking through once again, just hot tuba real quick, just the things that are due quickly. And then we're gonna spend a chunk of time looking at that MVC authentication code, looking at the app together, seeing the bits and bobs that are working and then moving into project night. You're gonna play, you're gonna first understand all that code together, start building on it together.

Then we're gonna come back Thursday and we're gonna go deeper into the authentication stuff together once you've had a chance to get your hands on it, to play with it, to start adding to it. We'll have another lecture on Thursday that goes deeper with authentication and then the projects will be due that next Tuesday. Cool. All right, checking in. If you haven't checked in, please go ahead. You can do exclamation point check-in. That'll give you the link for tonight. It's the tweet. Go ahead, like it, retweet it, helps folks find us. also lets me know that you are here. If you want to participate in Huntober, if you eventually want the verification once you graduate, we need to know that you were actually here for class. Don't put me in the awkward situation where you say, hey, Leon, can I get that certificate? And I go and I check and you haven't checked in, you haven't submitted at homework, there's nothing I can really do for you at that point. Right? So please let me know that you're here, check in and make sure you're submitting things on time.

Well Does check-in apply to catch-up crew? Absolutely because catch-up crew hopefully at the end once the completion as well Alrighty We talked a bit about on Monday. I see a lot of folks asking about. Oh, no, the Heroku's have ended Yep, Heroku. Unfortunately is sunsetting their free plan I've been talking to a lot of other companies recently that might be good replacements. I'll have my like official recommendation next week I've been playing a lot with different services over the past weekend I'll continue that this week and continue to talk with people and then we'll have something that we'll be using going forward Lots of great options is just trying to figure out what the best for us would be Doug welcome. All right Thank you for checking in, uh, submitting your work. I, uh, I want your checklist. I need your checklist. Go ahead and submit your checklist for me. Uh, here's the form to fill it out. And it's also in the follow along with materials channel on discord. Uh, please triple check everything, uh, before you submit, uh, please don't submit stuff that's incomplete or fake. There's always a few of you that like, just try to like submit like random stuff. It just makes my life more difficult and it won't help you because I'm immediately just gonna throw you in the sin bin And you'll never be seen again from my eyes So, please triple check before you submit don't submit incomplete or fake stuff just to try and you know slide on through It's not gonna work.

I see you See you. See you. Cool. And if you're like, hey, I see some people asking about like the stuff that's on the checklist. We had a full class that walked through everything that was due on the checklist. I'll definitely go back to that previous class on YouTube. It has all the details for every single thing. Yeah. Sin bin is like, um, in, you know, like how in hockey they put you like in, like they put you in like that, like glass box when you've done something wrong. Well, in rugby, the sin bin is like, you go stand underneath the, like you go stand in the tri area, like at the end of the field, it's the penalty box. Yeah. So Sinbin is the penalty box in rugby. That's where that comes from. All right. Thank you for submitting your checklist.

You don't have to do it right now. I'm going to leave it open for the week to give folks a chance to get in. I want you to take your time submitting everything. Don't rush to do it. Take your time, submit it, and you'll be good. A lot of people reached out to me about this upcoming Sunday being Labor Day weekend, which is a holiday here in the States, so a lot of folks asked me to push the back-end review, so we're going to push it to the, we're going to push it to the other, the next Sunday. So not this Sunday the following Sunday. We're going to do a full back-end review Everything from the beginning of node all the way through this authentication stuff that we're working on It's just gonna be it's gonna be a full review So if you're still kind of catching up on the back end or there are things that still kind of don't make sense Boom, this day is for you. Come on through. We'll make sure that we spend a lot of time. Make sure everyone feels super comfortable cool Big thank you to everyone, it was great talking to everyone yesterday, just want to lean into this idea. I'm not going to review everything we talked about, but I'm just going to say lean into this idea that we're community taught, you have an amazing support community that's here that wants to support you, that wants to see you win. Tonight we prove that once again, working in projects, I'm going to ask you to be the amazing community that you already are, work well with each other, support each other, Help each other learn as the paramount thing that we do today When we get into our groups You're gonna spend some time in the beginning just to get to know each other You're gonna spend some time getting to see where folks are at in their coding journey We may have some folks that are still part of the ketchup crew that haven't gotten all the way up to where you currently are In program that's okay as you start working on these projects do things that are accessible to everyone So if somebody's really good at the HTML and CSS because they're on class 5 guess what that's what they're working on If you're caught up, guess what you're working on the authentication stuff, right? So make sure that you meet each other where you're at be kind if you can't be kind don't show up It's not about showing out. It's not about actually like getting a project fully complete like I don't care I want you to work together.

I want you to build something cool and I want you to have fun doing it You can't be kind, you can't do that, you can't work well with others, you want to be a flexasaurus, don't show up. Just close your eyes, you can just go away, it's okay, you can come back next week, it's fine, just close your eyes. Alright, also a very gentle reminder for those that are like Leon, I can't slow down. I got to go fast. I need to be a flexesaurus on the go. That's okay. Every single thing you need is on YouTube already. All of our classes that we're going to eventually get to later on in this cohort, they're already on YouTube. If I have to miss a class, you have a metric crap ton of work that has to get done and you have a community that's here to support you to get that work done, right? So all the classes already on YouTube and you already have your marching orders for the next two months, a hundred plus hours of work that you have to be getting done right now. You're a hundred hours project. Plus all these other things, if for whatever reason we're not live, it's not a, Oh no, we're not live. It is this is a chance to get the work I need to get done. The work that I've been trying to get done since April for some of us. Right.

That's the chance we need. So. Lean into community tonight, lean into supporting each other, leaning to helping each other, working through things that don't make sense is the goal for tonight. When we come back Thursday, we'll dive deeper into the awful, see it more. We'll understand it more, break it down more. I want you to play. I want you to practice something very, very, very fundamental. You are all very soon going to leave 100 devs and join a new company. It will be a brand new code base that you have never seen before. It will be a team that you have never worked with. Practice that tonight. Practice being kind. Practice getting to know other folks in an engineering context. Practice getting up to speed with a code base that might be unfamiliar to you. because in a few weeks, that's what you're going to be trying to do in real life.

So I would be doing you a disservice if we didn't start practicing those things. A lot of what we do going forward is just trying to get you ready so that when you get placed into a job, you don't have the shock, right? You're ready to go. You're ready to roll. And so that's what we need to lean in tonight. We're practicing that, we're working through those ideas, and we'll do it together. For Huntober, I really want to help you with stuff like resume, portfolio, job outreach, interview skills. I want to help you get verification letters or completion letters for things that you might need. For folks that make their way through Huntober, I want to be a reference for you. It's going to be a monumental amount of work. It's never been done before at this scale, but I try my really hardest to get it all done and to do it well. But there'll be a lot of growing pains. We're going to work through it together to get all of this stuff to do all these wonderful things I I need some stuff from you right and and I really ain't here to play about these things I need these things done because if you have these things done you can go about the job search in The correct way right in the way that I've helped literally hundreds of other people get jobs is through this pathway And so it's not because I want these things done. It's not because I want you to hit these deadlines It's because these are the things that I have seen over my 10 years of doing this that have actually moved the needle, right? Right move the needle right to get stuff done Fox said there's nobody at my table because we're here on twitch chat first.

We haven't gone to Remo yet So, please if you want these cool things if you want to be added to the special channels You want the interview feedback you want the stuff that that'll help and faster. These are the things that I need Um, some folks have been asking, like, what is the verification look like? So I am going to read you a letter. I read this yesterday, but I'm going to read it again just for, cause we have more folks here. Um, here's a letter that I, I shared with someone, uh, that started their job yesterday. Uh, so this is a letter I shared, um, to whom it may concern, please accept this letter as confirmation that person has participated in the a hundred dev software engineering Academy. The 100 Devs Academy is a 30 week training program that helps individuals learn in-demand software engineering skills and helps our digital agency develop top engineering talent. During their time in 100 Devs, this person grew their engineering skillset and even became a contributor to a popular blank framework. It was a JavaScript framework. This person shows great promise and your company is lucky to have them. If you have any questions or require information, Please give me a call at this number my direct line or send me an email Right. This is what I want to give to you or folks to get all this stuff together that Kind of meet the the requirements that we're putting here Because I want to be able to put that little extra line in there I want to be able to say like this is the thing that they did right? This is the client that they got this the Organization they volunteered with here's the free software where a community that they contribute it to, right? These are all things that I wanna be able to put in these letters. I gotta figure out how to automate this, but these are the things that I want to do.

I can't do it if you don't do these things, right? Like I can't give that to you or do that if you didn't do these things, right? So that's why I'm asking for a lot of this. This is why I want a focus group of folks, right? All right, you have to do these things or else I can't, I can't do something like that. You know? Cool. Alrighty. So in here to play, here's a list of things I need done. Please check in for every class, right? Check in for every class. Make sure you're turning the homework in on time going forward, right? It'll always be due a week later. Make sure you're doing your networking. One coffee chat a week, three connections every week.

If you don't remember what those things are, we'll go back to our previous class on networking and I talk through it in detail. Use your sheet. I'm gonna eventually ask for your sheet to see that you're adding these coffee chats, you're adding these connections. Make sure you're doing your coding challenges every day. I'm starting to give you like specific coding challenges I want you to do to get us ready for the interview process, to get us ready for Hunttober where we'll be doing our daily data structures and algorithms together, and you're pushing those challenges every day, right? You're pushing those challenges every day. Recruiters love those green squares. They do, they do, they do. You're also working on your banky, right? And here are the coding challenges I want you working on this week. So last week I asked you to do strings. Guess what? I'm asking you to do strings again, this week, five new code wars that are all string problems. and please redo the five you did last week. Make sure you can recall them.

Make sure you can do them. Make sure that the methods and things that you used, you can actually use still, right? Cool. I was doing five a day? No. Just one a day, one a day, daily, yeah. Cool. What coup should we do? It's up to you if you want to do eight, seven, sixes. It's up to you to where you're at. I think a lot of folks should start slowly. If you're not somebody that's been doing a daily habit of code wars yet, don't rush in and start trying to do sixes. Do all the eights, right? Build it up. Feel like I'm mastering the strings.

Hey, that's awesome. I do feel like I can manipulate strings now. That's great. That's awesome. Cool. Alrighty. Checklist is due today. Please, even if you submitted it months and months ago, please make sure you submit it today because I need it fresh. I need it in this form so that I can have everything in one place. I'm still giving you an extra week to get it done for folks that are like trying to, well, it should already be done. I'm giving you a week to submit it, let's say. So please get it in so that I have it. Team project will be due next Tuesday. We're gonna start it tonight. We're gonna have a little bit of stream.

We're gonna start the project tonight, and then we'll have a little bit of stream on Thursday, more time to work on the project, and that should be enough. However, the remo will stay open all week long. The remo will stay open from now until next Tuesday. And so if your team wants to meet up on the remote to continue working on stuff that you can absolutely do so We don't have enough voice channels on discord to facilitate thousands of you working in groups of six so if you need to Remo will stay open all week. So your group can go back and meet up. You also have your each other's discord names So if you need to ping each other or whatever you can do that Uh, we'll talk about the team stuff in a bit when we get to the end of tonight, uh, like what happens if folks don't show up or things like that, we'll, we'll walk through it. Or if you don't have a team, we'll walk through that as well. Uh, hit list due September 13th, 60 companies that you can actually apply to 60. You can actually apply to that's a, it's a, it's a big undertaking. Don't wait. Don't delay by today. Right? All right, cool. Client signature, approved PR from an actual open source project or volunteering for a grassroots org. Do the 27th, mm-hmm.

So, I mean, most of you already have this done, but if you don't, you have a little bit more time to get it done. Is that companies or job posting? company, 60 companies, 60 companies, companies, 60 companies. Cool. And we'll have a class on, on HitList. It's going to be your first pass, right? This will be your first pass on the HitList. We'll have a class where we kind of walk through refining it. What if they're not hiring? Then they don't count. Has to be 60 companies that actually are hiring. Yep. 60 companies that are actually hiring. You start local because locale like being local is an advantage and then if you max out all the local companies Which is very rare for a lot of folks, then you can start adding remote opportunities things like that Mm-hmm And we'll go we'll have a deeper class on like how to actually refine the hit list But the idea is to have 60 companies That have open positions engineering positions that you could actually apply to. Cool.

All right. And if you want to watch, I have three full classes on YouTube, three full classes where I just did hit list, right? So if you're like, I don't know what to do for this hit list, boom, go watch those three classes, three full classes on how to do the hit list. And then we're going to do it together soon as well. Jobs that you can actually apply to, right? So if they're like mad old, that doesn't count. Yeah. Cool. If I have a pull request from another 100 devs member, does it count? No. Like an actual open source project that's building a real product. There's a lot of these like repos that are like, get your first open source contract. No, no, I want somebody when you're in an interview, right? When you're in an interview, you say, I contributed to this project and they can see that it's a real meaningful project. Like these things aren't just requirements to be requirements, they're things that are gonna help you get the job.

So don't try and like curtail them or wiggle out of them. It does nothing for you, does nothing for me, right? It's not because I want these things, because these things are gonna help you get the job. So it should be something that's difficult, right? It should be something that that's like hard to achieve, like getting a client, getting a volunteer organization to work with you. Like those are difficult. Social PR is like something that you have to find a team, an organization, a project that you can work with, right? That you can submit something and actually get the request approved, yeah. Your hundred hours project, a beautiful MVP is due on the 27th, right? So we have authentication this week. We're going to be building your project this week. And then next week we're building an Instagram clone together. Quick pound. Yeah, we need to work on that name. So we'll be building quick pound next week Then we'll be introducing a little bit of react and with those skills combined.

You can build a beautiful MVP, right? so the Look like so Instagram, right? So insta like we have to think of a different word for insta So like quick is it not a different word for insta and I can't say like I can't say like quick kilo Cuz then then I'm really getting in trouble Right. So like, what's, what's, what's another, like, synonym for Keyless. I'm going to say like Graham, like, well, it's already Graham. So pound, like it's a pound. So we're going to go quick pound will be the name of the application, right? There's not really many other options we can go with here. Right. Cool. Anyway. So we'll be building that. So by the time we get through projects this week, we get through the Instagram clone together. By the time we add react to the mix, you will have a full repertoire of skills to build out your hundred hours project, but you don't have to wait, right? You don't have to wait.

You already could start building today. Don't delay your hundred hours project. Start with your views. Twenty one, twenty one, twenty one, twenty one, twenty one. Oh, wrong one. I was running through the six with my woes. I was running through the six with my woes. I was running through the six with my close, right? Start with your views, folks. Start with your views, right? Like you all can do the HTML, the CSS, the JavaScript, right? Start there and make those look beautiful and then add your backend if you need to, all right? All right. Then by October 11th, your 100 hours project should be done, done-zo. Also, premium apps should be donezo.

Don't worry about the premium apps yet, we're gonna have a whole class on that. But these are the things that are due. And these are the things I have seen time and time again that have been helpful for my students to get jobs. So that's why I'm asking you to do these things, right? Now, as always, I'm gonna show you how to play the game. it is up to you if you want to play it. It's up to you to decide what doors you want to open, what doors you want to leave closed. That's okay, right? It's up to you, but I'm going to show you how to play it. It's up to you to figure out if that's the way you want to play the game, okay? Should we only have completed projects on our resume? So I showed a hack for this, actually. When we were working on our GitHub like like our we talked a little bit about our GitHub's and our readmes and I shared a readme template for your GitHub, there was something on that readme template that helped with that, right? should we put only completed projects on our resume? No, you can put unfinished projects on your, on your, sorry, on your GitHub, or even sometimes on your resume, because you have an optimization section where you talk through the things that you would add if you had more time, more financial resources, whatever it may be, right?

There was a list for those optimizations. A lot of times people just want to see that you thought through the engineering challenges that are yet to come and that can be enough, right? So if you don't have that, that readme template, definitely get it and definitely use it. Every single thing you put on GitHub, you should have that readme template that you break down everything that happens. Yeah. And we, we did that in our, um, what class was that? Maybe that was in our intro to freelancing class, I think maybe. Um, but yeah, we went over that whole thing. Yep Well, what are my thoughts on working with recruiting agencies Sometimes they work but most of the time it's a big waste of time Never sign exclusivity never ever ever ever ever sign exclusivity Yeah well All right, last thing I'll say, when I rattle off all these things that have to be done, all these expectations for quite a few folks, they decide, you know what? That's it, this is where my journey ends, and they take themselves out the game. I think it makes no sense to have come this far and to take yourself out the game. Let the game take you out. Don't let the game, don't let yourself take you out the game. Let the game take you out, right? It's gonna be a long slog.

it will be hard. It is not easy. If it was easy, there'd be so many other people being software engineers, but you're so close to the end. You've gone through the trough of sorrow. You're getting to those wiggles of false hope soon. Don't take yourself out the game. It's too early for that. We got an amazing community that wants to support you. Get on discord, ask questions, get the support that you need, right? And work through these things. You get through these things. You're off to the other side. It's so much sweeter on the other side. All right, we got a problem folks, we have a problem. Our applications don't have authentication.

And when I say authentication, what I mean is the ability for our users to log in, sign up, have their own accounts. So we can build full stack web applications, right? We've built the to-do list as a full stack web application. It has a beautiful MVC architecture. We can start playing with our routes, our controllers, our models, our views, right? We can build the API of our dreams that's listening for all these requests coming in and is doing all these wonderful things. But everything that we do is public to everyone and to all of our users, and there's no way to have individual users. So to get around that, we add authentication to our applications. That sounds nice, hold on. We add authentication to our applications. We add authentication to our applications. We add authentication to our, we add, we add, we add, we add, we add, we add authentication, we add authentication to our applications. Nice. All right. Which all I mean, when I say that is like the ability for users to log in.

Right. We've all used applications where we could log in once we log in. Hey, it's our stuff It's not everything or there's some other thing we do once we are logged in right now Sounds great. Leon. I'm sold. We're going to add authentication to our Application right? We're signed up for that but I Got a second problem Got a second problem Oh Authentication means that there's like logging in there's like usernames and and passwords and Security and I got to keep my users information secure I got to make sure that I'm not putting like plain text passwords into a database I got to do all this stuff and and nobody's told you I'm not a cyber security expert And I and I really don't want to be I Just want to build full stack web applications. I really just want to you know at the end of the day we add authentication to our applications, that's just what I want to do, but I Don't know how to That's a lot a lot of responsibility It's it's a lot of things that we have to think through and so There's something wonderful That we can all use Because we're not cyber security experts. There's a warning for the next slide All right, we're not cybersecurity experts ten seconds But there's something that we can use that will give us the functionality required to add that authentication to our applications to not lose sleep at the end of the night, because we have. It is the way. This is the way. Okay, now, whenever I bring up Passport, whenever I bring up Passport, there's always, well, Leon, actually, I read this blog post one time about JWT tokens, and I don't know about this Passport thing. Seems like it's been used for a while. Seems like a lot of very serious companies use it. It seems like it's been battle tested.

It seems like it's been the backbone of a lot of node applications for the past 10 years. It seems like it's you know, it seems like it seems like it's handled authentication at scale It seems like it's done a lot of these things, but I read this blog post about this newer thing and No Absolutely not Eat it Eat it Get out of here. You're not a cyber security expert. You can't differentiate between these things. Get out of here. No, absolutely not. For your first few applications, just use Passport, right? Just use Passport. There are so many other things out in the world. There are so many other things that you could try and do. They all have their trade-offs. They all have the things that they're better at the other things that they're worse at But passport is the tried-and-true been around the block by themselves and We're not cyber security experts that are gonna evaluate this. We're gonna use stuff off the shelf That's gonna handle the authentication for us Right so that we don't have to invest in learning all these wonderful cybersecurity things And it's not that you won't get there in the future. It's not that you won't go deeper in how authentication works in your applications. Not that you won't eventually invest in really understanding what's happening with the hood.

But for your first few applications, for your to-do list application, for our quick pound application, we're just gonna use Passport. The thing that works, that is tried and true, that people have been using for a very long time, because it just works. Right now, please, don't panic learn, right? Nobody's gonna be in an interview going, oh, you implemented JWT tokens? You get a job, one job for you because you read that blog post and didn't actually do the pros and cons of implementing that new technology, but you get a job because you know nobody's going to do that. Right? What somebody will give you a job for is having a full stack web application with authentication that solves a real problem, AKA your 100 hours project. The authentication piece does not matter. Like it just doesn't matter, it's just it's just a tool that we are using to get the job done in the jobs not yet finished right? So for your first few apps, just use Passport. Let it be something that's happening in the background, that you're not worried about. You just know that it works, that it's handling everything for you. And then if you want to after those first few classes, then you can move on to something else. Those first few projects move on to something else. All right, so this is me actually embracing Passport.

It's live footage and a lot of folks refer to it as magic. In development, there are a lot of things that developers call magic, right? And sometimes that's really scary and sometimes you can just embrace it, right? So a lot of times when we start building these bigger and bigger systems We're relying on more and more technology right and some folks will either embrace it and build or some folks will code weenie it out and Not actually build so I want your default to be building real shit Right Right? Right? Like, if you, if your default should be to build something really good, really cool, the code we're already baddies, we're already write bad code like it. These decisions aren't the deal breaker for your pet passion project that is your a hundred hours project, right? So embrace the magic. Understand that it's sitting on top of the shoulders of giants that have spent hundreds of hours, thousands of hours, tens of thousands of hours, making all this works that we can just plop a few files into our application and get logins. Let's go. Time to embrace some magic. It's time to embrace Passport for now. And eventually you might move on to something else. That's okay. I got to engineer my own transistors at home first.

Exactly. Right. Exactly. Cool. All right, so we're gonna take a look at our application with authentication, and then we're gonna take a break. So actually, you know what? Let's take a break a little bit early. So we're gonna put five minutes on the clock. When we come back from our break, we are going to look at our application with authentication. We're gonna see how it's working. We're gonna walk through the changes that I added to our code to get the authentication working. and then we will move into our project night where you will get an app with authentication working and add to it. Alrighty, folks. Miguel, VargasDev added two minutes to the timer. Woo, let's go.

These seven minute breaks feel good. All right, seven minutes on the timer. Come back ready to see some authentication. We add authentication to our applications. when we get back folks. 10 minutes on the timer here. I'm going to run some ads that new folks I don't have to sit through. Let's welcome back. That's slow. Jams. Hey. Ending with Holly. Hey, thank you for the raid. Hope you all are doing well. Hope you all had a good night.

Good evening. Good morning. No matter where you're coming from. Hope you all are doing well. Welcome. We're adding. We add authentication to our applications. Tonight. Let's go. Welcome back. So let's take a look at our application with authentication, okay? Let's take a look at our application with authentication. Would you just look at it? Would you just look at our application with authentication, please? Would you just look at it?

If you're not hip, I got a video for you right there in the slides. All right, let's take a look at our application with authentication. Am I already logged in? Did I do this? All right, site's not live. Let's make sure I am running it. All right, here we go. Boop. Let's go ahead and do our npm run start. Cool, we're starting our server. Our server is now running on localhost 21, 21, 21, 21, 21. Awesome. Here we are. Okay. So we have our to-do list application, but it's not dropping us right into our application.

In fact, I have to like log in or sign up and it's small, it makes it bigger. I haven't put any really CSS on this, right? So I have to either log in or sign up. So let me go ahead and sign up. I didn't log out, so let me log out real quick. And actually, let me actually just drop everything. Well, actually, I already have a login. So let's do it and log in. Let's do bob at bob.com. Bob, Bob, Bob. Beautiful. I can log in. No, I don't wanna reserve it. And so you can see that I have logged in as Bob And I have first try second try How did I know that I know your email and password? Sorry, let me log back out.

Let me log back in Bob's evil step brother or evil twin, sorry is John's will do John John John and log in and we're starting to notice some things here. So we have the ability to to log in. Right. We had the ability to log in. We have the ability to log out. We had the ability to, let's sign up. Let's do a Sarah at Sarah.com. Oh, sorry. That's the, What was this username? We'll say Sarah. I'm gonna say sarah at sarah.com. Sarah is the reason why there's bad blood between Bob and John is because of Sarah. For folks that didn't know, you're keeping up with the lore. So Sarah, I'm gonna try just doing a password of Sarah and Sarah, but I get some error notifications here. that my password must be eight characters long, that my passwords don't match.

So there's a lot going on here. So let me go and try Sarah again. Let's try Sarah at Sarah.com. Let's do Sarah123. We'll do Sarah123. And I was able to sign up. Uh, when I signed up, uh, Sarah obviously has no to do's cause we just signed up. I'm able to enter in to do's just like I've been able to do. Right. And, uh, I'm able to log out. So that's fucking awesome. Like the ability to have our to do list, right? We can log in, we were able to log in from different accounts, we were able to sign up when we were signing up, if there were issues like passwords not being the right length, or like the passwords not being the same as I was trying to sign up, it gave me alerts that things were wrong, right? Dizzy, thank you for the hydration. Cheers to you.

I just tried to drink it from the other side, sorry. And so we have a very bare bones application with authentication. And there's more stuff we can add like resetting passwords and things like that, right? But the beautiful thing here is that we now have the ability to create an app. We have the ability to log in. We have the ability to sign up. We have some validation on that sign up. That to me is like mind blowing and it's not that hard folks. It's not that hard. In fact, here's some live footage of me adding authentication. It was super easy, just, you know, patted the sweat off the brow a little bit, was super happy, super easy to add it. So we're going to talk through, right? We're able to create this application where users are able to log in. They were able to sign up. They were able to log out.

We were able to keep, like you even saw me, like where I had gone back to the main page and I went back and it kept me logged in. Did y'all see that? It kept me logged in. Like I went back to the main page and back and I was still logged in even though I was on different pages What right? So what? Authentication logged in users how well Passport has strategies Okay The reason why we use passport is that off the shelf? Passport can do a lot of heavy lifting for us. And so Passport has these different strategies for the different types of logging in we might want to do. What I just demoed to you is something called local login. I'm using emails, usernames, passwords. We're not using something like some other service, right? But you could use things like Google Auth, Microsoft Auth. You could use Twitter Auth. if you use any of these other authentication services, and if you're using Passport, you're not doing anything other differently, I'm doing anything differently, other than using a slightly different strategy. Right, so you can go to Passport's websites, you can see all these different strategies.

Right now I just went and I yoinked one of the strategies for local and I plugged it into my application, right? It's just exactly, Johnso, it's exactly just another Lego brick for us to play with, right? And once you get comfortable with Passport, any type of authentication is your oyster. And it's been used so much that anything that you'd want to do regarding authentication has already been done for you. So you want to do resetting, you want to do two-factor, Like all these things, right? All these things that you might want to do in the future as your application gets bigger and bigger. If you start with Passport, you don't have to like reinvent the wheel on any of this stuff. It's already kind of done for you. And you can find all that stuff and plug it into your Passport magic. So let's take a quick look at Passport real quick. I always like to show it right off the jump. So if we go to our config folder, we have this lovely Passport.js file. And so here is the local strategy for Passport. You see I'm using the local strategy. Now, it's a big file, right?

It's a big file, there's a lot of fanciness going on there, right, right, a lot of fanciness going on there. It's not that, I mean, it's kind of big, but it's more, it looks more than it is, right? But we don't have to be disrespected here, right? Right? We don't, we don't have to feel disrespected. We don't have to look at this and go, Leon, what, it doesn't matter. You don't have to have this memorized. It's not something that you are expected to like know how to pull out your brain. This is a strategy that I grabbed from their GitHub. I plopped it into my application and I know that it works. Okay. And so if we look at this strategy and we kind of just like look at it a little bit, you can see that we are creating stuff that has like emails. You can see some other stuff that's happening here, but really it's just something that we're plugging in. So we can take our to-do MVC application, we can add a passport config file, we can add a few things to our server.js that makes it so that we can use the passport file, and then we can start actually using passport in our application. So all I did is I took our MVC application and Updated it with a few things Right added some things Right that are gonna make the passport work and for any application you have going forward You don't have to worry about it.

You're gonna have logins. You're gonna have Signups and it's kind of all here for you. So we're gonna talk through some of the big pieces of it together tonight We're going to see like how it actually works But one of the first things I want you all to do as part of your project team, right? Right as part of your project team is to walk through this code base See if things make sense see if you can talk through the higher higher level ideas, right? So tonight or your project right? for your project team. Tonight should be more, let's look at this code base, let's understand what's happening, and let's come up with a game plan for Thursday. That's your goal for tonight. Your goal for tonight is to come together as a group, understand what's happening in this new code base, understand what's happening in this new code base, see how things are coming together, and then come up with a game plan for Thursday about how you're gonna add to it. Like how are we gonna make this application your own? What tweaks are you gonna add? What little finesse are you gonna put on there to make it your own, okay? So that's the goal tonight. The goal tonight, understand what's happening, come together as a group. This is an important, like so many people I know just wanna like dip when I say this, but don't.

If you want a job, this is literally what the first 3 months of your life is like. This is literally the first 3 months of your life is being thrown into a new code base with engineers that you don't know and reading the code, figuring it out, and working together. Right? You have to get good at this part of the process. Right? And so that's what we're going to start practicing tonight. And then On Thursday, we'll spend the first hour and a half or so really walking through step-by-step everything that's happening here so that we can kind of reinforce the work that you did tonight. Make sure everyone feels comfortable with it. And then you'll have more time to work on the project. Okay, cool. You almost got me to chuckle, Oskara. You almost got a laugh. All right, so we have Passport. Passport's doing the heavy lifting. We added a Passport.js file, right?

We added some authentication middleware, right? That's going to help us make sure that we're actually logged in or not. I'm going to show you this in a second. And we added some stuff to our server JS that enables us to have sessions, which are what keeps us logged in throughout different pages, right? So you notice I went back to the main page and I went back to the application and I didn't have to re-log in. We have these sessions that enable us to do it. We initialize our Passport middleware, which is just saying, hey, we're gonna use Passport. And that's really it, like I know it seems like it can be a little overwhelming at first, but I really just added some Passport stuff, some stuff to stay logged in, right? And I connect it to the Passport file that I put in my config. That's kind of it, right? And so tonight you're going to play through it. There are gonna be some other bits and bobs that I haven't explained yet. We're gonna dig through it and see what's actually happening. So let's talk about some high-level stuff first before we actually jump into that All right, so users are logged in right or we have the ability to log in But why would this matter for our to-do list app? Why would it like having logins matter?

Like what would that give us? Privacy I like that's actually good. What would it give us? Returning users, yeah, true, right? Think about our to-do list. What does having individual logins enable us to do? Yeah, we can have separate to-do lists. What if our users only want to see their to-dos? As much as I love y'all, y'all went reckless when I had the public to-do list, right? Y'all went wild adding some stuff that was definitely not Twitch appropriate, right? And so I can't have the riffraff mixed in with the folks that just want to use the application. And so now I want to see what Leon's doing. So we want our users to be able to have their own to-dos. And so with authentication, we can start to develop applications where users have their own experience in that application. They have their own set of to-dos.

And that's the beauty of adding, we add authentication to our applications, right? That's the beauty of having that. So let me show you. Come in. It's free real estate, right? Well, let me show you. It's all about Ensure auth, baby. That's all it's about. All this buildup is just for ensure auth. Let me show you one little bit of line of code real quick. All right. So we were gonna go to our to-dos, right? We were gonna go to our to-dos. So if we were to go to our to-dos routes, we would see that our to-dos controller was going to be called, right? Like we tried to go, right?

We tried to go and get our to do's, right? We tried to go and get our to do's. What we can now do is have this lovely ensure off before the controller, right? What is this ensure off going to do before our controller? It's a middleware baby, it is a middleware, but what's that gonna enable us to do? What's that gonna check for? Yeah, it ensures authentication. It checks to make sure that you are logged in. If we look at our authentication middleware, it's actually a very simple bit of code. This insureAuth is really just a function, right? It's just a function. And that function's gonna check to see if you're authenticated. If you are authenticated, good, move on to the next thing. Go use that controller, live your best life, right? But if you're not logged in, we're gonna redirect you back to the main page that you can log in, right?

That's what InsureAuth is doing. It's just a handy dandy bit of middleware, something that sits in between the request and the response right a ticket gremlin yeah ticket gremlin and it's just gonna say all right right is the person authenticated are they logged in because if they're logged in keep going if they're not logged in get redirected right like go back to the main page let's actually see that let's actually see that at play here so I am I'm going to try and go to the to-do's slash to-do's. Boom. What happened? Hold on, let me see this again. See this again. To-do's, hit enter. What happened? I got redirected. I got denied. I got redirected back to the main page. I'm not logged in. And since I'm not logged in, I was getting redirected back to the main page. Now let's think about what I just tried to do. When I typed in slash to-dos and I hit enter, what type of request did I try and make there?

I wanted to go to Locals 2121 slash to-dos and I hit enter, what type of request did I just try and make? Yeah, I tried to make a get request on the to-dos route. Let's follow the path of that code. Where do we start? What's the first thing that's gonna be listening for that todo's route? Like where do we start in our MVC structure for that get request? Yeah, we're gonna look at the router, right? The routes, we're gonna start with the routes. Let's go back and take a look at our code. Let's go to our server.js. We know down here, hey, if you're making any request on to-dos, use the to-dos routes, right? So we went to slash to-dos, right? Slash to-dos, right? So now we're gonna have to go to the to-dos routes. Let's go and take a look at the to-do routes.

The to-do routes, here we are. what type of request was I trying to make? What type of request was I trying to make? It was a get request, right? And it was the root of the to-dos, right? Slash to-dos is the root of to-dos, right? It's the same thing as typing out slash to-dos slash, right? We're already on the to-dos route. We're just trying to go to that main to-dos page. So it was a get request on that slash of to-dos, right? That forward slash of to-dos. And so here is our router that hears the get request on to dos and the very first thing it's going to do, right, the very first thing it's going to do is going to run insure off. And insure off is just a function that's gonna check if we're logged in. If we were logged in, if we were logged in, It would run this bit of code, right? It would go to the next thing.

It would run this bit of code, right? If we were not logged in, it would redirect us back to the main page, right? It would redirect us back to the main page. Now, could I add EnsureAuth to these other routes? Yes. But is there any way to get to these routes if I'm not logged in? Like, is there any way to get to the page where I'm creating the to-dos if I'm not logged in? Not really, not yet. We could figure out some fancy ways, maybe Postman or something like that, right? But for our users, not really, right? So it's more of like a thinking through our application. So there's no way to really get to it. We could be hacking and getting postman and do it. Right. But the beautiful thing here is that we have ensure off on this to do routes.

Since we're not logged in, we're getting redirected. We can see that in the code. If you were authenticated, go on to the next thing. If you're not authenticated, get redirected back to the main page. Now, this is authenticated is a meaty bit of code that I don't have to understand, right? I'm not a cybersecurity expert. I'm gonna use the passport and the strategy, right? Right, and strategy, right? That's been provided to me, right? I'm just using a very simple bit of code that says, hey, are you authenticated? Go on to the next thing. If not, get the step and go back to the main page. So now we can use the same, we can use the same bit of code that we've been using, right? We go back to our Todoist routes. This is exactly what we were doing last week where we now have our Todoist controller.

Let's go ahead and take a look at our Todoist controller. And our Todoist controller looks exactly like the get to do's that we had before, right? Right. Like we had before, except we have some other interesting things now, uh, we have as part of the request, the ability to see the user that's making the request. So when somebody goes, when somebody's logged in and they go to get to do's, Not only can we look at like that request body that we could always see right not only that not only can we see that that The the the requests that we could always see but now we can see the logged in User right we can see that logged in user and that logged in user We actually can we can console log it right we can console log that logged in user and we'll see everything about that logged in user And one of the cool things is that whenever we create a new user, that user has its own ID, right? Users have their own IDs. Now, why would users have their own IDs? What do you think we're doing that would wind up with users having their own IDs? Yeah, we have a MongoDB collection. We have a collection in our database of users and every single time a new user signs up, we are storing that user in a database. We're storing it in our users collection. And the cool thing is that every single time we create a new user, like when the user signs up, every single time we create that new user, that user in our Mongo database is going to have a unique, right? A unique ID. If a user has a unique ID, we can use that throughout the rest of our application to say, you know what? The person that made this to-do was the person that has that ID.

when I want to see just their to-dos, I can just get to-dos that have that matching ID. Right? And so this is the beauty of once you have users and they're logged in, you can just start using these IDs to start doing some pretty cool stuff. Let's take a look at a few things before we kind of go any further. If I, if I have users, what else must I have added to my application? If we're having users that are going to the database, what else did I had to have add? Yeah, a new model. The only thing that can talk to the database is our models, right? So if we look at our models, I have a to-dos model so that I can actually say what's being stored with each to-do. And I have a user model, right? That user model has a username, an email, and a password. So when I actually sign up and I create these users, My users are all going to have a username, an email, and a password. But my password is not just going to be put in plain text. We're going to hash the password using bcrypt, right? It's going to take our password, do some cryptographic magic to it, and give us a hash that we store in our database.

So we're not even, we're not even worrying about this. This is something that Bcrypt and Passport is handling for me. This is not something that I would ever write from scratch. I'm not a cybersecurity researcher. Right. It's also called salting. You might hear that thrown around. And eventually with all this stuff, all this user model, we wind up creating a new user in our MongoDB collection, right? So did I need, did I like this user schema, right? This user schema, this user model, did I write any of this? No, when I went to Passport and I looked up the local strategy, they gave me the local strategy for the Passport.js file and they gave me this user model that I could just copy and paste, right? Now if I wanted to I could go in here and I could like mess with a few things right like I could change it Instead of being usernames can be something else instead of being emails like I can I can kind of I have control Right. I have control over it, but it's not something I'm like absolutely doing from scratch, right? A lot of this stuff was covered in the homework. So things like hashing and salting came up in the homework, right?

All hashing and salting means is that we're taking, let's say our password was called password. We would take password, we would do some fancy math on it, and then we would get a string that was like 145 exclamation point 6255151832, right? And the only way to go back from what that encrypted password is to back the plain text is through what is happening here. So instead of putting our plain text passwords right into our database, right, which would be a big problem because if anybody ever got access, right, if anybody ever got access to our database, they could see all those passwords. This bit of code is making it so that we don't have to store just plain text passwords in there. We'll get into that more on Thursday. I don't want you to go worry about it too much. The idea here is that I'm pulling some stuff off the shelf, right that's handling my authentication that's handling my ability to create users and the really important thing that I have to learn that I have to see is let's go to our Mongo database here let me go ahead and just refresh what I can see is that I have created users right I go ahead and I look at my my my user's collection, we see Bob, which was created. And look at this lovely hashing here, right? This, this salted password, right? That's not like, this is what the password was Bob, Bob, Bob, right? Right? The password was Bob, Bob, Bob, but this is what winds up being stored in the database. So if we ever get haxered, the person's password is safe. John was John, John, John.

And this is what actually gets stored up in the database. Sarah, I believe, was Sarah123. And this is what wound up getting stored in the database. So now we have these users, we have these individual users, and not only are the usernames and emails unique, but each user also has their own ID, right? Bob is C5, John is DF, Sarah is CA, right? Like each user has its own ID. And that's just the result of using MongoDB. Like whenever we put a user into our collection, right? We put a user into our collection. They also have this ID, right? All right. Cool. So now, let's think about this. Let's go back to our application. Let's log in.

Let's log in as Bob, bob at bob.com. and I believe the password was Bob Bob Bob and I logged in and I only see first try and second try right right but if we look at our MongoDB and we look at all of our to-dos, we can see that there's other try, there is Heyo, right, right. There are all these other to-dos that are in our database, right? But I am only seeing first try and second try. And what you can see is something that is slightly different than our last version of the code, because now when we're storing our to-dos, we're also storing a user ID property. And that user ID property is the ID of the logged in user. So whenever a user is logged in, right? Whenever a user is logged in, whenever we create the to-do, we take their ID and we store it in the database along with that to-do. So now, stay with me, one second, stay with me. When we go to this page, And we are logged in as Bob. What are we searching for to just show Bob's to do's? What are we, what are we, we're going to do to do dot find. Yeah, but we're going to look for where the user ID matches Bob's ID. and if the user ID matches Bob's ID, we know that Bob made that to do, and we can render that into the DOM. If that's not cool, I don't know what's cool.

That's cool, might as well call me Miles Davis, right? Let's see it, let's see the code. All right, we go to our to-dos, which means if we start by looking at our to-dos route, we are trying to get the main page of to-dos. We're logged in. It's gonna be the to-dos controller and the get to-dos method on that to-dos controller. Let's look at our to-dos controller. The get to-dos method is here. When we go to find our to-dos, we're finding the to-dos where user ID equals rec.user.id. Remember, rec.user is the logged in user, right? Every single time the user's logged in and makes a request, we get this rec.user and it has all their info, including their ID. So all I have to do is say, hey, find me the to-dos where the user ID matches rec.userid. If you find that, give me that to-do. I'll take it. And then we pass that into our EJS to render. Right?

So instead of having to go and get all the to-dos and do weird stuff, We're only asking for the to do's of the logged in user Right. Where does the user variable come from? It comes when we're using Authentication like passports helping us do all this stuff, right? right Passports helping us do all that stuff. It's helping us log in. It's helping us have logged in sessions It's helping us have users, right? It's helping us create the users right with our user model but this is the big idea. The big idea is that we can create users. We can now store information regarding the logged in user. We can go and get to do's that only match the logged in user. And when we create to do's, it's the same thing, right? When we create the to do's, look, look, here's us creating the to do, right? We're gonna take the to do item from the request body like we did before. we're going to set the completed property to false. And then the user ID that we're putting on the to-do, right?

The to-do that we're putting into our MongoDB collection, like the to-do that's going into our database is going to have a user ID property with the value of the logged in users ID. So now every single to-do we create will always have the logged in users ID. And when we go to get the to-do's, we're only going to get the to-do's of the logged in user. That's pretty fucking cool. That's pretty cool. Like this is beautiful. Cool, right? Cool. Now, is there a lot of stuff that's happening here? Yes. Is there a lot of little bits that we have to better understand? Yes. Are we 100% clear on like how we're creating users yet? Are we 100% clear on like how we are like actually like doing all these connections? No, but that's our job this evening.

Our job this evening is to get into our project teams to work through some of this together, right? To see, all right, all right. We saw that we can create to-dos, but how did we create users, right? When I logged in, what happened, right? Walk through that together, right? Walk through it together, explore, right? And then hopefully as you get to the end of tonight, you start to feel a little bit more comfortable with the code base. You have some questions and you have an idea of what you might want to do to tweak this code to be your own, to make the project your own. Not just a to-do list, but something slightly different that's your own. We come back on Thursday. Thursday we'll go deeper into it. We'll step through everything piece by piece, right? You'll have more project time to take what you learned apply it, build out something that works for you. If you have more time outside of class, you keep working on it and then you submit what you got on Tuesday. This is our first taste.

We're going to use this exact code base to then build our full Instagram clone from scratch, right, so we will be able to, right, we'll be able to, right, be able to go from this to an even bigger full stack web application, you know? Tim Griffin, I see you say raid, but I don't know if you actually raided. I didn't get the alert that came through, but even if you didn't raid, It's good seeing you. I hope you're doing well folks if you ever just want like a chill stream. You need to be hanging out with them I think so many of us are like in in work mode now right like we're at the point where we need to be getting shit Done and so hanging out with some fun folks Chill streams are a good look So let's go ahead and put this in chat They're still live. Did you come here and type that? That's weird. I don't know how that worked, but I'm going to just spam it in here because I love your channel and I hope more people watch you. Cool. Cool. Alrighty. Let's talk about one more thing. Let's talk about the signup flow. Signup flow, that'll take us like another five minutes and then we'll move into project time, right? So let's go ahead and I'm gonna log out.

So we met Bob, y'all know Bob, we all love Bob. We know John is Bob's evil twin. We know the the whole falling out revolved around Sarah, but what we don't know About Victor Password Be Victor one two three All right We'll log in All right, so now we're logged in as Victor. Now, if you're like, Leon, who's Victor? I have to know who's Victor. You gotta come back Thursday, folks. You come back on Thursday, and I'll tell you all about Victor. It's a little teaser to get you to come back on Thursday. You gotta get the engagement up. You gotta boost the numbers, you know. They come back on Thursday, you'll learn more about Victor. But let's think about what just happened. And I, let's log out, let's go back to the signup. I click submit on this form. And when I click submit on this form, it plopped me onto the to-dos page.

So what type of request is submitting this form? It's a post request. And what's the route? What's the route? Let's also take a look at the inspector. Sign up, all right. So we know it's a post and we know that it's sign up. Let's look at our code base. Let's look at our server.js file. All right, we have some of our main, we have like a main routes and we have to do's, but we know it's not to do's. So let's look at main routes. Main routes has all the main routes of my application. Right? It has the main page. It has my login for like getting the login page.

It has a route for posting my login. and like when I actually try to log in, I have the ability to like get a log out. I have the ability to get a signup page so I can actually like load the signup page. And then I also have the posting of signup, right? And so when I submitted that post on signup, right, the post on signup, I use the auth controller and the post signup method. So let's go ahead and look at this off controller and let's look at the post Sign up method. Where are we at? Where we at? We outside. We online. Here we go post sign up Look at all this Look at what this post sign up is doing. It's Checking that we have a valid email address. It's checking that the password is at least eight characters long It's checking to see if the passwords we entered matched, and if at any time those things are not correct, it's giving us these lovely validation errors, and then once it gets through all that validation, it's using the what? What is new user? What do you think new user is?

Yeah, new user is our user model, and we're going to grab the username from the form. We've been grabbing stuff from forms for months, right? We grab that username from the request body of the form. We grab the email from the form, we grab the password from the form, and we use that to actually create our new user, right? There's some fancy stuff in here that comes with like how we're gonna actually save users. You don't have to notice this stuff that I'm copying and pasting from Passport. But at the end, I wind up saving my new user. And when I save my new user, it uses that user model, right? We're using that user model. We go into the top, we can see we're using the user model. it uses that user model to create a new user in our users collection. And when we go and we look at our users collection in our MongoDB, we'll see that we now have Victor, right? We now have Victor, right? So it's not something that, like when people say like, I'm lost right now, I want you to understand that it's just a few jumps and it's the jumps that you've already seen. don't get caught up in the code that you don't have to know how to write, right?

Don't get caught up in the code that you don't need to know how to write. It's the same thing we've been doing with the original to-do list, right? It's the same thing we've been doing with the original to-do list, right? Let's step through it one more time. We go to our server.js file. Was it a to-dos route? Like we submitted the signup form? No, it wasn't a signup. Sorry, it wasn't a todoist route. So we're gonna go look at the main routes router. We go to main routes. We see that, oh, it was a post on the signup route. That's what it was. So here's the controller we need to use. And here is the post signup method that we're going to use, right?

Here's the post signup method that we're gonna use. we just heard it's a really fancy, right? It is a really fancy click event, right? Just a really fancy click event. It's just multiple steps you have to jump through when we hear that event. So we submitted a post on the signup, right? We are now gonna look at the auth controller. We're gonna look at that post signup method. Here's our auth controller. Here is the post signup. And when we look at the post signup, do you need to know how any of this works? Like, do you need to like, know how to write this from scratch? No, it's part of the templating code that I'm giving you. Could you get in here and do some things, right? Yeah, we could get in here.

We could change this from eight to 10 if we wanted to, right? We could tweak some things about the validation went to, but we don't have to. We just know that it works and we know that when this route is triggered we create a new user using the user model right Right and when we are done when we are done saving this new user Right when we when we have created the new user we have their username. We have their password. We have their their their username password and Email right we have all that we've saved the new user right we saved that new user to our users Collection what's the last thing that we do? It takes us to the to-dos right it sends us to the to-do page and are we logged in Yeah, we're logged in because we just signed up. It's the same thing. We're logged in. So it's going to take us to the to-dos as that new user. Right? Boom, boom. So now you've been able to follow two paths. You've been able to follow the path to signing up. You've been able to follow the path to creating a new to-do that's tied to the logged in user. And there are some other paths you might want to explore.

How do you log in? What are some of these extra files doing can we can we understand what might be happening in these models like what's happening here? What's happening? Why is the to-do model a little bit different, right? You might look at these different controllers and see what else they might be able to do and that's what we're gonna start exploring together Right now now Did we cover everything Absolutely, not. Is there a lot of stuff that should be really fuzzy and doesn't make sense apps are freakin lutely, but But should you be able to, by the end of tonight, tackle the main concept like, all right, we create users, we log in, we like can make to do's based on who's logged in, we can just get the to do's of the logged in, like that's where you want to be like the high level stuff. Don't get in the weeds, don't get stuck code weeding individual lines, right? And walk through it together, right? So we are going to move into project night, right? It's very similar to Traverse. Exactly, that's on purpose, right? I wanted you to be able to move from that video to this code base, right? So we are going to move from Twitch to Remo. Let me pull up that slide. There's some more slides here that we'll get to on Thursday.

Like we're gonna walk through the whole code base together on Thursday, we're going to talk more about kind of how individual pieces work. We're going to talk more about how Mongoose works on Thursday, all that fun stuff. But tonight you're going to do that together, right? So we're going to leave Twitch. We are going to go to Remo. There are two Remo rooms. There's room one and room two. and if you signed up for a project team on last week, you are in this form here to find your room, your floor, and your table. All right, we're gonna take a break, don't worry. You're gonna go to your Remo room, you're gonna find your floor and your table, you're gonna introduce yourselves, you're gonna see how folks are feeling with this code base, and then you're gonna tackle the code base together. Can you get it running? Can you get it working? Can you understand what's happening together, right? And then before you end tonight, try and brainstorm a little bit about what tweaks you're going to make to the project on Thursday, okay? That way you come in Thursday with a game plan a little bit.

If you do not have a group, that is okay. Go to room 2 and go to the 5th floor and up. That will be for folks that don't have a group that want to find others to work with. Okay? Alright. So, that's what we're going to do. I encourage everyone to take 5 minutes, right? Take 5 minutes and then head over to Remo. Remo is going to be the best way to do this because we don't have enough like voice channels to support all this. So really try your darndest to get Remo to work. Try different browsers, try different things. We're going to be using it a little bit more frequently. So try and get it working. If in doubt, you can use discord groups, but really don't use discord tonight. Try using Remo.

Give it the old 100 devs try before you before you slink back to discord. All right, if your group doesn't show up, that's okay, if at least two of you are there, you have a group, work through it together. If you've waited 10 minutes and nobody is there, get your butt to the fifth floor on Remo room two and find some folks to work with there, right? So that'll be the goal. So meet, introduce yourselves, try working through it. Remember, you might have some folks that are in class one. You might have some folks that are caught up with program. You're going to work together, right? Work through it. No code weenies. No trying to do other extra stuff that you found on the Internet. No focus on this. Focus on this code base. Focus on this project. Be kind.

If you can't be kind, just don't show up tonight. If you can't be helpful, just don't show up tonight. Just close your eyes, go somewhere else, do something else. Right. If you have any trouble, let the mods know on discord, uh, and I'll be popping around the remotes. You might see me sit at your table to see how you're doing, uh, just to check in on y'all. So let's go ahead and take a five minute break, right? And then everyone be on Remo. Uh, your group listing is here. If you don't have a group, go to the fifth floor up in Remo room two. Alrighty, folks have a wonderful night. Good luck with this project. Remember, the Remo rooms are open for the entire week, so you don't have to stop right at normal class time. If you don't want to, that'd be up to your group when you wanna slow down or stop. Have fun with this, right?

It's not worth it if you're not gonna have fun, if you're not gonna be kind and just enjoy the process together. We'll come back Thursday. We're gonna go deeper into all this. We'll talk about all the pieces. We'll see the code more. I want you to have the first pass on yourself, though. So good night. No raid. Take your break and I'll see you all on Remo I was running through the six with my woes 21 21 21 21 21 Yeah Yeah Good morning, good afternoon, good evening, no matter where you're coming from. Hope you all are doing well. Welcome back. Welcome back, y'all. Woo! Project Knight Part 2, we have a lot of wonderful off to review. I wanted to go a little deeper tonight, feel a little bit more comfortable with the off, Get right back into project night.

Have you keep working together, keep building community taught. What's going on, everybody? Hope you're doing well. Good to see you back on a Thursday. Let's go. Comfy in the office. Ayo. I saw, I just, I missed the name right at the beginning. Wardio was it? Congrats on the job offer. That's huge. Glad to hear it. People, people popping off. Henry, welcome, welcome. People popping off with the jobs.

It's wild to see. I love seeing the Celebrations channel. You gotta be, check out the Celebrations channel, y'all. People posting, they're getting clients, they're getting jobs, it's wild. Hey. Hey. Hey. Hey. Hey. Everybody's here, like I should just spill it right away. Everybody's like, Victor, who's Victor? Well, let's just say Victor and Sarah have a torrid past. That's all we're going to do. We'll leave it there for now. We'll get into it later.

That's it. That's it. People got ads, we'll wait. How long is the ad? Why are we getting ads so early? They're all waiting to hear. They're all waiting to hear who Victor is at the ad cuts off. I wish I had thought of that though. Oh, I wish I had thought of that. So the ads are, so Twitch has something new, which is their incentive program, which is where if you run ads on a certain time, they give you a dedicated payout, but I don't care about that. What I was hoping it would do is give me control of when the ads ran so it's supposed to it's supposed to like prompt me that the um the ads are gonna run in three minutes right so i should get like a three minute warning that the ads are coming and then once the three minutes are up that's when they should run um but it looks like they ran them immediately when the stream started. So interesting. So there was a delay on it. All right. I get it.

I get it. Okay. Okay. So folks, folks are almost back from the ads. Let's give them a second to get back. Yeah, let's give them, let's, let's get some questions for folks that are that have the spent Jeff Bezos his money for the prime subs or whatever. Let's get some questions. And when folks come back from the ads, I'll explain again. They're all coming back. Who's Victor? Victor is Victor. This Victor did this exactly. Code Victor did this. Exactly. Victor is the one that did this.

That that's, that wasn't me. That was Victor. All right. So folks are coming back from the ads. All right. So here's what happened. Switch rolled out this incentive program where if you agree to do ads, a certain period of time for each stream, uh, you. Like you, you get a certain amount of money, but I don't care about that. What, what is supposed to happen is that you then run ads. They like run ads on a specified time, which is every hour and I get a three minute heads up Right. I get a three minute heads up that the ads are going to run. So my idea Right, my idea is that When I see the three minute timer up I wrap up and then we take our break the ads hit exactly when we're taking break. And so nobody in the community ever has to sit through the ads again, but they have like a thing that was supposed to be like, when the ads first start. And I thought that was, it said like, you can choose when the ads first start. And so I picked four minutes thinking that normally, like we have the, Normally we have like the starting screen and it takes me like four minutes before we actually start talking.

And so I thought that meant that then they would delay the one hour mark four minutes. But what I'm noticing now is that that's when the first ad drops. So I'll change that back to when the stream starts. And so as soon as the stream starts, The first ad should roll and then while the starting screen is running the ads play And then we'll have an hour until the next one and so then it should be a little bit more stable It was my first time trying it. So sorry you got got But we should we should be good going forward Alrighty welcome in everybody. Hope you're doing well. You got questions. I got answers always let's give folks some some time to get in here Oh restarting stream be interesting we getting the test. Yeah All right, what's your favorite type of milkshake? I don't know. Fat burger has like this vegan Maui banana. That's probably the only milkshake I've had in like a very long time. Oreo milkshake probably be bomb if there's like a way to do it that I could eat it. All right. How many full stack apps projects Should we have on our portfolio?

Good question. You definitely wanna highlight your 100 hours project. And then I think it makes sense to have like a few other big projects. So your project night, like your project week project is definitely something you're probably gonna wanna have in your portfolio. Like a simple full stack application that has authentication that you make look good. So the stuff that you do during tonight and the rest of project week is something that should probably be on your portfolio. Your 100 hours project should definitely be on your portfolio. Our Instagram clone, which will be a full stack application with authentication, with image hosting, with like a lot of other features that make a normal site a normal site. So that should be on your portfolio. And then we're gonna do a stream where we do a few kind of fun projects that use Machine learning APIs so that you have some like fancier projects on your portfolio, and then we'll have a react project So I think having like two to three full stack projects with authentication all the goods You're gonna make them look really good on your github good readmes everything then we're gonna have some fun like Computer vision type projects. So something that's a little bit more meaty that you have that in your portfolio You're gonna have a react project in your portfolio. So I think like having those five or six Pretty good projects in your portfolio as long as you make them look good with the reamies and everything You should be fine. Like I think that's a really solid portfolio and then anything else you build, right? So a lot of other folks will like take some time to build off of their project night They'll take some time to build some of the other group projects that we work on later on So a lot of a lot of opportunity it's up to you what you run with yeah, then your premium apps Yeah, exactly. So you all will have really solid portfolios get hubs and projects to show in these interviews as long as you do these next couple of projects that we do in class, so Like I said, we're gonna give you everything you need to be prepared for the hunt and those projects are part of it, but also don't ever stop, right?

If there's something else cool that you wanna build, something else that you think would be fun to add to your portfolio or your GitHubs, go for it. Like, don't stop. But yeah, you'll have enough if that's what you're worried about. Cool. Quick Octothorpe, there we go. Quick Octothorpe, that's a good one. All right, I finally noticed recruiters all up in my biz Yeah It gets to be like that eventually if you've done if you've done all the things that we've been asking you to do you're gonna start to see the the The the the the interest start to come your way pretty wild Can I still join a group you would have to meet your group today So that would be the the rub if you didn't get one on Tuesday you have to meet one today Okay, Rufio, thank you for the raid. Ooh, 100 plus folks, let's go. 100 plus folks coming through the raid with the stream team, let's go. Rufio goes live before we go live, folks. If you're not hanging out there before stream, what are you doing? What's going on? We're gonna be doing some fun stuff with the stream team coming up, sharing a lot of really cool stuff next week, which will be really fun. And talk about community talk, right? Folks going into the stream team, hanging out and learning more stuff, going deeper in the same stuff that we're going to go through tonight.

Uh, and then on Remo folks, 1200 plus people on Remo, you know how hard that is, you know how hard that is to get 1200 plus people to come together to work on projects at one time. We go on Remo and we have a full conference. We got a full conference on Remo every single time. That's why that blew my mind right that blew my mind just like going from floor to floor looking at all y'all working in groups like Who else is doing this like what? like What? 1200 plus people sitting at tables building stuff struggling through some code together That's wild that is wild right you can go off and do any type of learning to code type experience, right? There are so many wonderful other programs online that we talk about all the time. I love me some free code camp. I love me some Odin project. I love me some wonderful courses that are out there. But 1200 plus people on a Remo just working together. That's a community, that's wild to me. That's huge. So as always, thank you for being amazing. Thank you for all for showing up, putting in the work.

Let's go. All right, if you haven't checked in, please go ahead and check in. Exclamation point, check in. I'll give you the tweet for tonight. Please go ahead and like that, retweet that. Remember, if you want to participate in Hunttober, if you want the verification at the end, you want that sweet letter that I read aloud to you, you need to be checking in so that I know you're here. All right. If you haven't submitted your checklist yet, I'm keeping it open until Tuesday, And I'm shutting it down you have until Tuesday to get your To get in your your homework. Can we mention that in an interview? I've worked with a team of 1200 developers. Yeah, let's go That's wild so please get your checklist in if you haven't gotten it in already, all right Back in review. Remember this upcoming Sunday is a holiday in the US So folks asked me to push the review. So we're going to push that to September 11th. Um, this upcoming week, we're going to start building a full stack app together. Uh, we're gonna be building that, that quick pound, the, the Instagram clone together, and then, uh, we'll do a full review of all the backend stuff.

Yeah. Is there a way to get a table for more than six people? Technically, Remo allows it, but I find that it gets buggier the bigger the tables are. So we keep it at six so that we can have more groups working together. Technically admins can get to a seventh seat, but yeah, So for now we're stuck with the six. Cool. All right, folks, we're, we're jumping right in, right? We don't need to get any buggy. We're jumping right in. Uh, when will Hitler hit list class B. So you can think of next week as our full stack app that we're doing together. We'll do a review. They're going to do some react and then everything from that point forward will be hunt related. So it'll be hit list, data structures, algorithms, all that fun stuff. Remember, your hit list right now, it's just a first pass, right?

If you're itching to know more, you can go watch our three classes on it that are already on YouTube, but we'll get to it together. Cool. Uh, we had somebody I don't, I can't, I don't have, I didn't ask their permission to read the whole thing, but I'll just tell you what happened. They were interviewing. I swear. I can't make this shit up. They were interviewing and the interviewer saw that they were doing a hundred devs and they said, Oh, that's great. I learned something from the node classes. Excuse me. What? Huh? Let's go. Let's go. Let's go. Not only did an interviewer know what 100 devs was, they're in here with us.

What's up? What's going on? Make sure they get the job. One job please, let's go, let's go. So we out here, we outside, we online, let's go. All right, tonight I wanna dive a little bit deeper into the authentication. The first pass through this stuff is pretty rough. So I wanna make sure that all the dots are connected, it that everything is clear. I'll answer any questions that you have, and then we're going to jump right back into project week. So if you don't have the slides, you can do exclamation point slides to get the slides. If you're new around these parts and you don't know what we're doing, we're running a free 30 week software engineering bootcamp. Everything you need to go from having no coding experience to getting hired. Hundreds of folks have gotten jobs already. It's literally raining jobs. If you're just joining us now, it's not too late.

Join the illustrious catch up crew and welcome. All right. Making sure I have my stuff set up. We're good. All right. So we have an application that has authentication. Users are logging in. How is this stuff actually working? What's going on? Well, last week we learned about MVC, right? Model View Controller. this complex application that we're building up over time is still using the same pattern. We are starting with a user making a request from their client-side device. That request is making it to our server where our router hears the request and knows what controller to pass that request off to. The controller is the person in the middle that knows what to do.

Do I go and talk to the model so that I can get some data from the database? Do I just pass some stuff off to the view so that I can render some HTML to send back to the user? And so this complicated web of stuff comes together to build out our full-stack web applications. And so we go from a very simple MVC to a slightly more complicated MVC when we start introducing authentication and our authentication code. So what I want to do tonight is I want to step through step-by-step Right step-by-step from someone on their client side shout out Christos. If you're a triple OG, you know who Christos is from someone on their client-side device How do they make a request from the browser? For it to go to our server and go through all these steps to get something back to the person making the request. So, we're gonna go through it step by step. Each piece, we're gonna talk about the connections, we're gonna see how it comes together, and then I'll answer some questions, we'll look at some other bits and bobs in the code base, and then we're jumping back into Project Night, which I'm super excited for. 1,200 plus people on Remo on Tuesday, let's go. If you're new and you still need a group, that's okay. You can still join us hang tight. We're gonna go through this and then we'll get right into a remote. All right one thing folks asked me a lot and I saw it come up quite a bit and so I I enabled it on my end and I think it's something I'd be really helpful A lot of my file names are kind of the same but they're in named Folders, so I enabled this setting where I went to in VS code my preferences my settings you search for Workbench Editor Label Format and you select Medium from the dropdown. When you select Medium from the dropdown, look at this.

Look at this, right? You have the file names, right? But now it has the folder where the file's coming from. So you can see, oh, it's in the routes folder. Oh, it's in the middleware folder. Oh, it's in the controllers folder, the models folder, the views folder. Oh, wow. Nice. All right. So if you need to enable it file preferences settings, you just type this in and you select medium from the drop down and it'll give you this nice little tab. So I think that's helpful. If you're working through this code and you're kind of getting lost the file names and folder names, it can be pretty can be pretty helpful. So that's something I think should have enabled as we go through But tonight, as always, if you need the code, you need the slides, you can do exclamation point slides here in chat to get the slides. We need links to the code and things like that. It's always on our discord, exclamation point discord in chat to get yourself there.

Cool. All right, so let's start off at the very, very beginning. Let's look at our application. Let me make sure my application is running. Let me start my server. My server is running, I better go catch it. And I was gonna go to my application here. I'm gonna go straight to my login and I'm gonna log in as bob at bob.com. Remember, we already created this account on Tuesday. I'm gonna type in my password, hit enter. And when I am done logging in, right? When I am done logging in, I have made a request. I've gotten redirected to mice. I got redirected to locals 2121 Slash to dues. I got redirected to to dues So when you get redirected somewhere right when you get redirected somewhere when you get taken somewhere What?

What type of requests are you making? Cool, get requests, beautiful. So our client went to our URL, logged in, and when they logged in, they wound up making a request. Just the act of logging in, signing up, or going directly to that URL slash to-dos, right? Your URL might be different. We're on local host right now. If we were to put this on a server like RIP Heroku, URL might be different, but we're going to get taken to that URL slash to dues. This is a request that is leaving the client side device, going across the internet and finding its way to a server. All right, finding its way to a server. Now, that server is set up to hear that request, right? We have written some server-side code that is running. And since it is running, it is able to hear that request and know what to do. When we look at our server.js file, we set up a bunch of stuff that's gonna enable this machine to listen to a request and know what to do. If we look at our server.js file, we have some important bits up here, and the thing we have to pay attention to at first is these lines right here. These lines are what are handling that request, that request that just came into the server from the client.

The client went to slash to do's, either they logged in, they signed up, or they typed it in directly. They got taken to the server slash to do's, and we have some code running on our server that can hear that request. Right? All right, now, if we look at this line, we have two different things that we're looking for. We are saying, all right, the request you just made, was it on the main route or was it on the to-dos route? The chat, the request that just came in, When we logged in, we signed up or we typed in slash to dues. What route are we talking about? We're talking about the main routes or we're talking about the to dues routes. After we log in, after we sign up. Where are we going? after we log in, after we sign up, where are we being redirected to? Or if they type it in, where are they being redirected to? So, are we talking about the main routes? No. We've already done that.

The main routes would be log in, the main routes would be sign up, the main routes would be the homepage. But we're talking about what happens after we log in. What happens after we sign up? Or if the user's already logged in and they type in slash to-dos. Well, we are on the to-dos route, right? We're on the to-dos route. And so our server is now set up to hear that request on the to-dos route. Now, once it hears that to-dos route, it's going to try and run to-do routes. And I think a lot of people get confused by this. They're like, all right, our server heard the request. It was localhost 2121 slash todos. It set up to hear that request. How does it know where to find the router? Remember the router is what's gonna connect us to the controller, right? So how does it know what router to use?

Well, we already have it set up. We said, hey, server, if you hear, right? If you hear something making a request on a TODO's route, here is the route I want you to use, TODO routes. Well, where the heck is the TODO routes? If we looked at the top of our server.js file, we're going to see where TODO routes comes from. TODO routes is going to require a file called TODO that is in our routes folder, right? So in our routes folder is a file called to-dos that's gonna hold all of the routes for anything on to-dos, right? So we heard that request come through, we go and grab the to-do routes, and we can see that the to-do routes are telling us to go into the routes folder and find that to-dos file. If we look at our folder structure, we're gonna see routes is a folder and to-dos is a file inside of it, right? So in our server.js slash to-dos, right? Go to the to-do routes. Where the heck did to-do routes come from? Well, to-do routes requires us to go to the routes folder and find the to-dos file. When we get there, we see the router for any single thing that may be on the to-dos route, right? Anything that's on that to-dos route is now handled by this router, right?

We can do anything we want now. We found the right router. We can listen for all of those requests, right? All right, the router hears the request that came through. All right, the router hears the request that came through. What type of request came through? What type of request came through? Great, was it a post request? No, was it a put request? No, was it the other put request? No, was it the delete request? No, it was the get request that came through. When we load this localhost 2121 slash todos, I can even hit enter right now, It's the same request. That is a get request, right? That is a get request.

Our server was set up to hear the request on to-dos, to go and get the to-do routes. The to-do routes required us to go into the routes folder, find the to-dos file, and in that to-dos file, we have all the requests that we can listen for, right? We can listen for the get request. We can listen for the post request that would come from the forms. We can listen from the put request that would come from the JavaScript. We can listen from the delete request that would come from the JavaScript, right? But it was a get request. And since it was a get request, we get to check to see if the user is logged in, right? That's the next step here, right? That's the next step. We already confirmed that it's a get request. The next step is insureAuth, that's the next step. We just move on to the next step, right? We move on to the next step. And this insureAuth, all it is, is a function.

It's just a function, right? We can see it up here. All right, insureAuth, right here, we can see it, is a variable. So we have to find where this variable comes from, and it's literally right above. Here we go, insureAuth requires us to go to a middleware folder and find the auth.js file, right? InsureAuth requires us to go to the middleware folder and find, right, and find the off JS file. It's destructured. We covered that in a previous class, but it's destructured. And the reason why it's destructured is because right now we're just insuring off, but we can do a lot of other things. We could have guest accounts. We could have some other things that are going to help us as we start to expand the different kinds of users that we're going to be talking about. Right? So, very simply, we are grabbing insure off as a variable. Right? As a variable.

Right? As a variable. And we are using it, and to use that variable, we have to go to the middleware folder, and we have to find, And we have to find that off file. Cool, beautiful. So let's go ahead and look at that file. We go ahead and we look at it, right? We said, all right, we heard the get request, right? We heard the get request. First, we're moving on to the insure-off. To get insure-off, we're required to go to the middleware folder and find the off file. All right, here's the off file that's in our middleware folder. All right, and you go to the middleware folder and find the off file. Beautiful, we're here now. we found the file in the middleware folder that we're using. Now, this code is asking one really important question.

All we're asking is, hey, when the person made the request, right? When that, remember this whole thing is about a request, right? This whole thing is about a request. So, when the request comes in, Simba, Simba. Hey. I'm streaming, bud, what are you doing? What's going on? Huh? What was that? Thank you. What? Good boy. Thank you. Okay, cool. Simba found, Simba, so when Simba is hungry, they'll go get their bowl and bring the bowl to us.

And if we don't pay attention to them, he'll sit and he'll start licking the bowl clean, even though there's nothing in it. And so that's what you heard, is like the ding-a-ding-a-ling-a-ling-a-ling around the bowl. And now he's just sitting here, yeah. All right, so we managed to make it from hearing the get request, right? From hearing the get request to running a function. Leon, what do you mean it's a function? All right, well, we were required to go to the middleware folder to find the off file. Let's take a look at it. This off file exports an object, right? Exports an object that has a what? What is insure off technically? It's a method, right? It's a function, right? It's a function, but it's a method because it's part of an object, right? So we can see here that insureAuth, right?

Right, insureAuth is a function and that's why we're just telling it to run. And the only thing it's going to do is remember, we're still talking about this get request, right? We're still talking about this get request, right? And this get request can be looked at. And remember when we're sending requests, all this crap is being sent with a request. All this stuff, right? All this stuff is being sent with the request, right? And now, since we have Passport running on our server, we set up all the Passport stuff for us, since Passport is running, when we're sending this request, we can also see things like, is someone logged in? Is there a session that is running for this logged in user? We'll see next week how the sessions work, like where the cookies are being stored and all that stuff, right? And so we can now see on that request if the user is authenticated, that's it. And when I say authenticated, all I mean is are they logged in? So this user made a get request and all this crap had to happen, right? All this crap had to happen. And now we're asking one question about this request that came through and we're saying, hey, the request that just came through, that get request on the Todoist route that we just heard, was there a logged in user?

Right? Was there a logged in user? And if there is, all right, move on to the next thing. You're good. Keep it moving, right? Keep it moving. But if there was no one logged in, kick their butt back to the main page. Right? The get bounce. It's a bouncer. Exactly. It's a bouncer. The bouncer's checking. All right. Somebody made a get request to slash to do's.

Were they logged in? Because if they're logged in, great. Move on to the next thing. But if they were not logged in, And if the person that was making that request was not logged in, send them back to the main page. Now, is authenticated? Is that something that I coded? That's something that you'll code? Where's that magic coming from? No, Passport and the sessions and technically like the HTTP methods that support this stuff are doing all that heavy lifting for us, but that's not something I have to worry about. I can just use this middleware whenever I want to check if someone is logged in Right if I ever want to check if someone is logged in boom. I just use this middleware I can just throw I can just throw I can just throw insure off on any route I Can throw insure off on any route that I want to check if the user is logged in That's it. Any other time I ever wanna see if a user is logged in before letting them get to a page is simply putting that in the route before we get to our controller. That's it. You wanna build a members only section of your website, boom. That's it.

You wanna only have people that are logged in able to add to dues, boom, that's it. You wanna sell your feet pics and you don't want people to be able to see them before they pay, boom, that's it. That's how you do it. You're done. Cool. I was just, uh, no, I was watching true's newest video. Uh, and so true walked through, uh, the really wild DMS, uh, that they, and, uh, they had two guests get, uh, and so that was one of the DMS. So that's why I just literally just watched it before stream. Uh, so that's why it's in my brain. Oh, let me see if I can link to their video. It was good. Shut up true, there you go. Maybe, maybe that's what we should do. Maybe we shouldn't build Instagram. Maybe we build only fans.

Hmm. I might have to change some stuff this weekend. Anyway, anyway, uh, cause none of y'all are hitting that million channel points. So yeah. Oh, they did. They did. They built the, the only fans. I'm out. All right. Peace. Take care. Well, the door hit you on the way out. All righty, so we have this lovely insure off and this insure off just to make sure before we get to this controller, we're gonna make sure that the user's logged in. All right, so the user is logged in, right? The user is logged in.

We had a couple people redeem the Pokemon cards recently. we'll get to the Pokemon cards during our next kind of like office hours, which will be the review. So I'll do all the drawings then. Cool. So we now are sure that the person is logged in and now, all right, now they're logged in. What controller are we gonna use? What controller, controller, controller, controller. I was running through the six with my woes. I was running through the six with my woes. I'm just gonna leave this up here for real quick. You can get hip. I gotta turn off an alarm. I'll be right back. you That's where the gold is buried. So you just have to make those two quick lefts and then boom, free gold.

All right. Sorry, that was a drink break. I'm back. My little one has like a breathing alarm that's on them and it went off, but it's just cause my wife took it off and didn't turn off the alarm. So I just went to make sure it was okay. All right. So we heard the get requests, right? We heard the get requests and we make sure that that request, the person that made it, they're logged in. So boom, here's the controller that we're going to use. All right, here's the controller we're going to use. It's the todo's controller. To get to the todo's controller, it requires that we go to the controllers folder and find the todo's controller, right? to find the Todoist controller. And when we get there, what method are we going to use? Right, when we get there, when we get to this controller file, right?

This controller file has so many other methods in it. Create Todo, mark complete, mark incomplete, delete, right? So many different methods that are tied to this controller. Which one are we gonna use? Well, we've already set it in the route, right? We've already said, hey, when there's a get request that comes through, right, and it's on the todos route, and it's the main todos route, and we check to make sure that they're logged in, then we can go to the todos controller, and we can use the get todos method, right? The get todos method. Wonderful. Now, once we're in the get todos method, that we can do whatever the heck we want, right? We can do whatever the heck we want. Inside this get to do's method, we have a lot of stuff that's going on, but we're in full control, right? We're in full control of what this get to do's does. And what I wanted to do is to literally go and get all of our to do's, right? But, do I want every to-do chat? Nope, I just want the to-dos of the user who is logged in, right?

And the cool thing is, we can now just do rec.user. Remember, whenever a request is being made, all this stuff is being sent with the request. All this crap, everything about your computer, all this stuff is being sent with every single request. And now, since our users are logged in and we're using Passport behind the scenes, we can see a user property on that request, right? We can see a user property on that request and we can grab that user property to do cool stuff with it. So let's actually see it. Here we go is if we look at my terminal that's running, we can see the requests that are coming in. We can see the gets that are coming in for the to do's route. And we can actually see that when I make the get for the to do's route, I'm grabbing the rec.user and boom, here's everything about the rec.user. I can see their ID, I can see their username, I can see their email, I can see their encrypted password, right, and I can just grab that rec.user and use it however I please. Cool. All right. Now, now that I have a logged in user, right, I have a logged in user and I want to only get their to-dos, right? Right? Now that I have a logged in user and I only want to get their to-dos, well, I can just go to my database and find the to-dos where the user ID property matches the logged in user.

Whenever I created a to-do, like in my database, whenever I created a to-do, I had a user ID property, right? In my actual database, each to-do that I put into my database, I store that to-do along with the user that made the to-do. So now that I'm retrieving my to-dos, I can just look through all my to-dos and say, all right, the logged in user made this one, logged in user made this one, logged in user made this one, and I can just go through, right? We can go through, right, and grab just the logged in users to-dos, right? Cool, now if we want to go to the database, if we want to talk to the database and get some to-dos, what do I have to go through? What's the only thing in our MVC architecture that enables us to talk to the database now? The model, exactly. The model is the only thing that enables us to talk to the database. And I have it right here. I have to do, find, and then the query I'm gonna make to my database. However, we're gonna notice that TODO is capitalized and it is a variable that would require us to go to our models folder and find the TODO file. And this model is the thing that's gonna enable us to talk to the database. So if we want to eventually find, right? If we want to find the to-dos that are in the database, well, we have to go through our model and we're telling us where to go find the model. We're gonna find the to-do model by going into our models folder and finding the to-do file.

Now, once we get to that file, we're gonna notice that it's using Mongoose. And Mongoose is the thing saying, and you know what, Leon, I got this. You wanna talk to the database? I got this. It's gonna handle all the stuff we need to do to talk to the database, right? And it's gonna give us some structure called our schema. So when we get to this file, we're gonna see a few key things. One, we're using Mongoose, which is how we know in the background we're able to talk to the database and do all that fun stuff. We see the structure we're creating for all of our to-dos that will be created. We can see whenever a to-do is being created, we're giving it the actual to-do that'll be a string. We're gonna have a completed property of whether it's true or false. And we're gonna have a user ID, which would be the logged in user's ID at that time, right? So I can use this model to talk to the database and mongoose is doing all the heavy lifting. Mongoose is what's connecting us to our database. It's what's enabling us to use the models.

And it's just handling this for us, right? And so there's a little bit of, there's a little bit of, I don't wanna say, there's a little bit of magic here because before we used to see it directly. We used to be like, all right, DB was the variable holding the connection. Then we say DB collection, right? and then we do our find. So it was a little bit more tangible, right? It was a little bit more tangible where we would say, all right, we're gonna go to this database we've already connected to. We're gonna go to this collection. Mongoose is handling all that for us. It's handling the connection to the database and it's handling kind of where we're going to define this stuff, right? So that's the beauty of Mongoose. And the reason why we use Mongoose is because it gives us a way to model our application data. Right, what the heck does that mean? If we take a deeper look at what Mongoose does, is that Mongoose is what's gonna enable us to have a repeatable structure inside of our collections, right? Mongoose is gonna help us create all the individual documents because remember, each of the documents, right?

Each of the documents are just what? Each of the documents are just what? They're just objects. And since they're just objects, we could really, we could really kind of do whatever the heck we want. Right? We could put in any values. We could put in any structure we wanted. And as we start working together, that becomes a problem, right? That becomes a problem. If anybody can put whatever the heck they want into our database, and anyone can like modify the documents that are going in each collection that can get us into a lot of weird situations where we're all not really understanding the data, what's going into the database. We might not even have access to the database, right? None of you have access to my database right now, yet by looking at my code, you know exactly the structure of my database because the schema is giving us that structure. You know by looking at this schema, every document that's going to be put into our collection will have a username, an email, and a password, at least for our users, right? And then for our to-dos, we know that each to-do is going to have a to-do property, a completed property, and a user ID property. You don't have to have access to the database to know what type of data is going into that database, what's being stored there, and really underneath the hood, the models like our to-do model and our user model are just fancy constructors.

Just like the constructor functions we use when we were learning OOP, it's the same thing, except the object they're spitting out, we're gonna call a document, right? So our models are really just fancy constructors that are spitting out objects that go into our collections of our MongoDB database, right? And so now we can see, all right, we have our MongoDB database. Each collection is gonna hold a certain kind of documents that are described in the model. Just constructors, exactly. And instead of calling it an object, we're calling it a document. it. Right? That's it. Cool. Now, the beautiful thing is once we add to-dos for users, right, to our database, we always get these unique IDs that are created for every document that is ever created. And we can use those unique IDs to build out more and more complex applications. We can use these unique IDs to figure out, all right, what user made the to-dos, right? What users logged in, right? All that wonderful stuff, because each document that is created has a unique ID.

So when we are gathering all this data, right, we're gonna go to the MongoDB, we're gonna find all the documents, but in this case, we're only gonna find documents where the logged in user, remember, we got the ID off the logged in user. We're only gonna grab the documents where that logged in user's ID matches a user ID property on the document. Every single time we created a to-do, right? Every single time we created a to-do, we gave a user ID property that was the logged in user's ID, right? And we can see that. If we just scroll down, we can see the create to-do function. All right. When we create a to-do, it's gonna have a user ID property, and that property is gonna be the logged in user's ID. Right? The logged in user's ID. What would you build or do with all the object IDs? Well, we're using them to know what IDs, what documents to grab, right? If when we create the to-do, we're creating a user ID property, right? We can then use that user ID property to just grab the documents of the logged in user. Let's take a look at it.

Let's take a look. Let's look at our database. I'm gonna have two collections in my database, right? I'm gonna have a users collection and I'm gonna have a to-dos collection and then I also have a session, but we'll get to that next week. All right, so here's my user, Bob. When Bob was created, you can see that a unique ID was made, right? Right? You can see that a unique ID was made, and it's zero C5, right? So if Bob ever makes it to do, right, If Bob ever makes a to-do, what do we expect to see on the user ID property of that to-do? If Bob ever makes a to-do, what do we expect to see on the user ID property of that to-do? Exactly. We should expect to see the 0C5. So let's go ahead and take a look at our to-dos. And if we look at our to-dos, we can see, all right, 0C5. So I know Bob made first try.

I can see zero C5 and I can see second try. So I know Bob made that too. But then I look down here and I start to see these other user IDs. So I know that these have to be other users. Right? These have to be other users. Maybe Sarah and maybe Victor. Alright, tell me when y'all get ads, because I'm not seeing anything pop up on my end. If you get ads, tell me and that's when we'll take our break, because we should be getting them like right now. No. Well, this was a bust. I thought this would help, but... Okay. Alrighty folks, let's take a break here. When we come back from the break, we're spending a little bit more time just really trying to hammer home like how we're able to get to do, tie them to a specific user.

We're gonna see a few other more fun things and then we're gonna get right into project night. Cool. All right, let's take a break. I'm gonna put five minutes on the clock. Cool, five minutes on the clock. Gonna run the ads, see you all soon. Oh, it said it did run an ad. Oh, ads, they did start. All right, let's go If y 'all hear the ads have already run for the other folks, so i'll see y'all in five. All right, folks. Come on back Come on back All right, everybody come on in Yeah, Amazon Smile's a real thing. You just do smile.amazon.com and anything that you purchase, a small percentage of it goes to the nonprofit. So a lot of 100 devs folks put in resilient coders so that whenever they buy something off of Amazon, RC gets a little chunk of it, which is pretty nice. It actually adds up pretty quickly. Cool.

Alrighty folks, let's finish this up. So we, my dogs are the best. So put Simba in the other room Um, because they want him to come back and, and, and try to get the bowls again. But my other dog can open doors. So the other dog went and let Simba out the room and then Simba came back to me and got his bowl to bring back to me again. So like during the break, put the bowl away and put some in the other room. And then as soon as I sit down, my other dog gets off the couch, runs around, It's the door Simba comes out gets the ball and comes back Project night folks teamwork makes the dream work. That's awesome Already so We've talked about this idea alright, let's just let's just take a look at it we know that whenever we create a user, which is just creating a new document in the user's collection, we know that that user has a unique ID that is created. And so what we are doing is whenever a to-do is made, we're just putting that ID along with the to-do. That way we know who made the to-do's. Excuse me, why wouldn't we use like their, why wouldn't we use like a user name or why wouldn't we use like a like something else? Like maybe eventually in our application there could be people at the same name, right? But there can only be one user that has that unique idea. It is unique, right? And so it is distinct.

And so we know for every to do which user made that to do. So when we go and talk to our model to get those to do's we can find just the logged in users because whenever a request is sent now it has the logged in users info because Passport and the sessions running in the background to make sure every request we send has that information. We can take that information. We can query our Mongo database. We can get just the to do's they created back and I can pass that into my to do's EJS it's in the game right and it's just like we've seen before uh we're we're running uh-oh we're running through the i was running through the six with my woes all right we run through our to do's we pass through our views right and we're passing each to those individual to-dos into our EJS. It's in the game, EJS is spitting out an LI for each to-do and then we render it. We render it and when we render it, we've passed that rendered HTML as our response. So that request came in, went through all these chains, Chains right went through all these chains to render some HTML and we respond with it learning to dev a thank you for the gift of subs I appreciate you thank you for being here right all of that just to generate the response and send the todos back to our happy user All right, so I actually wanna take a look at that image one more time. I like this image at the very beginning. I'm mad I didn't put it at the end of the slides there. A lot of stuff happens, right? We went to localhost 2121 slash to do is we hit enter, right? Since we're already logged in, that is a get request, right? That is a get request, right? That is a get request.

And that get request comes from our client side, from our user, right? From our user, right? Comes from the client side, that request makes it all the way to our server. Our server is set up to hear those requests, right? It says, oh, it's a to-dos request, use this router file. Once we get to that file, we say, all right, it was the root to-do request. Check to see that they're logged in. If they're logged in, here's the controller you're gonna use and the method on that controller. Boom, we go to the controller. The controller, it says, all right, You want to use the getTodo's method? I got you. Go talk to your model so that we can find all the todo's. So we go to our model. The model knows what to do to talk to the database. It finds all the todo's where the user ID matches the logged in user.

Once it has all those todo's, the data is passed to the views by the controller. The views takes that data, starts printing out LIs for each of the todo's, and then it decides that it's done rendering, right? It's done rendering that HTML. The controller has the HTML and it responds back to the client with that HTML. And if you understood 50% of that, 10 second warning, 5, 4, 3, 2, 1. and how full-stack web applications with authentication are made, yet authentication is our application. Oh, I'm so fucking proud of you, bro. if you understand 50% of this be fucking proud of yourself know how many people start this journey and don't get past html class one 7400 people class two 5200 people one class two thousand people after one class gave up One class. We're on class 51. Be damn fucking proud of yourself. Even if all the little bits and bobs don't make sense, even if these files are still a little scary, that's okay, we're gonna go deeper with them next week. We're gonna actually look through like, all right, how does Passport work? How is it using the session? How is it doing the cookies? There's time for that, right?

But tonight's a victory lap. A victory lap because you're starting to understand some of this shit and it's pretty wild, right? And the secret is, this is it. This is it. We add like image storage with S3 or Cloudinary and like whatever the hell you want to build, you can build with just this stuff. This is it. Any app you could ever think of, you can build with just this. There's nothing else extra. This is it. You might add a little bit more middleware if you want to handle like emails, might add a little bit more middleware if you want to like process credit cards, but all that shit's also just Lego pieces that you cut and paste, but everything's here. Whatever you want to build, it's just this. This is me revealing the curtain, right? This is it. This is all that's left. If you get this, you're done.

you're already software engineers, you're already full stack developers, but you can build full stack web applications if you understand this. Now we can add a little extra stuff. We can make maybe making our views a little easier with React, maybe we can do a little bit different like type of databases or like Postgres, but like it's all the same shit and you don't need any of it. You can build full stack web applications with just this. So if you understand this code base, right? If you take the time to understand this code base you can build whatever the heck you want You're fully full stack You're fully full stack We're gonna introduce somebody said what about audio storage. I'm gonna show you cloudinary. I like cloudinary It's a little easier to use I think than s3 and with cloudinary you can store any kind of media You want to host videos you want to host images you want to host audio boom you want to build a podcast website boom You got it. It's it's just that it we add one more thing in like any type of app that you want is easy to build. And so I hope that you realize how close you are. And now it's just putting in the work to build cool shit. That's what we're going to do. Over the next few classes, we're going to build cooler and cooler stuff. We're going to understand more and more what's behind this starter code, right? We're going to build the Instagram clone and then we're going to build an app from scratch so that we'll see all the pieces coming together.

But this is it. You're there. You did it. Now let's do it together. All right. So. Don't let your dreams be dreams. yo learning to dev what learning to dev did a tier three for three months thank you and gifted subs. Oh, what day is it? I see you. I see you. I see you learning to dev. It's September. It's September. The, the longer you sub, the more discounts you get.

I see you. Thank you. I appreciate it. That's dope. No, like Twitch like discount subs and like the longer you sub the more it discounts it. So learning is splashing out. That's dope. Thank you. All right. So tonight, don't let your dreams be dreams, right? Tonight don't let your dreams be dreams. Build what you want to build. So last Tuesday, the goal was to at least understand the code, right? Right. Your goal is to at least understand some of the code, right?

Tonight. Now you went through it again. Maybe you watched mine. We'll stream yesterday. We went through it again, right? Now we're going to come back together again, right? to play and build on top of this code. First goal, first goal is to make sure that everyone understands, right, the code base. Make sure folks understand what's happening, make sure everyone understands how, right, everyone understands how, to make sure to-dos are making it into the database, Make sure they understand how to do's are tied to individual users. And once everyone in your group feels comfortable with how to do's are being tied to individual users, you're able to understand the app a little bit. Make it your own, right? Make it your own. So you're going to go to your room floor and table assignments, right? If there's no one at your table, like if your group doesn't show up, that's okay, go to the fifth floor on room two and find a new group, right? If you didn't get a group last Tuesday, right?

If you didn't get a group last Tuesday on, well, two days ago, go to Remo on the fifth floor and find a group, right? Your goal is to use this code to build something, something different, uh, something real, uh, something that you work together to make look good. Okay. Uh, I have shared a replit, which is a version of this code. It's the, it's the exact same code from GitHub, right? But it's on replit. And the cool thing about that is if you fork the replit and use it, you can all collaboratively edit at the same time. So for some folks, I know they were having a little bit of trouble like getting github and like working together on github and like Creating a repo and all like all that was kind of too much So if that's like being a hindrance to you right now, that's okay We'll have longer stretches of time for longer projects where you can figure all that out but the replit might be a good place to start because you can all just like code together pretty easily and it doesn't matter like How decent somebody's computer is? Yeah All right, cool. Rascal said, for those who have replits breaking, hit the three dots, show hidden files, click the replit file, and change the entry point to server.js. Yeah, entry point server.js, cool. If we do want to use github suggestions on how to use it work the repo and then add everyone to your forked repo That's kind of that's kind of it Yeah, then you just add people to your to your repo How do we manage MongoDB as a group you can just whitelist the IP address of whatever MongoDB instance that you use So if you just pick one person to create their MongoDB instance And then just whitelist the IP address. That's the easiest. You can also add people to your MongoDB instance. For some reason, that always is weird for me.

Yeah. Glitch is good. VS Code live share is decent. Yeah. Cool. Alrighty. So, we are going to leave the hallowed halls of Twitch and move over to Remo. Please go back to your room floor table from Tuesday. If for some reason something weird happens, nobody from your group shows back up, that's okay. Just go get a new group, fifth floor and up on Remo room two. All right, everybody. Have a wonderful night working on this. I'm gonna be on Remo hanging out. I'll probably stop by quite a few of your tables to say hello and see how things are going. Maybe lend a hand if I can.

Be kind. If you can't be kind, don't show up. Remember, we're all here to learn first. That's the primary goal. Don't use new stuff we haven't covered yet. Really make sure everyone at your table understands this code base, add to it and build something cool. Make it look good. It'll be due on Tuesday. Have a wonderful rest of your night. As you work on this stuff, I'll be hanging out with you for a little bit. Uh, and then over the weekend, I hope you have a good holiday weekend. If you're in the U S uh, no office hours on Sunday, because it is that holiday weekend, we'll do the super review the following week and I'll see you all back here on Tuesday to start building bigger apps with this code base. If you have more questions Get on discord ask your questions in the help channel. Make sure you're hitting up the stream team I'll share my most review class in the follow-up message to this But please we're community taught get help from the community be a community tonight work well together Be kind help each other and let's build some cool shit Let's go people. Have a good rest tonight.

See you on Remo No raid and if if if if if if if if if if if if if Yo, good morning, good afternoon, good evening, no matter where you're coming from, hope you are doing well. So, so Leon raves. Oh, back in the day. Let's just say what's going on, everybody. Hope everyone's doing well. Welcome back. Hope you had a wonderful weekend, a long weekend for the folks here in the States, a welcome back. Hey, does this work? Hope it works. I think I lost my other sounds though with the move for those that follow me on Twitter. you know, that I, uh, I had a, I moved my desk. It's, it was a problem. It took me all, it took me the long weekend. Yeah, it was pretty bad. It's got roasted on Twitter about my wires.

It's okay. It looked clean as hell. Now, though, I got to finish a few things and I'll post a follow-up, but, uh, it's beautiful now it's, it's, it's, this is, this is a, this is a dream room. Let me, let me paint the picture for you real quick. I'm not going to post it. I'm going to paint the picture for you while folks get in here. I still have to fix quite a few things. Like my lighting is mad off right now. I'm going to look like a tinge of green. That's okay though. We'll live for one class. And I got to fix the lighting on the green screen. But let me paint a picture as folks get in here and then we'll get our questions in. Beautiful computer setup, right? Box lighting, a desk that goes up and down, three monitors, the beautiful micro XLR set up, laptop, PC next to it, eGPU behind it, NAS on top of that, right?

Then we have going up the corner of the wall, the Pokemon collection. It might get replaced with plants, but for now it's the boxes. We got some Pokemon blue, yellow, crystal, emerald, what you want, I got it. Got graded, ungraded, whatever you need, I got you. And then it doesn't stop, folks, because you just keep going to the right. Beautiful workbench, 3D printer, full soldering setup, VR, dream room, folks, dream room. So I'll share the photos. And then you look on the floor, no wires, no wires. No wires, it's clean, it's clean. Thank you for everybody that gave me, that gave me cable management advice. Like it really helped, like it really helped. I got these like under desk, like mounts for like, for power strips, game changer. And so yeah, thank you for the help, I appreciate it. Glad you're all here. Let's get into some questions.

I ran the ads at the beginning. I'll start them immediately. I forgot to start them. So there was like three minutes before I should have started them But I was gonna start them like right as we start so do with what that knowledge you may But we're gonna run three minutes at the beginning that way folks don't have to sit through them during Stream so as always like to start off with some questions if you got questions, I got answers I wanted to let people know why I look a little weird while like my shoulders gonna be lit I got a dial in the the lights proof for pan Yeah, it is it is it is quite the setup. I'm very proud of it. And the best thing about my setup, the best thing about the setup is I didn't pay for it. I didn't pay for it. When you when you have these tech jobs, you can you can negotiate, you can negotiate professional development funds. And sometimes when you negotiate for you can it can be hardware, It can be software. It can be trips to conferences Do with that knowledge what you may so we're gonna actually talk about that when we talk when we have our How to negotiate your offer class We're gonna talk about all the little things that folks don't negotiate that they should probably should that actually have like a real Tangible benefit on your day to day. Yeah So if you're working from home, you should be getting working from home stipend and something you should be negotiating for So we'll talk all about that as we get into the hunt. But yeah, so that's the beautiful part All right, if you got questions I got some answers Let's see. I always like to give folks a few seconds to get in here I know we took a little bit of time. So I'll only do a few questions here What was the latest thing you 3D printed? Um, anyone remember floating head Leon?

Yeah, I gotta bring that back. What was the latest thing you 3D printed? I 3D printed a picture frame, like a circular picture frame. It's pretty ballin. It's like a circular picture frame and um, maybe I'll grab it during break. But yeah, that's pretty I want I needed a picture frame. So I printed one You 3d print me a job I'll try All right Well people who don't make it to hunt tober see the data structures and algorithms classes. Absolutely So the the destruction of algorithm classes will all be live here on Twitch all the things you're gonna need like anything you need to be ready for the hunt, anything you need to be complete in terms of your software engineering knowledge to get the job will be completely live and done here. I think some people are still kind of panicking over a little bit about that. Everything you need will be live. In fact, everything that you need is already on YouTube. Like last cohort, like if you're Jones and you're ready to just hit the ground running, It's it's already it's already on YouTube. So like it's already there, right? So you don't have to panic up to freak out like everything you need not even not only we're gonna cover it for you But it's already there for you right, like Like that that's there. So don't worry about that What the point of hunt over is is there are quite a few folks that are ready to get serious About the actual job search, right?

about the actual job search. And so since we have such a strong group of folks that are ready for the hunt, I wanna have some time where I can focus on them, where I can invest a lot of time to make sure that they're successful, to make sure that they get the help that they need, that we can go a little bit deeper into the things that they might need on the hunt and be able to answer questions in real time each day. right? And so that's the, um, that's, that's the, that's the idea, right? It's just a month to focus on folks that are ready to go into the hunt. That way I can provide a little bit more support on the daily, uh, to make sure that we get a little bit more practice in together, but all the core stuff you need, boom, we'll be on, we'll be on, uh, Twitch for sure. Um, last, last time we did the mega month, we called it mega month or mega summer last time. Uh, what it wound up being is pretty much every day we would meet at the same time, we would do a coding challenge together and the coding challenge is just built, right? We started with strings and arrays, right? And then we built up to, all the way up to using things like hash maps and more complicated data structures, but each day kind of built, right? Right. Kind of built on top of each other, right? Kind of built on top of each other. So that way it just gave folks a little bit more practice every day on the data structures and algorithms. And then I had some period of time where I would answer questions that were coming up Leon, how do I negotiate this or Leon?

How do I? How do I How do I deal with this like thing that's coming up in the interview or things like that? So just a little bit of focus time for folks that are ready to go on the hunt. That's all it'll be and Then also just a chance to really to to help those folks with a few extra things they might need while they're going through the hunt. I'm prepared folks, I'm ready. We brought in the big guns. We have folks helping us with the new little one. They're here on Tuesdays and Thursdays now to get me having some extra time to be live and do this. And then they're gonna be helping us throughout the week during Hunttober. So I'm locked and loaded. I brought in the big guns, I brought in the help. Uh, so we're going to have, uh, a really strong time where we can focus and make sure everybody gets the help that they need. So that's the beauty of Huntober. That's what we're trying to bring to the table. And, uh, I'm really excited to see everyone working so hard to, to, to take that month seriously.

But like I said, we also have the, the illustrious, the wonderful, the charismatic catch up crew and, uh, everything that they need will also always be live, right? So it's, it's, it's, it's not something that if you can't make it for this Brief period of focus if we can figure out how to do this. Well, I'm gonna do it again, right? and I think that's I think that's the mindset I've been having with a hundred devs recently is like No one's ever done this before right? There's no blueprint for me to follow So I'm trying things some things really work and some things really don't right? And so unfortunately, you all are the guinea pigs as we go through like the first real cohort at scale, right? We've done a smaller cohort, but this is a chance for me to figure out what works what doesn't work it's a chance for me to figure out like, all right, project night, what worked about it, what didn't work about it, right? Like that's a big thing to take away from it. And the next cohort will just be better, right? And so thank you for helping me iterate. Thank you for helping me figure out all the kinks. And let's make it so that folks in the future have an even better experience. That's the goal, right? 100 guinea pigs, exactly. Cool.

All right. Thank you for the questions. Checking in. If you have not checked in, please go ahead and check in. Exclamation point, check in. We'll give you the link. All right. We'll give you the link. If you click the link, you still have to like and retweet it. There will be, there will be, there will be nothing that like checks you in stream here. You actually have to do the like and retweeting on Twitter. I have to keep saying it because people keep forgetting. All right. Cool. Submitting your work.

Checklist was due, I want that. But your project is also due. This shouldn't say checklist, this should say project. I want your project from project night or project week, right? From project week, I want your lovely, wait, did I say class 51 in the thing? No, it's class 52. Because project night, okay, I did say 52. Yeah, cuz project night was 51. So yeah, I want your checklist, which is your last day. I'm still bigly. I'm sorry I want your Checklist is the last day to submit the checklist and I want your project night. Show me what you got Right. I don't care how deep you got into the project. I don't care how far you got how many changes I don't care if your team ghosted year or whatever. I want to see where you're at.

Show me what you got, right? I'm not looking for perfection. I'm looking for where you got with your project, right? Cool. GitHub repo or live site. Whatever you want to share. Whatever you want to share. Whatever is easiest to share is okay. Do we all submit? Yes, you should all submit your site. Yep, you should all submit. Even if broken, yes, even if broken. If it's broken, probably submit your repo. Learned so much from this project. We also a lot of headache to deal with when it comes to GitHub.

Yeah, that's kind of the point, right? These working as groups, kind of, it does a lot of different things, right? It's one thing to work on a project by yourself. It's also, it's a completely different thing to work on a project with others, right? And so the beautiful thing is that with these project nights, we learn, right? Like we figure out what works with doesn't work Unfortunately, sometimes at project nights you don't get it like you're bringing hundreds of people together So it doesn't always work out for everyone and that's unfortunate Like you might have had trouble finding a group or keeping your group together over the week that's that's that's gonna happen, but we'll do quite a few of these and More often than not you can wind up with a really great group So if project night wasn't something that really worked out for you this past week, that's alright buckle in We'll do another one where you can meet some other really cool people but it seems like from chat, a lot of people had a really good experience, had a lot of fun working with their group. And so I hope that you got something out of it. And we're going to do a couple more, because like I said, it's really important to get used to working with others. And as we learn more stuff, right, as our projects get bigger and bigger, we're going to start adding some ways to manage your code, right, that makes it easier to work with others and we'll start introducing some processes like agile and doing sprints and stuff like that. So we'll have some chances to do more projects in a more like coherent matter as we get further along and we learn more. So just know if that's something you want and that you enjoyed, we'll be doing a few later on. It was scary for me. I don't want to mess things up, but I learned a lot. Hey, I love to hear that, right? Yeah.

And that's why we do it now, right? We do the scary stuff Now so that when we're on the job, we're a little less scared to break stuff. All right. All right. So thank you for submitting both your checklist last day and your project night, wherever you got from what you got. Back in review will be Sunday. So we're going to start at 1 PM Eastern time and we're going to go until we go. So we're going to try and review everything back end, going all the way back to the beginning. we're talking kind of promises all the way forward. So if you kind of are still a little unsure about a few things, come ready with lots of questions, let's dig in and get through it. Cool. So we'll try and build all the way up to kind of our MVC with Auth class. Hunttober, we kind of already talked about this a little bit but coming up, things that I need you to get done with the deadlines, we check in every class, You do your homework, which is a week done. I was gonna do a week later your net week and networking your networking Please bring that back into the fold at least one coffee chat a week and at least three connections every week So make sure that you're keeping your sheet updated exclamation point sheet if you haven't been doing it. I will be Asking for your sheets in the near future to see that you've been doing the networking alternatives are for folks that have an an actual issue that would prevent them from networking.

Most folks that have an issue that would prevent them from networking have probably already reached out to me like on mod mail or something like that. But if you actually have something that debilitates you from networking, you can do things that can help you network in your way. So that could be text-based networking, that could be groups, things like that. So we actually, in our networking class, talked through alternatives. So if you're interested in that, Definitely watch that class and all the alternatives that we presented But that's that's really just for folks that seriously have something that would impact them from networking Because it is so important to the job hunt All right, you're doing a coding challenge every day don't forget you're pushing your challenges every day to a private repo But you have your green squares turned on for private repos you're doing the bank. And this week we're moving on to a raise, right? I was raised. Get out of here. That's funny. I got a VIP them. I don't know if I can VIP you though with that username. This week a raise. So last two weeks, we did strings. This week, we're doing arrays. And in Discord, I shared readings and a video for you to watch about arrays.

So on Discord, I have the javascript.info arrays, which we did when we covered arrays in program. So that's a really good just refresher in all the array methods. There is a free CodeCamp article on destructuring. A lot of folks were confused about the destructuring and I forgot that we had redone strings and I hadn't actually shared the reading with you, my bad. Thank you for the engagement though. And so the reading on destructuring is there. And then there's a video on arrays as well from WebDevSimplified, which has a lot of amazing, who has a lot of amazing videos. And so those are kind of your homework for this week to bring arrays back into the fold and you're doing at least five code wars all tagged as arrays. So make sure you are just doing array problems. Right? Right. Right. Make sure you're just doing array problems and focus on that. So the reason why we're doing like strings and then arrays, and then we're gonna do objects is that by the time we get to October, and by the time we get to our data structures and algorithms classes, we can rely on this bank of information that you've already been building up. You should be putting these into your Anki, like all the methods should be in your Anki.

This is something you're gonna need for all of your interviews. And then when we get to our data structures and algorithms, we understand like why some methods are better than others. We kind of understand the complexity behind them how much time and space different things are taking up and then we build off of that for our optimizations, so if you don't already have The strings the array the objects and all those methods kind of ingrained in your memory It's gonna be a little bit harder to build off of them in a month or so So when I assign these these are these are some really important bits I need you to be working on each week because it's gonna help us have a nice springboard for our data structures and algorithms class. Some people are saying GitHub is down, so we'll leave the homework open until Thursday so that if for some reason GitHub is giving you some trouble. Also, tonight's gonna be a little bit different of a class. We're gonna talk through the rest of the auth code that we haven't talked through, and then we're gonna plan out our social network. So we might end a little bit early So you can actually look at the code and hopefully github is up when we do that Uh, a hundred does bring it on github. Let's go Um, but yeah, so arrays this week super important You know what not serious enough let's go to the border Super important That you get this array work done if you didn't do the string work This is your sign to do the string work and then follow the array work. This is really important. It's our springboard into doing well in our technical interviews. I need to have this base level of knowledge so that we can do well during our interviews. Do we need to learn Regex now? No. If somebody asked you to use regex in an interview, I would just I would just I would get up and leave Just get up and leave It's not gonna work out. I'm sorry.

I Appreciate your time. Thank you for the coffee, but Please don't call me All right Last day, please turn in your checklist if you want to be part of hunt tober. I need your checklist today All right, team project, where I said due today, boom, uh, hit list due Tuesday, next Tuesday hit list is due folks. Um, and I don't need, I don't need it fully filled out. Like I don't need all the complex stuff that we're going to cover it together when we do it in class. I just need the companies that you're going to apply to. Right. So I need the companies that you're going to apply to. I want at least 40 by next week, 40 open positions that you're going to apply to. right, 40 open positions that you're going to apply to. By the end of our Hunt-tober, you'll have 60 and you will have built out those 60 to have at least three people at each company that you can contact, right? So I need 40 at least by next, I just like doing this. I need 40 by next week of companies with open roles that you could actually apply to. What happens if the position closed after we select it? Nothing you can do about that.

the hit list will be like a living, breathing document. Like the hit list, like, I don't know how, like this is gonna be like what you do every day, all day is the hit list. It's gonna be something that you're gonna be using every single day. It's something that you're gonna be really invested in by the end of October. And so get comfortable with it now, start adding those companies and yeah. I'm gonna ask for that next Tuesday. Should our three connections already be target towards the hit list? I think once you have your hit list done, hint, hint, hint, your networking will become focused on just those companies, right? So we'll no longer be doing just kind of like general networking. Your networking will be to meet folks at those companies that could ultimately give you a referral and we'll talk through all that. Yeah. So for now, I don't need you to do anything fancier with your hit list and find the open roles that you're going to apply to that are a decent fit. And then, uh, we'll have a whole class on how to fill out your hit list. Uh, and then we're going to fill out some folks hit list live. We had, uh, two folks that won, uh, raffles for me to do their hit list live.

So we'll do that live together. I'll show you all the tips, tricks, secrets. I'll even share the messages that I would send. Uh, and you can all do that together. So safe to assume that our next company to work at is on our hit list. Most likely for most of you, the company you wind up working at will be on your hit list. So when you add these companies to the hit list, talk about some manifesting, right? Like, come on now, like you're putting these companies on here because that's where you're gonna wind up working. Right? There's nothing more real than that. Also, a lot of you will start to have, once you start the hunt and you're doing things correctly, you're actually gonna have some inbound interest too. And we gotta go back to the boardroom for this. We have the 100 devs job board that will be launching with Huntober met with a wonderful company that runs software for job boards that is. We already have it up. It's already up and running, and I'm going to start reaching out to companies to get them to post their jobs on the job board for folks that complete the program.

You'll be invited to create a profile on the job board And my goal is to start bringing like top-tier companies to that job board to hire top-tier talent So that's gonna be one of the perks that we'll start with hunt over We'll start small kind of with that group make sure it all works and then kind of keep blowing it out So yeah, that's that that's the beauty of what we're trying to work towards. Yeah, so that was fun. I did that last week Uh, it looks pretty, pretty crispy and so it's gonna be fun, fun bringing lots of employers on there and then, uh, bringing you all in there to help you get some jobs too. So yeah, that's going to be a, I think that's one of the, there's like a couple big missing pieces. Right. And I've talked a lot. I talked to some about this in the past. Like, uh, I want ways for folks to make money while they're going through this experience. I think that's important. I think that's actually what equity is, is not just offering free education, but a way to like support yourself while you're doing it. I think the agency could be that piece. And then one of the bigger pieces is like getting you a job. And before it's kind of just been like, hey, go out there, get the job, which I think you should always want to do. But I have so many companies that ask and want to target you all specifically. They see how successful the past cohort has been.

And so bringing employer partners into the mix to help you ease into that job transition Is I think one of the last big pieces and I'm gonna say full stop. I can't do it by myself I'm gonna be asking for a lot of help as we kind of keep going forward And so if that's something you're excited about talk about a hundred maintainers and fun stuff like that It's gonna be something that we're we're gonna be trying to push And then we're gonna take some time to get it, right? Like I think folks keep asking for another cohort and I wouldn't feel comfortable with another cohort And so we kind of get those things like hammered down, right? Like, I want, I want folks to have like the complete experience. And I think that's part of it, you know, cool. All right. 27th client signature approved PR on an actual open source project. Um, I love all of the open source projects that are like, Come learn how to contribute to open source, but I want it to be like a real project. Um, something that is a real like organization that's real code, like a real library, real framework, real, like something real, something that when somebody says, Oh, that's pretty dope. Like, that's what you did. Wonderful. Right. Uh, or volunteering for a grassroots organization. Uh, so that's due the 27th, your MVP. Holy crap.

This is, this, this is, this is pretty close. Your beautiful MVP for your 100 hours project is due the 27th. Do you need both? No, you just need one. You just need one of these things. Either you got your, either you got a paid client, you volunteer for a grassroots org, or you got a pull request at an actual like free software open source project. That's like a real project. Your MVP, remember MVP is just the bare bones, like proof of Concept for your application 21 days to MVP. Hell yeah, let's go and the beautiful thing is if we get through what we need to get through tonight And we get through what we need to get through tomorrow You have the full template for your MVP already like by the end of tomorrow as long as github stays I'm sorry by the end of Thursday as long as github stays up. You'll have the template for your MVP It's just figuring out what you're gonna do to add to it change it what features you're gonna add stuff like that Yeah. And then the 11th, your 100 hours project is due. October 11th, 100 hours project is due. And then your premium master, which we haven't talked about yet, will be due as well. And we're gonna be sharing a lot of stuff that I think is how to play the game. It's up to you to figure out how and what you wanna do to play the game, right?

So that's coming through. And then my last bit of advice, I know this is a lot. So whenever I say all these things that are due and all the things I need you to be working on, I always wanna follow up with, Don't take yourself out the game. Let the game take you out. It's not going to. Put in all this work, you put in all this energy, right? Don't take yourself out the game. You got this. All right. So tonight I wanna wrap up off. I wanna walk through the code base. I wanna answer any questions that you might have. I want to look at a few quirks and features that we haven't had a chance to talk about yet. And then we'll take our top of the hour break and when we come back we're going to plan out our social network so I think a lot of folks are still having a little bit of trouble figuring out how Like a really like an app with a lot of features would come together right and How we might actually build something real so our goal is to build a social network for a hundred devs An Instagram clone was what we'll kind of start off with and we might add some stuff that goes our different ways We can't call it Instagram we couldn't call it quick kilo, so we want a quick pound but Your question of the day is what should we rename it last cohort decided to rename quick pound to binary upload boom Because you were like uploading photos But we're gonna lay that out. We're gonna talk through it together.

We're gonna scaffold how the application can come together We're going to talk through all the bits and bobs that we might need and then Your homework will be to look at the binary upload boom code said on Thursday We can walk through it fully understand everything comes together and then extend it add some new features things that might not already be there well Dev Graham only Bob's devs unite Oh photo show Oh, only, but I like only Bob's that's pretty cool. Rapid snap. Ooh, rapid snap. Slow gram. Only devs. Only devs is actually pretty good. I'm sure somebody has done that already. Peekaboo. Oh boy. All right, we're gonna do like a poll or something. and keep sharing them out. We'll go back and pick the best ones. We'll do a poll before the end. All right, let's go ahead and wrap this off up. I am looking at the to do MVC off with local authentication code.

That's where we're starting tonight. Right now, I already have it running. And so on port 2121. Did you all hear that? Did you all hear anything? When I press it, will you hear anything? No, no, hold on, is there anything, is there anything, is there anything, 21, 21, 21, is We lost our our soundboard with the move All right rip it was a good run It was a good run. We'll have to rerecord them. I All right, let's take a look at this code. So there are some things that we haven't had a chance to actually talk through. And so we've kind of taken a process here, right? Like I showed one, right? You built one and then you work together to build another, right? So you've kind of had a chance to work in this code base. You heard the 2121?

You know what, I think I'll play it with me. You did hear it, I just don't hear it. Huh, all right, I'll have to watch back the VOD. All right, that's really reassuring. All right, beautiful. I just don't hear it in my headphones for some reason. I hear all the other ones, I don't hear those. All right, cool, we're good. You got got. I got got. I did get got. I did. All right, so let's walk through this. We're gonna look through the bits and bobs that folks have been asking for. I'm gonna talk a little bit in detail about Sessions which are really important folks have asked a lot about flash Sessions folks have asked a little bit more about the the models and how those are working.

And so So we're gonna walk through these right right We're gonna talk through these and then we are gonna take our top of the hour break So, uh, just kind of going from top to bottom here, uh, express obviously is what we're using to build out our API. Uh, it is everything that helps us handle everything between like the requests and the response. So we hear these requests coming in and what the heck do we do? And it stops us from having the hard hand code, all of those things. Like we started from the mud, right? We started at the very beginning coding, raw HTTP, raw FS, right. And build an app with just that. And now we use Express to actually build out a more rich API instead of having to hard code all of that stuff. And then instead of having to constantly say Express, we wrap all of that in app, which is pretty common. Now to handle us talking and interacting with our MongoDB database, when we first started off, we were just using raw Mongo and the raw Mongo client, right? Now we're using mongoose, which helps us do a lot of fancier stuff to interact with our database. It's going to help us do a lot of things when we're just using like our models, and it's going to help us connect a little bit easier. So mongoose is doing the heavy lifting for anything that has to do and interact with our database. Passport, we talked about over the last two classes, is the package that's helping us handle our authentication. And the beautiful thing about passport is passport has what chat.

What does passport have? It does have authentication has strategies exactly so password is handling our authentication, but it has strategies and And once you have an application, you can swap out those strategies to do different stuff. So we are using a local strategy, but if we wanted to, let's do Passport JS. If we wanted to, we can go to Passport JS's website. And then you can see right on their main site, they have these lovely strategies And their strategies for whatever the heck you want So Google off, right? So if you wanted to authenticate with Google if you wanted to use any of the fancier like Oh off type stuff If you wanted to authenticate with Twitter, right? So maybe your 100 hours project is a Twitter app of some sort, right? well, boom, you can authenticate with Twitter if you wanted to Just a lot of different stuff and these are all just different strategies for any type of login access that you'd want to do. And so that's the beauty of using Passport. You have one type of, like, just use our code template and then any type of login or authentication that you want to do, it's very easy to add. And the other cool thing is that you can even add to what we have here. So folks could do local or Google or things like that. And so if you're really interested in, um, adding other types of authentication to your applications, we saw the Google auth in the Traversee media that was assigned for homework. And if you go on my YouTube, I used Microsoft auth as well. So, um, just different types of signups should you want them, uh, and kind of talking through some of the benefits you might get if you use those types of auth versus local and some of the things you might give up.

So if you're curious about other authentications that you could do with Passport, I have a video using Microsoft Auth on my YouTube and then also just the homework that we did. Cool. Where do you add that strategy? So we have the Passport.js file in our config, right? So you can see that this is requiring Passport, which is our actual package, like the npm package. But down here, you can see us requiring our actual Passport.js file. We're saying we require you to go to the config folder and find the Passport file. And when we look in this Passport.js file, you can see that we're using a local strategy, right? And we're using that local strategy. We could replace this local strategy with any of the other strategies that we find on this website. So if we want it Twitter, boom, uh, it's going to have everything that you would need for the Twitter strategy. And normally they link right to GitHub. Um, so you, you would probably install this NPM passport, install Twitter, and then there would be the code that you could grab right here. Right. You grab that code, you plop it into the template that we already have.

and it's pretty much it. The docs, some of the docs are pretty rough because they have over 500 different strategies that were all pretty much done by different people and maintained to different levels. So sometimes the, some of the more obscure stuff is a little rough and some of the more commonly used stuff is a little bit better. And so that's the rub. You gotta find the one that you wanna use. Yeah, the great thing is that passport is so ubiquitous that you can typically find a tutorial or things like that That walk through different strategies. Can you do multiple strategies? Yes You can in fact the start up Let's see if we can find this hackathon As an example, I've showed on stream before. I'll put this in chat just for folks that are curious. I haven't used this in a little while. I'm not sure how up to date this is. It looks like the last commit was in March. So I'm not sure if it's the best thing. I've used it in the past, but it's been a while since I've used it. The cool thing is you can see in their config probably that their Passport JS is using, it has all the strategies.

It has all the strategies. Look, look, Instagram, local, Facebook, Snapchat, Twitter, Twitch, GitHub, Google, LinkedIn, OpenID. Like it has all the strategies. And so when you go into their login page, which I think they have a, yeah, I think this is like the hosted version. Cool. When you go to create an account or sorry, login, you see how they have all the different logins here. That's because they have all the strategies already implemented. Uh, so something that you might do is if you're like, Hey, Leon, I'm really interested in Snapchat authentication, right? I'm really interested in Snapchat authentication. You could go to like passports website and find it, or you could just go straight to the hackathon starter, look at their actual code base and see how they implemented the, um, the Snapchat, uh, strategy, right. And then you could just come down here. Um, you, they kind of have it really well commented, um, sign in with Snapchat. You could just literally yoink this, right? Yoink it. put that inside of your passport JS file and make sure you have the require up here.

And then you'll probably have to install an NPM package for it. So it's kind of like three steps you would need to do. You would need to one, install the NPM package tied to it, probably like passport Snapchat or passport Twitter, but you can always find that on the site or look at their package.json, right? make sure you have the package installed, grab the requiring of the strategy, and then just grab the strategy from here, plop it in, and then you have Snapchat off, right? And there's a little bit of things you have to get comfortable with, with how different authentications work. But once you understand that like you're passing tokens back and forth or other fancy stuff, it becomes a little bit easier. I'll link my video on Microsoft off in The follow-up materials just in case you wanted to use any of these other strategies You could watch that video to have a better understanding of how different non local authentication strategies actually work Yeah Cool, but that's the beauty right the beauty is we have Built our authentication on top of passport and since we have built our authentication on top of Passport, we can swap in and out or even use these different strategies whenever we really want. And so super, I know it seems like, Leon, it's a lot of code. It's not, you're really grabbing three things and none of this, just to reiterate, because people always kind of get a little scared when I put this big file on here. None of this is anything, right? None of this is anything that you would ever have memorized, right? This is literally, all right, I know I'm gonna use Passport. Somebody has put in the time and energy to make this work, to handle all the heavy lifting when it comes to authentication. I'm gonna use their hard work and their brilliance to build this out, right? Unless you're like a cybersecurity researcher or this is something you're really interested in, or there's some weird authentication that you wanna use that they don't support and you wanna build it out, that's the only time you would ever really kind of mess with this and build it out.

Right? Local strategy just means you're logging in. Yeah, you're creating an account. You're having, in this case, email and password. Like your authentication is local to this application. It's not being authenticated by some other provider. Someone said, are any other authentications better than another? Not really. But when When you use certain authentication strategies, you get some stuff built in. Right now, is there anything stopping people from creating accounts on our application? We could build out some more robust stuff, but right now, there's nothing stopping somebody from creating a bazillion accounts, which could be a problem. There's nothing that's really helping us with authenticating if they're real people or not. And so some of the off-the-shelf Authentications like the Google off the Microsoft off they kind of handle that for you, right? It's a little bit more difficult to create a Google account a little more difficult to create a Microsoft account And it would be to just create a local account on your application So you if you use these kind of like third-party authentication services you get some of that stuff built in You also can get some You can also get some support when it comes to storing information about your users, right? The original don't get got, we go get comes from me implementing the Microsoft Auth because with local strategies, we're handling all that stuff.

The usernames, the passwords, all that stuff is something that we're handling. But when you use a third party Auth, they're handling that for you. And often they have teams of cybersecurity experts that are like employed to make sure that that's robust, It's secure, can handle things like text message verifications, two-factor auth, right? All that stuff, you're going to wind up using maybe like a third-party provider to help you with, right? And so some folks, instead of saying, you know what, instead of me trying to, we call it rolling our own two-factor authentication, rolling our own email and phone verification, right? Instead of just setting all that up, which we can set up with Twilio and a bunch of other stuff that is sending all that stuff up on our end, we can use these third party services that handle all that for us. And that's kind of it. Now. So it's up to you whether or not you feel like that is something you need. And in the beginning, the answer is no. When you're building out your MVPs for your 100 hours project, and probably when you're building out your 100 hours project, you're probably just going to use local off because that's not the meat and potatoes. No one's going to look at your application and go, damn, that's some good off code right there, right? Right. No one's going to say like, ooh, oh yeah, yeah, that, that, that's some good, that's some good off. Nobody's ever going to look at that and be like, damn, that's great off, right?

They're going to care about the application that you built. They're going to care about what your application does. So it's something I don't really want people to stress about early on just use this and move on All right, just use it and move on If you find that it could be cooler to add something at it later once you have your application built well So that is our passport now these next to this session and this mongo store These are both there to help us have have logged in users, right? So there's something really special about our application that's happening where our users are able to say logged in. So let me actually demonstrate some of this and then we'll talk through it. So, let me go to my app here. I am running. Cool. I'm going to log in and I'm going to do bob at bob dot com and I'm going to do Bob is the password. And now I'm logged in, right? Not anything that we haven't seen before, right? I think we haven't seen before, but here's something special. So we're currently on our to-dos page logged in. If I go back to the main page, right? If I go back to the main page and I click log in, what's gonna happen?

If I click log in right now, what's gonna happen? Yeah, it's gonna redirect me straight to the to-dos. Boom, I'm going straight to the to-dos. How the heck did my application know to send me straight to the to-dos? And more importantly, how did my application know, right? How did my application know that I was logged in? Right, we can understand the redirecting, right? Like we won't be able to look at our code, right? We won't be able to look at our code and be like, all right, since they're logged in, right? We know like the insure off is a thing. We know that we can redirect based off of somebody's logged in, but how do we actually know that the user was logged in? And yes, chat, it was session. We have a logged in session. We have a session that was created when this user originally logged in or signed up now The session is not magic. It's actually something called a cookie And what we are doing is we are leaving a cookie on our user's computer that matches the session stored in our database and at first it seems pretty complex but know that these two packages are the ones that are handling the cookie and session it's not something I ever really have to think about it's a few bits of code that will walk through and then you'll see alright oh that's how the cookies being applied this is how the cookie matches what we have in our database and once these are linked the users can stay logged in so before we dive into the code and before we dive into the browser where I'm going to show you these cookies, I'm going to show you how we're able to have our users stay logged in.

We're going to take our top of the hour break. So if you're new around these parts, we like to take a break at the top of every hour. Please, if you're able, get up, move around, hydrate, stretch, take care of yourself, look at something that's not your screen for a few minutes. And when we come back, we're going to dive deep into these sessions, dive deep into these cookies, see how they work. And I'm going to run some ads that folks that join us don't have to sit through them. All right, buddy. See you. And let's put five minutes on the timer. Are you drinking mud, the mushroom tea? No, but they are all up in my ads. They know They they're like we're getting you Leon. I know that you're gonna there. I'm gonna get got They're trying to get me All right. I'm in some clock. See you on five.

Let's jump back into it. So we're gonna talk through right We're gonna talk through the cookies so what I want to do is I want to go ahead and I want to open up my inspector and One of the things I want to go to is we have all these other things that are in the inspector that we haven't really used yet. We're going to use even funkier ones when we get to React. But we have this application section. And in this application section, you can see a lot of stuff. We have like the local storage excuse me, which we've seen in the past, right? We see this local storage we've seen in the past. We have session storage, which unfortunately is not actually session storage is like the local storage that ends when you close your browser or go away for a bit, right? It's kind of like the local storage that's not persistent. And then down here we have cookies. And so these cookies, you can think of them as like a little text file. And I'm going to simplify things here. You can definitely nerd out on this stuff, right? You can think of these as like little text files that we're putting on our client's computer that just has a tiny bit of information. And what we're doing, whenever we have an open session, right, whenever we have an open session, is we're matching the text that's on their machine, that little text file that we call a cookie, we're matching it with the session that we've logged on our own backend, right?

And so if we look, we have these two lines of code, So they're going to help us set up the session. And then down here, we have set up our session saying app.useTheSession. We have a secret, which I'll talk about in a second, and then some other stuff that are just saying, like, that helps us set up the session. And then the last little bit here that's important is this Mongo store. We're actually going to store our session info in our Mongo database, right? So if we look at our MongoDB, we're going to see that we have users collection. We have a to-dos collection from our to-do app, and then we have a sessions collection. And in this session, we have all the sessions that I have done. Whenever I've logged in, right? Whenever I've logged in, we have created a new document, right? a new document in this sessions collection. And so right now you can see that for some reason it thinks that that's today's date. I'm just gonna let that be for a second. We have the date that we started it, the time that we started it, and then kind of like what we're storing, but we'll notice that this has a U, like an ID, UBS4LI. If we go back and we look on the client side, you can see that here, UBS4LI.

We can see, right, we can see that part of that cookie matches the information that is stored in our database. Now, you don't actually have to store the sessions if you don't want to. It's just an extra perk that enables folks to like come back to your application much later, right? To come to your application much later and still have like this information and still be able to use those cookies. It's the expiration date, sorry. Yeah. You'll be, hey, thank you for the gift of subs. Hope you're doing well. Thank you for being here. Yeah. We have the expiration date going in here, not the start date. Sorry, it says expires right next to it, rip. Right? And so the idea here is that we have a match in our database and we have a match stored on our users computer, right? And the beautiful thing about this, right?

The beautiful thing about this is that now, as we move across our pages, right? As we move across our pages, we can see that the cookie's still there. Like that file is still there. So even though I've gone back to a different page, When I go to log in every single time I send a request I can send that cookie along with the request or the information along with that request and I can check right I Can check that session and see if it matches right? And so the idea here is that I can have these little cookies That enable me to have open sessions and I can move around my application and even though we're going to different pages, as long as you stay logged in, and as long as you have that cookie, I know that you're still logged in, that you're still the same user, that it's still the same session, and I can let you move across my entire application, right? Now the cool thing is if I like log out, and I clear my cookies, I try to like log back in, you can see that now I'm trying to create a, I'm trying to log in but it's a different cookie and since it says it's a different cookie It knows that I'm not logged in so I didn't get redirected back to the to-dos, right? That that that that session is different that cookie is different. So it's not the same session, right? I'm no longer long as soon as I click log out it destroyed that session, right and And when we went back to the main page and tried to log in, you can see that we didn't get redirected this time. We got taken to the login page, right? Got taken to the login page. So when I log back in, so let's go ahead and do something interesting. Somebody asked a really interesting question. So let me go ahead and log in bob at bob.com. Let's go ahead and do bob, bob, bob.

All right, so I'm logged in. we can say ACOTGG, if we look in our, let me refresh, we look at our session, you can see that we have our COTGG as the new session, right? Now the cool thing is, let me close my document here, let me go to localhost 2121, let me log in, Y'all see that, yeah, y'all see that, right? Even though we completely left the app, we closed the page, we still went back, right? The reason this works, the reason even though we were able to come back is exactly the cookies are stored locally on our machine and our sessions are stored where? In the DB, right? We could create our application without the Mongo store, right? We could create our application without the Mongo store. However, if somebody like closed the browser or closed their window and came back, they would have to log back in, right? We wouldn't have like that persistent session. So by storing our sessions in the DB, we have this other ability that we just kind of take for granted all the time that we know when the users come back, we can find the session that they had previously because they still have the same cookie and that cookie still stored as part of the session. Right. So we have the ability, right. We have the ability to have repeat users that have been logged in, go away, come back, and they're still logged in, right. You What is creating the cookies on the client side so everything that has to do with this all the all the all the stuff that has to do with the session and storing the sessions comes from these two packages and the little bit of a little bit of code that we're writing here to tell it to use those packages to handle the session.

Now, let's think about this for a second. We're creating these cookies and we are creating these like unique ways for each session to be unique, right? Like we need a unique cookie for each user, right? And so how can we create a unique cookie for each user that would be hard to kind of like reverse engineer, right? And to then like figure out how to maybe trick the system into thinking that you're already the logged in user, right? There could be some things that we'd have to think around that. The secret makes that a little bit harder. The secret means that it's not just like it's not a. It's just not like a generic thing that we're using. It's yeah, you can think of it like that gentle giant. You could think of it as like math.random times keyboard cat, right? Like where we're kind of like randomizing by using that secret to make our stuff a little bit more unique, like to make our strings a little bit more unique. And that kind of does get into like the salting and hashing that we'll talk about in a second. But it's just a way of kind of making these, these cookies that we're seeing when we kind of look in the inspector a little bit more unique. So that this is kind of being randomized a little bit more.

And so, like I said, you could nerd out about this, this whole pipeline. You could nerd out about like how the cookies are generated and how they're stored on the client machine, how we're storing that session in the DB, but like right now, that's probably not the thing we should nerd out over. Right? Right. We should probably say, all right, I'm using this off the shelf, right? I'm using this off the shelf. It's going to handle sessions for me. If I was on the job and this was a real application And this was something that I really needed to. I really needed to, like, get right. Then maybe spend a little more time on it. But for right now, you're going to use it off the shelf. Yeah. Rascal 2. Hey, Rascal 2 with the raid today. Express session creates the cookie.

Yep. Mongo store stores the session objects in the database. Yep. And one coming back to the browser gives the server the cookie. MongoStore finds the session for that cookie and gives it back. So yeah, exactly. So what's happening here, right, is when we show up, we show up and we go, we're just kind of like here, like we're back on localhost 2121, right? When we show up and we click this login, we have made a request to the server, right? And that server, what it's going to do, It's going to take that request and part of that request is now our what part of that request that's being sent to the server Is now our what? Yeah, it's that information that's coming from the cookie, right and what we're going to do is since our Session data is stored in the database. We're looking through our database to see All right does that match, does that cookie match any of the IDs that we have here? If so, we can bring that session back to the user. We can send that back so that the client can skip the login and go right back to their previous session. And so, like I said, it's a lot. We can nerd out over all the little bits and bobs.

But the only thing you really need to know is that on the client is stored a cookie. And right now in our MongoDB, we're storing the sessions. With each request, we're checking for that cookie to see if there's a user that should be logged in that should be ready to rock and roll. And if we find that information, then we just log them right in. They keep up that session. Yeah. All right. Can the secret be anything? Yep, you can make up whatever you want there. I think keyboard cat is like the default that a lot of like, either the docs used or tutorial used. Cool. All right, so now we have sessions. So our users can stay logged in. We're storing those sessions in our database, right? We're storing those sessions in our database and we now have the ability to have users logged in, right?

We can, they can log in, they can stay logged in. Since we're storing the sessions in our database, they can straight up close out our application, come back later and still have all that information. Should the secret be in our ENV file? Actually, yeah. So when we get to our application, our social network, we're actually gonna do that. Our secret will be in the ENV file. Is it super, is it super needed to have that happen right now? No, but yeah, we'll eventually put it in there. Yep, you'll see that in our social network code that we'll use it as an environment variable. Do these sessions eventually get deleted? Yep, they have an, you can put in an expiration date and you can even see that, We kind of see the expiration of this, the session, uh, here in the Mongo DB at the moment, and you can set any type of expiration that you want. Um, there have been some apps that have like used this, not maybe the best way you should have done it, but like, there are some apps that have like, put like really silly expirations on it, so you get kicked out every once in a while or something like that. Like you can play with it. Cool. All right.

So we have talk through sessions, right? That keep our users logged in. The Express Flash, this was something very particular. Let's actually show that. So let's go to our application here. I'm going to log out. Bank apps do that, right? Exactly, yeah. Bank apps will like kick you out, they'll close your session, so that if you like walk away from your computer, somebody else can't come up and like have access to your banking information. So if you've ever been on your bank's website and you've like not been on there for a while and you get kicked out, that's the bank closing your session. Really great example. Thank you for that race. All right. So let's go ahead and log in. Right.

And we're going to put in Bob at bob.com and I'm going to put in the wrong password. All right. So this invalid email or password that we have on the login that like flash notification That's what flash is helping us to do right if we go to our sign up And we do something silly. Let's go in. So let's go ahead and do Frank Frank calm And we do our sorry. It should be Frank calm over here and we do frank at frank, right? And we would just put in password of frank and we try to submit. We kind of get all these different, don't get me started. I don't think you already know who Frank is. I don't know if you're ready for that yet. Cool. So if we look, we got this, please enter a valid email address because I didn't put a real email address. We have our password set to eight characters long, Which obviously Frank was not a characters long and then I didn't put in the actual confirmation So it didn't match the flash these messages right here. That's the flash is coming for So Frank, alright, so we the lore continues. So we have Bob and we have Bob's evil twin Chat who's Bob's evil twin John.

Thank you. Somebody said Victor. I got to ban them real quick. Hold on. Sorry. It's going to time them out for a few seconds. John is Bob's evil twin. Right. And then. And then we had Sarah. Sarah is kind of the reason that Bob and John don't get along. Very interesting past Victor is the the suitor that came along and sweep Sarah away from both Bob and John. So long story there too and then Frank. Frank Frank Is Bob's dog. Cool.

So Bob has a dog named Frank. And so Frank is Bob's dog. All right. So, so Frank has an email by the way too. So anyway, so we have Frank and so, so it gets deeper, right? You're like, Leon, why, why introduce a dog? Well, let's just say that Frank was the reason Victor met Sarah. That's all we're going to say. Frank was the reason Victor met Sarah. So it gets, it gets a little tumultuous. All right. So, uh, all of these kinds of like messages that are popping up, uh, that are flashing up to let us know something went wrong, kind of like our validation. that's what a flash is handling. It just enables us to kind of have these messages that kind of pop up when we need them. And so there's like a package that helps that you could do other things or other ways to do verification, but this is a pretty standard kind of nodey express way of doing something like that.

And so I just used it because it's going to be in a lot of apps. Morgan is our logger or very, very simple kind of debugger. and what it's showing us is our log here, right? It's keeping the log. So every single request that I'm making, you can see like when I make these get requests, when I log in, when I sign up, like all of these events that are happening, that's Morgan. So Morgan just helps us log all the stuff that's happening. It's just a good logger. So it's very common to have Morgan running on your application. This you can see all the requests that are coming through. And the cool thing is you don't actually have to like Code these right you know you don't have to like code These individual requests like in our previous applications I've coded those console logs right like I console log saying that there was a Get request a post request a delete request right and so It was all console logs and wild I don't you don't to do that anymore when we use Morgan Cool. You can see that we're requiring our database. So we have this lovely database.js file. And in this database.js file is us connecting to our MongoDB database. With the newer updates to MongoDB, we actually don't really need a lot of this stuff anymore. It's kind of just baked in now.

So if somebody wants to submit a pull request to update this, I'd approve it. So that's kind of the changes that are there now. And then we just have linking to our routes, which we've covered in the past two classes, right? Where if a route comes into one of the main routes, we're gonna use this route file. And if any of the to-do routes come in, like slash to-dos, any of the creating, getting or deleting or updating of the to-dos are all gonna use these routes. Cool. Then since we are using environment variables throughout our application, we actually have to tell Express to use the environment variables. And we kind of talked about this. We talked about this, I think, the very first time we went through this. But this is something that, like, is not built into Node, which is pretty silly at this point, that environment variables is still an external package for something so important. It's kind of like the philosophy, like you can kind of see some of the philosophies come through and how node is organized and how it can lean on NPM and things like that for a lot of the key stuff. And so we have these other environments that are creeping up like bun, right? And so one of the things that bun came out with is like, hey, environment variables are built right in. You don't need external packages to do this stuff. And so just know that if you're using good old node here, you have to like tell it to not only use your environment variables, But where to go find the environment variables and I like to put my environment variables in my config folder my config folder eventually Does not get pushed up to get help my eventually my whole config folder probably just goes in my git ignore For a lot of the key stuff will go in my git like anything that's eventually gonna make its way into the git ignore Can often find its way into my config folder.

There's me some stuff I don't want in the gitignore, but a lot of times it's a lot of the secrets and stuff like that will wind up in my config. Things that are going to help me set up or configure my application, that's where they're going. So we need our database to be configured. We need Passport to actually do authentication. So a lot of stuff is going to help us configure our application. That's what my config folder is for. Since we're going to be using Passport for authentication, we actually need to tell our application to use Passport. The server.js is still the place where we set up our entire application, right? Why am I not using Bunn? Because it's not battle tested yet. It's still too new and no one's using it yet. And so one of the things that you have to be really careful of doing, I don't even think they're at version one yet. And so you often don't want to use the latest and greatest until it's been used for a little while. Because especially as newer developers, you're gonna run into some weird edge cases and you want those edge cases to have Stack Overflow articles, right? You want somebody else to have run into the pain so that you're not having to be the one that, to be the one that has to figure out the pain, right?

And so a lot of times I'd never for new folks tell new folks to chase the latest and greatest because you're gonna run into some weird stuff and you might not be equipped to handle that weird stuff. And so especially we also have like the naming of stuff. And so you'll notice that people are saying buns at zero one 11, right? Most of the time, applications are not ready for you to be used until they're at 1.0.0, right? That's when they're saying like, hey, you can use this in production, but until they hit that version one release, it's not ready for production at all. So they're doing a lot of really cool and creative stuff, but it's not something that's ready for production. It's something that you would use in your actual applications yet. Play with it, figure out what it does. Right now, the cool thing about Bunn right now is it's asking a lot of really interesting questions about how we can do things better, faster, what should be like first class stuff, like what should be built into, built into something like Node that's been around for forever. And so I think right now, instead of actually trying to use it, you should be participating in those conversations about what is it bringing to the table, what might be missing from the environments that we're using. And I think that's really, that's really key right now. Cool. We need to connect to our database. Right now we can see ConnectDB is holding our database file. Know that our database file exports.

Well, let's do it without even looking. If ConnectDB is holding what was required from our database file in our config folder, what do you know about connect DB? Just by looking at line 18, what do you know about connect DB? Yeah, you can tell that it's a function, right? Like it might be a method because it might be tied to an object, but it's a function, right? We can see that it's using the parentheses so that we know that it's calling something and it is a function. Awesome. Then we have kind of our normal run-of-the-mill stuff. We're using EJS for our views. I was running through the mix with my woes. All right. We have our public folder that we're still using. When we get to our social networking app, we're going to need to put more stuff on our public folder. Our apps are ugly. We don't have any CSS, we don't have anything like that.

So we're gonna need some more stuff going into our public. These next two lines enable us to kind of look at the requests that are coming through, right? Enables us to look at, kind of look what body parts used to do if you've been around the block a little bit. This enables us to look at any of the requests and pull the stuff we need out of the requests. So we can pull all the stuff that came from the forms or things like that out of our requests. And then this is just us setting up Morgan to run and log everything. So with line 24, Morgan now runs and all of your requests get logged without having to put console logs anywhere or anything like that. Sessions we kind of already talked about. This is just kind of letting our app use the session. You don't really need to do anything other than maybe change the secret if you want it to. And then we have our middleware, which is set up to let us know that we're using Passport. So when we have these two lines, we're letting it know that Passport's gonna be handling our authentication and that we're going to be using sessions along with passport as well and then. We have our lovely flash which is setting up those flash alerts that we saw from when things don't go wrong with our log in or sign up. Then we have our route set up so that our app knows how to handle the requests that are coming in. Any of the requests on the route route go to main routes.

Any of the requests that come in on to do is go to the to do routes and then finally we kick off our server and we have the process.env file that we're going to be using to do that. in the port so that if we do push our code to something like Roku or the new challengers that have approached, we don't have to worry about having a fixed port. Nachipazo, hey, thank you for the raid. Hope you're doing well. Welcome, everybody. Hope you had a good stream. From Argentina, hey, let's go. Welcome. Hope you're all doing well. Hope you had a good stream. Thanks for bringing the crew along. Hope you've been well Good to see you in a minute Welcome everybody Come on in come on in get get comfy. We're working through a full stack application that we've been building It's a full stack to-do list with authentication And all the goodies, uh, we've we've worked through it We built it and then folks over the past week have been building projects with it And so we're just kind of cleaning up some of the loose ends, some of the things that we didn't get a chance to cover yet to make sure we're really good before we build out a full stack social networking site. So we're gonna try and build an Instagram clone together using all the stuff that we've been learning so far. Welcome.

All right. Let's see here. All right, so that walked through the server.js file. Any questions while we're here about the server.js stuff? I know it's a little bit of extra stuff that we hadn't covered yet, so I just wanna make sure we went through it. The URL encoded, so this stuff right here is just that we can take a peek at the requests that are coming through. we can grab every single part of the request that's being made to the server, right? So we can, we can, right? Right, we can make any type of requests. We can make a get request, a post request, whatever. We're making the requests, right? This part of the code enables us to actually look at different parts of the requests that are coming through. Right, we can pull the stuff out of the forms that were submitted. Anything that was sent with that request, these two lines enable us to pull those things out. In the server.js considered part of the controller.

So you could think of the server.js as like setting up the entire application. It sets up everything that we are going to need, right? So the server.js tells us, hey, we're gonna be using all these packages. It sets up our environment variables. It sets up our passport, connects us to our database, sets up our view engine. It sets up all the things that we're going to need and then express is doing a lot of the heavier lifting, right? Express is using a lot more of the heavy lifting that enables us to then build out stuff Like our controllers our models and it kind of is the glue that brings it all together well What is the thing we don't need anymore? So Mongo, or sorry, Mongoose kind of updated and a lot of these kind of, these like these, these like new URL parser, unified topology, a lot of this stuff's kind of like, you don't really need it anymore because it's kind of just baked in now. Before as Mongoose, so like the thing you have to realize that a lot of this has been around for a while and all of these different packages, they go through cycles where they try to improve or bring new stuff to the table. And a lot of the stuff that they first introduce is experimental, right? Where you can use it if you want, right? Right? You can use it if you want, but some things might, I don't know, not work that well. So you can turn on these flags so that the experimental stuff you get. And then once that's been proven for a while, It's been it's been a year or two that everything's been working.

They roll that in to an updated version of Of the code, right? So one of the things that that I had to do today was I didn't realize in our In our Social networking code there is something there was a package I was using called Malter and And you can see that I pushed the change here today. There was a downstream. So when I say downstream, it's like you can think of all these packages as depending on other stuff, right? Rookleek, hey, thank you for the posture check. Oh, let me get posture check. Ooh, here we go, nice. So you can think of all the packages that we're using as dependent on other stuff. And so one of the packages I was using for our image uploading called Molter, they were using a package downstream. Like their application was built on other packages called Dicer. And Dicer has a bug right now that's a security vulnerability. And it's like actually a pretty serious one and they haven't fixed it yet. So Moulter that was requiring that package was like, wait a minute, we can't use this because that downstream thing has some problems. And so Moulter went from 144 to 145. And in that five, they introduced a fixed that circumvented the issue that was happening, right?

circumvented the issue that was happening, right? And so that fix got rid of that downstream dependency and I had to update the code to go from 144 to 145 so that the code wouldn't break, right? So that's kind of something that can happen where these updates have to happen every once in a while because things break or things break downstream and all these things build up on top of each other. So these packages aren't typically always kind of evolving and fixing and growing and sometimes these fixes are so great that instead of having like a minor update or an update to like say 5.0 Eventually they get to the point where they have a full update That's like it might as well be a whole new set of software. And so you'll notice that we have minor we have patches, right? So this 1.4.4 to 1.4.5 was a patch, right? Like they patched something, it was a quick fix. And then eventually they'll have like a minor update that includes all the fixes that'll be like 1.5.0. And then eventually you have so many minor fixes that you might as well make it a new version and then that'd be version 2.00. How do you keep up with all the packages? There's actually an npm command that will tell you, that'll tell you what needs to be updated if you want. And when you do, yeah, that's a good idea, Clutch. When you do go ahead and do npm install, something that you all are probably gonna see quite a bit is it'll tell you that there's broken stuff And you can do npm audit and then npm audit will look at all that broken stuff and try and update it and fix it for you a lot of times you're going to do npm audit hyphen hyphen force, which means, hey, I don't care if this break something just update the stuff for me, right? And so a lot of times you'll do npm audit fix force, and that will update all the packages for you. And sometimes things just don't work after, right?

And so that's something you have to worry about. There's actually a command that you can run in npm that will show you like what version everything is at. I know I just did it. So I just did it recently. I think I did it with this code base. No, it was a different folder, different file. Actually, it might be in this one. Let me see. I'm blanking on the command for some reason. Outdated, there you go. NPM outdated. So you can do NPM outdated. I'm kind of embarrassed to run that on the code base that we have. We're here, let's try it though. Uh-oh.

There we go. So when you do NPM outdated, it'll show you kind of where you're currently at and what the latest is, so rip, rip. These ones are kind of okay. Rip. Yeah, and so that's something you can do, and then npm update will help you fix a lot of this stuff. But it's just not important, and for, for like your, your like learning projects, but if you're going to build something from scratch, maybe for your a hundred hours project, maybe update everything. And sometimes there are things that are great that'll break. And then you have to like figure out how to fix them. Like the, the update to one, four, five is not straightforward for Moulter. I like when I when I try to do the MPM Audit fix it wasn't actually updating to one four five. So what I did is I actually I Went to actually to show you what I did I went to Molter on github I went to Molter on github and and I was having this error, updating wasn't actually working, right? Like updating the multir package wasn't working. So since multir wasn't working and npm audit fix force wasn't working, I was like, all right, there has to be something wrong here with multir because even the update's not working. So I went to their issues and security vulnerability due to Dice. So that was the error I was getting.

So I went to like the issue and I read through what people were talking about. And somebody at the end says that the changes have been pushed as one, four, five. And so what I did is I just like, there's better ways to do this, but just cause I was trying to be quick and I was trying to do it before class started. I just went to my package.json. And I know this is a lot, I'm just showing it cause it's something I did recently. I went to my package.json and it's not, sorry, it's the wrong. Went to my package.json and in my package.json, I just ripped out Molter. This went yeet, I yeeted it. And then I did npm install Molter save. And it just, it downloaded the newest version of Molter. It saved it and that's it. So like, I just literally deleted this line, Did npm, did npm install, uh, Moulter or npm, npm install Moulter save. And, um, yeah, what that'll do is it'll download the latest version for you and save it in your package.json. And that's it. Yeah.

And so you can see that this is kind of like a weird version, like it's updated. It's like the LTS right now. And then that fixed all the issues. So a lot of what I had to do was like, all right, I have this weird bug, right? I have this weird bug, even like my npm update audit fix force isn't working. And so I went to the actual packages space on GitHub, like their actual repo on GitHub. I read through the issue that I was having and was like, oh, it's been fixed or been updated in this newer version. All I have to do is update to this latest version. Yep, that's it. All right, so that's a little bit of a wander away from what we were talking about, but I wanted to show it because it's something that is gonna come up next week, or sorry, on Thursday. All right, so that was the server.js. We kind of talked through that. One of the things that folks had some trouble with that I just want to talk through was the user model. And this user model is a user model that I got from just Passport, right? Like I said, that wasn't like the best way to do it.

I was just trying to be quick, yeah. Yep, it does leave two in the package lock, but I wasn't sure if I was gonna roll back to it or not or anything weird like that. So I prefer actually to have both. I know it's weird. It's not probably best practice, but that's it. That's what I did. Am I proud of it? No. All right. So the other thing I feel kind of had some trouble with that I just wanted to talk through is the user model. And this user model is not something that like once again, you would ever have like committed to memory. What it enables you to do is to create a user. And in this case, my user schema for creating a new user has a username, email, and password. So that is the result of a new user will be a document. Right, right.

will be a document that has a username, an email, and a password, right? So that's the schema here. Remember, schemas for Mongoose are just constructor functions, right? Think about a constructor that spit out an object, right? We've all built constructors. Don't let schemas get in your head or make you feel like, or feel like it's something that you haven't seen before. It's just a constructor function. and that constructor function is going to spit out an object, right? And that object is going to have a username, email, and password property, right? And then where do these objects that get spit out of the schema or Mongoose go? Where do they wind up? The database, exactly. Wind up in our database. The very last thing that we have here is we export the model user and we export the user schema. If we look, user schema here is the thing that we're exporting.

So this new schema is the thing that we're exporting and we gave the name of user. So if we look at our MongoDB, we're eventually going to be able to have in in our Mongo database here, these objects that have the username, the email, and the password, username, email, and password, right? Coming from our user schema. Now, the thing that we are storing in here is a password. Could we have just, whatever password they typed in, Bob, Bob, Bob, could we have stored that in the database? Absolutely. We could have absolutely just stored Bob, Bob, Bob into the database and that would have been there in plain text, but we don't want to store passwords in plain text. If someone ever got access to our database, they would then have access to all of the passwords and that wouldn't be good, right? That wouldn't be good because then somebody would just take that password and try logging into everybody, all their other accounts. They would use their email that they have here and they would try logging into their Gmail. They would try logging into their bank, they would try logging into all these different things that would have that same password. So every once in a while, a company gets hacked and you find out that they were storing your passwords in plain text and you get so mad because you know that it's what line 13 through 33. So 20 lines of code, 20 lines of code would have stopped them from having plain text passwords. Right? Literally less than 20 lines of code because we got like comments and stuff.

So under 20 lines of code to not store passwords in plain text. And so how do we store passwords not in plain text? Well, we encrypt the password. And so you could think of the way that we're doing this. So you're gonna hear it called hashing. You'll hear it called salting. You'll hear different variations on these different words. But all we're doing is we're trying to take something like Bob and turn it into something that does not represent Bob, right? So we have the word Bob, but in our database it's gonna wind up being bling to V, right? We're taking our plain text, right? And we're turning it into something else. And we are using a bcrypt, which is the package that enables us to take this word and turn it into a hashed version of that word. Now, theoretically, you could reverse it, right? You could reverse it if you knew exactly how this was happening, if you knew exactly kind of the generator that was using it, you could bruise force it, you could do all these different things to kind of like try and reverse engineer it, but it would just probably take a really, really long time. Like if you had a supercomputer and it was just running for years, maybe you could figure it out.

But all bcrypt is doing is taking our passwords and turning it into something else that's not that. And then when we need to use the password, we can take that really weird encrypted string and get the password back, right? And so you can't like, you can't reverse the hash true. Yeah, right. So the idea here is that we are turning into something else, that's not gonna be used as plain text into our database. That's all we're doing here. Now, are we doing any of this heavy lifting? No. We're not doing any of this heavy lifting. We're just using bcrypt to do it for us. That's the idea. And so we use this so that we don't wind up storing those plain text passwords into our database. Can we do with more than passwords you could you could but be crypt is handling all of that for us. So that's it If you want to you can go super deep into how be crypt works You can go super deep into how hashing works and all that fun stuff But like I said, we're just using off the shelf. We don't have to go deep into it You want to knock yourself out, but or when you are using local authentication Boom, just use be crypt you're using passport.

It just works Cool. Yeah, PJZ said it correctly here. Hashes cannot be reversed. Password comparison works by hashing the attempt and comparing it with the stored hash, right? So what's gonna wind up happening is, let's say you put in your password, right? Let's say you put in your password. We put in bob Right, we put in bob bob gets hashed to Dollar sign 2v right Bob gets hashed into two dollar sign 2v the next time we log in and the user types in I don't know they type in John instead, well, that hash is gonna be different. That hash might be like bang three X, right? So then we would look in our database and be like, all right, wait a minute. We were expecting this, but we got this, right? We got this. So that password is not correct. If they were to instead type in Bob, that would get hashed to bling2v, which we would see in our database, and we'd go, oh, this bling2v, right, matches the bling2v that we have stored in our database, so it has to be the correct password. That's it, right? That's it.

Cool. All righty, let's take a break here. We're going to go ahead and take a break. We're at the top of the hour. If you're new around here, let's go ahead and I feel so stupid. Let's go ahead and take our break here. If you're new around these parts, please get up, move around, hydrate, and we will be back in five minutes. Ready? So let's let's talk through the two things that we just covered to make sure that we're all on the same page boom All right Let's go to a sign up. Let's actually sign up Franklin you run my server here All right It's hard to get help with the CSS and the homework help area. Don't use homework help. Use HTML and CSS help if you know you need CSS help. Yeah And also use the search if you're if you're doing homework I'm guaranteeing people have already like most of the questions have already been answered So always make sure you're doing search because a lot of times a lot of those those questions have been answered. Yeah Yeah, especially especially specifically with the homework's yeah So make sure you're using the right channel and then make sure that you're definitely using search a A lot of times somebody has answered answered the question like 10 times. They're probably not going to answer it again, right?

No And then also don't be afraid to ask your question like if you ask it in the morning and nobody's answered it then go ahead and ask again in the evening because Different folks are up at different times and they're willing to help at different points in time. So make sure they see it Cool Yeah, and then also, yeah, and also change how you ask sometimes too. A lot of times, um, a lot of times it's hard to understand certain people's questions. And so taking a second to, to rephrase things can actually be really helpful. A lot of times when the questions don't get answered, it's because the question itself was really, um, it's really, it's, it's asked in an odd way and it's really hard for folks to answer it, or you to include your code, things like that. But yeah, most most folks are scrolling through those channels every day to answer questions. So, yeah, definitely don't be definitely don't be afraid to ask again. But I would say the bulk, if not all the questions get answered. So just make sure you're rephrasing it. Yeah. All right, so. Let's sign up and we're going to create Frank's account for real this time. Frank at frank.com. Oh, sorry. I just keep doing the first email is the email.

So we'll do Frank. We do frank at frank.com password will be Frank Frank, and I'm going to submit. All right. As soon as I click submit, what are some things that have happened? When I click submit, what are some things that had to happen as I clicked submit? Let's talk big level here. Based on the two things we just talked about, kind of what's happening. All right, a request was made. Nice, specifically a post request was made. That post request, right, was heard and a user was created. And what helped us create the user? What did we use to create the user? The user model, right, which had a schema that helped us build out that user, nice. and when we created that user we didn't store their password in plain text. What did we do?

Yeah we hashed the password and when we hashed the password what did we use to help us hash the password? Be crypt beautiful. Thank you. So be crypt we probably typed in I typed in Frank Frank Frank Frank was the password I entered in and Let's see what be crypt gave us For that password. Let's take a look There we go. So we typed in Frank Frank and our hash bcrypt, our hashing, while she's trying to get in here, bcrypt hashed it to be this long ass string, right? And the beautiful thing is we can't go backwards. Even if we have this hashed string, we can't use that. I wish I could show you, this is the cutest thing ever. So in the new room I have, right? In this new room I have the door and then to get further in the room you have to go down a hallway. At the end of the hallway is a huge like it's just a huge blanket basically and the blanket helps muffle some of the sounds that are coming into the room. So not only did did Mashi open the door to get into the hallway they came all the way, push past this huge ass, like sound dampening blanket and into the room. I'll just, I just thought that was quite amusing. Uh, all right.

So they typed in Frank, Frank, Frank, Frank, uh, be crypt turned into this long string. Right now, right now there is no like mathematical proof that would show that we can go from a hash back to what the original value was, right? So the way that this will work going forward is whenever someone types in frankfrank as the password, what will bcrypt always turn that into? No matter what the user is or when they do it, what will bcrypt always turn frankfrank into? Yeah, this hash string. So when the user logs in and they type in Frank Frank what we're going to do is turn Frank Frank into its hash and then we're going to check to see if the hash in our database matches the hash that would have came from Frank Frank. If the hashes match what do we know? The right password, right? They typed in the right password. So it can get a little more complicated than that. You can do a little bit extra things here, but that's kind of the gist of it. Cool. So now we have the ability to create users. We have the ability to create passwords. We have our server set up.

I think those are kind of like the big things that we hadn't really talked about so far in this application. We talked through our major controllers. we talked through some of our middleware, we looked at our models. Yeah, so I feel pretty good about where we're at with this one. You saw us build out the app, you saw that you built it out with your group to add more stuff to it. And we're going to keep building on top of it, right? The flash. Oh yeah, use the flash. So inside of our, if we go ahead and we, so we're going to looking at a few different places here, but if we look inside of. All right, one, there we go. Sorry. Our auth controller here, right? When we look inside of our auth controller, which is helping us with kind of creating our different users, right? It's the thing that's actually using the user model. We're gonna have this wonderful little bit of code in here that's gonna be doing the validation.

And so we have like our validator and the validator is gonna have all these little things that we're checking, right? So we're gonna see like, is there like an email? If there isn't like actual email, you can see that we're gonna push, enter a valid email address into our errors. We don't put in a password in, you'll see password cannot be blank. So in here you can see a couple different things that eventually could be used as flash messages. And so we're gonna use these kind of messages all throughout our application. And so you're gonna see them pop up. Whenever you have like a message that we're using, right? We can use those as like our flash messages. And so we have them pop up a few places in our application, but that's kind of the idea. As folks are logging in, as folks are signing up, there might be some errors that we need to show, and those errors will eventually be handled by the flash. Cool. Can we style the flash switches? Yes, you can. How do they show?

So let's take a look at our views. Let's look at the login and signup pages. And so if we look at our login and our signup pages, you can see that we have, as part of our EJS, a place for those messages to show up, right? So as those messages are happening and you're like refreshing the page with those requests, right, like when you submitted the form, you send a request, part of the EJS that spits out the HTML that comes back to you, now has those messages that were passed into this conditional here. So when you didn't put in a long enough password, or you didn't put in a correct email, or you didn't put in any of these little things that are like the errors in our application, right? Right now, those are getting passed into the div, right? Right? Passed into the div, and that's where these messages will show up. Now, you're also seeing here that I have alert and alert danger. Anybody know where those came from? Yeah, those are bootstrap classes. So on Thursday, we'll use bootstrap and some of the project that we'll work on probably later on we'll have tailwind, but they're just different ways of kind of adding some default style. So a lot of apps, right, do the same stuff over and over again. And so you can use things like bootstrap or tailwind to like make styling very, very easy and quick and so this alert and alert danger is actually me using bootstrap and so if I wanted to and I loaded bootstrap which we'll see on Thursday. I now have like these would show up as like red whenever something happened like you would get like that it would be like a like a like a red box showing you the error.

Yeah learn bootstrap for the group project that's awesome. Yeah, it's an easy way to kind of style out your application. Cool. Beautiful. All right, so we kind of walked through, we've seen this application. What I want to do with the rest of our time tonight I start to think through our social media application, right? To think through our social media application, our social networking, the 100 dev social network, we'll think up a better name. I saw some good ones today. For now, it's Quick Pound, last cohort named the binary upload boom. We'll do a poll on Thursday to name it, but we wanna build a social network and a social network that has a lot of the core features of something like Instagram. Are you going to teach us a framework like Next.js? No, because that's something you might learn on the job. However, if you contribute to a lot of the 100 dev stuff, a lot of the 100 dev stuff that I've been working on uses Next.js. So if you wanted to like help our like landing pages and stuff like that, you would pick some of that stuff up. Cool.

Alrighty. So let's think through So some stuff that we would need if we were going to build a basic social networking application. Where we could say like upload photos and have just some normal social media S type. Things what are some features that we're going to need for this application? Let's talk like features 1st and then we'll kind of break down like the data that we're going to need and like the things we might store in our database and all that fun stuff. So we're gonna need an account. Yeah, I agree. We're gonna need some sort of like some sort of Authentication, which is wonderful what we've been just learning What else we're gonna need? Profile pages, I like that What else a feed okay, I like a feed The ability to post, okay, I mean like post, like buttons, okay, like buttons, comments, Comments can be good Friends Oh friends be a cool feature. Maybe that's We can think about friends. Oh DMS things like that DMS. Okay So we have a lot of different things that we could do delete like the ability to like the delete a post Okay No dislikes no dislikes reporting that could be good No updating posts. We're gonna go full Twitter on this one. Cool. All right, let's think about what some of the core stuff would be.

So, authentication we're gonna need. Individual user profiles makes a lot of sense. Like a feed where we can see all the posts make sense. Our posts, we should probably be able to delete our posts, like our posts, not everyone's posts, but we should be able to probably delete our posts. We should probably be able to like posts, right? Maybe we should be able to leave comments on posts. And maybe we'll save friends and DMs for maybe something that you would add on top of it. I think the way we build this out, we probably wouldn't be too hard to add. But I think we start here, we're in a good spot. So I'm gonna add these things here to the top, just so we have like the nice little list. Where did my, like a little, normally there's like a, a little widget that tells me that I can like, do other stuff. Where'd that go? One second. Here we go. All right.

So I was gonna add some text here just so we have it at the top. We're gonna have off profiles, feed, posts, And our posts, we should be able to delete them. We should be able to like them. And then comments. Let's do comments as well. And I think we'll start here. And we can add all the stuff that we need probably after that. Cool. Alrighty. So, if we're gonna have authentication, Authentication we probably need what if we're gonna have authentication we probably need what We need to use passport and password is gonna help us create what password is gonna help us create what Yeah, users. So I think one of the first bits of data that we're gonna need to keep track of are our users. So I'm gonna make a collection for our users and I'm gonna put that over here. So probably the first collection that I'm going to keep track of will be our users collection. All right, and let's just go ahead and put some text here. I'm just gonna say our users, beautiful.

And our users will be made up of a bunch of documents that come from our where. Where were our documents get their structure? From the model that has our schema. And our schema is gonna enable us to create a bunch of different users. and our different users will all have a few key things. What are our users going to have? We're gonna have a username, cool. They're gonna have email, cool, password. And what else do we know? So what do we know about any document that we create in MongoDB, it's all gonna have what? An ID, nice. They're all gonna have an ID. We're gonna make this a little bit smaller so that we can actually write some stuff next to it. Cool. So let's say our first user will have the ID, I'm just going to make it easy for us to keep track of the IDs, have the ID of 100.

They have the username of Bob. And they have the email of B at B.com. And then they have the password, which is our lovely hash password of some random. Right. It's just some random password, right? That was hash. Cool. So we're going to have a bunch of these different users. So let's see if I can just make a quick copy of both of these. So each user that signs up, we're going to have a different document for each of those users, right? Have a different document for each of those users and each user is going to be slightly different, right? Like the IDs will be different. 101 for John, and it'll just be j at j.com. And this is something I do for kind of like any app that I'm gonna build out, right? Where I'm going to kind of just plan out my data and my different views.

So if I can plan out my data and my views, I have a pretty good handle on what my application's gonna look like. Cool, we're gonna have Sarah here as well. So we'll just do Sarah. Cool. Nice, and then we'll also have Screw Victor. We'll just go straight to Frank. And I'm just gonna do f at f.com. Cool. All right, so don't bring Sarah into this. Is this an example of whiteboarding? Yeah, I'm kind of like whiteboarding through my application. I'm gonna keep track of like the major data I need to keep track of and the major views. And then from that, I can figure out kind of a lot of stuff. All right, so we know that each time somebody logs in, or sorry, each time somebody signs up, we wind up creating a user. But if we were to think through like profiles, a feed, posts, where should we start?

Let's start with a post. We should have an individual, right? We should have an individual post, okay? So let's think about an individual post. I'm just gonna do a view here for a post. So I'm just gonna, this'll be like our post view. I'm just gonna put post view here at the top. Cool. What do we need for our post? Like what should the user, what should our user, sorry, what should our posts actually contain? Like what should an individual post on our social network contain? Text and an image? I actually like that. So maybe we have an image, right? So let's say we have an image, right?

Boom, we have our image that shows up. All right, that'll be our image. Cool, and then maybe we have like a caption. So the caption can be whatever, right? So we have like our caption. All right, and then maybe we have, I'm seeing some folks saying likes. Yeah, maybe we have like the number of likes. So maybe we have likes and like a number. So we'll just say like, I mean, if it's me, it's just like thousands, right? But if it's like everybody else, maybe like one or two, like what do people get in these days? Like three? I don't know. Cool. So we'll say like likes. We'll have like a caption.

We'll have the number of likes. And then what else? What else does a post actually need? If we're trying to like a date, like a timestamp, let's keep it simple. Let's keep it simple. I think a date could work. A timestamp could work. Maybe a delete button. Maybe if it's our posts, there should be a delete button, right? Like if it's our posts, maybe there's like a, there's a trash can. Right, like it, and that there'll be some sort of logic we have to figure out like, that would wind up being like a trash can. Or a delete. Cool. I think that's where we could start. Eventually we would want to have like comments, but I think that's gonna be some, I think for now I'm gonna think of that as separate data for now.

So to make a post, A post is gonna have these different things. So what do we know that we're gonna need in our database if this is what posts have? Like what are we gonna, we have a user's collection, what else are we gonna need? Yeah, like a post collection. Ooh, the user, like, oh, we didn't put that on here. Maybe like we have like the username too. Right, maybe we have like the person that actually made the post, that's probably pretty helpful. Cool. So we'll have the username, we'll have likes, we'll have a caption and we'll have a delete button. Beautiful. All right, so let's go ahead and build out our users collection, sorry, our post collection. Now that we kind of have fleshed out what our posts might look like and the things we might wanna keep track of, we'll save comments, we might come back to that. But I think this is like, we're talking like MVP, right? Our minimal viable product, right? like the simplest thing that we could build out.

So we're gonna just keep it simple, keep it clean, MVP, posts. We're gonna need some posts. So let's go ahead and build out our post collection. Ew, I don't want that. I want a different shape, my friend. Here we go. All right, put a different shape here. All right, here we go. All right, so we're gonna have our posts collection. And inside of our posts collection, we're gonna have a document for each of our posts. So we're gonna wind up having, we have a post collection, that means we also have a what? Yeah, post model, and that post model will have a schema, and the schema will dictate the structure of each of our documents. So the structure of each of our documents, let's figure out what we're gonna have in each of them. So each of our documents in our post collection will have to have off the rip an ID, too big, too small. There we go.

It has to have an ID. And that ID will be created at random for every single post that's made. And so we can just go ahead and give that an ID. Let's just say it's 500, right? Just a random ID. We'll start it at 500. What else should each post have? Oh, okay. Okay. Folks throwing it in chat already. So we're going to have the, let's say, we know there's stuff already here. So we're going to have to have the image, which will be a URL of the image, which we'll talk through in a second. We're going to have to have the number of likes, which will be a number. In this case, it's three. We're gonna have a caption, which will be a string.

And let's actually, I'm putting real data in here, but in like our schema, we would have like a value. So we're just gonna say a string for now. But like, if we were thinking in our schema, we'd say like string boolean number, things like that. So we have an ID, we're gonna have an image URL. We're gonna have the number of legs. We're gonna have a caption, which is a string. Let's think through some other stuff. Oh, let's have a created by, I saw that in chat, a created by, right? And let's think about this. If we have a post, how do we know who made the post? Like, how am I going to tie my individual posts to a specific user? Yeah, the ID. So if Bob made this post, I'm gonna put a created by 100. And do a created by 100. If we look, Bob had the ID of 100, so I'm gonna have a created by property that matches Bob's ID.

Why wouldn't I use Bob's username? Maybe there's more than one person that names themselves, Bob, what if Bob renamed, like, what if Bob like renamed their, like, what did they change their username? Right. That's pretty common on apps that, that people can rename their usernames. And so we would still want to have all these posts tied to Bob, even if they changed their username. So instead of having to like go through and edit every single post Right, they're gonna go through and edit every single post to have the updated username, right? We can just always use the ID So even if Bob was to change his name it always have the same created by and so maybe maybe Bob's made a few posts so let's go ahead and copy this and This actually maybe it's a little bit smaller All right, maybe Bob's made a few posts already. So Bob's made a few posts. Let's go and copy this. Boom. Right, and so this other post would have a unique ID. Maybe has a different number of likes, different string, and it's still created by Bob, right? It's still created by Bob, right? so we still have the ID of 100. Now, do we think these apps are actually deleting anything?

We said we have to have this delete button. Are they deleting anything? I don't think so. Let's go ahead and say delete it. And for right now, we'll just say that both of these are false. But eventually what we could do is we could change the deleted property to true and just not show it if it's true. So when our users click the delete button, we're not actually going to delete it. We're just going to change the deleted property to true. So we still have all the data on our backend, but we just won't show it to them when it switches and it's going to be a squeaky clean site. You got sucked. Exactly. All right, cool. So Bob has been creating some posts. We now know that whenever we create a post, the ID is going to match the created by, right? The ID is going to match the created by.

So, if I ever wanted to build out something like a post page, right, if I ever wanted to build out a post page, I could say that, let's say this is the URL, I could have something like my, let's say we're on localhost, 2121, right, slash post. How could I have a unique URL just for this post? Like what would be my unique URL just for an individual post? Yeah, we could just grab the ID. So this could be like slash, this could be slash 500, right? This could be slash 500. And the cool thing about this being slash 500 is that eventually in my API, I could yoink the 500 and then know which posts to go find to render this view. Right? So we can just use these IDs to know which posts we're rendering. So if the page was instead 501, that would grab this post instead. So now we can have unique URLs for each of our posts and when we go and render these posts we can grab the image, we can grab the number of legs, we can grab the caption, we can grab the person that created it, but for that to work if we if we just have the created by what are we also going to have to do? Yeah, we're going to have to figure out which user has the ID of 100. So we would make a request to our post collection to get all the information about the post, but then we wind up making another request to our users collection to find out who has the ID of 100 so we can plop in Bob here, right? And this is like a very, very kind of, we're taking our time here, we're easing into the idea of how we might build out a full stack application here. Would we be doing all this in production?

Probably not, but this is a good way to get an MVP going is to think about how all this data is interconnected and how we might build out our app going forward. So the cool thing here is that we have the ability to have unique posts that now all have unique users. Let's build one more post that has a different user. So, let's say Frank made a post. Let's say Frank made a post. Right? Frank made a post. It went really viral. So, it has like a thousand likes. Would the created by be here for Frank's post. Be 103, exactly. Because Frank has the ID of 103. Whenever we make a post, we can store that ID so we know who made this post. All right. We wanted to make a feed page.

So let's make a view for our feed page. I think that's an easy next step since we already have kind of like this stuff going. We're going to make a feed page that has a bunch of different posts on it, right? Maybe we're just scrolling here. All right, we're just scrolling. All right, we have a bunch of different posts that are on our feed. All right, there we go. How would the feed page work? If we were like, say we were at a URL, like, let me just copy this one here. Let's say our local host, 2121 slash feed, how would that work? Like we just want it. We just want to show all the posts. What could we do? Yeah, we could just make a request, right, to find all of our posts, we could grab them all, right? And then we just pass all these posts to our EJS and our feed is just every single post that's in our collection.

Eventually we might want to only grab a few at a time, right? Maybe we'll grab the most recent 500 or the most recent three that are in our database, right? So we don't have to grab all of them, but we can just go and grab the posts that we care about, right, from our post collection to build out our feed. So our feed is pretty, pretty simple. If it's like a, let's think of it like a, like a, like a for you page on TikTok, right? Like it, it doesn't matter if they're our friend or not. right? It's just anything that's ever been posted, right? Right? Cool. Yeah, we can implement friends later on. For now, let's keep it simple. So for now, our feed is just going to be all the posts. Maybe we'll only grab a few at a time just so that it's not completely reckless, but eventually we can get into other things like lazy loading and all that fun stuff, Progressive rendering all that fun stuff. Um, but for now, we're going to grab them all because we're building an MVP right building MVP We're gonna grab the most recent five and that'll be our feed.

All right Oh, yeah all the posts that that don't have a deleted property of true We've had to delete it property of true. It wouldn't show up in the feed or an individual post. That's a good good call All right, so we have our feed we have our post. I think like an extension of the feed So we have profiles, so we have feed, we have posts. I think the other big one is our profile. So let's give this a little bit more room. Let's do our profile here. Oh no, there we go. Let's do our profile here. All right, what does our profile need? Username, maybe like a pic for their bio, yeah, bio. Do we have bios or pictures yet for our users? If we were gonna have, if we were gonna have like user, Like we're gonna have like bios and profile pictures. What do we have to change? What would have to update for us to have like profile photos and yeah, our user's model, right?

We need a new user schema that would include profile photos that would include bios, very easy, not hard to do, right? We just, we go to our user model and we make space for the photo. We make space for the, um, for the bio, right. Totally, totally something we could do, but let's keep it simple for now. Uh, I think our, my profile, what I really want is like an individual profile for each user. And so I'm going to do just like our, what our, what our, what our URL might look like localhost, 21, 21 slash profile. And what would be a, what would be a possible URL for one of our profiles? Like what would Bob's profile be? What do you think? What do you think Bob's profile URL would be? Yeah. 100. 100. Right. Because what we're gonna do is we're gonna say, all right, if somebody goes to localhost 2121 slash profile slash 100, right, that means they want all the stuff relating to Bob, right?

So maybe at the very top, we have our username, right, and then what do we want probably on that profile? Yeah. All of Bob's posts. So, probably on this profile, we're going to have a few posts here. All right. Let's, let's copy this. All right. And maybe for now it's not like the full post, but maybe it's just the image. Maybe it's just like the image of each post and Bob right now, Bob really only has how many posts right now? Bob only has two posts right now, so we'd only wind up having two posts on our profile at the moment. But we can imagine there'd be posts going down the page, but Bob only has two posts. We can see Bob's ID is 100, and this has a created by of 100 and a created by of 100. So both of these were created by Bob. All right, cool. So when we're loading Bob's profile page, we're able to grab, based off of the ID that we're using, all of the posts that have that ID of 100.

We're able to grab those to plug into our EJS, right? Cool. So we're able to say, all right, we want the profile of this user. We're then gonna use this ID to go find all of their posts and plug that into the EJS. We've also made a request to the users collection to get that ID's username as well. Cool. So when we loaded the profile, we actually went and got data from to what? When we loaded the profile, we actually went and got data from to what? Throw it in chat. We went and got data from two collections. We went to the user's collection to find the username, and we went to the post collection to find Bob's posts. Cool. And there's probably one other thing that we, let's put one other thing on the profile page. Let's put a form, right? Let's put a form for Bob to make new posts, right?

And so this form would probably only show up when. We probably have this in some sort of conditional and this form would only show up when. Yeah, if Bob is the logged in user, right? If the person that is currently logged in is Bob, then we know that they're on their profile page. And if they're on their profile page, right? If you are on their profile page, then we can show the form. And the form would be everything that we need to make a post. So we would have like a form, and that form, let's just say this is the form. The form would ask for a couple of the key things there. The form would ask for, we already kind of know what the form would ask for. We already know what the posts are gonna need. It's going to need a caption. It's going to need a image. So we're gonna say a file upload. Cool.

So our form is pretty tight at the moment. We just kind of need those two key bits of information. All right? We need a caption and we need a file upload. because the ID will be randomly generated. The number of likes, that'll go up, right? That'll go up as we actually like stuff and we do all that. Captions, what we need when they actually create it. All this other stuff is just filled in when they submit, right? So when we submit this form, right? When we submit this form, we are going to make a post request. that post request is gonna be heard by our server and that post request will go ahead and make the post. And that post will wind up having a unique ID. It'll have the image that we uploaded here. It'll start off with the likes of zero, but eventually if people like stuff in our application, that number can go up.

It'll have the caption that we just entered. It'll have whoever was logged in when they made it. So in this case, Bob with the ID of 100, and then it'll have, if it was deleted or not, but when it's first created, it'll just be false, right? Yeah. Cool. So the file uploading is the tricky bit here. And so are we gonna write custom code, right? Are we gonna write custom code to upload our files? No way. Not me, I'm not. Maybe you, I'm not. So we're gonna use packages that do that for us. So we're gonna use a package called Molter that's gonna enable us to upload photos. Now, one of the hard thing about photos or media in general is that they're heavier. What do I mean by that photos and certain types of media are heavier?

Yeah, like the file size, like they're just bigger files. Like they're, they're, they're, they're, they're like, when you think about like, like they're more megabytes, they're, they could be gigabytes, they could be, it's going to take up more space, right? It's going to need more storage. So what we could do is we could take our files and just upload them directly to our server, right? Like we could take our images and just upload them and have a folder on our server called images. However, if people start to use this social network, the request for those images is gonna be really taxing on our server, right? And so everyone that needs all these photos will keep hitting our server, keep hitting our server, keep hitting our server. And that would make our server bill get pretty big pretty quickly. But also, since they're heavier or bigger files, it's gonna take longer for them to download. And if my server is sitting in Dallas or Chicago, we're not getting any benefits that something like a CDN could provide for us where our images are on servers around the world, right? So what people do is they use things like Amazon S3 to store their images for them. So we kind of just send our images to Amazon and Amazon gives us back a what would Amazon give us back? we would send all of our images to Amazon and and Amazon's just gonna give us a what a URL right a URL So we're not actually storing the images ourself. Amazon's doing all the heavy lifting for us Eventually we could use like cool stuff like CDN so that our images are all over the place for other folks to get and download a little bit easier, right? And they just give us a URL.

So what are we gonna store? What are we gonna store in our post document? Yeah, we're not going to store the actual image. We're gonna store the URL to that image, right? And we're actually gonna use something that makes this easier. We're gonna use something called Cloudinary. Cloudinary is really developer-friendly. And what Cloudinary is gonna do is we're gonna send our photos to Cloudinary, and then Cloudinary is going to give us back a URL that we could store in our document, right? And so we're not actually storing any images, we're just storing the URLs to the images. What about thumbnails? The cool thing is that once we send our stuff to Cloudinary, they can actually give us thumbnail URLs and stuff like that too. They can give us a lot of stuff back that'll make our lives pretty easy. And the reason why I like Cloudinary, good thing that you brought that up Gonski, is that they actually do lots of other media. So we're not limited to just images going forward if we're using Cloudinary. So that's the beautiful part here too.

All right, so we have right now the very basics of our application. We have the ability to have individual posts. We have the ability to have a feed that shows kind of like all the posts. We can have individual profile pages where when we go to an individual profile and they're not logged in, we'll just see all the photos from that user. And if they are logged in, we'll see all their photos, But we'll also have the ability to upload Upload other posts. Yeah Cool so this is like a very very simple social network. Um, If we wanted to we could add some other stuff too. We could add um We could add comments So if we were going to add comments, let's say that we had Underneath our Our images would be comments, and so what could we do here if we wanted to show comments? We probably need another what? Probably another collection. I feel more comfortable. This was in another collection, so let's say like. Let's put a comment here. A Doyle, I don't know how to spell a Doyle. A Doyle, a Doyle rules.

Cool stuff, we're just gonna say cool stuff. All right, so the comment was cool stuff. And maybe we have the user that made the comment. In this case, uh oh. Wow. It's Sarah. It's Sarah posting on Bob's on Bob's on Bob's post Man we're gonna have some stuff to talk about on Thursday. So Sarah just left a comment on Bob's post saying cool stuff Right. I don't know But why do these games right Victor's gonna be mad So Sarah just posted cool stuff We need to add a block button on friend. All right. So now we have a comment. So let's think about what we might need for comments. So let's go ahead and build out a new collection. I want the rounded one. There we go.

Let's build up comments. So now we have our comments collection And let's go ahead and just give this a title real quick. Comments. Beautiful. So here's our comments. And we're gonna have individual documents for each of our comments. It means we have a new model. We have a new model that has a new schema. And whenever we create a comment, right, there's gonna have to be some sort of like form here or something for us to enter a comment. So let's just imagine right now there's a form here that Sarah used, right? So what type of information are we gonna need to store in the comments? Created by, comment, and yeah, likes could be a good thing here, I like that. Created at could be eventually too if we need like time. So let's go ahead and say that we're gonna need inside of our comments, we're gonna have our Uh, so in this, it'll just say seven, 20, right? Uh, we're going to need the actual comment, which in this case is cool stuff.

We're going to have, um, let's just call it something slightly different just so we can keep track of it. But we probably still have a lot of time. I've created by made by, in this case it was made by, what would we put here for made by? This comment was made by what? Yeah, 102, it was made by 102 because 102 is Sarah. Sarah has the ID of 102, so it'd be 102, nice. The ID comment made by, I think we could probably get away with that for now. Oh, and maybe if we want, if we want it likes on individual comments, we could have that, like we could have likes for individual comments, but I don't want to do that for now. Let's just keep it simple. We'll have the individual ID for the comment. We'll have cool stuff made by, we need one other, we needed one other really important bit of information. We're missing one important bit of information. Yeah, the post ID. So we need the post ID. So where was this comment made on?

Which post was this comment made on? Well, this post was made on the comment of 501, right? So this individual post, right? This individual post was this post here, which had the idea of 501. So all my comments that are left, right? All my comments that are left on this post will have that post idea 501. So if we kind of keep with the lore here and we kind of copy this and we make a new comment, we bring it down, we might see something like this happen. So this will be a new ID for this comment. We might, we might see what the fuck, uh, and that's going to be made by who that had been made by, yeah, that's good. That's going to be made by one Oh one, which is John, right? We don't have Victor here yet, but, but John's just live it. Victor's going to come in Victor. Victor's going to wind up meeting a comment too. So let's go ahead and make another comment here. Right.

And so this will be another comment, uh, it'll be made by, uh, one Oh four. We can't see one Oh four because that's Victor down here. We can just imagine that Victor is, is one Oh four. Right. Right. And so it's still on the 501, but it's gonna be made by Victor and it's gonna be just like What's like the crying emoji? Just like upset there's sad face Sad face just like they're not even mad not even mad. They're just they're just sad Right. They're just sad Cool, and then what if there was like, what if there was like a post, what if there was a comment on a different post? What if there was like a comment on, on this post here? Right, if there was a comment on a different post, that should be fine with you. Right, if there was a different post, right? Let's say there was a comment on this original post up here, the other post by Bob, right? There's another post by Bob, right? And there's another comment on that post.

Well, it would have its own ID, right? Neato. It could be made by, let's say it was made by Frank, good old Frank, right? And it was on post 500. So while we can't see it because we don't have that post pulled up, right? We don't have that post pulled up. We can see that Bob's original post, right? The post that has the idea of 500 actually now has a comment of Nito that was made by Frank, and we know that this comment goes along with this post because the post ID matches the ID. Boom. You just built a social network. All right. You just built a social network. And so we can build out full-blown applications just with these kind of simple concepts of, All right, well, we know that every document that gets created has its own ID, right? Has its own ID. So we can use those IDs to our advantage, right?

Every single post needs a created by, and we can just go ahead and say, all right, we know who created it by the user that was logged in. We just grabbed their ID and we plop it in. Then we know that each post, right? each post can have comments, and we can tie the comments to an individual post by all of them having the same post ID. So the idea here is that we can literally start building out applications that do anything that we want them to do by simply keeping this concept in mind of, all right, every document has an ID, I can have different collections for the different kinds of data, and I can connect all these different bits of data together just by using those IDs. That's pretty neat, right? This is pretty cool. Like this is what I said, like once you understand some basic stuff, we can start to build whatever we want. And so the idea here is that on Thursday, we have to learn a few things, right? We have to learn a few things like, wait a minute, Like, how do I like grab these IDs, right? How do I like use these IDs to make requests to the different collections? Like I know the logged in user has an ID, but how do I use it to get their post? Or how do I use it to get their comments? So on Thursday, um, we will explore that deeper, right? Well, we're going to take a look at, all right, how am I using all these different IDs, how am I using these different IDs to get these different collections, the posts, the comments, and then once we know that we can put all this together to build this application together.

Oh, literally all making sense. And so whatever you want it to add, like whatever stuff you want it to add, you're probably just updating these few things, right? You're, you're, we're going to, if we want it to add friends, right? We wanted to add friends. Friends could be simply an array, right? Like real quick, just before we leave tonight, let's say we wanted to add friends to our users, right? We could just have an array called friends and inside that array, we could put the different users that we're friends with, right? Right? No, it's only 103, it's only Frank. John and Sarah aren't friends with Bob, so long story. Right, but let's say Sarah slid in, right? There you go. Right, now we have 103 and 102 as the friends of Bob. Right, so we can really just extend off of this to add any of the functionality that we want. We'll keep it simple to build our MVP, but once we have this and we can build whatever the heck we want, right?

It's just figuring out, all right, do I need a new collection for that kind of data? What do I need to keep track of? And so when we come back on Thursday, we'll take a look at these IDs. We'll take a look at how all this gets connected so we can build our social network. Cool. How do you update the database schema after you've already been created, uh, we're not there yet. Let's, let's build something basic really first. And you can always run stuff. You can always run queries that like update stuff. There's ways of handling that in production. We're just, we're just not there. Cool. Alrighty, let's go ahead and do a raid, ending with Ali, let's go over there, they're doing some leet code. We're going to be getting into leet code pretty soon. So let's go ahead and give them a raid.

Get those sweet, sweet channel points. Wonderful. All right. Somebody He's already warned them so I feel good as always Send some love their way give them some follows Hang out in the chat for a while say what's up say hello, and I will see you all on Thursday Thank you for a wonderful class Really excited to build out this application together like all your hard work becomes real like you can build real shit now That's so cool, and so let's get all that through on Thursday Let's build this out and start building the apps of our dreams everybody have a wonderful rest of your night day, morning, wherever it may be for you. Let's raid.

End of Transcript