And today we're gonna work on something that I didn't gets really cool.

We're going to make our search function a lot better because we're gonna use algo Leah, and I'll explain what that is.

But we're gonna use algo leah to handle our search.

Um, like getting all the data going through it all and providing the results, and we're just going to display it with react.

So that's the plan for today.

First of all, I just want to say thank you to everybody yesterday who provided some encouragement and support to me on Twitter and Instagram.

So, as many of you know, I launched this project last week, the one that we've been working on for so long.

Um and so I got a lot of positive feedback, but I did get some negative feedback, and some of it was very constructive and good, and I'm okay with that.

But some of it was, um, a little bit more mean spirited, I guess, and didn't really even contain anything constructive.

So that was kind of getting me down.

And I think I have just been stressed because I've been working a lot.

Ah, lot more than unusual.

I wouldn't feel unwell.

My Even though I've have been trying to exercise regularly, I think my immune system was just wearing down.

So all these factors just combined And the point of yesterday morning I was just feeling down and it just was like, you know, little bugs.

And the site kept coming and kept getting comments from people through email on social media and things that you negative feedback.

And so I knew, like, you know, I just I know I am.

And with my history of depression, I knew I got to do something or else I'm gonna get really depressed here.

I'm not gonna be able to function.

So that's why I am I reached out to you all on social media.

Just I'm just You all responded just overwhelmingly.

And I thank you, Thank you.

I really appreciate it.

And it definitely helped.

It helped me to feel a lot better.

I mean, some of the messages were just amazing.

And there were some people, like I had no idea that some people even knew who I was or watched the show or that I impacted them at all.

And it was awesome Thio here that so I don't want to spend too much time and not do any coding.

But I just I had to say thank you to you because that it really meant a lot to me.

And I'm gonna be going back and looking at those messages at probably many times.

Thio, you know, just give me some motivation and help me.

You stay focused on, you know, just trying to do the best I can.

So anyway, um, let's see, we have a lot of people here, so I'm sure there's new people.

Let me explain briefly what's going on here?

I'm a friend and developer, employed full time at a small university, and this is me doing my everyday work.

I'm in my office right now.

I'm about to work on a project the main website for this university that we just launched last week.

And so this is not a tutorial, But I do my best to try to explain what I'm doing.

And I'm welcome to any questions that you have Just let me know.

I'll take breaks periodically and answer questions at the end.

If there any questions left all answer all your questions.

Um, so hopefully you can still learn something for me or from the other people in the chat.

Um, even though, right, it's we're kind of going in the middle of the project.

We've been working on this project for a really long time.

This is video 98.

Um, so, yes.

So that's what we're gonna do.

I'm gonna step a timer here in just a minute, and we're gonna start with the code, and I'm gonna kind of ignore the chat for a little bit while a code on.

Then I'll come back to the chat and catch up on things.

So let me just very briefly just check out who's in the chat now and say hello.

Hey, I see a lot of you.

You're saying hi.

How's it going?

Um, I see there some questions.

There are a few questions about why I'm using Al Goglia over elastic Serge.

Um, so let me address those since it it's definitely gonna deal directly with what we're doing.

Um, I've taken truth.

Um, I'm really impressed with Al Goglia.

And yesterday I already put a bunch of data in There s so I like what I see.

So I'm open to Elasticsearch.

Maybe in the future, if I learn more about it and figure out that's a better way to go, I'm definitely open to it.

But for now, this is a feature that I really want to get live as soon as possible.

I'm not satisfied at all with the search that I created before it worked well for some of our previous projects because there was a small amount of data.

But with such a large amount of data with this site, it just does not work.

There's there's too much.

There's too much data for a user to be ableto find what they're looking for you.

The search we did before was just very simple.

If that word existed in that particular post, it would show up Well, we're talking about thousands of posts here s O.

A user's not gonna be able to scroll through all those s o.

This is gonna help and you'll see.

I'll show you what we could do with this data in a little while.

So if you're still confused about what a goalie is or what it's gonna do, just stick around you'll see it in action.

Okay, so any of the other questions in there right now I'm gonna get to those after we do our first coding session.

So let me switch my screens here.

You could see this is the site.

This morning, I added a feature where different images would show up S so it's kind of just a random as to what image shows up.

Just a simple, uh, you know, math math dot random and, uh, javascript.

And I just put all the images in an array, and so it just doesn't randomly grabs a.

You are all from the array and puts it in Is the background image.

So if you click, you get different images.

Sometimes you click.

And it's the same one, obviously, because it's random, So just have some different.

I had some feedback on the images, and they said to be nice to get images from different parts of campus and about different things going on, I did.

I definitely I got the most vocal feedback, and it's actually came from some students where, um, we're actually they said, Well, you know, we're a Catholic college, but it doesn't really say anything about us being Catholic on the main page, except for this little thing right here.

And that was actually true.

Uh, it was kind of not really my intention t do that.

I just kind of wanted to highlight all of our degrees cause I wanted people to know we have really good academics here on from our research.

It showed that that was an area that we could improve on in terms of the public's opinion of our university.

But I threw some pictures in there.

See, this is our original picture.

And actually, from what I heard these two women, I saw this this picture, and we're sharing it on social media, and we're excited that they got on the website, so I actually don't know who they are.

I just This picture I thought was really great to put on here, shows women and stem.

Um, and, uh, they just looked really joyful in the picture, so I thought this would be a good picture to use, but I'm glad that they like it s o.

Anyway, let's, uh let's get started.

Let me go.

Try and find my timer.

Come on.

Let's see.

Okay, that's better.

Uh, I'm gonna start up my server.

Let me make this bigger.

Let's start up our death server.

I didn't get pool this morning, so we're all up to date.

I've been working a lot from home.

Um, so I had a ton of changes.

Uh, lately, up I it seems like I'm busier now.

After the site launched than I was before the site launched, we ended up finding a lot of broken links because there were multiple euros for each page that I didn't really know about.

So that was that was a little bit crazy.

So I think we found almost all the broken links.

I mean, I'm sure we'll find some more, but, um, I'm trying to get some consistency and only having one.

You Earl Goto one pace and not have all this stuff everywhere.

Okay, so you're deaf service running now.

I'll be able to start up and rock.

I'm gonna copy and paste the link in the live shot right now, and that's gonna let you all check out the changes we're making to the website in real time.

And you'll be able to inspect it in everything right there on your machine.

So I guess I'll go over here.

And this is the life.

Say this Is that Franciscan dot e d u u ude.

Check that out if you want.

Um, but I'm gonna go to a local host right now, and I'm gonna put this on a different branch.

Let me make this a bit bigger.

I think that's probably still too small.

Okay, so down here in my terminal and I'm using visual studio code.

I know usually people ask about this, and I just have the little terminal option down there.

So if you go to view, you can open your terminal right there, and I I always have to open one to run the damn server and the other one for commands.

Usually, like, get commands.

But I'm gonna go to a different branch right now on DDE.

If you're not familiar with git, it's basically like I can test out some things, like a separate version of my project, without messing up my mane version that that I'm gonna push to my life server at some point.

So this will let us work without having to worry about breaking something, because if we do, we can always switch back the master branch, make it quick change if we need to write.

So that's that's why I'm gonna make this branch.

So I'm gonna do it.

Get check out with a B flag.

That be flag is what's gonna make the branch checkouts actually gonna switch us to the branch.

So we're combining to get commands.

And then after that, I just take the name of the branch that this is gonna be, uh Let's just call it search.

Hopefully, hopefully I don't have a bridge called Serge.

All right, Nice.

I thought I might So we have a new branch called Search.

And now what I'd like to do is I'm gonna use a package from Mongolia called React Instant Search Eso I'm just gonna copy and paste what they have in their instructions and get so that's your ad React.

Instance Search dome, And then I'll go, Leah, Um, a goalie.

A search.

So while that's loading up, I'm gonna paste my copy and paste into the live chat.

The link to this, uh, depository that.

Okay, so if you want to check out this this package, there's a link right there.

Also let me give you the length to the documentation so you can check that out as well.

But second link is the documentation.

And then, well, go.

I'll show you the alveoli, a dashboard, and what's going on over there in just a minute.

All right, so all of this is now loaded, and I'm going to try to do just something really basic.

First, to make sure everything works were definitely I'm gonna have to set up from a P I keys before we'll work with the data that I brought in.

So let's get that running, and I need to I'm just gonna copy and paste the basic getting started code so you'll see it in a second when I pasted in here on Let's let's just do this on the search page.

So we already have a search page.

But what I'd like to do here is, I guess, add this search in Mmm.

Let's get rid of, you know, let's not get rid of anything for right now.

Let's just add this in and then we know we'll probably end up getting rid of most of this.

But for now, I just want a page where we can view what's happening.

So right here in this grid where we have our original search.

Whoa.

And I tried to copy everything in there, and that was that was a bad move.

Okay, let me do this a better way.

Okay, So I'm just gonna copy this component into in here hoops, and I don't even need this.

Okay, so we have this instant search component, and we're gonna pass in the index name and the search clients so I don't have an index called Best Buy.

I'm gonna have to figure out where my index I do believe I have in the next cold faculty or something like that.

Uh, let's see.

Yeah.

W p Post faculty.

So let's use that.

Okay, so I'm gonna This INDU index contains all of the data we have on faculty so over faculty profiles, This one's kind of cool, because we should also be able to pull images.

Since we have featured images, eso hopefully we can get that working.

And then our searchers also contain little thumbnail images as well, Which is kind.

It looks kind of cool.

Looks fancy.

Um, now our search client, we need thio pass in some data for that.

And I'm gonna need to probably put that in a dot and file, so I don't put all of my a p I keys out there.

Let me see what I need.

I may need search Client X.

So I think you punished you.

All right, um, if you're falling along, let me.

You know what?

Let me bring some of this over so you can see what I'm looking at.

So here's Oops.

Not that.

Or am I looking?