Introduction

Yeah, yeah, yeah, yeah, yeah, yeah, yeah, hey, good morning, good afternoon, good evening. Hope you all are doing well. Let's go. Rufio, Rufio, Rufio, Rufio with the raid. Let's go. Hope you all are doing well. Rufio, thank you for the raid. Y'all not hanging out with Rufio before the stream. Look, look, look, look. Stream team channel, they let you know when they're going live. Rufio was live before this stream, so what were you doing here early? Should've been with Rufio. Let's go. What's going on, everybody? Hope you all are doing well.

We also have some fun stuff planned next week. Like, we're gonna start highlighting the stream team more, and we're starting that next week. So, excited to kinda share some cool stuff with y'all next week. But Rufio, thanks for bringing the crew along. Hi everybody. Welcome back Hope you had a good Tuesday evening a good Wednesday a good early Thursday All right, everybody Tonight we got a few things that we got to do one We are going to look at some hit list magic That's right hit list magic folks cuz hit list is due next week y'all so I wanted to share a little secret that I just found out about recently a little magic that might that might actually help you and your your hit list so let's go ahead and talk about that we're gonna share some celebrations I think this this is this is definitely boardroom worthy 15 plus jobs 15 in the last week alone 15 plus we haven't even started the hunt yet we haven't even started the hunt yet and 15 in the last week the celebrations channel was on fire folks are messaging me it's been wild 15 plus we're over 50 we might be at 20 by now in just the last week alone. If you aren't paying attention to that celebrations channel, you need to, but I'm going to, we got to celebrate a little bit, so I'm going through them. The folks that posted in the celebration channel, they're in the slides. There's actually more in celebration channel that are in the slides. Uh, cause it was just getting ridiculous. Uh, so yeah, congrats to everyone. Uh, that's gotten a job so far. And I always say this, uh, because we're not even at the hunt yet. Right. So no, no, no, no being like, why am I not there yet?

Cause you're not supposed to be there yet. We're still doing a loop. The loop we're upside down on the rollercoaster. We're upside down on the rollercoaster. Some people fell out and that's how they got the job already. You know, so we gotta, we gotta, we gotta, we gotta be cool with that, but we're going to celebrate cause 15 jobs, 15 jobs, community taught. What the theme you're gonna see over and over and over again is thanking the community Thanking folks that helped supported them thanking specific channels on discord that got them through it I'm about to loosen my seat belt. No, no. No, we're not ready to fall off yet. Don't take yourself out the game I'm buckling the seat belt is taking yourself out the game So Super excited that you're all here. Like I said, we're gonna see some celebrations We're going to, we're going to do some, some, some, some hit list magic. And then we're walking through our full stack social networking site. Uh, I really believe in this idea, uh, that I got from Gray's Anatomy, right? Where you, where you, you, you, you, you, you, you, you, you see one, you do one, you teach one, right? Like that, that's like the old school, like surgeons way.

You see one, you do one, you teach one. And so we're going to see one, right? We're gonna see one, then you're gonna do one next week, and then we're gonna hopefully teach others later on. So welcome that you're all here. Sorry for folks that are getting, I don't know what's up with the ads. It's so, I changed it back to one minute delay, but if you're getting ads, I apologize. Trying to figure out so it works better for everyone. But yeah, it's been a little while. They're not, the ads you're seeing now are not on my end. Like, I can't, I can't control always when Twitch runs them. Um, but for some reason they decided to run them five minutes ago. So. The, the downsides of unfortunately being on Twitch, I ain't got no control. All right, everybody. Uh, so let's get into it.

As always. I like to start off with, uh, some questions you got questions. I got answers Hey, thank you for the gift of subs in Douglas, thank you for to get this up. Thank you for being here appreciate it Agenda we can just talk through it questions. You got questions. I got answers Curling class 15 went to see what the current cohort is that we outside zealot. That's where we at. We outside weekend jobs Let's go be outside. We online When we go over react two weeks two weeks Is man he's an instrument if you know how to use it, what's your favorite ice cream? I don't know. That's a hard question Salt and straw has these like vegan ice creams that be that be falling sometimes If it's like, Hey, don't ever let, like, don't ever let your dreams be dreams. Right. Just do it. So just do it. Make your dreams come true.

Right. So if there's a job that you really want, and it seems like it might be something you could, you could fit for, um, go for it. We've had folks that went through the program that got senior roles right out of the program because a lot of times stuff's all made up and it doesn't matter anyway. Now would I focus my job hunt on senior roles? Absolutely not. Would most senior roles be a stretch for most folks just coming out of program? Absolutely. Um, but if it's your dream, it's a great job. You think it might be a good fit for you? Why not shoot your shot? Worst they say is no best you get is some good interview practice. You know, uh, Ivan, if you send a mod mail, you're good. We'll follow up. How did a recruiter go through a list of different frameworks, languages, asking me my experience level? You turn it back on them and ask them how many years of experience they have, right?

When somebody starts getting into that, they're just going through like a checklist. And yeah, going through a checklist means that, that that's just a waste. It's just, I don't know, it's just, it's just a waste of time. And so if they're going to go through a checklist, my answer is yeah. I've since, since it came out, how many years of experience do you have with it since it came out? Yep. I heard about it five years ago. Right. A lot of times I'm just going to chalk those up. That ain't going to go anywhere. Yeah. I ain't going to go anywhere. If they're, if they're already not seeing me for me, if they're already not looking at my projects, if they're already not looking at the merit of the application that I have put in front of them, and they're just going through check. That's a wrap. It just move on.

Ain't gonna win that one. Should we focus on frontend or backend on our strengths? No, I think you should apply to any kind of like role that's front and back in full stack Keep your options open. And like I said, it's one of 60, right? So you'll start to feel out Like 10 interviews in you start to kind of get a little bit of a rhythm you start to be like, alright I'm doing a lot better in these types of interviews. So I might optimize my hunt for these specific types of roles and so I I think that's something that comes up naturally once we get into it. So we're gonna have classes on like how to negotiate. We're gonna, like one of the beautiful things about Huntober is like kind of answering that question a little bit more seriously. When somebody says, how many years of experience do you have with each of these things? That's something we talk about during Huntober where I can kind of expand on a little bit more deeply and be like, how can we redirect and get to the thing that actually matters? And so if somebody says like, Leon, how many years of experience do you have with Next.js, right? Right. Wonderful. So, uh, I've been using react for a very long time. I have built lots of wonderful applications that you can see on my portfolio that include next JS.

Uh, so if you're looking for someone that has built full stack apps, that has built react apps using next JS, that has shipped production where the code using next JS, I would definitely point you to the projects that are on my get hub. Right. And then if they go, but yeah, but yeah, dog, but like how many hours, right. Then, then I just know it's completely like lost. Like, uh, does the, like when the next Jess next day has come out, like, like, like it's, I I've built apps, right. I have them on my get hub. You can see them. You can play with them. If that's not enough. Right. If that's not, if that doesn't matter to you, then this, this conversation, this, this isn't going to work out right. And so how to handle those types of conversations. how to say that a little bit more eloquently, how to lead the interviewer in a better direction is kind of all the stuff that we go over during HuntTober. Would I actually say that? Yeah, so I would actually say like to give the answer, there's to be like, so I've been using Next.js for quite a while, hard to put my finger on like the exact date I started using it, but I do have projects on my GitHub.

I've pushed production level code that uses Next.js. So if you're interested in seeing those applications, I'm happy to show them to you. And so that's an honest answer, right? The honest answer is like, I've used it, I have projects that I can show you, right? But I'm not actually answering the number, right? And if they asked, if they really pushed for the actual number, then I would just honestly say, honestly, I don't know, I've been using it for a while. Right? And so that's kind of how I answer those when they put you on this tough spot like that. If me showing you actual projects using it doesn't work or things like that, then it's a wrap. And so the cool thing is that you will all have built full stack apps that have React, that have some interesting frameworks, some interesting libraries that have Node, all these things that are just be the checklist things that you can point to, yeah. Yep, cool. Um, will we learn about big O notation? Absolutely. Yep. So we have like a whole class on big O and then we have a whole nother class on data structures, algorithms.

Yep. Webmin, if you actually have that time. Yeah, sure. Absolutely. What do we do about the fear of being fired after getting the job? So that's the real, this is the rub, right? This is the thing people don't want to talk about. The real work starts once you get the job, right? Like getting the job is one thing, but then keeping the job is a whole other bag of worms, and it's something we're gonna have like a full class on. But here's the thing. It's going to take them three months. Like, let's just say worst case scenario, right? Worst case scenario, they hate your guts. They just don't like you. It's still gonna take them probably like three months to fire you, right?

Like it's the absolute worst fit. They hate you. You're still onboarding. It's probably still gonna take them three months. So I'd rather get paid to learn for three months and just don't update your LinkedIn right away. You should never update your LinkedIn immediately, right? Get through that first three month review, get through that first, whatever that first review cycle is, get through that and then update all your stuff because you could have just been freelancing during that time, nobody else needs to know. And one of the thing is that you need to keep up your interview skills. Shit happens, right? Shit happens. And so I think people get comfortable after they get that first job and it's absolutely not the time to get comfortable. You gotta keep up your data structures, your algorithms, you got to keep up your code practice on top of all the things you're learning to be successful as you onboard at that company. And so yeah, like worst case scenario, you get paid and then you find another job. Yeah. Cool.

Alrighty, folks, thank you for the questions. We are going to have a wonderful review session on Sunday. So if you're new around here and you're like, what is this cool thing? How are people getting jobs? How can I learn backend web development? Come back on Sunday. We're going to do a full review. We're starting at 1 p.m. Eastern time. We're going until we get it done. All right. So if you ever wanted to learn how to code, if you want to learn backend web development, that's what that class is for. We'll also have plenty of times to answer tons of other questions you might have. I like to come back from breaks and answer a few questions as we go throughout the entire day. All right.

If you haven't checked in, please go ahead and check in exclamation point. Check in, get you the tweet for today. Go ahead and like that. Retweet it for me. Uh, if you haven't submitted your project work, I don't care what you got. Show me what you got. I want you to submit it in that form. Uh, closes going to close soon. So get it in today, please. Uh, back in review class, like I said, Sunday and hit list is due Tuesday. Uh, that is, that is just in a few days, folks. And so remember on the hit list, I just need the companies. Like I need the actual open job at the companies that you could actually realistically apply to. And so a lot of folks have been having a little bit of trouble finding companies that they could work at, that have open roles, that you're digging through different sites, you're digging through, um, different portals and it's just, it, then you find a job, but it was posted three years ago. And so, uh, the hit list, the hit list I went through on Tuesday is 40 companies.

The final version of it will be 60, right? So 40 due Tuesday, 60 due by the end. And so, uh, these should be companies that are in your local area. Cause locals always a little bit easier to get the job. We do have a lot of folks that don't live in a large Metro area. That's okay expand your search to metro areas that are close to you Because a lot of companies still aren't back in the office and you might be able to sneak in one flight a month and still Be working remotely, but had a better opportunity at getting the job because you were close to it right, and then if you Don't have anything that's in a larger metro area. You're going for remote Right, and then if you're outside of the US you're outside of of Canada, you're looking for kind of remote global hire, right? So if you're in a place that doesn't have a tech industry or doesn't have a big one, you don't have any larger Metro areas to which you can apply to, and you're looking for remote opportunities that hire globally. And so this is a arduous process. It takes a long time to, to find these, these, these opportunities. I've done it in the past where I've just grind it through Angel List or now I think they think now they call it Angel Co. I've grinded through LinkedIn, I've grinded into these different job boards and it's always a pain in the butt to like find the actual roles, find ones that are actually open. And so the other day on TikTok of all places, I found this. And it's something I just never thought to do. I do this a lot, but I never thought to do this for the job search.

Let me show you the magic of what this is. So if you don't know Google can take in Booleans it can take in a lot of other special stuff Right, and it can help you filter out the results that show up in Google So what I've done is I've built off of this this they go by 10 BV I linked their tick-tock here because it was brilliant I added the common job sites that I use dice indeed angel co and then these ones here are the ones they That they found that are kind of like the sites that host the job applications Right that host the job applications. And so a lot of times like even if you're on even if you're on Even if you're on like LinkedIn or any like some of the other bigger job sites You like click apply and then it takes you to where they're hosting their job Application and it's normally one of these like four sites And so what this is saying is you're telling Google to only return Results from these websites, right? So only return results from these websites and you can add others if there are other job boards that are popular near you. So like if you're from a certain country and the job board is different for you in that country, then you would just add it to this list, right? I'm seeing some other folks saying, so maybe we'll put this in a GitHub repo and people can add the ones that are special to them. That'd be cool to do. So maybe we'll do that. I'll do that after class. I'll set up that repo and people wanna submit PRs, they can. And so you put all the different sites that have stuff in, you type in the roles that you're looking for. so engineer or developer. So this is like your, your, your, your, your, or operator here, engineer or developer. And then I'm looking for inside of that result, the result must have the word JavaScript, and it must have the word remote. Right?

So these are the sites that we're looking for. These are the things that must that have to be on the, that are going to be on the page. These are the things that must be on the page. And then here's all the stuff I want to filter out. So if it has senior on there, get it out. If it's staff, get it out. If it's senior, get it out. If it's lead, get it out. If it's principal, get it out. If it's Angular, get it out. And you can change this up to whatever you want. You don't have to have, I'm being silly with the Angular here, but it can be helpful to focus. And so you pull all this stuff that you don't care about. And then you put, and this is the last bit of magic here, you put the date. So after August 1st, so what this will do is it'll search all these sites for engineering and developer roles that have JavaScript and remote on the page.

Gets rid of all the senior crap, gets rid of the stuff that maybe like in your area, everything is C++ or everything is PHP, and you just don't want those roles. You can remove those roles. And then after that time, and you plug all this into Google. I use DuckDuckGo, so I have to do bang G for this to work, but just ignore that. And here's 1,200 results, almost 1,300 results of like straight job listings that are remote JavaScript roles. And so like, you can like just look on them and some of them are gonna be bunk, right? Like not all of them are gonna be like great roles, right? And over time, you'll figure out how to remove the stuff you don't care about. Maybe you keep seeing a certain type of recruiter that keeps doing something that you don't want, you can just add them to your nucleus there. And boom, it's the actual application with the right company, has everything you need, and it takes you right to the application page. So just an easy way to find actual roles that were posted recently, right, because you have that date on there. And then as you want, you can switch things up. So maybe you're not remote. So maybe you're gonna do, I don't know, maybe you're gonna do New York, because you're in New York and you don't wanna be remote. So you'll do like New York, right?

And there you go, boom, 161 results for JavaScript, New York, filtering out all of the like senior roles that were all posted recently, right? And there you go. And so you can just plug in your locality, right? You can plug in your location and there you go, right? You just start finding these like actual open jobs that you can apply to. And over time, you modify it for the things that you care about. Like if there's certain roles or things that you care about, boom, you just add them and that's it. So these are in the slides. You can do exclamation point slides if you need the slides. I don't know if it's gonna let me post this in chat. Let's see if it'll let me post it in chat. Yeah, there we go. Boom. You can copy and paste that if you need it, but it's also in the slides, exclamation point slides. And there you go.

And so, like I said, this wasn't my idea. I saw this on TikTok and then I added some of this stuff that we might care about. So this is the person that did it is freaking genius. And so you should be able to fill out your hit list pretty quickly with this role. And since I'm getting good shit from TikTok, I'm actually gonna start putting more stuff on TikTok. I know I said it before, but like, I've been really working on a lot of like the short stuff, like the stuff that doesn't make sense to put anywhere else, but I want it to be like a video. So maybe not Twitter like yeah, it's going on tick-tock. So I know some of you don't want to reuse tick-tock. That's okay Don't follow me on tick-tock. That's wonderful. But that's when we putting on there Because I'm actually finding a lot of really important stuff on there and it's where the it's where the kids are You know, like we got a we got a we got it. We got to get the young ins or else What's our future like, you know, so I'm gonna be on there All right, let's get some celebrations going. It's just, it's just really too much, right? You got to stay hip, right? You got to stay hip.

And so the celebration has just been wild. So many people have been posting. So these are all in the celebrations channel. You can just go to celebration channel and you'll see all of these wonderful, wonderful posts. And so just wanted to throw some in here that I think were that, that were pretty dope. I love this one. They posted on Women Tech Channel first and then they posted in Celebration Channel. For all of you who think I can get this job, I can't get this job. I didn't go to college for this. Let me tell you right now, my degree did not get me the job. This community and the skills Leon taught did. Due to my experience, companies did not even want to interview me for entry-level roles. So I think there's some little bits of wisdom in what people are sharing as they are getting these jobs, right? Because I think there's something really important about keeping like your pulse on the ground of what's happening. And one of the beautiful things about what I do every day is every day I'm helping people get jobs, right?

Like my day job is resilient coders where I'm helping people get jobs. And so when I share things, it's, it's not because I like, I think this is going to work. It's because I've literally helped hundreds of people do this. And I really pay attention to what people say. And I really pay attention to what I see the trends are. And if the trend swings one way, guess what? I'm going to start teaching. Right. And so I think there's little bits of wisdom in here. I love that some people share like the things that they did that were different than what I told them to do. Right. I think that's huge. Right. And so I'm always going to say that I'm going to show you doors to open. it's really up to you which doors you open, right?

And so open as many doors as you possibly can, because you'll be surprised what walks through them, right? With the exception of knowing leak code questions, which only come from companies I don't wanna work with, pretty much every question I was asked during my interviews was still in the bank or related to the bank. Every offer I got for an interview happened because I followed Leon's method for the hunt. The skills are necessary for the job came from this is just this is just me. This is my victory lap right now. Thank you. They're gonna be offering coffee chats was just dope. Thank you for doing that. And I just love that this is for making this community. It's community taught folks do the bank. Don't listen to me. Don't listen to me. Listen to them. Listen to them. Pretty much every question I was asked during my interviews was still in the bank or related to the bank.

Do the bank. Do the bank. Do the bank. Don't listen to me. Do the bank. All right. Received a front-end software engineering offer. Can't thank Leon in this community. Community taught enough. Um, I went from an unmotivated CS student during my freshman year to grinding and following Leon's path. Eventually landed me this job. For all the CS students that are trying to get a job, it's totally possible. Do not mention you're in college. Do not mention you're in college. This is a lesson I had to learn.

Uh, it's, it, it actually, a lot of students have said this before that, like, if you're still like on the way to graduating, but you're actively job searching, telling them you're in university actually can hurt you as you're trying to get a job before you graduate. Uh, especially if you're not like close to graduating, if it's not something like you'll graduate and then start. And so I think that was pretty funny to bring up because it's definitely true. I've definitely seen people, once they stopped mentioning it, get more opportunities, cool. We go get, oh, and I love this. I'll continue to follow along with the cohort and bring as many more people along with me. Let's go, that's all I ask. Y'all thought this was free. It ain't free. You gotta turn around and bring more people with you. All right, just signed a written Java developer position. Good looking resume. I used the template. It works, it works, it works, it works. Leon it's not the full ATS format mmm it works get out of here after four rounds of interviews and coding a button in God You So with these fucking buttons Man oh man.

Oh, man We all, we're just going to have a full class on buttons, button prep, big part of Huntober is button prep. People out here getting jobs with these buttons, uh, before a hundred devs, I sent out over a hundred applications, got nothing on, hold on. Sent out over a hundred applications and got nothing But while with 100 devs I had offers come to me. Let's go. Hey, we outside we online. Let's go say less All right long time coming Uh I got the bag shout outs to the community also shout out to naya. Hey And I've been doing some Twitter spaces with Sean doing a lot of like negotiation talk So shout out to them and shout out to the mental health channel. Let's go Helping them get across the finish line. I love it All righty, this is a big one Can I believe my fight has finally come finally accepted a full stack software engineer from a fortune Oh, the best part about this, uh, I, I, I don't know if I, I have, I'll retweet it. I'll probably retweet it this weekend. Um, they, somebody did a meme. Uh, they, uh, they applied to target and, uh, didn't get the job like, like that, like the normal $15 an hour target job, uh, didn't get it. Uh, and then now they're a full stack software engineer at a fortune 50 company. I that's the, whoever, whoever turned you down for that job, you got to send them something. You got to send them a thank you card or something.

Let's go. And they were on the live stream. Yeah. They were when we did the, um, their story crafting. So this is, this has been, this is a long time coming. I love that. They thanked out everyone, uh, their special little group here in a hundred devs shout out the mod shout out the mods as always uh big shout out to divker recently if you ever see divker in chat please just just just like just put like like a heart on anything they ever say uh y'all don't know the work they put in to keep like the lights on and that discord running uh so shout out the mods i see a lot of mods here chris a thank you for being here Shout out the stream team, let's go. Mindwolf A, love it. Law, love it. 100 devs community, community taught, love it. All righty, I love it, see it. Thank you, thank you, thank you. Got a non-profit client back in April and has led to a couple referrals, even though the project isn't completely done, signed another client, putting us over 11K. 11K in client work, 11 grand, let's go. Let's go.

Still a minor disbelief that this is happening. Let's go. Was having a hard time looking for volunteer work, but now they found a new volunteer opportunity. You're gonna be working on real world projects, It's collaborating with real people, love to see it. Consider this a huge victory, me too. Accepted an offer as an entry-level software developer, been involved since the beginning of Cohort 2, been through the highs and lows, and I love that they kind of mentioned, wasn't able to land a client, wasn't able to get the review on GitHub, couldn't get past four queues. I don't know if many people get past four queues, that's wild. and was able to land a job by focusing on learning how to learn and learning how to network and talk to people better. Hey folks, that's why we push the networking every week. Thanks to everyone who helped along the way and the community, community taught, love to see it. Landed a client that's for the foreseeable future, 10 to 15 hours a week at $80 an hour. Let's go, let's go. For reference, the rate I'm being paid here is four times my currently hourly rate at my nine to five, four times the amount let's go. Just signed a contract for mid-level front, mid-level front end engineer at a company which was a dream goal. Believe hardest part is keeping in believing it's not an all or nothing deal.

I love this. I love that part. Open the doors that you can open. Play your strongest cards. Soft skills, carry soft skills, get jobs, folks, and manage your learning time. Anki Banki code challenge every day time slot. I had for learning started with those only one extra time was I working on projects or learning new material. I agree with that. Thanks, mods, and the community. Community talk, let's go. You know, you're spending too much time on this. I don't care. Let me pop off for a bit. Jumbo C, love to see it. We don't get got.

Jumbo C, accepted my first offer as a front-end software engineer, level two. Working with some hype stuff. Fully remote. Yesterday was my first day of work. I wanted to wait until the laptop to arrive so I knew it was real before posting. One of the things for creating this community, they were part of the first cohort. I love to see it. First cohort folks grinding, coming back when they need to, getting the stuff they need to get done. And one thing I never felt discouraged because I knew it was a matter of not if, but when. It's always just the when. We're all in the same roller coaster, folks. Sometimes you're in the back of the car and you pull in a little later. That's all right this community really helped me grow as an engineer improve my communication skills that transferred over to my new role Thank you all who are part of the community. I love it special shout out to Emma B Nicole dab Interview process they broke it down for you I love when people do that when you get the job tell us what tell us what what happened I need this when we post your job. Tell me you tell us about what happened Tell us tell us the things you went through what do we need to be preparing for what did you see on?

the job that got you the job, you know, tools that helped me the most. Aside from the community. I love that. Aside from the community, Anki do the bank. Once again, folks, don't listen to me. Listen to Jimbo. Don't listen to me. Listen to Jimbo, do the bank network building. You will learn by getting stuck, getting unstuck, getting stuck again. Yes. At this point in time. You have to be building. You have to be building. If you're not building, you're not learning. And so tonight we're going to walk through, we're going to walk through this full stack application.

And I'm going to ask you to build on top of it. And it's going to be hard. It's going to be difficult. It's going to be something you haven't done. It's going to be weird. It's going to, you're going to go to discord, ask a metric crap ton of questions, but then we'll go over it next week. But I need to build in, I need you playing with code. I don't need you to sit in here listening to me. I need you to actually get your fingers on the keyboard and get shit done. And, and Arroway said 90 days until MVP. Run. All right. Uh, I love the last one. Uh, I'm excited to announce. I've just accepted an offer as a full-time software developer.

I'm pumped. Love it. Love it. Just saw that once earlier today in the in the in the channel. So as always, uh, don't listen to me Go to that celebrations channel. There's even more than I put on the slides. Can you believe that there's even more? Than what I put in the slides even more even more more And you can go back you don't you don't have to scroll You can just look at the pin and see 50 other ones that are pinned And if you have any shred of doubt that you can do this, don't listen to me. Listen to them. You can do this. You're close. You got a lot more work to do a little bit more work to do in terms of getting ready for the hunt. The hunt's a whole lot of work, but it's doable. You're closer than you think you're in the wiggles of false hope. You went through the trudge.

You went through the mud. You went through the trough of sorrow and you're so fucking close Don't take yourself out the game Keep pushing you're gonna get to the promised land. I promise you All right. I just need to I just need a little death session. So and second warden Five seconds four three two one All right, buddy, you can do it. You really can. Leon, why'd you spend 45 minutes doing this? Because I think there's like three of you that really needed to hear this. I think there's three of you that are like, I don't know, this might be my last class. I think you needed to hear it. You're closer than you think you are do the bank Do the bank That's it. Every like half the people said the bank is what got them the job do bank Do your code challenges? Do your networking? right Work on your mvp For your 100 hours project, right? These things these things work It's not me.

I'm not like I could shut up now I could stop talking You don't have to listen to me. Go to Celebrations channel and listen to them. They're the ones that are getting the jobs right now. So if you need to hear it, I hope you heard it. All right, these aren't randos. These are folks from the community, literally thanking the community for helping them get a job. You can do it. All right, let's point out our social network. We're gonna walk through the layout that we did on Tuesday. Then we'll take our top of the hour break. And then when we're done, our top of the hour break, we will come back and start working through the code, understanding how this social networking app is going to work. And so let's go ahead, let's look at our plan from Tuesday, take a top of the hour break, and then we'll start looking at some real code. All right. So here is the application that we decided to build out We're trying to build out an Instagram clone That has some really core features We have users which we've already seen with our MVC local off We are going to add a few new things like individual pages for specific stuff We're gonna have individual pages for our posts. We're gonna have individual pages for our feed, individual pages for our profile, right?

And so how do we actually have these individual pages? How do we show specific stuff on these pages? And how does it tie to the data we're keeping track of in our database? That's the goal for tonight. I want you to be able to see the big picture, right? See the big picture, see how these apps come together. Hopefully have that moment where it clicks and goes, oh, we're using the IDs to build the individual URLs for our pages. We're using the IDs to keep track of our users. We're using the IDs to keep track of what user made which posts. We're keeping track of what posts is tied to which comment based on the IDs. Were we supposed to code this out? No, no, no. We're going to we're going to go over it tonight. Right. So that's the idea.

The idea is to see how a real full stack app that's a real social media app where you can upload photos, leave comments, do captions, all that stuff comes together. That's what we're going to try and see tonight. And so I want you to see it. I want you to ask questions. Don't worry about like coding along or anything like that. Let's understand, the goal is understanding. See one, do one, teach one. All right, so let's think about our three things we talked about on Tuesday we're gonna try and build out. We want a profile for each of our users, we want a feed of all our posts, and we want a page for each individual post. So let's think about that page for each individual post. What does each, in chat, what does each individual post have? Yeah, every single post is going to have an ID, right? We know that we are storing our posts in our post collection. Based on the model, right, that had our schema, we said that each post is gonna have like an image URL, it's gonna have a number of likes, it's gonna have a caption that'll show up as the text. We'll know who created it and whether or not we deleted it, because we can have like soft deleting where it doesn't actually delete our end, but the users can't see it.

And we know that whenever a post got added to our post collection, there's gonna be a unique ID that is created for that document, the document that represents that post. So if we are gonna have a page or an individual post, what would be a really easy URL to use so that we could see that post? Like what's something that we could do, right? Yeah, we could just use the ID. So we could have a URL that's kind of just like our local host that we're normally used to seeing. We can have a route called post and then part of the URL could just be the ID of that post. We can literally just take the ID and put it into the URL. So this post, right, is tied to this document document in our collection. And the cool thing is, if we know how to get that document out of our collection, we can use all the data to build what we're seeing on this specific post page. We know that we're on post 501, but we're grabbing this specific post from our collection. And that means we can use this data to plug in what we see. This image URL, it's plugged into our what? This image URL is gonna get plugged into our what? Into our EJS. It's in the game, right?

Let me get plugged into our EJS. So we're gonna use that image URL, right? We're gonna use that image URL and we're gonna use it so that we can actually load the image that will be seen in our page. And so we're gonna take that URL, we're gonna plug it into our EJS. Our EJS for those that might be new around here is our templating language that we're using to spit out HTML. So we use that image URL to build the image that we see in our EJS. We can take the number of likes and plug that into the post, right? We can take the number, we can take who created it and plug that into the post. And we can do, we can take anything, the caption and plug that into the post, right? So all we're doing, all we're doing, all we're doing is taking the information from this document in our collection, typing it into our EJS, that we can have a specific page for each of our posts. Cool. Does that make sense? Questions about that? Makes sense? Cool.

And so tonight we're gonna see the code that enables us to do that, right? We're gonna see how we can, we'll see how we can define the URL. We'll show you how to, we're gonna set up the routing so that this actually works because it's gonna come down to our API listening for that route, right? So we're going to have part of our router, right, is listening for a post URL, and when something, when we have that router that can hear the post URL, it's going to call a specific controller that helps us set up this post page, right? We'll see Molter today. Yep. Cool. Oh, the code is already shared on discord. So we already have the, the URL is already there. If you need it, um, exclamation point discord. If you're not on discord and needed it cool. All right. So that's going to be this post page. The feed page is probably a little easier. Why is the feed page easier?

We can just do a normal find that we've been doing for the past couple of weeks, right? Just go find all the posts, right? Go find all the posts in our collection and we can just load them all into the feed. Eventually we'll do things like lazy loading and all that fun stuff, right? Yeah, pull all the ones except the ones that are deleted exactly, right? We can put all of those posts into the feed and it's just easier. We could also maybe do something too, like we had talked about it on Tuesday, but we didn't do it. Maybe we add like a created app property that whenever we create a post, right? Whenever we create a post, we also store the time, right? Maybe we store the time that that post was made in because once we have the time, We can like now have a really easy way to show like most recent posts Right, all right, you could show you could you could show the most recent 10 15, whatever it may be post cool and Then for the profile page for the profile page It's gonna be kind of the same thing as the post right where we could have a are just our normal URL We could have a profile route. And then for individual profiles, we could use this number. And what's that number? Where's that number coming from? So we could have individual profiles. Where's that number coming from?

Yeah, it's coming from the IDs for our users. Remember our users are just documents in our users collection. So every single time a user is created, that it's gonna have a unique ID. And well, the cool thing is, we can just use those unique IDs as our individual pages for each user. And if we wanted to, we could just have like their username show up based off of what was stored in the document, right? And we could show all their most recent posts. And then we could do one other really cool thing, right? Right? We do maybe one other really cool thing, which is, which is I wanna be able to see everyone's profiles, but if it's my profile, I wanna be able to like upload stuff, right? If it's my profile, I wanna be able to upload stuff. How could I tell if I was on the logged in user's profile? Like, how do I know that I'm not just on some random person's profile? How could I know that I was on my own profile that I was logged in as? Yeah. All right.

Remember, we have that. Remember, each request when the user is logged in has this rec.user property, right? Because now they're logged in, right? They're authenticated. We have the session running. Since the session is running, we have this lovely rec.user, and there's an ID property on it. So if the logged in user, by using this rec user ID, if that logged in user's ID matches the ID of the profile page that we are on, then we know what about that page. We know what about that page. It's mine. Exactly. Exactly. Giant. It's their page. It's the logged in users page, right? It's the logged in users page.

If we're looking at that request and we see that that rec. Dot user, that idea of the logged in user matches the idea of the page that we're on, we know that it's, we're on the logged in users page and we can show that upload what would stop the upload what what's what's controlling whether or not this upload shows up what is it it's just a what simple week three javascript conditional exactly just a conditional in our ejs just a conditional in our ejs and that conditional is going to check and say hey If, if this is true, right? Like if they're equal, then we can show it. Boom. Cool. Now the last thing is these comments. And these comments, we'll save, and we'll talk about when we come back from our break. All right, we're at the top of the hour, folks. If you're new around these parts, we like to be healthy. We like to get up, if you're able, move around, hydrate, stretch, look at something that's not your screen, and we'll be back in five minutes. Five minutes, folks. All right, see y'all soon. I'm gonna run some ads so other folks don't have to sit through them, don't worry. You You You You You You Sorry, that's the point below. All right, folks, come on back.

Come on back. just just just farm I wonder how we could get to just hang out on the stream just like just Bob it's just Bob 24 7 Bob stream it's just it's just a 20 there you go I love that Chris, it's a Pomodoro, just Bob with Pomodoro going. That'll be good. Any chance we can get a banky voice chat? Yeah, we talked to Blahmi. We can make that happen. I think that'd be a cool idea. Bobadoro, it's Bobadoro time. All righty folks, let's get into this. All right. Oh, he on X Games mode, I love that meme. All right, so we talked about our post page, we talked about the feed, we talked about the profile, and I think the last thing we need to talk about is the comments. All right. Welcome Joshua. Let's talk about this right here.

How many, how many trips? How many, how many, how many collections are we using to make this happen? How many trips are we making here to the DB, to the database? How many trips are we making here? What do we get in here? Yeah, we're gonna use like three collections here, right? Let's think about this. So for the comment to show up, we need a few things. The first request is we load this page, right? We load this page. And to load this page, we would need to go and get that post from the database, right? We would use all that information to start building out what we see here. but to get the username, we need to go somewhere else, right? To get the username, we saw that the created by, right? We can see who is created by, but it's just the ID of that user.

So to get the username, we would need to go and get the ID of 100, which is the username of Bob, And then once we have the username, we can plug that, or sorry, the comment's a little different. Sorry, we can, rewind, rewind. We get the comment, right? The comment enables us to build out this entire post. But when we get to the comments, it's a little bit different, right? It's a little different. It's a little different. We have to, to load this comment, we have to go and get the comment from our database, right? And so which comment would this be? Right here. So we went to our posts, right? We went to our posts to load this entire page with all the information, but to load this area, right? to load this area, we need to go to our comments collection and grab this specific comment. And this specific comment has the text we need of cool stuff and it has who made it, right? But the who made it is not a username, it's the ID of one of our users.

So we would need another request to go and find the ID match to grab the username of Sarah to plug that in. So we're using all three of our collections here, right? We go and load this specific post page of 501. We have to go and find that post. We grab all the data we need to start rendering out this post. but when we get to the comments, well, we have to go get that comment from the comments collection. We're able to grab that initial data, which is like cool stuff, but if we wanna show the username of the person, we have to go and get their username by querying the user's collection to find the 102 match, which gives us the username of Sarah, which we can plug in. Boom. This feels like an entire person's job. Yeah, this is back in web development. Let's go. Why are we only showing the poster? No, we would load all the comments. There's just limitations on what I can draw. But technically we'd have all the comments like going down the page, right?

Cool. So let's go ahead and figure out how we're going to load all this and walk through, right? Walk through how all this would come together. So now we're gonna look at the actual code that is supporting, right? Supporting how all these different views are going to eventually be rendered, right? So let's start off with, let's start off with the feed. I think the feed might be a little bit easier to start off with. And so I'm going to demo the application and then we'll look at the feed first code wise. So let me go ahead and make sure my code is running. Yeah, code is running. So here's our binary upload boom app. I think we're going to keep the name. And it seems most folks were hyped on it. Quick pound got vetoed pretty hard. If we feel like we need to change it, we can do a poll to figure out a new name.

All right, so I'm going to log in. I created a testy account. So testy at testy.com. The password is testy testy. Cool. And so here is my, so the favicon is Bob's face. And so that's why that popped up on my last pass. You can see the favicon up here in the tab. The favicon is Bob. Cool. So I have testy at testy.com. And we can see that since I am the logged in user, how can you tell that I am on my profile? Who's testy? No, testy's not adding to the lore here. It's just my test account.

Or is it? Or is it? I can see that my username and email is there. We're big braining it on that one, yes. I can see that my username and email is there for sure. But also what we just talked about, right? The form is there. If I was on somebody else's profile, I wouldn't see the upload form, right? Testy is Victor's urologist. I'm cool with that. All right. So we know that we're on our profile. Let's take a look at the feed. Oh yeah. So here's the feed.

This used to be open to all 100 devs. I had to shut that down because some of y'all are reckless. We have a small contingent of degenerates, which is okay. You need that for a good community. But, uh, so we have, we have a bunch of different posts. So on this feed, right on this feed, you can see all the different posts, right? We have, uh, we have our, our lovely fairy from Neopets. Uh, we have an event loop. We have a poem, we have a Rick roll. we got Pawn Stars, which is like my, that's what I fall asleep to. If you ever want to know what I fall asleep to, it's Pawn Stars. We have a frog, we have a lizard on a dog. These are all different users that have made different posts on our 100 Dev Social Network. And so we just have a lot of stuff that can upload it. And so we can see all the different posts that are in our feed.

If we click on a specific post, right? We're just on slash feed. If we click on a specific post, we can go to that specific post. We can like it. We can see the caption. And at any point in time, we can return back to our profile or return back to the feed. So I go back to my profile and here we go. And maybe go back to the feed one more time. Let's go ahead and just click a different image here. Boom. We can see it, we can like it if we want, we can return to the feed. Like it's just a pretty cool app. We can return back to our profile. Let's try uploading a post. So let's go ahead and try making a new post just to make sure that it works, just so we can see it working.

Make sure I have some photos, I do. All right, so let's go ahead and do, we'll start off with Mira for obvious reasons. And so Neopets is life. And we're gonna go ahead and choose a file. We're gonna go ahead and Neopets fairies here. We're gonna go ahead and grab Mira. And we're just gonna go ahead and open that up. and then we're gonna go ahead and submit it, right? And so now, since we're still on our profile, right? Since we're still on our profile, we can still see our first post, which is Mira. Let's go ahead and do Thea as well, because we're just here. All right, let's go ahead and upload a Thea, here we go. Boom. Submit, there we go. Let's not ask questions about why I have these ready to go.

Just keep it what it is, just okay. They know what they're doing. Come on, hold on. Hold on, hold on, Olson, come on now. I mean life, right? They know, come on, they know what they're doing. You ready? There we go. They know what they're doing. Don't put that on me. They know what they're doing, right? We can click on our individual posts. We can see Neopets is life. We can even like our own post, which is pretty interesting. If we wanted to, we could delete our post.

We'll notice here that this trash can is here, right? We can see the trash can is here, right? Some of you are getting activated right now. That's kind of cool. But you can see this trash can right here, right? And you can click it because why? Why is this trash can showing up? Let's go back to the feed. Let's click on like this event loop. Why is there no trash can here? Rusty A, thank you for the hydration. Cheers to you. Because it's not mine, right? It's not my post. So we know that there's some good stuff happening here where we can only delete the post, right?

We can only delete the post if we made it, right? So that's a good feature that we have in here. We have the ability to like any posts. We can only delete our posts. We have the ability to go to our profile and on our profile it shows just the posts that we made, right? Just the posts that we made. If we go to the feed, it's everyone's posts and we can kind of like click on everyone's posts. I don't have usernames, we don't have usernames yet, but I do like the, or do we? Hold on, let's go back. Let's go back to feed. Oh, we do. Boom. There we go. Oh no, that's just the title we put in. So we don't have usernames.

We should eventually put usernames in here so we can see who made the post and be able to go to their specific profiles. That might be something, hint, hint for y'all to build later. So let's just do it one more time. I'm gonna log out. I'm gonna log out and we're gonna walk through the whole thing. So I'm gonna log in, testy, oh, sorry, testy at testy.com. Testy, testy, testy, fail. There we go, testy, testy. All right, so we logged in. When we log in, third try, when we log in, we can see the post that I made. We had the ability to add a post. Yeah, exactly. See clearly, it was just to show that our flash notifications are working, right? The login flash notifications are working. I inputted the wrong password.

It worked. We're able to go to our feed, see all the posts of the logged in users, and we're able to click on individual posts, we're able to click the like button, and if it's our post we'll have a trash can, and if we return to our profile, there it is. So we have, we have a pretty solid social network, right? Right, like we have the ability to make posts. We have the ability to like see a feed of all the posts. We have the ability to see each individual post and we can like them and we can trash our own. and maybe for homework you're gonna add comments and usernames on the posts, right? We're coming from MySpace, exactly. And so let's just take a look at this real quick. I'm gonna click on this post of Mira here. And what did you notice about the URL? What could you tell me by looking at this URL? Yeah, we know that this is working because this ID, right? This ID is probably tied to this specific, well, it is tied to this specific post. And so when I am clicking from the feed or I'm clicking from my profile without even looking at the code, without even looking at the EJS, what do you know is in the EJS for each one of these posts?

What's in the EJS without even looking at it yet? Yeah, and specifically it's an anchor tag, right? An anchor tag where we plugged in, right? Right? right, an anchor tag where we plugged in that ID. So if we inspect, we can actually see it, that the actual anchor tag, right, the actual anchor tag is a link to the post route with the individual post's ID. ID. So any single time that we create it, like a post that's showing up in the profile, like in our EJS, right? In our EJS, we have a for loop, right? And that for loop is building out these LIs, right? That have an anchor tag and those anchor tags are links to the post route with the ID of that post. And so that way I can just click on it and get taken to that specific post based on that post ID, right? So when I'm actually rendering out this page, when I'm rendering out this page and I'm grabbing my post, I'm grabbing all the data about that post, right? I'm grabbing all the data about that post and what I'm doing is building out an anchor tag Right that has an href That has the value of post slash Whatever that ID is All right So that way when I click on that anchor tag, it takes me to that individual post page All right, and so a lot of this is going to be, all right, how do we build out these pages? How do we get the data that we need?

How do we plug that data, right? How do we plug that data into the EJS so that we can make stuff that's clickable, going to the right places, and all that wonderful, fun stuff. So we've kind of walked through the application. We've kind of seen it working. Let's go to the feed page and talk through kind of code-wise what's just happened here. I went to the feed page, localhost 2121, 2121, 2121, slash feed. What route did I just trigger? What route did I send a request to? Slash feed, right? Right, we went to local 2121 slash feed. So the route we went to is slash feed. Now, let's go ahead and take a look at our code. On our server.js file, we have two kind of routes. We have our main routes and we have our post routes. Was slash post in our route that we just went to?

No. So let's go ahead and take a look at main routes then. So main routes is gonna require us to go into our routes folder and find the main routes. So we go into our routes folder and we find the main routes. Well, you can see, all right, we made what type of request to the feed route? What type of request did we make to the feed route? Thank you, chat. It was a get request. So in our main routes, we have something set up that's listening for a get request, right? A get request on the feed route. So we're good so far. And what do we check here? What are we checking for here on this next, this next little bit here? We already, we know that we have a route that's set up to here, the get request on the feed route. We're making sure that they're logged in, right?

So if folks are not logged in, they can't see the feed, right? We could make it, I could just remove insure off here and then anyone could be able to view the feed. They wouldn't have to log in. So I think like if you go onto some social media sites, You can like scroll through without being logged in that's how we're doing it right here But we decided I decided say you know what they can only see the feed if they're logged in so we check to see if we're logged in Same and sure off that we used with the the previous application Right and so I don't have you ever like click like an Instagram link when you're on your browser And you're not logged in they like make you go to sign up. That's exactly what we're doing here We're saying sign up you got to join the social network a hundred dev social network if you want to see all the wonderful post of Neopets fairies we can't be giving that away for free and So we ensured that we were logged in Right, and here's the controller. We're going to use we're going to use the post controller And we're going to use the get feed method PostController, getFeedMethod. So let's look at our PostController, beautiful. Here's our getFeedMethod, beautiful. And so our getFeedMethod is pretty straightforward. We're going to find all of our posts, right? We're gonna find all of our posts and we're going to sort them, whoop, We're going to sort them by the time they were created at in descending order, all right? We're going to find them and sort them in descending order. So that way we can, right? We can see our posts in a specific order going down the page. This is all mongoose.

Yep, it's all mongoose. It's all mongoose, right? Now, what is POST? It's our model, right? It's our model. So even if you didn't have access to my database and you wanted to see like what data is going to be in our database, right? Like how do I, sorry, how do I know there's a created app property, right? If you don't have access to my database right now, because I've IP locked it, but how would you know there's a created at? We can look at the schema on the model. Let's take a look. Here's our post model. We can see that every single post that's going to be created, right? We'll have a title property, an image string, a cloudinary ID, which we'll get to in a little bit, a caption, a number of likes, a user, like the person that actually made it. We're gonna have a created at, right? A created at, and we can see all of this just from the model, or just from the schema that's here on the model.

And so we can see that there's this created at, and we can even see what type it is, right? We can even see what type it is. What type is it? Don't get caught up in this stuff yet, we'll get to it. We can see it's a date type. So we know that we are storing the created at by its date. We're storing that along with each post that we make. Every single post is going to have a title, an image, a Cloudinary idea, a caption, a number of likes, a user, and a created at. And we can see that the created that's going to be a date. And what do we know about like dates that we saw with, with JavaScript and by extension now in this environment node, what do we know about our dates? They're not just like, it's not just like a, it has a lot to it. Yeah, it's long. It has also has like a, it also has like the time, right? It's not just the date. It's also, yeah, it's a, it's a UTC object.

Hey, there we go. It's the date and the time, right? So it gives you a bunch of all this other stuff, right? So that's how we can use it to figure out like when things were posted, right? Cool. So we're looking at our post controller and we just said, hey, go to our database, go to the post collection, right? That's all stored right here. Go to our database, because we're using Mongoose, go to our database, go to the post collection, find all the posts. It's the same thing. It's the same thing as going here and grabbing all the posts, right, grabbing all the posts, but we want the posts, right? When we get the posts back, when we get the posts back, we want them in descending order based on the created at date, right? So that's how we can keep them in order. You can also do ascending if you wanted to, but we're gonna go descending so we can go down the timeline. We get all of that data, right? We get all of that data, all of the posts, all of the posts, right?

All of the posts that are sorted and we're storing it in the variable posts. And what are we gonna do with that variable post that's holding all of our posts? What are we gonna do with it? Remember, this is automatically giving us an array of posts. It's automatically giving us an array of posts. What are we gonna do with it? Yeah, we're gonna pass it to the EJS. We're gonna pass it to the EJS, right? And when we pass it to the EJS, what are we gonna name our post inside the EJS? What are we going to call our post inside of our EJS? We're gonna call it posts. We're gonna call it posts. All right, we didn't change it. We're not doing anything wild today. We're just gonna call it posts.

So let's look at our EJS. We're gonna look at our feed EJS file. Feed EJS, let's take a look at it. Feed EJS. Oh, we got fancy here. Look at this EJS, folks. We're using partials now. My header and my footer is gonna be the same on most of my pages. So I made a partial, right? You can see I have this partials folder that has my header and footer, right? So I don't have to constantly put all this stuff. Like I don't have to constantly put all this stuff, right? I don't have to put that at the top of every single file. Right? I don't have to link to my CSS.

I don't have to link to Font Awesome. I don't have to do all of that stuff would have to be at the top. I don't want the link to bootstrap. If you're noticing, a lot of my stuff just looks nice. I haven't really done any style yet. I haven't done any style. It's just bootstrap that I'm using. So I put all of that inside a header and then I can just use that partial on any page. I don't have to constantly be retyping. Yeah, automatically comes in. I'm doing the same thing for my footer. If we look at the footer EJS, I'm just putting my bootstrap. I needed some JavaScripty stuff from bootstrap. So that's just, so I don't have to do it for every single page, right? I don't have to bring back every single page.

And so on my feed EJS, you're going to see that I'm just including my header that I already wrote and my footer that I already wrote. And I don't have to constantly redo it. Pretty nifty. All right. So inside the feed EJS, we have our for loop, that's looping through each post, right? Looping through each post, and we're building an LI for each post. And each of these LIs, right? Each of these LIs is gonna be an anchor tag to a specific post route, and we're just plugging in the ID of each post. Right? So when I went to my feed EGS, let's step back for a second. I went to this page, right? I went to this page. I tried to load this page, right? I tried to go to this page, right? To go to this page, I had to make a request.

I made a git request. I had the route, right? I had the route set up that heard that git request on the feed route. I checked to make sure I was logged in. I went to my post controller and I went to the git feed method. The git feed method said, Hey, go to the post collection, get all the posts in descending order. Went to my post collection, right? We can look at it. Let's go ahead and look at it. It's a VPN, don't worry. Went to my post collection. Let's browse the collections. Oh no. Went to my post collection. Right?

Go to my post collections. I grabbed all these posts. Right? Grabbed all these posts. Right? Grabbed all these posts. Right? Grabbed all these posts. You can see my most recent posts. Neopets is life. Neopets is life. Neopets is life. You can see the event loop photo. You can see the vulgar display of power that was Pawn Stars. Right?

We can see all the posts. I grabbed all those posts, right? Grabbed all those posts. And once I had all those posts, I passed all those objects, right? All those objects into my EJS. And then all I did is I looped through each one of them and I grabbed the stuff that I needed, right? Right now, I need the ID of each post, right? To get that first fairy to show up, right? I need their ID. So I grab the ID, yoink. I grab the ID, right? Grab the ID and I'm plugging that into my href. All right, logging into my href. Then I want to grab the image to show the image in the feed. Well, I need to grab the image property from that post.

So I grabbed the ID for the first bit, and then I grabbed this image property. And this image property is actually the link to where my image is stored, right? Where my link to my image is actually stored. So I grabbed that link to where my image is actually stored And I plug that in as the source of the image So now I have an li That has a link Right that has a link to an individual page And I have the image that was based on the URL that was stored in my collection. Right? Now, the interesting thing is that you'll notice where am I actually storing my images? Yeah, I'm using a third party service called Cloudinary to store my images. And so when I upload an image, right? When I upload an image, I send the image to Cloudinary. And what does Cloudinary send back? Yeah, they give me a URL. They give me a URL, right? So I send an image to Cloudinary, Cloudinary stores it on their server, and they give me a URL for that image. So that's what I'm storing in my database. I'm not storing the image in my database.

I'm storing the URL, right? I'm storing the URL that they have given me, right? They have given me so that I can eventually render the images that we see in the feed. I just really hope people are like joining us live and this is all they see, right? So this is the image that came back from Cloudinary that I plugged into my EJS to render the feed. And so if we look at these LIs, if we just inspect element, we're going to see that each of these is an LI that has an anchor tag that includes the ID that came from the post document in the post collection and has that URL that's from Cloudinary because that's the information I have for that post in my post collection. I look at the next one, it's the same thing. It's an LI with the ID of the post and the image from Cloudinary. Next one, same thing, right? Same thing, we're just going all the way down looking at each of these. Cool. You Is cloudinary free Do I ever Recommend something That is not free ever Nah, not what we do around here Every single thing you need to become a software engineer, you can do for free, right? So Cloudinary is free. You can create a free account. I'm using a free account right now and you don't even need a credit card.

That's the other big thing I really try for. I try really hard to find all free resources. They don't even need a credit card for, because I want everyone to be able to do this. Yeah, so it's free. Yep. Cool. All right, so that's how our feed is rendering. But interestingly enough, I can click on this image, right? I can click on this image, right? And when I click on this image, what am I using? Like, let's not overthink this. Clicking means that it's a what? Clicking means that this is, if I'm gonna click on this, what is it? It's either a smurf or it's something else, right? It's a smurf or one other thing.

It's an anchor tag. And we know that this is an anchor tag. We just saw it. Like look, look at the inspector. We know it's an anchor tag. And when I click on it, it's going to take me to slash post and then the ID of the post that came from my document in the post collection. Look, look, look. We see this, it's an anchor tag that's gonna take me to slash post and then the actual ID, right? Where the heck did slash post come from? Where did that come from? How is that part of the anchor tag? I hard-coded it in the EJS, take a look. I know it's gonna be a route, it's eventually gonna be a route in the application, but people are like, how do you create the URL? Boom, I hard-coded it into the URL, right? Look, I hard-coded slash post and then I plug in the ID.

Right, I could have called this zaboomafoo, and then when people clicked on it, it would have taken them to slash zaboomafoo, and then the ID, but I want, I want my post, right, I want my post, right, I want my post to be slash post. I want, that's the route I want it to be, right? I want that to be my route, so I hard code it, and then I plug in the ID. Man, this is the easiest engagement I've ever gotten in my life. It's too easy. We've been doing this for too long. This is, this has just been like, oh my gosh, thank you. There have been people that haven't been posted in three months that I've been posting right now. Thank you. I appreciate it. I appreciate the engagement. I am really happy that you're back. Thank you for being here. It's so good to see you. I'm glad you're here.

The fairy pics did it. All right. So we have LIs that are creating each of the Li that has an actual link to a post. Let's go ahead and click that post. Let's go ahead and click it. Boom. You can see that we got taken to slash post and then the ID. So what type of requests did I just make? I just made a get request, right? A get request. On what route? A get request on what route? All right, all right, we're starting to think through it a little bit here. Slash post, and then what else was part of the route? The ID, right?

The ID is also part of it. So let's go and take a look at that, just walk through it. Start the server.js. Was it a post route? Yes, we're on slash post. It was a post route. All right, so we're gonna need post routes. Let's go back up to the top. Post routes requires us to go to the routes folder and find the post routes. So here we go. Here are the post routes in the routes folder. Now here's where it gets a little tricky. On slash post, was it line eight, line 10, line 12, or line 14 that we triggered? Was it slash post slash create post? Was it slash post slash leg post?

Was it slash post slash delete post? Or was it just slash? Yeah, line eight, right? And so the cool thing here is this little bit of code right here. The colon ID, this is like setting up a parameter that's gonna enable us to grab the value out of the URL. It's setting up, yeah, a query parameter. It's a query parameter that's gonna enable us to grab the value out of the URL. Because I have this colon ID, I'm gonna be able to grab that value. Now, I'm on a specific post page. I'm ensuring that I'm also what? You can't see nothing in this app without what? Logging in, beautiful. So I know that I just went to slash post. I'm going to be able to yoink that ID out of the URL. I'm still logged in.

I'm going to go to the post controller and I'm going to use the get post method. All right. PostController, getPostMethod. Beautiful, beautiful method here. All right. Post. FindById. What do you think this method's going to do, right? What do you think this method's going to do? Just by, what do you think this method does? We know that post is talking to our database, is going to the post collection. what do you think this method's gonna do? Yeah, it's gonna find a specific document based on its ID. Now, the magic here is that since I did this colon ID, I can grab whatever comes there in the URL, right? I can grab that value, and I can grab that value by doing rec.params.id.

Let me actually copy the URL so it's a little easier to see. All right, this is gonna look weird, but I'm just gonna paste it here, right? So that's the URL we went to. We know that we were on the post route, so anything that came here was ID. Anything that was passed there was ID. So what it was here was this number. So what I'm able to do is I am able to say, all right, here's my query parameters called ID. As part of this request, this request came through, I am able to look at this part of the URL, I'm able to grab it and I'm able to plop it right here. So now I am going to go to my post collection in my database. I'm gonna find a specific post that has this ID. Right? My specific document that has this ID. Right? Because on this line, let's grab this, let's grab this line of code here too, just so we can see it. I like having it on one line and one spot so we can see it.

Right? The route said, hey, you're on slash posts. So it's as though we had this right here. Right? Let's, let's replace it. Yoink. It's as though we said this, right? That's exactly the same thing we're saying there. We're saying, all right, you went to this URL. You made a get request to this URL. Beautiful. You made a get request to this URL. Anything that comes after the slash, we're gonna call ID, right? We're gonna call ID. We could have called it rainbow, right?

But if I called it rainbow, what do I have to change? I have to change this to rainbow. This is the variable. This is the variable that I am using to be able to pull the value out of the URL. It's a query parameter, just like when we did APIs and we had query parameters plugged into, right? Just like when we were using APIs and we had query parameters in the URL, the way we are getting the query parameters out of this URL is by saying rec.params and whatever the heck we put after this colon. Right? So if I called this something else, I could call it SpongeBob. Well then this has to be called SpongeBob too. Right. It's how I am grabbing. It is how I am grabbing, right? It is how I am grabbing this part of the URL. That's it. That's it.

So let's tidy it back up. We got to change this back from Spongebob to ID. We went to localhost 2121, slash post, slash with the ID, right? With an ID, with an ID, right? With an ID. And so I'm gonna be able to grab this value out, right? I'm able to grab this value out, right? When we look at the route, I am going to be able to grab this value. whatever is in the URL, we'll be able to grab it. And I'm going to call it I D. So when I go to my post controller and I asked for wreck per Rams ID, I'm saying, Hey, the request that just came in local host, 2121 slash post slash that long string. Give me that long string. Give me that value. That was part of the URL. And once I have it, right?

Once I have it, I can go to my posts collection. I can find a post that has that ID. We look, we go to our post collection. All right, boom. Here's the ID, it matches. So I'm gonna grab this post. Once I have just that post, right? Once I have just that post, I can send it to my post EJS. All right, I can send it to my post EJS, right? We can see it's called post here. I'm not changing it up inside the EJS. I'm gonna call it post. And I'm also passing something else to my EJS called user. Where the heck is user coming from? How do I have like this other, this rec.user?

What the heck is that? Yeah. Yeah. The current session, since we are currently logged in, we currently have a session running. We can always, whenever any request comes through, there's also that user property on that request that comes through, right? And as it comes through, right? As it comes through, I can yoink it. So I was able to find the individual post. I was able to find the logged in user and I passed all of that into my EJS. Let's look at our post EJS, we go to our views, post EJS, you can see I'm using my partial for my header, I'm using my partial for my footer, and I'm just gonna start plugging in everything I need to plug in, right? I'm gonna start plugging in everything I need to plug in to build out this post page. I can plug in, I can plug in the image that's from the post. I can plug in the title from the post. I'm doing something funky here for the delete buttons and the likes, but we'll get to that later, right? We also have the delete, like the trash can here, right?

So I'm just able to grab all of that stuff and plug it into my EJS, right? All right, so to get to this page, I was on the feed. I clicked the link that made a get request on the post route that also included this string, which is the ID for this specific post that we're looking at. I can use that information to go to my database and just get this specific post information. I go and get all this post information. I plug it into my EJS and that's how I can see this specific post. Questions and we'll take a break. Questions and we'll take a break. Magic. Was rec user related to cookies? Yeah. Since we have that logged in session, every request that comes through has a user property. I'll show it to you. I'll show it to you when we come back from break. I'll actually console log everything so we can see the different parts to the requests that are coming through.

Any reason you're using for loop in the EJS versus for each engagement? We in past examples we've used for each, yeah. Connecting the dots. I hope so. That's the point I said. Tonight's to start trying and connecting some dots. Ty love, hey, thank you for the gift of subs. I appreciate that. Thank you for being here. Cool. All I see is Instagram. All right, how many hours should we devote to our 100 hours project, 100 hours? Seeking Truth said, I don't see any server-side JS in the sample code. Are you doing all of this with anchor links and routes, no event listeners? I am.

We're going to talk about method override later today when we come back. Oh, the MVP, uh, the MVP, uh, that's up to you. Probably a hundred hours for your MVP to be real. And then you put the finishing touches on it. All right, folks, let's go ahead and take a break. We will be back in five minutes. Thank you, everybody, for being here. If you're new around these parts, we like to take a break at the top of every hour. Make sure you're hydrating. Make sure you can get up, walk around, hydrate. Please know there's not your screen and we'll be back in five Thank you for the two extra minutes, minutes on the timer, folks. the next, video!! You You You You All right, folks, welcome back, welcome back. So let's go ahead and console log kind of these requests and see them coming in. So, let's go back to this page here, go to our controller, and let's just console log the request.

We can see, like, the massive request, and then we'll console log, we'll console log rec.params, and then we'll console.log rec.user, just so we can see everything. All right, there we go. So our server restarted. Let's refresh. We're logged in still, so that refresh should have worked. How am I still logged in. What's specifically about the session? Remember our sessions are also stored, right? So like if I go away, server goes away, our sessions aren't stored on the server, they're stored on the client, they're stored in the database, right? So the sessions, like the server can restart, we can leave the tab and come back, and our session can still be open because we're using that session storage. We have that session collection in MongoDB so that we can keep the sessions going no matter what happens. Let's see if that restart was enough to console log everything. All right, here we go. So we can see above here is the massive request, right? Like all that crap, every single request that we make.

Look, I just console logged the request. We gotta keep this in mind. Every request that we are making is sending all of this wild data with every single request, right? And then we asked for a few specific things. We asked for, we can actually see a part of the request that the user object is here, right? We can see that part of the request. We can even see like the route that they're on and stuff like that. So all that's part of the request, all this wild stuff comes along with the request. You can see that like I was using Chrome and all this other things that came along with the request. And then I asked for two very specific things. I asked for the request.params, and we can see that that's just an object, right? The query parameters are just an object. So where the heck did this id property come from? Where did this id property come from? It came from me calling it colon ID here in the routes.

Let's change this. It's gonna break some stuff, but we should still be able to see the request. Let's change this to rainbow unicorn. I'm gonna call this rainbow unicorn. I think this will break because we're not gonna actually call that in our thing, but let's see if the request still goes through. All right. All right, so the request did go through. You can see that when I changed it to rainbow unicorn, the property was called rainbow unicorn, but it still grabbed that value from the URL. This right here is just whatever we're gonna call it. And since we know inside of our URL, this is an ID, since we know that this is an ID, it makes sense that we call our query parameter ID. But we can call it whatever the heck we want. It's just that it probably makes sense to call it ID. It's just a label. Yeah, it's just it's just a it's a parameter like don't don't throw out all the hard work You did understanding functions, right? Don't throw out all the hard work.

You did learning API's. It's the same shit same stuff right It's just it's just it's just a variable, right? It's just a variable It's just holding a value and that specific value is just coming from the URL all right, so We could lay we could leave it rainbow unicorn but what would we have to change here for it to work? We could leave it rainbow unicorn. What do we have to change? What line and what do we have to change for this to work? Yeah, we got to change on line 26. We got to change this from ID to rainbow unicorn, right? Now, Rainbow Unicorn knows to grab, it knows to grab the value out of the URL. Right? And now knows to grab this value out of the URL. When we see this URL, we can grab this 631A all the way to 874. This value will now be known as Rainbow Unicorn in our application. Right? It'll be known as Rainbow Unicorn.

That's saved, let's save this, and let's go ahead and do our refresh, and now it works, right? Now it works, right? We changed it to rainbow unicorn. Rainbow unicorn's gonna grab this value, which we know is the ID out of the URL. We're doing it here right in the routes. We're setting it up. Hey, here's my query parameter. My query parameter is called rainbow unicorn, right? It's called rainbow unicorn. When you use rainbow unicorn, when you do request.params.rainbowunicorn, you're grabbing that part of the URL. And so that's what we're doing here. We're saying, hey, look at the request that came through. Look at the query parameters that came in. Go back to our API class, right? Grab the query parameters that are coming along with that request.

When we look at the request, right? Here's the request, right? Here's the request. Anything after that request is our query parameter. So we're saying grab that query parameter. The variable name that we gave the query parameter is rainbow unicorn. It works. It's grabbing that unique ID, like that string of numbers and letters. And we're plugging that string of numbers and letters in here because we know when we go to our post collection, When we go to our post collection in our database and we do find by ID, we can use that string, the 631-874 to find this specific post so we can grab all the stuff, right? Grab all the stuff and pass it to our EJS. Cool. Let's go back. I don't like calling it Rainbow Unicorn. I do, since we know that it's an idea, I like calling it an ID, but I think what I want people to realize is that it's just the name we gave it. It's just the variable name that we gave.

We can call it whatever we want. We call it Rainbow Unicorn and it still works. So the idea is a query problem, just like we did with our APIs. Exactly. It's the same thing. It's the exact same thing. with our, when, when we were doing, um, when we were doing API APIs, right. When we were doing APIs and we were doing APIs, we'd have something like this. Like, um, what was one of them we used a lot, dog, CP dog, CEO, dog, CEO, API, slat. And it was, this person was like, this would be like, I don't know, uh, breed And then we put something in here, like, I don't know, German shepherd. Right? That's what we did when we were using APIs, right? We had the question mark, and anything else after the question mark was our query parameter, right? So in this case, the query parameter equaled German shepherd. We're doing the exact same thing here.

Instead of it being dog CEO, we're doing localhost 2121, query parameter ID, and then it winds up being this long ass string, right? Winds up being that long string, and that's it. You don't have to change up your pattern. and it's still a query parameter. In fact, we can even set it up to do like the question mark and stuff in here if we want it to. It's just an easier way of doing it, right? Same thing, query parameter of ID. We could have called this rainbow unicorn, right? That could have been the query parameter. Same thing here. Then we'd have to change this to the rainbow unicorn. Same thing. It just enables us to grab this value out of the URL. Cool. Now that we have that value out of the URL, right, once we have that value out of the URL, we can use it.

We can use that value, which is the, we know it's the ID to go to our post collection and find a post with that specific ID. And when we find it, we can pass all that post information to our post EJS so that we can get the HTML that shows up to our users here. Is query parameter our choice? Yeah, it is your choice. There's slightly different things you would need to do to grab it, but you can use the question marks if you wanted to. I think this just looks cleaner. Cool. All right. So that was getting an individual post. I'm gonna remove these console logs so we don't have to like go through a sea of stuff every time. So that was, we saw the feed. We saw the feed. We saw the post. Let's look at the profile. Let's look at the profile.

Let's look at the profile. All right, so we went to slash profile. What type of request did I just make? Made a get request, nice, made a get request. Am I on a post route? Am I on a post route? Nah, let's start at a server.js. All right, it's not a post route, so it is one of the main routes. So let's go to our main routes. Main routes requires us to go to the routes folder and find the main route. Here we go, here's our main route. It was a get request on slash profile. It was a get request on slash profile. So we are ensuring that we are logged in. All right, we are ensuring that we are logged in and we're gonna use the post controller, right?

Post controller and the get profile method. So let's go to our post controller. Let's go to the get profile method. Here's the get profile method. what I'm going to do is I am going to go to my post collection and I am going to find a document I am going to find a document all right going to find a document that has a user property that has a user property of what a user property of what? Right now I'm looking at the logged in user, right? I'm gonna look at the ID of the logged in user. So what do we know about this profile page? If we go to slash profile, there's something very specific. This profile only works for what? This profile only works for who? The logged in user, right? We haven't set up a part of the controller that could load any user's profile. Eventually, if we were to extend this, and we will, if we were to extend this, our individual posts would have like their username, and we could like click that username to go to their profile. That's adding a little bit more complexity, but right now we can see, just by looking at the code, we're gonna find just the post, right?

Cause we're going through our post collection. We're gonna find all the posts from the logged in user. Because if we go back and we look at our post collection, right, we look at our post collection, we can see that each post, right, each post has a user with a specific ID. And this specific ID is the ID of the user who made the post. So what I can do is I can say, hey, who's logged in? And since they're logged in, I can check through all the posts and just grab the posts of the logged in user, right? So we can see 5DA, 5DA, 5DA. This post here is 739. So that's not a post of the logged in user. when we do the find of the logged in user, we will only find their posts. We'll find only their posts. And so how am I getting the logged in user? Remember, with every single request that is being sent, if the user is logged in, you are also sending this part of the request, the logged in user's info. We can console log, let's console log it. Rec.user, let's save it.

Oh, I didn't console log it. Let's console log it. Let's save it. And now when I load the profile page, we should get that lovely console log. All right, let's go back, take a look. All right, we can see that we console logged rec.user, and a part of rec.user, right, part of rec.user is the user's ID, 5DA, the username of testee, their email, and their hashed password, all right? So whenever we do that rec.user, we can grab any of these properties. And so I'm able to grab the ID property off of that rec.user. So that's how I'm able to find just their posts. We can see 5DA. If we go and look in our database. All right. User has the ID of 5DA. User has the ID of 5DA. user has the ID of 5DA, user has the ID 739.

So that's not it. The rest of these are not our user. It's just these three, right? It's just these three. And so we're able to use that logged in user to just show, right? To just show the post of the logged in user. All right, let's save this. Now, there's quite a few other things that we have to do here, right? There's a few other things we have to do here. So far, we haven't seen liking, we haven't done the trash cans yet, but I wanna pause here for a second, see some questions come through, and then we'll look at this last bit and then we'll end for the evening. How come ID has an underscore in front of it? It's generated by MongoDB on their end. We can get into things like private, public, variables, and all that fun stuff. We kind of talked about that in our objects lecture. The cool thing is that when you are doing the rec.user, you can just do ID, and if you If you forget about it, it's totally fine.

We haven't filtered out deleted posts yet. That's not something we've implemented. The lean is just helping me to format something specifically so that it's like how the objects that come back from Mongoose are structured. Let's not meld people's minds a little bit more than we need to tonight. We'll get into it next week, But for now, it just helps you structure the data in a specific way. Someone, it doesn't matter. You can use it interchangeably. That's the power of a Mongoose. Yeah, EGS can be pretty powerful. You can do some pretty specific stuff with EGS. Do you have two different color eyes? Yes, I have two different color eyes, but heterochromia Can we go over EGS again boy, can we This Sunday we will have a full review this Sunday. Come on On through for our super review Sunday, Sunday, Sunday. Don't delay by today, Sunday, super review. Can we render the profile EGS and see what the objects posting?

Yeah, let's take a look at that. So, um, we, we handed off all the posts for the logged in user to the profile EJS, but we haven't looked at the profile EJS. So let's go to our, our views here. Running through the six. All right. And so in the inside of the profile EJS, you can see, um, we're using the, the logged in users username. We're using the logged in users email, and that's how we're able to show the username and the email. We have a form for them to upload their images, which we haven't even gotten to uploading images yet. That's a whole beast in and of itself. We have this whole form to upload images, right? And then we have our for loop again, that's looping through and it's building the LIs for each post. Remember, we went to the database, we found all the posts that were for that logged in user. And now we're building the LIs for each of those posts with the post ID that comes from the randomly generated document. And then we have the actual URL that's coming from Cloudinary and we're plugging that in to build the profile. Cool.

All right, we got like 25 minutes left. I feel like we've melted enough brains for this evening. What we'll do is we're gonna stop here. What I need you to do this weekend, especially if you are not coming to the super review, cause we'll go into some of this during the super review. What I need you to do is I need you to look at this code. I need you to step through it just like we did tonight, right? I need you to, uh, set up your ENV file, which means you're going to need a Cloudinary account, right? You're gonna need a Cloudinary account. You're going to, uh, need your Mongo Atlas account. Uh, you're going to need all these kinds of like the, the things that are going to go in the ENV file. You can read the readme, right? you can read the readme to see the things that you need to put in that env file, step through it. I'll post the image as well of our layout that we did on the whiteboard, see if you can step through. The big thing here is understanding how we're using the IDs to connect all the pieces. If you can get to the point where you understand, oh, we're just using IDs to render posts, we're just using IDs to render profiles, we're like, we're just using the IDs to build out the app.

If you can get there, you're good. That's, that's all you need to be right now. Right? There's a lot of other things here that we still have to go deeper into that we have to explain. So on Tuesday, we'll go deeper into this. We'll look at some of the other stuff we had a chance to look through. We'll revisit some of the things that folks need to revisit and then we're gonna actually build this from scratch so we'll be able to see everything come together as well at probably the next office hours. And so lots of chances to go through it. We still have a lot of stuff to cover that we haven't covered yet. We haven't hit molter yet. We haven't hit some of the big pieces of this but I don't need you to do that yet. I almost don't want you to do that yet. I want you just to focus on the things that we just covered. Can you see the IDs? Can you see how the app is being connected and coming together?

Because if you can do that, you're in a really, really good spot. Like I said, this is kind of it, folks. You understand how this works and comes together. You can build whatever app you want to build. That's it. And so spend time going through this code, Spend time looking at the actual whiteboard that we've done. Remember, Tuesday, your hit list is done. Use the hit list magic, right? Right? Use the hit list magic. Finish up that hit list. You wanna be part of Hunttober. I need that hit list done, right? You can do this. I know this is a lot, especially if you haven't had a chance to wrestle with this code yet, hadn't had a chance to wrestle with the homework yet.

Please make sure you spend some time going through it. Please make sure you get in the rest of the stuff that you need to get done for homework this weekend and use Discord, jump on Discord, jump into voice channels, ask questions. There's a lot of little stuff that we haven't, we didn't really get a chance to talk about. Maybe you need to learn, maybe you need to understand a little bit more about how the query parameters work. Ask, right? Ask, lean on the community. We're community taught. But let's go ahead and set up a raid. I haven't done a raid in a minute, I mean I'm talking about specific people. Um, let's go ahead, get these sweet, sweet channel points, get these sweet, sweet channel points. Let's go over to CM Griffin, we haven't been over there in a minute. All right, be kind to yourself this weekend, please go through this code, work through it on your own, work through it on Discord together, make sure you're taking time to digest it. This Sunday, super review, super excited to go through the full backend, the full backend tomorrow, sorry, on Sunday, full backend, everything you need to know to be a backend and developer come through on Sunday, tell your friends, bring a friend and come ready to put in some work. And then next week, we're going to keep digging into this. Like I said, this is kind of it.

Once we understand this, you can build whatever you want. You can build your MVP for your 100 hours project. And then we'll add a little bit of sprinkling react. We'll add a little bit of data structures, algorithms, and we start the hunt, baby. Let's go. All right, everybody have a wonderful rest of your day. Let's raid. Let's go. Hey, good morning, good afternoon, good evening, no matter where you're coming from. Hope you all are doing well. Welcome back. Let's go. Welcome back, everybody. Hope y'all are doing well. The dreaded computer restart, folks.

The dreaded computer restart. I rue the day I have to restart my computer. Everything gets messed up. Hope you all are doing well. It took me a second to get the music right, but we can't start without the music. What is this? Can't have a stream without the music. Let's go. Welcome back, everybody. Hope you all are doing well. Hope you all are here. Yeah, all right. We had a good week last week. We got into our social networking app or a social media app that we're going to get into more today On Sunday, we had a six-hour super review and we're still not done Still not done All right, still not done we're gonna bring it back next Sunday and finish up looking through off again looking through looking through even this app that we're gonna finish up this week. So if you need to run it back, we'll be back as well.

So I actually think the Sunday Super Review is actually really helpful for some of the stuff we're tackling today, like the method override that's tripping up a lot of folks. The stuff we talked about on Sunday we'll revisit again today just to help those concepts sink in. Hey There is two odd things today one no newsletter So no newsletter went out today and our tweet is a little bit different We're gonna talk about that in a second. So as always I like to give folks a few seconds to get here All right a few seconds to get here. Oh boy, oh boy There was somebody in here before chat that did gifted subs. I don't know who it was, but whoever it was, thank you. I didn't catch who did the donated subs, the gifted subs, but thank you for doing that before stream. And I just had somebody else too. And thank you MJBuilds for the gifted subs. I appreciate that. Hope you all are doing well. Thank you for being here. All right. As always like to start off with a few questions a few questions As folks get in here you got questions I possibly got some in What's a gift it's I would get this up as somebody can gift subs to other people in the channel and so That's what MJ bills just did Let's move some stuff around here. Sorry, one second.

Beautiful. Drink today is water. In the now gene. Hey, what's up? Can we please see your dogs? Maybe, we'll see. We'll see how the day goes. All righty, will we go over Cloudinary this class? We will. So we're gonna talk about Cloudinary. We're gonna walk through kind of like all the bits of how we actually get to like uploading files. We'll walk through Cloudinary. I'll show you like the basics of it. And then it'll be on you to make sure you have that account and that you create your own so you can run your own version of this code. How many recruiters for companies should we reach out to?

Probably just one. And I like to reach out to engineers more than recruiters. Yeah I spoke to recruit about a six-month contract position. Should we be considering contract spot for our first jobs? Yes, you are considering everything Everything for your first engineering opportunity and once you have offer letters, then you decide so a lot of folks like to Stop themselves from getting offers that they probably could have gotten Not realizing that you don't have to accept an offer, right? You can always just say no, and you can use those offers to leverage the authors that you really do care about. And so go for everything. If it moves, we go for it. Yeah. Now, do I prefer contract positions for the first role? I don't know, just because when you go in as a contract role, there might be slightly different onboarding, there might be slightly different expectations, and you might not be seen as a fully fledged member of the team, so that can be a little bit different, a little bit odd, but I've had plenty of students do it and have success, I just know that it's been a little tricky for some folks to manage some extra level of expectations. Yeah. How long can you think over an offer? So we're gonna talk a lot about this as we get into the hunt, but one of my favorite things to tell someone is, hey, thank you so much for this offer. This offer is something that I'm really excited about.

This is a company I can really see myself growing at over the next five years. Like this is where I wanna be. This however is a decision that impacts myself, my family, my loved ones for the next five years. Cause I want to be here for the long haul. So I would love, I could take a week to discuss with my family and my loved ones and get back to you. But I just really, really, really want you to know that I'm super excited. This is honestly one of my dream companies to work for. And so I just want to let you know how excited I am about the offer. Right. If any monster says, if any monster says, no, you can't take a week to discuss with your loved ones and family, cause you want to be here for the long haul. and that it actually does impact your life for the next five years, they can go kick rocks. Right. And so a lot of the, a lot of the negotiation and what to do when you get offers comes down to one primary thing, just calming any fears that they might have that you are not interested in the opportunity. Right. That's it.

And so as long as you explain that you're excited about the offer, that it's a company that you want to, that you want to work at, it's a company that you want to be at and you like really ham that part of it up, you can take a big chunk of time most of the time. Yeah. Hey, Leon, I can only afford remote positions. The income where I live is not great. What should I do to hit list? Should I only include remote positions or local positions as well? That's on you. I think if you live in an area that does not have a large developer presence and there are no metro areas, like in your kind of a time zone, like your time zone band. Uh, then you would go for remote positions. And the tricky thing with remote positions is just because a position says the remote doesn't mean that they actually hire folks outside of the U S or Canada. So for a lot of folks, they're looking for remote positions that also hire globally, uh, which you can find tons of list of these types of companies, but it's something that does make the hit list process a little bit harder. How do you negotiate when you're contract up and you're offered a full-time role, you negotiate just like you would negotiate any other thing, right? And the beautiful thing is if you know that you have a six month cliff, right? where after six months, right? After six months, you're gonna move on to full-time.

Around three months into that opportunity, you best be interviewing at other companies, right? If you know that you have a six-month period where you are going to then be evaluated and then get a full-time offer, you never wanna go into that period with the only offer coming from the company that you are currently at, right? That could be the difference between just getting like a 5K bump and getting like the true salary that you deserve, right? Also, if you are entertaining multiple offers, one of the things that you are going to discuss before you accept the offer is, great, I understand that it's a six month whatever, what is the salary after the conversion the full time? I often tell my students to not take opportunities where they can't commit to what that conversion looks like after full-time right, so If they're if they're saying oh, it's just three months and then you'll convert the full-time or it's six months And then you'll convert the full-time great in writing. What does that conversion look like? What is my guaranteed salary because I I need to I need to make my decision based on real dollars not future dollars, right? And so, uh, always have that in writing, always have that, um, always have, always have them, um, have that somewhere as part of your offer package. Yeah. And if they can't tell you what that conversion would look like, will they ever ask to see other offers from other employers? Uh, so I've been interviewing with lots of companies, just when I say this is the company that I really want to work at, unfortunately, each company has a different process. I've signed some NDAs with some companies, uh, and I, I would want to respect their process just as like, I'm respecting your process. So unfortunately I'm not really sure if I can legally share what those other offers are, and I also wouldn't want to disrespect their process just as much as I wouldn't want to disrespect your process. All right, that's the easy way around that. And so all the stuff that we're talking about right now, like all these little quips, all these little things, boom, I got you.

As we get into the hunt, we're gonna have tons of classes where we talk through all this stuff, yeah. Why do recruiters ask what companies you have interviewed at? Because they wanna know what their competition is. They wanna get you for as cheap as possible, as quickly as possible. And so if they know what companies you're interviewing at, they know what the offers look like at those companies. So guess what? Their offer is gonna sneakily come in just below. Oh, this is a difficult one. What if I got an offer, but I'm still in the process of interviewing at other companies? Uh, you want to make sure that you get like that week Plus time to evaluate your offer with your friends and families And then you need to let all the other companies that you're interviewing with know that you have another offer on the table But their company is the company that you really want to work at and can they get your offer asap? Uh, you will be surprised the number of times when you tell a company that you have another offer but this is where I really want to work. Can you get your offer to me quicker?" They almost always magically find a way to get you the offer quicker. And so they'll often ask like, how long do you have to make a decision? You'll say like three days and then magically they'll come with an offer quicker. So if you know that you have a good offer that you're really considering and you are deep in the process with other companies, you just let them know and hopefully they get the offer in quicker.

All righty, folks, thank you for being here. Thank you for the quick questions in the beginning. We always like to let folks get some questions as they roll in. So let's keep moving. Today, we're going to be talking through a little bit of 100 Dev stuff, stuff that's due. Then we're going to be talking through our social network, seeing the last key bits of stuff that we need for this binary upload boom code to work. And then your homework is to continue with your interview prep and to try and add comments to the code. I know some folks have already tried to start adding comments, but that is your homework after tonight's class. We're probably gonna end a little early. Last class we did the post and the gets. Tonight we're going to see the puts and the deletes. We're going to see some things like method override. We're going to talk through some like quirks and features that people have been asking about. What's one of the ones that folks wanted to ask? People asked about like lean.

Some folks were asking about how, one that kept coming up that I was noticing was how are collection names getting defined, stuff like that. So little things that keep kind of popping up as we go through this code base. We're going to take some time to talk through. We're gonna see some quirks of mongoose and have some fun with it. So that's kind of the goal for it today Hey city, welcome Alrighty we did our questions checking in so we're at the point in program where we're getting closer to the hunt It probably makes sense for us to slow down on on the checking in for class, right? But I still use Twitter as like your attendance. So especially for folks that wanna contribute to Huttover, for folks that eventually want verification down the line, I still need to see that you're here. So instead of doing like class check-ins, we're just gonna help promote people that are doing good work in our field, right? So yesterday I tweeted, retweeted something from free code camp right now, they are really focusing on localization. One of the biggest problems when people reach out to me and they say, Hey, Leon, I want to learn how to code. One of the things that comes up is that English is not their native language, and it'd be very difficult for them to learn like really complicated concepts, not in their native language. So free code camp is like tripling down, like double, double, double doing down on localization. And they have their full curriculum and like so many different languages and they're really investing in like their core curriculum, um, being in like so many other languages. Right. And so I think that's like super dope.

I think it's one of the most wonderful things I've ever heard. Um, they even mentioned that like most of their staff is going towards that localization effort. So that's going to be a huge boon to folks that want to learn how to code and improve their material conditions in life, but don't speak English, right? Like that, that's, that's huge. That's a that's a huge impact. And so You're checking in tonight is to like and retweet that tweet I actually add it to the The check-in hold on one second, I don't know if I update it check-in No, I did not rip one second, that's the old one There we go. Oh There you go. So if you do exclamation point check-in starting now, it'll give you the actual link. The 201 link is the old one So, yeah, we're gonna be doing that going forward I'll probably still do a few 100 dev stuff here and there but For the most part it's just going to be helping us like highlight folks that are doing good work in the space And that way your feed starts to fill out with some stuff that isn't just class time So that will look good when folks are just kind of glancing over your your twitter But I still get the beauty of being able to see that you checked in. So that's kind of the the idea going forward Also, I did not send out a newsletter today little little little Little little snafu there. So no newsletter today and Checking in will be a little bit different Thursday's newsletters though Thursday's newsletter definitely check out Thursday's news. That's all I'm gonna say. I'm gonna say I'm gonna say All right, so please go ahead. Please still make sure you're checking in even though it's not strictly 100 devs. Yeah, you're gonna like and retweet my tweet, the one I just linked, yeah.

Like and retweet my tweet. And then that way I can still see that you're checking in. If you already liked it, like you were already on Twitter and saw it and liked it yesterday, that still counts. But that's what we're gonna be doing going forward, yeah. Newsletter did not go out today. There's a lot of stuff I have to do to go live and I very rarely miss it. I missed the newsletter today. I was really, um, I was reviewing my, like, like my, my notes for lecture and I just looked up and I was like, oh crap. And I, it was already past the six o'clock, so it didn't go out. Um, but normally you can rely on the newsletter going out. So little experiment. Let's see. Yeah. It's not automated. Hell no.

This is all manual folks. The discord messages are manual. The newsletter is manual. The tweets are manual. Everything's like there's a lot But yeah, I don't don't worry don't worry it'll be back don't run Thursday, yeah I'm not a robot. Hey, you wouldn't know about these moves. You know saying oh, oh, okay. I see you All right submitting your work Today your hit list is due right? Your hit list is due. Make sure that you have done two things. Make sure that you've actually filled out your hit list. Don't submit like incomplete stuff or blank stuff. It doesn't help you. It just makes it way more work for me. So please make sure that you've actually filled out your hit list.

We're looking for 40, 40 open rolls. Eventually it'll be 60, But 40 and then make sure if you're using the sheet that you've turned on the view permissions for all Right you turned on the view permissions for all like not just me not just my email, but for everyone, right? So when we go through and we check the hit list We need to be able to see that you've that you've actually filled it out and we won't be able to see it unless you've Turned the permissions on for everyone Yeah cool and And so I'll leave this open for the rest of the day, right? We'll leave this open for the rest of the day. I'll give everybody like the full, like, I know, like, I'll give everybody to like Thursday to submit it. Cause I know folks are in different time zones and a lot of you, right, as class is over, it's like three o'clock in the morning. So we'll leave it open until Thursday, Thursday, I need it in by Thursday. So if you're like, Ooh, I haven't done it yet. Use some of the magic, use some of the magic that we used last week, right? Use some of the magic that we we used last week where you go ahead and just plop this into Google Uh change remote to your location right Find open roles that were posted since august you can tweak some of this stuff You can you can add some things remove some stuff, but this will help you find more roles Uh, so you can add them to your hit list cool Try to my location and got zero results. Then you got to expand to your metro area, the next largest metro area. And then if that doesn't work, then you expand to any metro areas like in your time zone vertical. If that doesn't work, you expand to remote. Cool. And then once we get into the actual hunt, there'll be plenty of other secrets that I have for you to find companies.

A lot of local job boards, a lot of ways to use sites like AngelList and other stuff like that. But for now, you go fishing. So we had our, we started our backend super review on Sunday, uh, the VOD is currently on Twitch. It'll move on to YouTube. Um, we're, we're one video behind on YouTube cause remember I'm like combining two classes into one video. So the local off videos will go up on YouTube soon, hopefully like tomorrow morning, uh, if not Thursday morning, and then the backend review will go up after that. And then on Sunday, we're gonna continue it. There is a slight chance that it might not be Sunday, but I'll be able to let you know by Thursday confirmed. So we're planning on this Sunday, 1 p.m. Eastern time again to finish up what we started on Sunday. Slight, slight chance that it's not Sunday, we might have to do Monday, but I'll let you all know by Thursday. Cool. All right. Next big deadline, two weeks from now, client signature, approved PR, right? So if you have not gotten a paid client, volunteered for a grassroots organization, or gotten a PR request from an actual open source project, so not like a beginner's friendly type thing, but like a legitimate open source project, Those are three things that count.

So you have until the 27th to get that. If you do not have that, that's your disqualification. All right, also that date, also that date, we have our beautiful MVP due for your 100 hours project. So your whole 100 hours project does not have to be done. but it should be a beautiful MVP. An MVP is a minimum viable project. It is the, a minimum viable product. It is the simplest thing that proves your idea works. All right? So you're gonna be probably building off the binary upload boom code. You're gonna be extending it to do what your app needs and you're gonna make it look great. All right, that's the MVP. All right, so know that on the September 27th, Not only do you have the things that were do a very long time ago do but you also have your MVP do All right Let's go ahead and jump into actually let me see if there's any questions here for a second and then we're going to jump into Our social network plan. We're going to see the deleting. We're going to see the updating We're going to see some of the other quirks and then we're going to come back on on thursday and on thursday we'll walk through adding comments.

And I'm gonna want you to work on the comments, at least on your own. I gotta get some more. Just taking my time with this one, one second. I got a hobby. I got a stretch real quick. Hold on. I'll be right back All right All right, cool we're back nice all righty so we Yeah, here's see you got something off of that one I think it's the first stretch you all seen I was an only fans freebie Somebody had their hand over the screen. They didn't get the only fans freebie. You missed it. I'm sorry. You got that Already let's record it All right, let's talk through our social media app. Is it a social media app or is it a social networking site? I don't know. I think social networking site just means I'm old, right? I think that's what that means.

All right, we're gonna call it a social media app now to be hip with the kids. Alrighty, so we built out the basics of our app. we have kind of all of our key pieces working so far. We have users, we have posts, we have the ability to have an individual post, we have the ability to have a feed, and we have a profile where we can see the individual posts for the logged in user. and we have on that profile page a form that we can use, right, that we can use to submit our posts. So let's see this real quick. Let's just kind of log in, walk through each of these three areas. Let's quickly review users, posts. Let's take our top dollar break and when we come back we'll add in the deleting and the updating. So let's go ahead and take a look at our app. I'm gonna log out real quick. Let me go ahead and log in here. Cool. All right. Let's go ahead and do, let's go ahead and do testy at testy.com, testy, testy.

Cool. So we're logged in. Once we're logged in, we can see that we're on our profile page. And when we're on our profile page, we are only seeing our logged in photos, right? So we're only seeing the posts that we made because we are currently logged in. All right, we can click on any individual posts. We could see the number of likes on that post. We had the ability to actually like these individual posts. and we also right now have the ability to click a trash can. Why do we have this trash can again? Like why are we able to see this trash can? Yeah, because since it's our post, like it's where the post of the logged in user, we see the trash can, but if we were not logged in, we would not see, if we weren't the person that made this post, we would not see the trash can. Let's actually go to the feed and look at some posts made by other users. All right, so here's a post on the event loop made by a different user. And you'll notice that since this was made by a different user, there is no trash can for me to click.

Cool. We also saw the feed here, which we can see all of the posts made by all of the users and each post we can click on and see the individual posts where there'll be the title, the caption, the number of likes, the ability to actually like the post. And we can always go back to the feed or we can go back to the profile. Cool. So let's talk through at a high level how all this is working together. So when I go to the feed, let's start with the feed, what type of request am I making by going to slash feed as part of the URL chat, what type of request am I making? Yeah. Yeah, I am making a get request. And there is some code that is running on my server that hears that get request. What do we call that code that can hear the request? And knows, well, it's actually a little bit different. There's certain code that can hear the request, but then like the whole idea of being able to hear the request and know what to do, how to respond, that's our API, exactly. So our API that we've written that has everything that's going to happen when it hears the request and knows what to do. We've actually split up our backend code using a certain paradigm called what? What's the paradigm we're using on the backend?

Yeah, we're using MVC on the backend model view controller. And actually the first thing that that request goes in through is our router, our router hands off that request to the appropriate controller. The controller then decides, all right, do I need to go and talk to the model to get some data? Can I just go directly to the views to generate some HTML? Controller's in the middle and eventually can handle sending the response back to the client. So when we go to the feed, we make a get request. We know that get request is heard by the router. The router uses the appropriate controller. The appropriate controller then goes and gets every single post, right? Right now we have set up for every single post in our collection, right? And we take all these posts, all of these documents from the post collection, and we start plugging them into our what? What do we plug all this data into so that we can render our feed. What does all this post data actually go into? Yeah, it goes into our EJS, it's in the game, right? All this data goes into our EJS.

So EJS is just a template, right? It's just a template and there's a loop that's running, that's taking each one of these documents, right? Each one of these documents and it's plugging these documents into our EJS. The EJS renders and spits out some HTML and the HTML is what's sent back to the client and is what enables us to see the feed. Beautiful, all right. Same kind of things happening here. Since our loop is building out the feed, it's also making each one of these posts in the feed clickable, just with like an anchor tag. And when we click that anchor tag, it takes us to the individual posts that we just clicked on. Now, how are we determining what to show to the user for the individual posts? It's kind of an open-ended question, but what are we using? What's the key bit of information that we need to show a specific post? Yeah, we need the ID of that post. When each document is created in one of our collections, they have a unique ID, right? And so what we're able to do is use these IDs as part of our URL. And since we are using this ID as part of our URL, we can use that information as part of our query to our MongoDB database.

So we can say, all right, give me just the data relating to 501. That's the only data I want. And then I'm gonna use that data that came back from the database. I'm gonna be able to pull off the caption, be able to pull off the number of likes. We're gonna pull off all the data from that post because I'm just using the ID. Beautiful. All right. Now, we haven't done individual profiles for individual users yet, but let's use our imagination. And we wanted each person to have their own profile. What could we use yet again to have unique profiles for each of our users? We could use their IDs again, right? Because our users are just documents in a user's collection. and since they all have their own IDs, we could just use those IDs and when we try and load that route, let's say profile slash 100, it's gonna go and just get the data where the ID matches 100. So then we'd be able to plop in Bob, right? And we could just grab their posts.

Now, since I'm loading this profile page, just like I'm using that ID 100. I had to query to get my users collection, but right now what would I have also had to done? What other type of data do I need to show Bob's profile? Yeah, we would also need to go to our post collection. We need to check through each post and just find the posts that are tied to Bob. So this one has created by 100, which is Bob's ID. So this post would match. Let me check. All right. Created by 100. so this post would match, and then we have down here created by 103, so that would not match. So it would only be these two posts that would then come into our EJS to render out the two posts in that user's profile. Cool. So this is something that we did not add, but maybe could be a fun extension for your homework. And we can go over building out kind of individual profile pages and maybe even adding like usernames on Thursday.

I want to be able to add like usernames. I want to be able to add comments together once you had a little bit more time to play with the code base. Now what we are currently doing is just loading the profile for the logged in user. Right now we are just using the logged in user. So when I load slash profile, How do I know who the logged in user is? I just went to localhost 212121 and I went to slash profile. How did I get the profile information for the logged in user? Yeah, since we have an active session, every single request has a what? Yeah, a rec.user. Every single request now has a rec.user property that we can yoink, right? We saw it last class where we were able to console log the request. That request was a massive, a massive amount of information, right? Massive amount of information. And there was a specific user object, right? And there's also like the body depending on what type of requests we're making.

and so we're able to pull off that rec.user to get the current logged in user's ID. We can use that ID to then just get only that user's information. So if Bob was the logged in user, we'd be able to go and get just Bob's information to load into the profile. We could probably even, since we're, well, we'll say that we get Bob's information, and then we can query our post yet again just to find rec.user, their posts. So the first two would be Bob's. Cool. Alrighty. What if we're hundreds of thousands of posts? Would that make profile loading really slow? Depends. We're going to see ways to optimize these over time. And in fact, One of the things I like to talk about is there is an application called Leachess, which is a free chess server. And it's where I play chess. It's one of my favorite places. I'm pretty much on there every single day.

They have billions, billions with a B of games stored in a MongoDB database. And so they're able to pull out individual games. So MongoDB does scale, right? MongoDB scales really well. And when we get, actually, like once we get past the hunt, we're gonna talk more about how to optimize these applications, right? We're gonna talk about how to optimize a lot of the things that we're doing, because right now we're really in learning mode. You could build applications, no problem, that do this. MongoDB is really apt for a lot of this stuff that we're doing. But as we get deeper into it, we're gonna make some changes. We're gonna make some other considerations that would make our apps more performant. But we like to build first, right? We're always gonna build first. We're always gonna achieve our 100 hours project. And then once we're through the hunt, and we have a little bit more time to go deeper with certain things, we'll all share videos that compare like MongoDB to like say something like Postgres, we'll talk through ways to, we'll talk through ways to optimize your application so that they're more performant. But in the beginning, it's just not something to worry about.

You can build right now, build MVPs. And also when you're on the job, they're all gonna have different ways that they kind of do this. And so you're gonna have to pick up their strategies for doing it. Yeah, refactoring is for closers always. Yeah, don't optimize until you need to exactly once, once you have, once you have thousands of users and they're starting to complain a little bit, then you can worry about optimizing. But for now we're still like in learning mode is the first more complex app that folks will be using. Can you explain rec.user and sessions again? So, the wonderful thing of using Passport off the shelf and these sessions off the shelf is that once you log in, we now have a session that no matter where you go throughout the application, you can still be recognized as being logged in. And we showed the way this works is by putting a little cookie on your computer that enables us to see that you are that user and so There's more complexity behind that but that's at a very base level now once you're logged in Every request you make is sending your logged in user information along with that request And so the beautiful thing is we can just yoink that information To know who you are as the logged in user to then go query to just find your post to load your profile things like that. Where does the ID come from? It is a unique ID that is made, right? It is a unique ID that is made when the user document is created. And when we come back from break, I'm actually going to show you something pretty neat about Mongoose that literally blew my mind the first time that I saw it. A lot of folks were asking, all right, so let's look at these models. How are the models actually mapping to the collections?

So we're going to see that in a few seconds as well. Can you explain the colon ID, the dreaded colon ID? So this is something that I know is confusing the first time you see it, but we saw this as one of the URLs, right? The colon ID. And so what we're noticing is if we go to our application and I click on this post, how do I know which post this is? I could see it. It's on the screen right now. Which post is this, chat? Yeah, the URL shows it. This is post 631A7F39A3A566. ACFC7DA286A, right? That you, I hope you didn't expect us to type that whole thing. I did. This is the specific post. And what post, right?

What post, like if we had to go and find this in our MongoDB, we're gonna find this post based off of the what in MongoDB. This right here matches our what? It matches the ID. If we look in our MongoDB and we look at our posts, there's gonna be a post. Here we go. There's gonna be a post that has that matching ID. 631286A. 631286A. So we can see in our database is this document with that ID. And so what we are doing is we are throwing the IDs in our URL, right? So that we can identify unique IDs. I, if I wanted to, right? Cause I'm a boss and I do boss things, right? Like I can go ahead and if I wanted to, I can do Mira. I can say Neopets is life.

and I could choose a file. Where are my, where's my fairies folders? There we go, there we go, beautiful fairies folder. And I could upload this again, I could submit. All right, now I got two posts that are identical. All right, I have two posts that are identical. They have the same, the same title, the same caption, the same photo, the same number of likes. How do I differentiate between these two documents? Let me refresh my MongoDB here. How do I differentiate between the two? Yeah, they have different IDs, right? If we look, this ID would be 26286A. And then this one is 366327573. So the content is the same, I forget, I actually capitalized this, right? Content is the same, title is the same, caption is the same, but the IDs are different.

So since IDs are the unique bits of information here, we're plugging these IDs into the URL. That's just how our app is gonna work, right? Our app's gonna work by using these unique IDs to request specific kinds of content. Right? Now, the beautiful thing is, we can yoink that ID out of the URL, right? But to yoink that ID out of the URL, we need to tell it what we want. And so when we look at our code, and we go to our post routes, we're gonna say, all right, you just went to a specific route. I want everything that came after that forward slash. Right? I want everything that came after that forward slash. Let's go back and look at our URL. We are on slash post, and then I want everything that came after that slash, that forward slash. That's what I'm saying here. You have that forward slash. I want everything that comes after it.

Everything that comes after it is what ID is now going to hold. And last class we showed that we could call this rainbow. We could show this unicorn. We could call this whatever the heck we want it, right? And now when we go to our controllers, right? When we go to this post controller, get post, we can use that ID. and that ID is gonna be stored with rec.params.id. This rec.params.id enables us to grab the values that come after this colon that are in our route. So if we called this rainbow, right? Then we would have to come to our post controller and call this rainbow. And by doing that, we can now grab that value you out of the URL and use it in our application so that we can query our database and get that exact post and only that post. I'm not gonna leave this as rainbow though. And we call it ID because it is an ID. Where did the IDs come from? Somebody said they are automatically created when you create a document in MongoDB.

The ID is automatically created. Where does the logged in user ID come from? Well, logged in users are just users and each user has an ID. That's it. How does it get the ID though if it's called rainbow? it has nothing to do with the name, right? It has to do with what is placed here. It's just a name calling, we're calling it ID for convenience because that's what we care about. But whatever was after this, whatever came after the forward slash, we are going to grab. If we look, we can see in our URL that this comes after the slash. We're already on the post route, so we're just gonna grab everything that comes after here, right? We're gonna grab everything that comes after here, and we're just giving it a variable name. That's it. We're just giving this a variable name. We're giving this the variable name right now of dog.

All right? Then in our post controller, we can use that variable name of dog, And the cool thing is we know that dog is holding that unique string and that unique string just so happens to be a what? That unique string just so happens to be a what? It just so happens to be an ID. So the cool thing is we can say find by ID, knowing that what's stored in dog right now is this ID that came from the URL, right? What if this was, I don't know, funky chicken, right? If that's what was in the URL, right? If that was what was in the URL and our route grabbed it, dog is now holding what? Dog is now holding what? Dog is now holding funky chicken. So when we go to our post controller and we do rec.params.dog, rec.params.dog turns into what? it turns into a funky chicken. Exactly. Turns into a funky, whoop, funky chicken turns in the funky chicken, right? Now, is there anything in my MongoDB collection with the idea of funky chicken?

No, absolutely not. There is nothing with the idea of funky chicken. So were we able to grab funky chicken from the URL? Yes. Were we able to use it inside of our controller? Yes. But would it do anything? Absolutely not. It is just the coincidence that, well, not coincidence, it's how we designed it, that we are putting the IDs here in the URL. So when we go back now, if we were to keep this as dog and we were to come back and do this, Now, since dog is holding the actual ID, let me just grab it, right? Yoink. Right, now this URL, right? Dog is going to grab that value, right? We can say like, boom, it was just that value, right? It's grabbing that value.

So wherever I see rec.params.dog, it's going to wind up being this value instead. We're just going to have this render out to that value, right? So now, when we do find by ID in our post collection, is there a post that has this ID? Yeah, so now we're able to find that specific post. When we go to our collection, we'll be able to find that post. And so this is all just really this rec.params.dog and this colon dog is really just fancy what? It's just like a function, right? It's just like a function. This is just like a parameter in your function. It's the same stuff you're familiar with. Just don't, don't let that kind of scare you. This is just a parameter. That's why we're calling it rec dot params. It's just a parameter. Just like you could pass any value into a function, right?

Like if you had a function, right? If you had a function, right. And we'll call it function X. You can pass whatever you want into this function, right? We'll just call this dog, right? You could pass whatever you want into this function, right? This is the most important stuff. Most important. I'm just fucking with them, I shouldn't be doing this. Boom, most important, it's going to get real active, like, hold on, let's go big. All right, let's let's let's take our break let's take our break All right, let's take our break. When we come back from our break, we'll explain that this was indeed not the most important stuff. We'll stop, I should have done that, I apologize. I'll apologize when I come back. All right, let's go ahead and put the timer on.

All right, I think everyone's back. I was just, I was just messing, I was just messing around. I wasn't saying anything. I was just fucking with y'all. I wasn't saying anything. Uh, I did, I really was just miming. I was, I, there's literally, I was not, literally was not saying any words. What we were talking about was nothing. I literally was not saying a damn thing while you were watching ads. So yeah, we're gonna take our break. When we come back from the break, we will continue with this idea of these IDs are just a function, that's it. Only thing I wanted to say is that it was a function and you're just passing a parameter and you're passing a value. Actually, let's do this while, because people are back. That's what we do before we take our break. It's just a function, right?

It's just a function. And the parameter in this case is this right here. And why do we need, right? Why do we need this parameter here? What does this parameter do for us? Exactly zero. So it's not, it's not, it's not hard coded. This means I can use this route for every single what? I can use this route for every single what? This works for every single post. every single post this works for, because the value is not hard-coded. Just like a function can take in a value, right? Just like a function can take in a value, and the function can do what it needs to do with that function, this is the exact same thing. This is a parameter, right? Just like our functions have parameters, this is a parameter.

and it was us to pass in any value, right? It just so happens the values that we are passing in just so happened to be IDs. They could be the string funky chicken every time that wouldn't really do much for us. But since we're passing in IDs into this parameter, the beautiful thing is that we get to use that parameter. So no matter what post it is, our code still works. this get post will work with every single post right because it's just a parameter just like our functions had parameters this is a parameter so we can pass in anything we want it just so happens that we're passing in id like the actual ids and we're able to use that value to then go will I find a unique post? And then that's actually a really good question. The last thing before we take our break, is Leon, I don't see post in that route. Well, it's because we've already told it here. We've already said, hey, if the route includes post, use these routes. So any route that you see inside this routes folder is really just this, right? But to save us some typing and have a little bit more flexibility, we've already said that we're on that, we're already on that path, so we don't need to say it again. Yeah, cool. All right, and for folks that just came back from break, I wasn't saying anything, I was just messing with y'all. There was no, I was just miming, I wasn't actually really even saying anything.

All right, let's go ahead and put, Oh, somebody did two minute timer. Welcome, Big Hamster, glad you found us. All right, Quinn, Sab, hey, thank you for the extra two minutes. Seven minutes on the clock, folks. Seven minutes, when we come back, we're looking at the deleting, we're looking at the updating, we're looking at molter, we're looking at cloudinary, we're looking at method override, we're looking at how Mongoose does really funky things Thanks to our collection names. Let's go. See y'all in seven, gonna run. I think the ads already ran, so we don't have to run them again. We're gonna put some tunes for you to listen to. All right, if you're able to, please get up, move around, hydrate, kiss some babies, and I'll see y'all at seven. You You You You You All right, folks, come on back. Come on back. I don't know if you noticed, but I was drawn without my iPad. Not sure if with the iPad versus without the iPad really does anything different, but now I have my iPad. Come on back folks going back All right Here we go All right.

Let's go ahead and change this back to id and change this back to ID. That way we don't forget it and I'm not chasing down dog routes as we go through it. All right. Tony, I actually saw your question before we left for break. Are we going from zero to 1000? Yes, we are. The backend goes pretty quickly and the problem with the backend is that it is all very much so incremental, right? We went from core modules, from core modules to very simple backend with node, from very simple backend to something with off, to something with MVC, from something with MVC to something with even more structure to it. And so the backend, what's tricky about it is if you miss any portion of that, or you don't do certain of those assignments, or you just get stuck on one of those things, the dominoes start to fall a little bit. And so my advice for folks that are feeling a little uncomfortable with the backend is to slow down a little bit, take your time, go back through the homework, right? Seeing the Traverse Media video that I assigned for homework is really important. Go back and look at maybe like Mine Wolf's old streams where they break down some of this concepts and more in depth and then go on Discord and ask folks to walk through the code base with you. But each of these pieces were fundamental. A lot of folks skip the MVC lecture. That's a mistake.

Really solidifying the MVC architecture means that you actually understand what's going on in this code base, right? And so make sure that you're going through the homework and not just moving on because we're moving on, move on when you actually understand these things, right? And seek out the resources that we share. Seek out the stream teams for folks that are walking through this in more detail. And at any point when you get stuck and you don't think things are clicking, you don't discord and ask somebody to walk you through it. Right. But the whole point of this is that it's consecutive dominoes. And if you miss the domino, it's not going to fall in the right order. So definitely make sure you take the time to go back through that. All righty. So far we've done the getting and the posting, but we also had liking and deleting. And those are some interesting things that were a little bit different than what we might have seen in the past. And it actually is perfect timing because the reason why this works is actually something that we covered during the, the, uh, super review on Sunday. So the, let's look at what this can do and let's go back to our profile from our profile when we go to a post, let's just say mirror again, uh, we can actually let's do something that's not mirror. Cause we have two mirrors now let's, let's do a Thea here and let's go ahead and just like a Thea.

All right. So three, two, one, I clicked and you can see that the number of likes is now one. I can refresh the page. The number of likes is one. If we go to our database and we find, um, in the post collection, we find a Thea's post, you can see that the likes is now one, right? The likes are now one. And so the beauty here is that we have the ability from this click to update the likes on that specific post by one. Now, something we've done in the past for these clicks has required what? What have we done in the past that enabled us to click on something to update the likes by one. Yeah, we've used event listeners. Let's actually take a look at this. Actually, let's take, where can I see my client-side JavaScript? Let's ask this question. Since an event listener is client-side JavaScript, where can I see my client-side JavaScript? script.

Yep, it'll be in the main JS in our public folder. So let's go to our public folder and let's go to our main.js. All right, public folder. Wait a minute. Public folder. CSS, images, favicon, style. So where's the client-side JavaScript? What? What? What? There's no client-side JavaScript, right? There's no client-side JavaScript here. So how are we doing these clicks? Now, let's answer a very specific question. when I am making this likes right when when I am when I am when I am clicking this lovely heart and I am updating the likes from 0 to 1 what type of request am I sending to the server what type of request am I trying to make to the server to change the number of likes on this post from 0 to 1 I am trying to make a put request.

Now here's a very specific question that can make a little bit more sense if we backtrack to one of our early lectures and what we did in the super review. Does our client natively come with the ability to make a put request? Music is still on and I had the wrong headphones in. Let's think about this is a very, very specific question, right? Do we have the ability to natively make a put request? and it's no. We can make get requests very easily by like just refreshing, clicking an anchor tag, right? Like those are all, right? Those are all anchor tags, right? Those are all get requests. How can we make a post request? What's built in that does a post request? Forms, forms do our post request, okay. So since forms are doing our post request and our get request are normally simple things like refreshing the page, clicking an anchor tag, right? That's, those are baked in like HTML, the client side respects the gets and the posts.

Now, how have we been making puts and delete requests up until this point? Fetch, right? If we look at our previous code, like the off with local login code, right? Our to-do list, we have been making those requests with fetch. Now fetch is a what? Yeah, fetch is a web API. And since Fetch is a web API, that is dependent. Our application right now is dependent on what to work. Yeah, our application right now is dependent on the environment, the browser, to have these APIs for our application to work. If our client does not have those APIs available to it, our application wouldn't work. Fetch is not something that is native to our application. Fetch is a web API that is being provided, that is being provided by most of the browsers where we're running our code. But eventually we can get into situations where the client doesn't have the Fetch API available to us. Right? Maybe we eventually want to start running our code in places other than a browser.

I don't know. Right? But right now there is not a native way of doing puts and deletes. Right? We have been using the Fetch API to do that. Well, the wonderful thing is if we look at our code, let's just inspect here, inspect element, and we look at this button, this button is really a what? This button is really part of a what? Oops, sorry, I'm still big lean. I always get hyped, like yeah, I am big, what's going on? Yeah, what's up? What's up? Hey, hey, thank you for recognizing. No. We can tell that this button is really a what? They call me big LA.

Man, that old school LL Cool J hit different. It's a form. Look at it. Would you just look at it? Would you look at it? It's a form. It's a form. It's a form. And so forms by default, right? Forms by default are always what type of, what type of requests? So forms are always post. yet I'm using a form to do a put. It's a post, but I need it to be a put. What do I need to do for my post to be a put? I need to override the method, exactly.

I need to override the method. And what we'll notice is that on this form, The form always uses the action to know what to do, right? The form uses the action to figure out what to do. That request is sent to the server and on that action, that's part of the request that comes from the server, sorry, from the client. You can see down here we have a what? We have a what? It's a query parameter, right? It's a query parameter. And that query parameter has a method set equal to put. So what's gonna happen, right? What's gonna happen is on our backend, we are gonna see a post come in, but we're gonna check each post that comes in to see if there's a query parameter on it called underscore method. And if it has that underscore method, we're gonna override that post to be whatever the equal value is here, right? So even though when I click this button, I am technically submitting a post, right? I am technically submitting a post. On our back end, we will be able to override that post to be a put.

All right, let's look at the trash can. Let's look at the trash can. Trash can, same thing, inspect. We look again. Trash can is really a form, except at the end, we have this magical query parameter with a delete. So even though we are submitting a post, right? Even though you're submitting a post, right? We're gonna override that post to be a delete. Now this is pod raising exactly, right? And so we get to do this. Now, somebody said, we should just be able to change the method of a form. I agree with you locating. In fact, if you look at the early specifications of HTML, there were some that included you to have the ability to do deleting, to do putting, to even do patching, right? But that was lost from the specification and with the more recent HTML5, it was not ever added. So we can do this method override, right?

We can use our forms, we can use this method that works, which is the post and on our server, we can override it. Right? We can override it from a post to a delete. We can override it from a, a, a post to a put. And this does not require, right? Does not require any client side JavaScript, which means that our code can load what? Our code can load what? Since we don't have any client-side JavaScript. Can load faster, and we are no longer dependent on a client that exposes a fetch API. Right? What if we're in a browser that doesn't have a fetch API? Right? What if we're on like some really, really old browsers? Right? What if we're on some really, really, really old browser?

Like our client does not have a fetch API. our apps just wouldn't work, right? They're on a really crappy browser. What if we wanted to use something that wasn't necessarily a browser meet? A lot of like now kitchens have clients that can consume the internet. Do they have a fetch API? I have no idea, right? But if they're loading HTML, HTML supports posts via forms. So as long as something supports HTML, right? As long as something supports HTML, our apps will always work, right? Eventually we'll get into like different clients that we could use and all that fun stuff. But now we have a different way of handling this type of these different types of requests that before needed a fetch API, before that needed to hand stuff off to the event loop. We think about this before we were running client-side JavaScript. All right. That client-side JavaScript had to hear the click event, the click event, then execute it.

A function that function then put the fetch request onto the call stack. The request gets handed off to our web APIs, our web APIs go and do the asynchronous tasks. The result of that asynchronous task is put in our, in our task queue. Once the call stack is empty, it goes to the task queue. It takes it off the task queue, puts it on the call stock. Then it executes. Do we have to do that anymore? Nope. Nah. Nope. We'll handle it all on our backend. So we get the ability to not need client-side JavaScript. We get to kind of escape some of these weird things. We open up our applications to working on more clients. We open up our applications to maybe even slightly faster, right?

As this is something that is a pattern that you're gonna see quite often. So how does it actually work? Let's take a look at our code. So we have some middleware and we have this ability, if we look at our server JS, we have this ability to have the method override, right? So we required a special NPM package that's gonna handle this method overriding for us. And then we're able to put this little bit of code right here that says, hey, use that method override package, right? And look for this query parameter. So all of our post requests that come in, right? All of our post requests that come in, we're now gonna look to see if they have this underscore method, right? This underscore method query parameter. You can change it to whatever you want. This could be underscore rainbow. It doesn't matter, right? The underscore method, it could be whatever you want, right? We're calling it underscore method.

Now, every single post that comes in, we'll look at the underscore method and we'll treat that request based on whatever that query parameter equals. So if it's a put, we'll treat it as a put. If it's a delete, we'll treat it as a delete. That means when we clicked that like button, let's go ahead and right click inspect. When we click that like button, yes, it was a form. Yes, it was a post request, right? But when that form came through, it looks at the URL and it sees that it had this underscore method query parameter, so it's gonna treat that post as a what? Gonna treat it as a put, beautiful. So now, we have to look for a pote, a pote, goddammit. We're gonna have to put, look for a put, a put on the post, like post route. We're gonna have to look for a put on the post, like post route. And then we're gonna have to grab this value to do what? Why are we gonna have to grab that value? What are we trying to do here? Yeah we're trying to find the post to update the number of likes.

We're trying to change it from one to two. Alright so we click the heart. When we click it the form submits. The form sends our request to the server. The server sees that it has this underscore method and says you know what hold up that's not a post that's a put. Now that we're dealing with a put let's go to our routes and find a post route, like post, and make sure that it's a put. So let's go ahead and step through that. All right, we're at our server.js. Is it a post route? Chat, is it a post route? Yes. So we're gonna use our post routes. Our post routes requires us to go to our routes folder and find the post file. Here we go, our routes folder, our post file. Now we have to find the second part, which was what?

What was the next part of that URL? Take a look. What was the next part of that URL? You can see it was like posts. So let's go ahead and take a look. Slash, that's not right. Create post, that's not right. Like posts, boom. LikePost, boom, that's this, the router, we found the right route and we set up our parameter. So we can actually grab this value from the URL, right? Since our parameter is set up there, we can grab that value from the URL. So that means we're on the right route, LikePost, we're gonna be able to grab that ID from the URL and we're gonna use the post controller and we're gonna use the LikePost method. So let's go to our post controller. Let's find the like post method. Boom, here's the like post method.

All right, we're gonna use our post model. And what I love, right? What I love is that Mongoose is so easy. Find one and update. We're gonna find one post and we're going to update it. Well, which post are we gonna find? Whatever post has the ID of The ID we just had in our URL. So what we're gonna do is we're gonna find the post that has this ID Right that has that ID. We're gonna find the post that has that ID when we find the post that has that ID What are we gonna do? We're gonna increment the likes property by one. So we are gonna find that post based on the ID, right? Right, based on the ID. And then we are going to increment it by one. Now, this is something that comes along with MongoDB and by extension mongoose. We've seen some other ones in the past.

There's increment, there's like decrement, there is set, there's a bunch of these that just come out the box. You have to read the documentation to know what it comes with, right? Right, you have to read the documentation to know what it comes with, but there is a built-in increment so that we can increment a specific property by one. If we look at that post, Let's go find the Athea post. Let's make sure that we're here. All right. So here's the Athea post. We can see the likes are currently one. So if we were to actually click, we would find the likes property and increment it by one so that this would go up by two. This will go up to two. All right. So let's actually click now. And we'll step through it again. I'm just going to refresh to make sure we're in the right spot. All right, we're good.

When I click on the likes, three, two, one, boom. What just happened was we submitted a form. That form had the route of post slash like post slash this long ass ID with the query parameter of underscore method equals put. Our backend is set up to hear that query parameter and say, don't treat that post as a post, treat it as a put. So now we have to hand off this to our router saying, all right, buy me the router that's post slash like post and better have a query parameter in there to grab this ID. When it finds that route, it also gives us the appropriate controller to use. That controller is gonna say, all right, yoink that ID out of the URL, find the post in our database that has that ID and increment its like property by one. What if the users like a post more than once? We're not stopping them from doing it yet. That's, that's, that's too much. We'll, you can worry about that later. If you want to show off and figure out how to set that up, go for it. That's, that's, that's an extra level of stuff. All right, let's go ahead and right-click on it so we can see the code, somebody asked about that. All right, we can see the code here.

Here's the button we're actually clicking on and we can see that it has the heart class. Hold on, let's take a look at that real quick. Let's take a look at our CSS. So, all of this style, like all of this style is not even coming from our CSS because I have these classes on it that are supported by bootstrap, right? These classes mean something in bootstrap to make it a button that has that button primary color, which is blue F a heart, um, which is the, uh, font awesome for the heart, right? And so this like actual style and stuff is not even coming from my CSS. It's just, it's just bootstrap. And, uh, eventually once we get further along, we're, we're going to swap it out with tailwind, but for now it's just bootstrap. Yeah. Like our EJ, it's still EJS. It's just our EJS. If we look, if we look at our EJS, um, like if we look at the posts, our EJS takes in this partial, that's the header. And if you look at that header partial, well, it loads bootstrap, right? And it loads font awesome. So I'm able to get those default, those default stylings from bootstrap.

I'm able to get those default icon fonts from font awesome, and that's it. Now, if you want to tweak the styles, you want to do something else, then you just throw it in your CSS file. that's in the public folder. All right, so let's step through this one more time. Let's click on it, we clicked on it again, right? So we clicked on it, let's inspect. The thing we actually clicked on was this button that had the form and the form had the action or the URL of post, like post, with the idea of the current post in it with this method override of put. So the request goes to our server. Our server sees that post request comes in, but it sees the query parameter and says, you know what, we should override this post to be a put. From there, our normal code comes into play. We are gonna find the post router and then the like post route. Start at the server.js. All right. Post router. We're gonna go to post routes.

Post routes, find the like post route. Boom. We have our query parameter set out so we can yoink the ID of the post we are on out of the URL. We're gonna go to our post controller and use the like post method. Post controller, like post method. We're gonna use our post model to talk to our post collection. We're gonna find one of the posts or one of the documents in that collection and update it. Well, which one are we gonna find? We're gonna find the one that has the ID property that equals the ID that was in the URL as part of the query parameter. And once we find that specific document, that unique document, we're gonna increase the likes by one. So there's a likes property. Whatever number is in that likes property, we're gonna go up by one. How can we tell, how can we tell, how can we tell if likes is actually a number that we can increment by one? Let's say you don't have access to my DB. How can you actually tell that likes can actually be incremented by one?

What if it's a string or something weird? Why won't this turn into like 11? Yeah, let's check our schema. Let's go to our post model. Let's check our schema. and we can see that likes, the property of likes is actually a number. So it makes sense that we could actually increment a number by one. Cool. Since we're kind of already in the model, right? Since we're already in the model, and this is all stuff that was in the homework video, right? Like this method override, This is shouldn't be the first time you're seeing it Yeah Sarah said is there a way to have authentications while having the user anonymous to me and everyone else like just the username they choose Yeah, you just you just don't include the email in your user model and your passport strategy The Traversee media video had method override in it, the storybook, the Google auth video, and then Mine Wolf went over it as well during their stream. Yeah, cool. All right, so this actually can increment, it is a number, it should be able to increment. One of the weird things I wanted to show you about Mongoose was this right here. So our model is called post, right?

Our model is called post, but what's our collection called? Where did it get post from? Like, look, it's, it's called, we call it, we call it our model post here, but if we look at the, uh, actual collection, it's called posts. You want to see something really weird? You want to get really funky with it? Can I get, can I get funky with it first? Can I get funky chicken with it real quick? You ready? Hold on, hold on to your pants. We're going to call our model. We're going to give it the name of Ox. All right. Our model's now going to have the name of Ox. So our model name is now Ox. Let me make sure I'm on the right page before I save this.

Hold on. Let's go to like our feed. Actually, I'm going to have to make a post first. I have to make a post first. So let me go to the profile. For this, we're gonna have to make a post. All right. So right now, there is no collection called Ox. I'm gonna save this, right? We're gonna call it Ox. I'm gonna save it. For this to work, I'm gonna have to create a new, right, a new post that would make it, force it to make a new collection called Ox. So let's go ahead and create a post. So we're going to call this test, test. We're going to choose a file.

I'm just going to use this one again. And we're going to get an error, right? We should get an error because our controller's not set up to use the collection. Oh, did I save? Oh, maybe only if I go to the feed would we get the error. Okay, there you go. It's just showing in the feed, just that one, that one post, right? There's, there's no, like all of our other posts are gone, right? All of our other posts are gone because now we're using this new collection called Ox, right? We can see that we enabled the model to be the name Ox. You ready though? Hold on about the blow your minds. You ready? Go to our MongoDB. Let's refresh.

Oxen Mongoose knows when you say post that it should be plural because you're going to have multiple documents. So, your collection shouldn't be post, it should be posts. Well, if you have a collection for oxen and you call it ox, you call it your ox controller, it knows that it's going to want to make your collection the plural. so it knows to do ox to ox-id. Somebody read the Stack Overflow article. This actually comes from a Stack Overflow article a long time ago, but it doesn't know to do goose into geese. Like it knows some of them, but not all of them, right? It knows some of them, but not all of them, right? And so it's trying to do the plural of whatever you put in. And so the cool thing with Mongoose is if you just leave it at these two, it'll do the plurification, but you could actually add a third argument here. That's the actual name of your collection. Right? Like you can, you can put an actual name here and it will respect that name and it won't do any of like these like funky, like plurifications or anything like that. Yeah. So it, it, it, uh, it's smart with some things, but not all of them.

Yeah. Cool. All right. So I just wanted to show that cause I thought it was pretty funny. Uh, so that's where the, the actual collection names are coming from. We're using the post controller. So, so far that's the likes. We have one more to do and that's deleting, but we are at the top of the hour. Let's go ahead and take our break. And when we come back from break, we'll talk about our deleting. I'll answer any more questions you have about this. And then your homework will be to get caught up and to maybe start thinking about how you might add, how you might add comments to the mix. All right, folks. Let's add five minutes to the clock here. I'm gonna put the tunes on.

And if you're able to, please get up, move around, hydrate. but it's something that's not your screen. And I will be back in five and run some ads and new folks showing us don't have to sit through them. Everybody, see you soon. Welcome Empower. You I love when the music fades for us as we get back. Can I do the worm? Oh yeah, I can do the worm. Old school b-boy. I can pop it. I can lock it. I can drop it. I can tut it. What you need. Got you.

Did I miss what the left up left right down was for no, it was just the start of the stream question. Uh, mine was I'm always right and always down. You know what I mean? Here we go. So that was my answer. Is Bob joining the stream team? I've people keep mentioning it. Like, there are some, um, like programming YouTubers that have created like 24, seven, uh, like lo-fi channels. And we used to do like a 24, seven Babadoro channel. Uh, I'd be down. I got a lot of projects on my, on my list, but I think that'd be something funny to set up. Yeah. Just like 24 seven, just Babaduros and people can like vote with like channel points, like if it should be like a 25, 5, 30, 30, maybe we'll just start off with like a, like a voice channel on discord. All right. We have to look at the delay Tang.

Uh, and then once we're done looking at the delay Tang, uh, I'm going to open up to some questions. I know there's some other little quirks that are happening in this code base, but I feel like we've spent enough time going through it. I know Stream Team has gone through it, MyWolf's gone through it. So I feel like there's enough here that we can kind of work through it. If you still need help, always Discord, get in Stream Team channels, ask questions. Like this has to make sense, but this is like, this is the back of end, like this is the back of the backend, right? This is like the back, this is the end of the backend, Like, once you got this, it's just building new models, new controllers, and that's kind of all we wrote, right? And so, yeah, eventually once we get through the hunt, we'll have some fun doing some optimizations, we'll add testing to this and some other fun stuff, but this is it, you get this down, you can build whatever the heck you want. Cool, all righty, let's look at this delay tang. Let me refresh to make sure I didn't mess it up with the aux stuff. Let's go back, let's look at our feed here. Let's go to, yep, I'm just kind of clicking around a little bit just to make sure that we're good. All right, so we're good. Let's go ahead and, I can't delete any of the fairies. Oh, we got two mirrors, all right, we got two mirrors.

is we can delete one of the mirrors. All right, this mirror is lowercase n and other mirror is uppercase n. So we did kind of have slightly different versions. So we can delete the lowercase n. And so when we click this trashcan, this trashcan is only, This trashcan is only viewable right now, why? Because it's my post and I am logged in. So how the heck does that work? Let's look at our route. Let's follow this one. Loading this link is a what request like by hitting enter here. I've made what type of requests I've made a get request, right? So let's start there I'm making a get request on the post route and the routes just slash and then my query parameter So let's go and take a look at our get requests Start at the server post route go to post routes just forward slash and then the query parameter. So this is the route. We're going to ensure that we're logged in. Great.

So it is checking to see that we're logged in. That's why one of the things we have to keep in mind, like we have to be logged in to get to this point anyway. And then we're going to use our post controller and the get post method. So go to our post controller, get post method. We're going to use our post model to go to the post collection. we're gonna find the specific post that was in the ID, right? We're gonna find the specific post that was in the ID, and we're gonna hand off that post information to our EJS, and we're also handing off the user information to this EJS. So where will the logic exist for whether or not we show the trashcan? Interesting question. where will the logic exist for whether or not we show the trash can? In the game, folks, exactly, EJS, right? It'll be in the EJS. There's nothing up until this point that said, like, don't or do show trash can. We've just gone and found that specific post. We're sending that information to the EJS, and we're sending the logged in users.

Remember, whenever you're logged in, right? Whenever you're logged in and you're making that request, right, that rec.user, whenever you're making that request, that user property is being sent along with the request of the logged user. So we're sending all the post information underneath the name post and all the logged in user information underneath the user. So we have to go and look at this post EJS. All right, so we look at the post EJS. Let's go down to where that trash can might be. and here is our conditional bit of logic. All right, this is interesting. So if post.user equals user.id, what are we checking here? What do we check post.user equals user.id? Yeah, we're checking to see that The person that made that post is the person is logged in because we look at our collection Let's look at our collections real quick. Let's look at our collections. We can see in our post collection It has the user that made the post Right. So post dot user is going to give us the person that made the post All right, post.user is going to give us the person that made the post. So what we're gonna check is we're gonna say, hey, the person that made the post, does it match the logged in user?

All right, does the person that made the post match the logged in user? We have to look at the controller to see this, right? we're sending in all the post information underneath the title of post. So every single post is gonna have a post.title, a post.image, a post.cloudinary, a post.caption, a post.likes, a post.user, a post.createdAt, right? They're gonna have all, right? They're gonna have all of these things. And since we are sending the user's logged information underneath the word user, user is going to have the ID, the email, the hash password, right? All of this stuff that gets sent with every logged in user's request. You're logged in, you're sending that request object with the user property on every single request. So all we're gonna do is inside of our EJS, we're gonna say, hey, does the person that made the post equal the person that's logged in? Because if the person that just logged in equals the person that made the post, then we can show the trashcan. All right, cool. So now, since we know the person that made the post is the person that's logged in, AKA like I made the post and I'm the one that's logged in, it's gonna show this trashcan. And this trashcan is doing the exact same thing we saw with the likes. It's on the post route with the delete post route, and then we're gonna plug in the post ID, right?

So we're using the EJS syntax to plug in the ID into the URL. The URL will eventually just have that string of numbers and letters that is the ID, and we're adding that method parameter of delete. So when we submit this form by clicking on the delete button, we will be making a POST request to our server with this route, including the ID of the POST that we're currently viewing and the method override of DELETE. So that request makes it all the way to our server. Our server sees the method query parameter. It says, all right, we see that query parameters. We're gonna treat this POST, not as a POST, but as a DELETE, all right? And so now that we know it's a delete on this route, we can go back and look at our server.js. All right. It was a post route. Let's find the post route that had the delete post. All right. Here's the post route with delete post. Beautiful. We're able to grab that ID from the URL, right?

We were to grab that ID from the URL. And once we do that, we can use our post controller and the delete post method. So let's go to our post controller. Let's go to the delete post method. And here is the delete post method. Delete post method's gonna go to our post collection using the model. It's gonna find that post by the ID. It's gonna say, hey, find the post that has the ID property that matches the query parameter that was in that URL. When we find it, right? When we find it, we're going to first... Well, we can actually kind of get around this. We don't need to do this anymore. We can just, we can find it. We just found it here, right? We can delete it from our database, right?

This is us deleting it from the database, but there's one other thing, right? There's one other thing that we have to do. We're deleting a post, and that post contains what bit of information? It contains an image and where is that image being stored? Well, sorry, it contains a URL to an image. It contains the URL to that image. And that image is being stored on Cloudinary. Now Cloudinary has a very generous free account, but eventually if you have lots of users And they're all uploading photos and each photo that people delete if you don't actually delete it from your cloudinary account You're just paying for storage of Images that folks will never use think about that if you delete that post But don't delete the image from cloudinary Eventually you just have all these images sitting on your cloudinary account Right that nobody will ever be able to use you deleted the post which means there's no longer a post in your collection right This is like private collection. Exactly, right you you you now have no post in your MongoDB database So there's no way to ever get that photo back or that URL back into like your system So we want to make sure that we actually destroy that media on Cloudinary's end and then remove the post on our end. All right, you can actually, you don't need this line and I forget why I have this here. So you can, we want to destroy that image off of Cloudinary. So we're not just taking up space that will never be used. And then we remove the post from our post collection. Cool. Once we remove that post, we're just redirecting them back to the profile.

That's all. Now, why did I have this here? Why did I do this? Why did I, there's a reason why I did this. Yeah, I wanna make sure that it exists, right? I just wanna make sure that that post exists, right? Before I start sending like a very final request to Cloudinary, like destroy this stuff, let's make sure this stuff exists first, right? We can always do that. Like that's an important bit later on is like we wanna make sure that it exists. we might use that down the line to do some slightly other things. So that's why it's there right now. But the idea is we can check to see if it exists. We're gonna destroy it, and we're gonna remove it from our database. Yeah. Cool.

So that's how the deleting is working. Let's run that back one more time. Run it back. We're clicking this lovely trash can here. When we click the trash can, And so the thing you want to be able to get here is, look, I'm going to do it without looking, like being able to have this in your brain is like actually a really good thing. So we click the trashcan. When we click the trashcan, it's actually submitting a form. That form has a specific route and it has the specific ID number for this post. It also has a parameter, a query parameter of underscore method set equal to delete. So when this post gets sent to our server, our server overrides the post and says that it should be a delete, which then we have to go and find the route that looks for the post delete and it has the query parameter in the URL. When we find that, we find the right controller, we find the right method, that method goes and finds to make sure that post exists. It destroys the media on Cloudinary, and then it removes the post from our post collection. So let's go ahead and click the trashcan. Yeet! Right?

Yeet! And then it redirects exactly. So we yeeted it so clicking that trash can if we were to follow it through we can even follow through from the from the EJS right it would be that slash post slash delete post and then it would have the actual String in there for the for the you for the actual post ID with this method delete So that submits the actual request to our server our server. Here's that request it it overrides the post to be the delete. We see that it is on the post route. So we go to our post routes. We find that it is the delete post route. We also see that there is a lovely ID query parameter there. We use the post controller with the delete post method. We go to our post controller, delete post method. We can actually confirm that it exists. We can destroy the media on Cloudinary, and then we remove the post from our post collection. And very last thing we do is redirect to our profile because that post no longer exists. We shouldn't hang out on that page anymore. It doesn't exist, kicks us back to the profile.

And you can see that we unfortunately now only have one mirror. You've come a long way since the bachelor. I agree. I agree. It's a lot of little steps. It really is. All right. Now the last thing here is this Cloudinary. And we hadn't really talked through how the Cloudinary is working. We will on Thursday when we add comments, I'll also spend some time like showing you how to set up your Cloudinary. I haven't prepped it so that I can show you without revealing my keys. I know they hide them by default in the UI. Like if we go to Cloudinary right now, risky click of the day, boom. We can see that like some stuff is hidden, and like the secrets hidden, the URLs hidden, the API keys as well, but you need all four of these for it to actually work. But I haven't set up the actual adding phase to not get wrecked.

So let me do that between now and Thursday, then we'll walk through it. I think, yeah, MindWolf did already do it. So if you're itching to get this set up right away, MindWolf already did it. Cool. All right. I just don't want to bring this down while everybody's trying to use it. All right. So let's go ahead and add a new post. Let's go ahead and say new post, testing, and let's choose a file. Let's bring back a beer. Let's do a different, yeah, we'll bring back, yeah, we'll bring back mirror. Let's open that up, let's submit. All right, now we got our double mirrors back, which is what we all want in life. And so we can see it's our new post, it's testing, but we were also able to upload an image, right? We're also able to upload an image.

And so if we follow this bit of code, We are on, what page are we on right now? When we uploaded the new photo, what page were we on? Thank you, Hyper. We were on the profile page. Let's start with the profile EJS. Start the profile EJS. Here's our profile EJS. And we have a form here for submitting the post. So it is post slash create posts. And some important stuff for this to work is you're gonna need the ink type of multi-part form data. Molter, which is handling our image uploading, does not work without that ink type being set. So some folks, when they write it from scratch, forget that and then Molter doesn't work. So we have our form, in our form we have our input for our title, our input for our caption, or a text area for a caption, and then we have the file upload. And the file upload is just a normal input type file, right? Input type file.

And then we have our submit button. So what's gonna happen is when we submit this form, right, when we submit this form, it's gonna be like any other traditional post request. We're just gonna need some middleware to help us handle it. Okay, so let's go ahead and look for the post request on our post route with the create post route. So post on post, create post. All right, let's go ahead and take a look. Server.js, it's a post route. We're going to then look for a create post in the post routes, go to the post routes, create post, here it is. And then it has this stuff before the controller. We've seen this before. We've seen steps before we get to our controller. Literally right above is we have this ensure auth middleware, right? That's checking to see that we're logged in, right? So we've already seen middleware that is kind of in between the route before we get to our controller So now we have this upload Middleware, and if we look the upload middleware is requiring us to use Moulter right, so Moulter is the is the middle where it's gonna actually handle taking that file and Helping us upload it and doing some checking on that file right, literally sits in the middle, AKA middleware. All right.

And so we can see that the upload is actually requiring Molter. And we can see that single is probably just a what on Molter. What can we guess that Molter is probably returning? Let's go to middleware. Let's look at molter, right? We can see that molter, right? It's spitting out this like lovely, lovely little function, right? Technically it's an object inside of it. And so the stuff that's on molter is really just, it's just methods on this bit of code here. So if we look at Molter, there's some bits to understand. Let me go back real quick. One second. Sorry, I was on the post route. So here we go. So we're using upload, which is really just requiring Molter.

If we look at Molter, what Molter is gonna do for us is there's one thing that we can see, but understand that with Molter, Molter is like a pretty substantial package that we had to install, right? It's a pretty substantial package that we had to install. Molter has a lot of stuff that's happening underneath the hood. Remember packages that we installed through NPM are really just bigger collections of a lot of like functions and methods have been built out for us. So Molter is doing a lot. We are not storing it to our own disk locally. So we kind of keep this empty. If you watch some of my videos from last cohort, we did have a phase where we stored our images locally and not straight to Cloudinary, which is where you might have some other storage stuff in here. But what we're really seeing here, that's the only really big thing on Molter that we are seeing at the surface level is that we're checking for what? Yeah, we're checking the file type. We're making sure that's a JPEG, JPG, or PNG. If you were to try to like upload like an SVG or something like that, this would break, right? Because right now we're limiting it to these different things. You could change this, you can do different stuff. You probably wanna check with your media provider to see that it supports the media that you're gonna allow folks to upload.

So that's something you might have to look on Cloudinary's and then say, hey, Cloudinary, can I upload SVGs? Can I upload MP3s? Can I upload GIFs, right? Right, you'd have to read the docs to understand, and then you might change what happens on this filter. Right? Cool. So that's kind of all here. Moultr is doing a lot of heavy lifting that we don't see because it's deep in the package. And if we go back to our routes, we know that we're using Moultr here. It's handling the uploading of the file and then we get to go to our post controller and the create post so post controller Create post and what we're going to do is we are going to use cloudinary Right. We're gonna use cloudinary. We can see that cloudinary is another bit of middleware that we have included it, and we go to our Cloudinary middleware, you can see that the Cloudinary middleware is just using the Cloudinary v2 NPM package. We can see that we are requiring our ENV files. We are then pulling in all the stuff we need for us to be able to connect to Cloudinary, like our cloud name, our API key, our API secret. All these things are stored in our ENV files and it just exports Cloudinary.

So do you have to understand? Do you have to understand what is happening with like any of this No No, I Would not know to do cloudinary uploader dot upload dot rec dot file dot Pat like I just wouldn't remember that I just know that I I looked at cloudinary's docs I looked at some other folks that were doing stuff with Cloudinary and I grabbed the pieces that I need right, so I've done it for you That's abstracted away from you. If you don't understand these things that are happening. We know that Cloudinary is a package We know that that package is probably made up of a bunch of different methods So uploader is probably a method right upload is probably a method on that and it's uploading It's uploading the file, right? It's uploading the file that Moulter just helped us upload. If we were strictly a backend developer, how much of this would we need to know by heart? You would not need to know this by heart. Even if you were the best backend developer, maybe if you do this every single day, right? Maybe if you do this every single day, you would just have it in memory, but you're gonna be more used to just reading the documentation. Like Cloudinary has this in their docs. I didn't get this from nowhere. I got this from Cloudinary's docs. And by looking at some examples, probably on Stack Overflow, right? Like you, you start to pull in pieces, but now I have this on my GitHub. If I ever need to use Cloudinary, I'm just going to go and copy the middleware.

I'm going to copy this bit of code and I'm ready to rock and roll. Hey Pat, tell your professor I said hello. Yeah, I agree with Nick. You don't need to know anything by heart. You just might end up happening by its by-product. Just by doing this enough, you will start to kind of start to remember things. Cool. All right. So we are in the create posts. We're using Cloudinary and we're grabbing as part of the request, we uploaded a file. Remember, when we submitted that post request, part of the request that came along was that actual file from the form. Multr is helping us get that file uploaded and then we're able to use that file to upload to Cloudinary. You can notice that we're awaiting the results from Cloudinary because what do we need from Cloudinary? Like for us to have actually created a post, what are we awaiting from Cloudinary? Yeah, we need the URL.

We're gonna hand off this image to Cloudinary. We need Cloudinary to give us back, like to give us back the URL that we need for that file. So that's what we're seeing here. We're seeing here that we are going to go ahead and we're going to await whatever comes back from Cloudinary and store it in result. And so the cool thing is if you notice when we go and create our post right we're using our post model to create a post we have a title that came from the form request.body.title but we have an image URL that came from Cloudinary because it's part of result. We also have a Cloudinary ID that came from Cloudinary because it's part of result. We're going to use this ID maybe where we might need this ID. To delete it, right, we might need the ID if we're going to delete these, if we're going to delete these photos, we're probably going to also not only need the URL, but the ID to help us delete it, right? Cool. The caption came from the form body. We hard-coded likes at zero and we coded the logged in user as the person making the post. So we had to get all that stuff from Cloudinary, the image and the ID, and we're storing that with each post that we create, if we go and take a look at our MongoDB, we can see in the post collection, they have an image URL that came from Cloudinary and a Cloudinary ID for that actual image so that when it comes time to deleting, we can actually delete it. Yeah. So it's just another database. Exactly.

It's just another database. Yeah. Just another database. Um, we're just, there's no such thing as the cloud. It's just somebody else's computer. Oh, dragon asked an interesting question. Our database is objects. So when we're talking about MongoDB and we're using Mongoose, there's actually something I just want to explain because people asked about it. When we're using Mongoose and we're using MongoDB, all of our collections are made up of what? Our collections are made up of what? Documents. Now for all intensive purposes, is documents are almost the exact same thing as objects. However, they are not one-to-one. Documents have all the stuff that would make it an object plus a bunch more, like five times the amount of stuff you might need to do your job if you were just expecting an object. So this lean that I put on my request was saying, hey, just give me the stuff I actually care about.

Like just give me the plain old object, take all your wrappings and extra stuff, take that all off, just give me the raw like object, right? No fat just lean exactly right keep it lean right and so why might I include this? Way faster way faster if each document that I'm getting back is no longer has like five of times the amount of stuff that's coming back from it. And I'm just getting the raw lean stuff I care about way faster. So are all documents objects technically, but they have a lot of extra stuff that you don't need if you're just interested in the object-y stuff, right? That's it. It just makes it faster. You're getting rid of the gunk that comes along with it. And how would I learn about this? How could I figure out what Lean does? Lean is Mongoose, yeah. Lean is Mongoose helping us. Documentation, yeah. You can go to Mongoose's documentation and they'll break down, I actually have it pulled up. By default, Mongoose queries require an instance of Mongoose document class.

Documents are much heavier than vanilla JavaScript objects because they have a lot of internal state for change tracking. Enabling lean option tells Mongoose to skip instantiating a full Mongoose document and just give you the plain old object. In the docs. Sometimes you just gotta read the docs, folks. Cool. All right, so let's just run through deleting one more time and then we'll talk about Thursday and one other thing I just want to cover while we're here. All right. So let's take a look at deleting. And we are going to delete our second mirror. So we're going to go ahead. We see that we have the trash can. Why do we see the trash can? The poo, I think they actually call it a POJO just for that. I think, yeah, POJO, plain old JavaScript object. I think they didn't want to call it a poo.

All right. I'm seeing the trash can, cause this is my post and I am logged in. If I inspect it, we'll see that it has the post delete post and the, the actual post ID is there. I think some folks get a little tripped up when they're looking in the EJS and they see in the EJS, sorry, post EJS, we see in the post EJS, they see like the EJS syntax for plugging in that value, but that gets plugged in there and the result is having the actual ID in the URL, right? So if I was to click on this button, I would wind up submitting the form, which would make a POST request to the POST route, the DELETE POST route, with this value in the URL as a query parameter. We see the, as a parameter, we see the query parameter of underscore method. So on our end, our server is set up to override the POST to be a DELETE. So we're gonna look for a DELETE route on POST, DELETE POST with the ability to have a parameter. So let's go ahead and take a look. Let's go to our server, the post routes. We're gonna use post routes. Here's our post routes. We're gonna look for a delete post route. There we go. It has the ability to grab the parameter from the URL.

We're gonna use the post controller. We're gonna use the delete post method. We go to our post controller, DeletePostMethod, we make that sure that the post is actually there, we destroy the media on Cloudinary, we remove the post from our post collection, we kick our user back to the profile because the post doesn't exist no more, no more. Rando, do exclamation point 100 devs and click the link. You know, I said, pretty simple, pretty simple. It only took us how many months to get here? Pretty simple, you know, easy, got it, easy clap. Cool, so when we come back Thursday, I wanna figure out if we can expand upon this code base, like can we build stuff now that we have the raw materials? Can we add comments? And we'll do it from scratch, so we'll walk through creating the controller, we'll walk through making sure that we're connecting all the bits and bobs that we need to connect, and we'll walk through Cloudinary creation. We'll walk through making sure that your MongoDB is set up correctly. We'll do everything from the beginnings and I'll show everything live so you can kind of walk the whole steps together. And then we're kind of done with the back end, my folks. We're going to have you work on a project, aka your 100 hours project that uses this stuff. And then we're gonna spring in a different way to handle our views, which is React.

and then we're going to move into data structures and algorithms and go deep with our hunt. So let's get into it. All right, like I said, I wanted to end early because I want you to use this time if you need it, right? Use this time if you need it to, hey Moshi, Moshi went to come and see what I was doing, to use this time to review the things that we did, get some active recall in, right? Get some active recall in, make sure that the things are clicking, Maybe go on discord ask for some stuff if you need it If you're if you if you didn't something didn't make sense get help on discord. You're not doing this alone, right and Let's raid. So you want those sweet sweet sweet channel points. Let me get you some sweet sweet sweet channel points with a raid All right Cool. We're going to go over to team Vash if they have raids turned on. I haven't seen them before, but it looks like they're building an MMO, which is pretty cool. All right. Let's Let's let them know that we're sending a raid by. Cool. All right, folks. Please take the time to do some active recall.

If you haven't checked in already, make sure you check in. We're retweeting and liking the Free Code Camp post. Have a wonderful rest of your night, everybody. Get the help you need. I'll see you on discord. I'll see you in my stream tomorrow, and I will see you all on Thursday to go even a little bit deeper with all this stuff. Everybody have a wonderful rest of your day, evening, morning, no matter where you may be. And let's read. Hey. Yeah, yeah, yeah, yeah, yeah, yeah, yeah. Hey Good morning. Good afternoon. No matter where you coming from. Hope you all are doing well Welcome back folks. Welcome back to a wonderful Thursday.

Hope you had a good week so far Hope you had a good Wednesday. Glad you're here. You got some fun stuff to do As we mentioned Tuesday we're gonna run through adding comments to our binary upload boom our social media app and And then we're gonna jump into some groups and try doing it together. So I'm gonna do a speed run as fast as I can go through it, showing the quick and dirty way I would add comments. And then I'm gonna stop. So you have seen one, then you will do one together. And then once you start to understand it, you're gonna teach somebody else it. So we're gonna see one, do one, teach one, community taught folks. All right, everybody, glad you're in here. As always I like to start off with some Questions, let's start off with some questions. So if you got some questions, I got some answers Discord close Two weeks as a professional software engineer and I love it a congrats. It's huge Hey, it's God Make sure that I sent out the notification. Here we go. I didn't save it We don't get God or There you go Today's would you rather? Would you rather was would you rather teleport or read minds and it didn't go out?

It didn't go out. So in chat, would you rather teleport or read minds? The logs are getting heavy, but I'll keep at it. That's what I love to hear. Whoa, look at these teleports. That's overwhelmingly teleport. That's wild. That's not even close. I was instantly teleport. And I was like, if I could read minds though, I could probably make a lot of money and then I could buy the jet and then it's not as quick as teleporting, but I'm jet and you know what I'm saying? I don't know. But then I thought about how much fuel I'd be burning. And so like the teleporting came back out, this is a hard one. We might need it. We might need to, we might need to, to, to think about this one, but y'all want to teleport real quick.

Although teleporting, you're probably got big business, right? Like you could like, you could like, I don't know, just like teleport stuff for people around, like you teleport money around. I don't know. I love how I can't just have fun with it. I'm like, how can I make the most money with it? Looks like I was a good movie to immediately go to bank. I see all your teleport, all your teleporting, just to rob banks. I see y'all. Okay. All right. Speed run. Uber. Each job. That'd be funny. All right.

You got questions. I got some answers. Let's get in here. It's always good folks. A few seconds to get in here before we get started. Do I need a passport? Nice. You just teleport and past. Uh, I don't know. That's customs, but hey, I'm not a lawyer. So you magically get the powers to teleport. Don't listen to me Our part-time software engineer jobs a thing they are they're not as common There's also like freelancing or contract work, which could be more likely part-time in some cases. Yeah Oh, MVC's still okay with React. I mean, we're gonna extend MVC to be a slightly different paradigm once we add React though, but the core is still similar. Is it reasonable to look for a remote job and work it plus travel at the same time?

I mean, there's plenty of people that do it. But I think the first three months or so are pretty difficult as you ramp up. And some companies are more open to you being in different locations than others. Yeah. Do we have our banking answers memorized? Or should we have the key points in mind about the answer? I think having a pretty good I mean, it's kind of it's up to you how you how well you're able to spitball. I'm pretty comfortable if I have some key talking points, I can talk my way around it. But for a lot of folks, I think the deeper they have it memorized, the more comfortable they feel, right? They'll feel more comfortable. And if the talking point is already there, they feel better. And so I'm definitely in the camp of memorize as much as you can, but I know it's a lot. And so I feel like especially at least the behavioral questions the behavioral questions Absolutely need cold like absolutely cold because they just come up more often the technical ones as much as you want to go Yeah, I make a music app for my hundred hours project as long as it's a full stack web application go for it All righty, hey, happy birthday. What about a Spotify dating app? That's actually not a bad idea.

I think you could totally do it. Somebody did a Spotify app for the last cohort, so if I can remember who it is, I can connect you, but. How do I know if I qualify for a job when I don't meet most of the requirements? You don't click apply. That's how you, that's how you qualify. You don't click apply. If you network your way in any of the requirements don't matter anymore. Right. Cause once you're talking to a real living, breathing human being at that company, right. Real living, breathing human being at that company, your, your projects matter more, your ability to show the work that you've done matters more. And so the way we get around really weird requirements that a company you really wanna work for is to network our way in. Let's see, same groups as before for tonight? No, it should probably be new groups tonight just to work with more folks. But like I said, we're gonna take our time to get through this adding comments. I want you to see it, have a rough idea of how you might approach it, and then go right into groups working through it with some other folks as well.

And speaking of that, there was a raffle today. Let's go ahead and take a raffle that was in the newsletter. And I'm just gonna go ahead and copy this real quick. Gonna do random name picker here. Boom, 400 people before I mentioned it. Normally it shoots up to like 800 as soon as I say it. So I grabbed before y'all can run in there. All right, so we get a random winner. All right, Amy, Alyssa, whatever group you join on Remo, I will join you and we will work through adding comments together for the first half an hour or so. And then if there's any other questions, I'll answer them and then I'll keep my moving around. So I'm coming to your table first. And move this over here. Let me just write this name down. All right. All right, so tonight I want to walk through our binary upload boom, our social media app, but I want to add comments, and I want to go as quickly as I can, but before we jump into that we did some questions please go ahead and check in if you haven't already checked in you can do exclamation point check in to get the link here tonight click on that link and you'll go ahead and like and retweet that tweet so I know that you're here that's how I do attendance and since we're getting closer to the end of this cohort bad face we are gonna kind of chill the Class announcements and just take some time to highlight some really amazing resources that are always free, of course and Tonight I saw Primes data structures and algorithms course, which is phenomenal.

It's one of the highest quality Like tutorials I've ever seen run a masters really knows what they're doing prime tore it up. And so it's completely free nine plus hours just quality data structures and algorithm stuff. That's wild. So what we wanna do with our kind of check-ins over the next few classes as we wrap up is slow down kind of the 100 devs check-in normal class stuff and just start highlighting some resources that are amazing, completely free and will help a lot of folks in their career. So go ahead if you haven't checked in already it's IDU Attendance and you can always just follow me on Twitter and see it there or it's always on discord or you can just do exclamation point check in here. All right. Submitting your work. I said I would give you until today to get the hit list in, right? To get the hit list in. And so if you haven't submitted the hit list yet, go ahead and submit it in this form for me today, please. That way it can count towards your Hunttober submission. Alrighty. What did you think of the Zelda announcement? I actually haven't seen the Direct yet. I just saw donkeys dunking on the PS5 versus the Nintendo Direct.

But I did see that there was something at the end of it, but I haven't actually watched the thingy. Do you still have to pay for the front end masters though? No, that's the cool thing. You do not have to pay for front end masters. You do not even need to enter a credit card to get access to that data structures and algorithms course. I would never link your resources that you had to pay for. And I try my hardest to never link resources that require as credit cards. So for their front-end masters, you don't need a credit card. You don't even, you don't need anything. You just need to create an account completely free. Yeah. It's wild. Yep. Yeah. And they, they said they're going to make it permanent, that it will always be free.

which is a big deal for me. Yeah, so it'll always be free, no credit card. What else can you want? And it's a huge, like it's just a huge massive course with really high production value. All right, if you need that last bit of magic to fill out the hit list, don't forget to use it. And that's kind of it. Oh, sorry, back in review class, we're not gonna be able to do this Sunday. We're going to wind up doing a power hour and we're going to push the back-end review to the following Sunday. So we're still wrapping up the binary upload boom today. So the back-end review won't be this Sunday, it'll be the following. And this Sunday we'll do a power hour at our normal one o'clock Eastern time. So some folks still wanted to catch up from the last one. This gives me a little bit more time to prep for the next one. and so we'll do a power hour this Sunday at 1 p.m. Eastern time, and then the following Sunday we'll do probably like another six hours to finish it up.

Cool. All right, those are all the big announcements I wanted to talk through. What I wanna do now is do a speed run through adding comments, and then we'll get in groups and you'll do it yourself. See one, do one, teach one. All right, let's go ahead and make sure that our app still works. This is just the app that we've been working through. The code is on GitHub if you need it. Let's do npm start. All right, my server is running. I'm connected to MongoDB. Let's just play around and make sure that it actually works. Log in, we're logged in. We got some posts that have some likes. And what I would love to make sure works is that we can add like comments right here. So I want whoever's logged in to be able to leave a comment and I just wanna be able to see all the comments in like a list.

So nothing too, nothing fancy. We're just gonna go for it and go pretty quickly through it cause I just want you to have a rough idea of how to do it. And then the bulk of your learning, the bulk of you figuring it out won't be me live. it'll be you working in groups through it together. So let's think through adding our comments. We have our original kind of document. And so if we're gonna add comments, let's just add comments on individual posts, right? So I wanna add, right? I wanna add individual posts. I wanna add comments to individual posts. And so if I'm gonna think through about my comments, the thing that I'm gonna originally think through is just all right, I have my users, I have my posts, I think comments are gonna be their own collection and each comment will have a bit of information. There will be the actual comment itself, there will be maybe who made the comment and what post the comment is tied to, right? So we'll probably say, all right, we have an individual post. How can we tie all the comments on this to a specific post? If we look, this post has the idea 501, and then all these comments have a post idea 501.

So I am tying these three comments directly to this post by the ID. So just like we've been using the IDs with our posts, our comments will be their own collection with their own documents and will tie comments to a specific post by using the IDs yet again. So I'm gonna start off with that. I think for me, I like to start off with my data, right? I like to start off with my, like what's gonna wind up in the database and kind of work my way backwards. So where am I gonna start, right? Oh, you all thought I meant like comment the code, not like add comments to it? No, no, no, we're adding comments. It's like some of you will probably skip this class, like I don't wanna comment code. That's funny. I'm sorry, I should have been more specific. All right, you got that. Cool. All right, so yeah, we're gonna start with our model. So let's go to our code here and I wanna add a comments model.

So first thing I'm gonna do, copy my posts model and then in my models folder, we can just right click new file and we'll call this comment.js. I'm gonna paste my post model and requires mongoose. I'm gonna change this to comment schema. Comment schema. And do we need a title? No, but we do need a comment that is a string. We don't need an image. We don't need a Cloudinary. We don't need a caption. Maybe we keep the number of likes. Yeah, maybe we keep the number of likes. So I'm just gonna eat this to here. Right, maybe we keep the number of likes. We could have like a user, but we don't really need to know which user made the comment because you could eventually add that if you wanted to. So I'm actually gonna change this to like post like what post made this What post does this comment come from?

So the idea of what we saw over here where we had All three of these comments, right all three of these comments pointing to this post Well, how do I know which post these comments supposed to point to and so I'm just gonna go ahead and leave this as a post instead of the user. Yeah, this is a speed run. You can name it whatever the heck you want to name it when you get to work through it together. So I'm just going to leave it at that. I'll leave created at, and we'll call this comment. And we're exporting the comment schema. Cool. So now we have our comment model. And where are we actually going to wind up seeing these comments? Are we trying to code along? Hell no. This is me trying to show you how I might approach it and then you're going to do all the coding in your group. So you're going to see me do it very quickly. Minimal kind of explanation. You're going to see how it comes together and then you're going to do it together in groups.

All right. Let's see. All right. I feel comfortable with this. Comment, comment, likes, posts, created at, comment, comment schema. We're gonna see it under each post. So where are we actually getting the posts from? Let's go ahead and look at our posts controller. And we have like the get posts method. So probably what we need to do is when we get the post here, we probably also need to get the comments. So let's go ahead and what else do we need here? Before we can get the comments, what else do we need? Yeah, we're gonna need to load the comment model as well. So let's go ahead and do comment. And we're gonna go ahead and do models comment because that's our comment model.

So now we'll be able to pull in the comment model. And when we go to get posts, not only can we find the posts, but we can find specific comments. And I know that there's gonna be a lot of comments and we're probably gonna wanna sort the comments. So we actually have right here from the feed where we went and found all the posts. I'm gonna reuse that line actually to find all the comments. I'm gonna call this comments and we're gonna use the comment model to find the comments and we'll sort by ascending, but there's one other thing. I don't wanna find all the comments. What comments do I wanna find? Yeah, by the specific post. So if we look at our comment model, we actually do have a post property for the individual post that this should be tied to. So in my controller, I can just find wherever post matches. And how do I know what post I'm on? How do I know what post I'm on? Yeah, I'm lucky, I already have the post ID. This method is trying to render a specific post, right?

This method is trying to render a specific post, and since it's trying to render a specific I'm just trying to render a specific post. I already have that actual post that I'm on inside of the rec.params.id. So I can just throw that in here, right? And now I'm going to look through my comm, I'm gonna use my comments model to go to my comments collection. I'm gonna find all of my comments that have a post property of the current post that I am actually on. Right? And then I can sort them descending order, and I got the lean, so I'm getting just the POJO, the pure JavaScript object. Cool. And then the only thing else I have to do here is now that I have the comments, what do I need to do? I grabbed the poo, exactly. I need to add them to my EJS. I need to render them into my EJS. So let's go ahead and pass in comments, comments. Yeah, there we go. So inside of our EJS, we're gonna have a property of comments that are equal to the comments that we found in our collection that match the idea of the post that we're on.

And so we probably have to just go ahead and modify our post EJS now to use the comments. So if we go to our post EJS, we have like the caption and then underneath the caption here is where we can probably put the actual comments. Like it's just, we're just gonna maybe loop through and create an LI for each comment. So I'm gonna put a UL here and now I need to loop through all the comments that I would get back from the database and where can I find that loop? Where have we done a loop so far? Yeah, the feeds. Let's go take a look at the feed EJS. Feed EJS has the loop here for the posts. Like in the feed, we have all the individual posts. We went to the database, got all the posts, and then looped through adding each post. Well, we can just yoink this, because it'll be the same thing for our comments. So we'll just say comments here. And I'm not doing anything fancy. I'm not gonna do anything fancy. So I'm just gonna get rid of this, get rid of this.

And it's just gonna be comments. And what would be the property that we need? Comment. Yeah. Like if we look at our post model, if we look at our post model, we have a comment property. All right? We have a comment property. So when we loop through all of our comments, we're gonna pull the actual comment off by the comment property, all right? And we'll pull it off by the actual comment property. So now we should have a loop, right? We have a loop that should go through and pull off all the comments, cool. So now I have already been playing with this. So I have already added some comments to my database. And so you can see the comments are now showing up for this post, right? My comments are already showing up for this post.

I was already doing this earlier, right? So I know that this is working, that it's pulling comments from my comments collection. If we look, let's just run back what we did. We created a comment model that has a comment property. In our post controller, we said, hey, go to our comments collection, find all the comments tied to the post that we're showing on the page, sort them, and then we're gonna pass them to the post EJS to render. When we look at the post EJS, we can see that we now have this for loop that's gonna loop through and show all the comments, right? Show all the comments in the DOM. Cool. Oh yeah, I do have an extra. There we go. Let's save that and go back. Good eye. There we go. Oh, got rid of the extra carrot there. All right, so this is only doing something because I've already added comments to my database, but the next big step that we have to do is actually have users enter in comments, right?

Right now, we're able to grab comments that are already in our database, but none of you all will have comments in your database yet. So we need a way to insert comments. What do we need if we want our users to be able to make a comment? Hey, Juicebox. Yeah, we need a form. Where do we have a form before? Where have we had a form before? Yeah, when we created a post, which is on the profile. So if we go to our profile, we actually have a form here already. I'm just gonna grab this whole div that has the form in it. Let's go back to our post EJS and probably just right above our comments, I'm gonna add the form. And for our form, we don't need any of this stuff. We'll actually change this to add a comment. We're going to have to change the action. We don't need ink type multi-part form data because we're not uploading a file.

And actually, if you like leave that, you might run into some trouble. You're going to have to do a work around. So I'm going to eat that. And then we'll change this from title to comment. And we'll change the ID to comment. And we'll change the name to comment. So now our form has a comment input. And I don't think we need anything else. I'm gonna get rid of this, get rid of this. And I don't even need the value of upload. It's just a submit button now. Cool. So I just kind of took the form that we already had in our profile, took away the stuff we didn't need. And now the only problem that we have is that this action is not correct. And so what I'm probably gonna wanna do is make a route specifically for comments, right?

Make a route specifically for comments, right? So I'm gonna say comment, create comment, Comment and then You know what how am I gonna know? How am I gonna know what post I'm on? Like if I add a comment to every if I had a comment form to every single post, how am I gonna know? Which post I'm on Yeah, I'm gonna need to plug in And we need to plug in the post ID. So the cool thing is, we can just plug it into the form. Even though this is a post, we can still plug in the ID. In our profile EJS, where we actually have our loop here, we can see that this is how we plug something into the URL. I'm just gonna copy that. And I'm gonna plug that into my post EJS here. Boom. Now what this should do is when this post page renders, right, when the post page renders, it will now have a form and that forms, that forms action will have a new route that we don't have a router for or a controller for yet. We haven't gotten there. We'll have a new route of comment, create comment, but we should be plugging in the current post ID. Remember, remember our post controller?

We passed as part of the post controller, all the info about the post and all the info about the comments, right? And so we passed all of that in to this post render. So when I look at the post EJS, I know I already have access to the ID of the current post. And I was gonna get rid of the space because sometimes that causes me trouble. All right, let's save this and let's see if it actually works. So let's refresh and let's see, post is not defined. Post is not defined. That means I probably called it something different in my controller here. Oh, it's called post. Post. So I have to change it to be post here. Post. All right. Let's save it. Let's go back.

I cannot read properties of undefined. There's no loop. Oh yeah, no loop. And what did we pass in? Is it just post ID? Yeah, there's no loop, right? If there's no loop, it's just the post. Remember, when we were looking at the profile.ejs, we were looping through. So it was post and we needed the index to loop through. So now we're only passing one singular post. We don't need the index because there is no index. So that should be it. Let's save that. Let's go back, refresh just to make sure. Boom, all right.

So now we have a comment form. And if we inspect it, if we inspect, look at the action. Look at that action. That action's pretty tight. Look at that. So we have comment as the base of the route, create comment, and we still have our ID as part of the action. So when I submit this post When I submit this post there will be sent comment create comment and That that that ID that I can yoink so now We have what we need. I think to load This post page we have the actual form we have the loop that's actually showing us the comments Right? So what we need to do now is build out the route to be able to post a comment. So we have to go all the way back to our server.js because we need to add a new route. Will that post, like, sorry, will that comment be on our main routes, our post routes, or do we need a new route entirely? Yeah, let's make a new one. Let's doink, boop, and call this comment, and we'll call this comment routes. Cool, and then we need to come up here and actually require the comment routes. So we'll call this comment routes.

We'll just call the name of the file comments. Cool. And so now we need a new route file in our routes. So I'm going to come down here, new file, comments.js. And I'll go to our post routes. I'll copy everything. I'll come to our comments.js. I'll paste it. Now we have a routes for our comments. Do we need molter? Nah, we don't need molter. Do we need our post controller? We're probably gonna make our own comments controller. Yeah, we're gonna make our own comments controller. So we might as well do it while we're here.

Comments controller requires controllers comments. Cool. And we can keep our middleware. And then the only thing that we're so far adding for our comment routes is what? What's the only thing that we need for our comments route? Yeah, we only need a post. We don't need a get, yeet. We don't need a put, yeet. We don't need a delete. And we say bye-bye. Cool, I just need the post. And what is our route for the post? We're already on slash comment, right? We're already on slash comment, so we don't need to worry about that. What's our full route?

For right now, for right now. You might, when you get into your group, add the leading, you might add liking or something like that. But for me, I'm just, I just want to create comments. Yeah, slash create comment. Cool. Slash create comment. And I need one other bit of information. I need the ID, right? I need the ID. I don't need this upload because I'm not uploading a file. And we're going to call this comments controller. CommentsController, and we'll create comment, not post. Cool, so now we have the router set up. We should now be able to, when we submit that form, the server.js should send us to this router. This router should hear the create comment ID, which is a post.

It should then point us to our comments controller with the create comment method. So we have to create that controller. Controller, controller, blah, blah, blah, blah, blah, blah. Here's our controllers, new file, comments.js. Cool. And I was gonna grab my post controller, copy, and I'm gonna just go to my comments and paste. This is a speed run folks chats. I am paying attention. I got, I got, I got shit to do. This is not in the repo yet. No. Cause you all are doing it together in just a few minutes. I'm going for the world record, baby. You can't hold me back. All right.

I don't need any of this except for, we're gonna call this create comment. Cool. I don't need any of this cloudinary stuff. Yeet. I don't, and we gotta clean this up too. Mine's a title. It's not a title, it's a comment. So I'm gonna need comment. and I'm gonna need comment from the body. I'm gonna do rec.body.comment. Remember, if we look at the post EJS, the post EJS now has an input with the name of comment. So when this form submits, the input, whatever values in this input will have the rec.body.comment. So when you rec.body.comment, I don't need image. I don't cook, I don't clean. Let me show you how I got this ring.

Actually, I do a lot of cooking. Anyway, let's go ahead and see Cloudinary ID. We don't need caption either. Actually, let's look at our model, see what we actually need. We need comment, we need likes, and we need post. All right, so we need comment, likes, and post, right? Comment, likes, and post, and the created at the default. So we don't actually need to submit anything for that. Comment, likes, post. Control, so comment, likes, we already have hard-coded. And so we'll get rid of caption. And then here we need the post. How can I grab the actual post that we want this comment tied to? we passed in the ID, right? If we look at the route, we passed in that ID as part of the URL.

If we look at the form, mm-hmm, all right, if we actually look at the form, look at the form, the actual post ID, right? The actual post ID is already in there. The actual post ID is already in there. So we can just grab that ID as part of our query parameters. So we can just do rec.params, that ID. Just like we grab it for any other place. Where we have seen in the profile, right? Like in our profile controller would have seen that. Let's take a look at our post controller. Let's take a look at the post controller real quick. We grab the ID from the parameters. That's all we're doing here. So we're gonna be able to grab that ID, be able to grab that ID from the URL, and store that as the post. So now whenever we create a comment, we have the comment that came from the form, we hard-code it likes, we pass in the ID from the URL that is the current post that we want this comment tied to, and then it does the created at by default. We don't need that here.

I don't think I need anything else here. So, get the step in, boom. And I don't think I need like, I don't think I need delete. Cool. I just need to create comment and redirect. Oh, I want to redirect them back to the same post. I want to redirect them back to the same post. We'll be that route. We're already on there, right? So it'd be post, right? We need to redirect them back to post. And then we'll just say, uh, rect params that ID, right? There we go. That should take them back to slash post slash the actual ID of the post. Slash post, actual ID of the post.

Yep, that's the URL. All right, let's save this. Oh, and I'm using the wrong model. It should be the comment model, right? Because I'm in the comments controller. I'm trying to create comments. That requires the comment model. and I required comment. I don't need post in here and I don't need Cloudinary in here. Okay. Okay. All right, I think we are, I think we're close. Comment, comment, comment. All right, so let's step through it. They submit the form.

This form is a comment route, which takes us to comment routes, which requires us to go to the routes folder for our comments route file. We're requiring the comments controller. We're listening for slash comment slash create comment. We're grabbing the ID using the comments controller and the create comment. We have our comments controller with the create comment method. Yeah, that's a good idea. We should, we should say comment has been added. Comment has been added. So I think that, and then we redirect back to the same post. I think that might be able to make us make, I think that might be making posts. I start making comments. Let's see. I'm just gonna go back to like the beginning. Log in. Let's go to here.

There's already one comment. Oh, show. Let's go. Hold on, 10 second warning. 10 second warning. Five. I Alright, let's go. Let's go. And actually, let's, we got to test something though. Let's go to a different post to see mirror. Alright, cool. So you can see that the comments aren't showing up. The comments aren't showing up for mirror, right? So it's only the, the comments are actually tied to the individual posts. We can see another one in test or on a Thea and we can see that here we have Fosho and Betty.

Cool. All right. Stop the clock. What is that? Under a minute at least. Adding comment speed run. Now. There's a lot more that we could do. And I'm sure there's quite a few things that we could clean up, right? I'm sure there's some things that we could clean up. You might, when you start working in your groups, want to maybe add something like likes, but your goal is to do what I just did. I went through this super fast. There's no way that if you've never added comments before that you should have been able to catch everything that I just did, right? That's kind of the point. I want you to see one in all of its glory very quickly.

And now you're gonna get into groups, right? You're gonna get into groups and in your groups, you're gonna try and build comments as well, right? Now I will push this code to GitHub in like a half hour, in like a half hour, right? In like a half hour. Um, but you come together as a group, get your code base working. So that means make sure everyone has able to get MongoDB working. Uh, make sure everyone is able to get Cloudinary working. Right. And then add your comments. All right. I'm going to step through it one more time, just so we can see, and then you're going to work in groups. this will be your homework due next Thursday is to actually add the comments. So let's go ahead and just step through it real quick. We added a comments model, right? We added a comments model where we added a comment property, a likes property, a post property, and it created that property.

The post property is like the post that the comment is tied to. In our post controller, when we go to render a specific post, we're also grabbing all the comments that are associated with that post. We're passing all that to our EJS. So when they load the post page, now not only are they loading all the stuff about the post, but they're adding the form to add a comment and then all the comments tied to that post. We'll notice that our form, when we submit it, has a new route, a comment route with a create comment and including the ID of the post that we're currently on. So for that to work, we need a new route for comments in our server.js file. We're gonna have a router specifically for our comments. We only did one thing with that route, which is creating a new comment, which is a post. We say, all right, here's the action from the form, create comment. We're grabbing the idea of the actual post that we were on. And then we're going to use that comments controller, right? That comments controller. And we are going to go ahead and create a comment. So comments controller, create comments, go to our comments controller. What we do is we use the comment model.

We're going to create a new document using that model that has a comment property that came from the form, likes that we're hard coding, and the specific post that we're already on that we're pulling from the URL. When we're done making the comment, we redirect back to the actual post page and we should be able to see the comment that we just made. Boom. All right. Let's go ahead, you know what? Let's actually do same groups as last time, which might make it a little bit easier Just to kind of jump into it because I didn't do any post pairing. Let's do same groups as last time Go over to Remo. If you don't see your group, that's okay go to Let's mix it up. Let's mix it up We won't do same groups as last time join Remo There are two Remo groups. I recommend everyone try the first Remo group first, right join the first Remo group first join a table Introduce yourself, right, and start trying to add comments. If no one sits at your table, go find a different table. Feel free to move around a little bit. If your table already has some folks that have done it, great, have them walk you through it, right? The beautiful part here is that no matter where you're at technically, you should still join us tonight and try and work through it with the group. If you are already got this down lock, you already attempted it for homework already, your job is to teach somebody else how to do it.

See one, which we all just saw, do one, which we're about to do together, and then we want to teach one. So if you finish it, right? If you finish it, teach the rest of the folks in your group, work through it together, make sure that you're spending some time not to go deep. As a general rule of thumb, as always, if you can't be kind, this is not the community for you. Please respect the idea that not everyone is super comfortable with the back end yet. We're all here to learn. We're all here to learn We're not here to add some random wild stuff that you found on the internet into the mix We're not here to add react to it. We're here to do exactly what we just did live together We're gonna work through it together if you already are ahead great show somebody else how to do it if you feel like you're you're struggling with the back and great join a group and and ask a ton of questions. The point is to learn. It is not to produce beautiful code. We're all bad as we write bad code. Please, the point is to walk away having a better understanding of how we might do comments. The VOD will always be immediately available. So you can always kind of come back and see how I did it in real time. If you need to, I'll push the code to GitHub in a little bit.

And once you get into your groups, Minewolf did a stream yesterday where they got Cloudinary and they got MongoDB working. So if you need that, there you go. So everything you need is here on the internets. Now we're all going to go on Remo. Remo has been updated. Really try and use Remo first, just because you can be a little bit more collaborative. It'll be smaller groups. If for some reason, like give it a good Remo try. If you give it the good 100 devs try, for some reason it doesn't work, then please go into a voice channel. But the voice channels get huge and you're not gonna get as much from it in the voice channel as you would on Remo So try Remo first the links are on Discord they're on discord and your homework if you're trying to do hunt Tober your homework is to submit a pull request With your version of comments on this repo by next Thursday So yeah, I'm not gonna push my code. I'll push it. I still want you to do yours though. All right, so you should probably take a break. Give yourself five minutes and then jump on Remo, right? Jump on Remo and then start getting to it.

I'm gonna be on Remo for a good while. I'm going to join, um, who won the thing again? Let's see. I'm going to join, uh, AMA, Alyssa's table first. So. You, I think you might be pretty popular this evening. Uh, we're going to walk through it together and then, uh, it always pays to open the newsletter folks. Cool stuff. I got a lot of really cool stuff coming for the newsletters upcoming up soon. So if you haven't opened it, go ahead, open the newsletter. Uh, you never know what you might find. All right, buddy, this is a speed run. It's not meant for you to fully understand it. That's what we're gonna do right now in groups. If you need the links, let me just throw them in chat while we're all still live.

But the links, of course, are always in the Discord message. Let me just throw them in here real quick. So folks have the Remo links. And then we're not gonna do a raid, we're just gonna stop because you need to take a break and you need to go and get on Remo. So there we go, there are the links, folks, in case you need them. All right, I'll see you on Remo. Have a good rest of your night. Work hard, get these comments working, and I will see you all on Sunday for a Power Hour and next week React, folks. All right, let's get into it. Peace.

End of Transcript