So here you can see we have an incredibly simple and uns styled search ui, but it does in fact work, which is great. Okay, now I wanna take things to the next level. Lemme show you how First up we can get some basic styling for free. I'm gonna have a look for instantsearch.css. And this is an optional package that, uh, comes with Algolia and is perfectly set up to style those Algolia instant search components.

and is perfectly set up to style those Algolia instant search components. So let's go down to instant search and you'll see we have two themes to choose from Algolia and Satellite. And if I scroll down, where are you? Where is the uh, installation? Here it is. We can of course install it through npm So let's do that now. So I will paste that in and we'll give it just a second

through n pm So let's do that now. So I will paste that in and we'll give it just a second and then I'll start up my VE server again. And now let's do two things. First up, let's go to our routes file. And yeah, a few episodes ago when we were setting up server side based search, we were reading the query string, building the params and performing the search. But instant search is going to trigger those API calls for us automatically, which means

But instant search is going to trigger those API calls for us automatically, which means I don't even need this, which is really cool. I can leave it just like this, which is great. And let's get rid of the client import. One more time. Sloppy. Alright, let's keep going. So now I'm gonna return to search/index and uh, yeah, let's do two things. First up, type instantSearchAdapter. I don't know, I don't really like that.

First up, type instantSearchAdapter. I don't know, I don't really like that. Let's just stick with adapter a little bit cleaner. Okay, next I'm gonna pull in that instant-search.css file. And yeah, even though it's CSS I can just import it directly here and it'll be, uh, bundled and referenced properly. So import instant-search.css, and you'll see we have a themes directory along with, um, well we have the full versions and the minified versions, but really just two themes to choose from.

well we have the full versions and the minified versions, but really just two themes to choose from. Let's have a look at Algolia.min.css. Okay, so if we have a look in the browser, yeah, you see what I mean? We get some styling for free. So as a quick refresher, if we were to comment that out, this was the default and all we have to do is import that file and it looks a little better and we don't have

and all we have to do is import that file and it looks a little better and we don't have to focus on it too much, which is great. But there I would like to see a little more spacing in between, uh, each of these components. So here's what I'm gonna do. Um, if I scroll down, I can add a class name here and of course that'll just be applied to the top level reparative. So I'd like to use Tailwind here.

to the top level reparative. So I'd like to use Tailwind here. So I can do things like space-y-2 to add a little space and between each, but of course right now it's not gonna work because I haven't referenced Tailwind. So yeah, let's just do this rather than taking five minutes or so to officially install Tailwind and configure it and set it up with our each server, eh, let's just reference it on a CDN.

and set it up with our each server, eh, let's just reference it on a CDN. It's good enough for a demo. Okay, so let's go to my entry point. And yeah, right up here I'm gonna reference tailwind through its CDN, which is cdn.tailwindcss.com. So now I get access to all of the default, uh, classes for free, which is cool. So now if I save this and I switch back, you'll see we do have some space in

So now if I save this and I switch back, you'll see we do have some space in between each of these, which is good, but now everything of course stretches to the edges of the window. So maybe while we're here, let's just add some default padding, like px-8 on the left and right and maybe a little, uh, on the top. All right, so that'll just push it away.

and maybe a little, uh, on the top. All right, so that'll just push it away from the edges a little bit. And I think this looks good. Okay, so now for example, if we were to search for Taylor Otwell's favorite book, well this is working and this is good, but notice I see Twilight four times, which is confusing. Uh, and of course in real life these would be clickable. It would take you to, uh, for example the book details page.

Uh, and of course in real life these would be clickable. It would take you to, uh, for example the book details page. But right now I don't know the difference between these. So let's do this. Let's switch back to my view, view and write down here. Let's do this. Let's wrap this within, hmm, an h3, like so, and that way I can give it a class of font-bold. So if I come back and refresh, all right, now I see that. Next I'd like to know the author or authors of the book. So let's do this. Um, I never know what to put here.

Next I'd like to know the author or authors of the book. So let's do this. Um, I never know what to put here to be honest, in terms of markup, a paragraph tag that's probably not right. span feels weird, even div feels weird. But sometimes I'll just do that 'cause I can't think of something more appropriate. Anyways, uh, within here I'm gonna use once again our highlight component. So I'll just copy that.

highlight component. So I'll just copy that and we're gonna highlight the authors. All right, come back, give it a refresh. And now I can see who wrote it there, which is great. Okay, next up, um, hmm, maybe the publishYear. So maybe we could do something like this. We could say like authors colon, and then we could reference it like so. And then we'll do another one.

and then we could reference it like so. And then we'll do another one. And this will be publishDate, maybe something like that. Now in this case, uh, we would never have highlighting for a date because we're not querying against that. So instead I can simply, uh, just echo it out. Uh, so what do we want here? And remember, if you ever forget, just do something like this, uh, maybe right here within pre tags or

just do something like this, uh, maybe right here within pret tags or code tags, just spit out the item, switch back and have a look and let's explain this so we can see it a little better. Alright, so yeah, still a little messy, but it's good enough for our needs. So yeah, I can see we have the authors and I also want the publication here. Okay, let's switch back. So now we can get rid of the pret tag.

Okay, let's switch back. So now we can get rid of the pret tag and we will reference the items publication there. And yeah, I think that should do it. So now if I switch back, sure enough if I search for twilight again this time. Alright, now we have a little more feedback here. Alright, this is the, the famous one and this is uh, another one. Here's one by uh, Aaron Hunter.

and this is uh, another one. Here's one by uh, Aaron Hunter. Uh, this is very helpful, which is great. Okay, so now I'd like to add some faceting into the mix. Let me show you how. First, if I switch back, let's get rid of this superfluous, uh, search heading. Yeah, just a little bit cleaner. Okay. Alright, so now here's what I'm thinking. The search box, the stats and the hits, that's basically the main content

The search box, the stats and the hits, that's basically the main content and I want that displayed to the right. So here's what I'm gonna do. I'm gonna wrap all of this within a div, like so, and then I will have, uh, a sidebar effectively for all of the various facets, right? So now what I could do is maybe wrap all of this within a wrapper div like this reformat. And this will be our grid container, of course.

of this within a wrapper div like this reformat. And this will be our grid container, of course. So I could say grid, uh, grid columns 12. And we can say for the sidebar, this would be column span 3 and 3 plus 9 is 12. So this one can be column span 9. It's not responsive, but it's good enough for a demo. All right, let's have a look in the browser. Alright, and yeah, this is close to what we're talking about here.

Alright, and yeah, this is close to what we're talking about here. So we have our sidebar section to the left and our main content to the right, but still I think it's a little bit wide. So why don't we do this on our reparative. Let's set a maximum width maybe way up here. We'll say maximum width and yeah, this is arbitrary, maybe 6xl. And then we will set the margins to auto.

and yeah, this is arbitrary, maybe six-xl. And then we will set the margins to auto. So now if I come back and refresh, yeah, you know what, I don't have much real estate here. Yeah, maybe something like that. That'll do pig. Okay, so now let's work on our facets. And here's the cool thing, it's just kind of automatic. If we make use of it, it's gonna work and I'll show you how. So let's get rid of our heading and yeah, uh, in the last episode when we pulled in this

So let's get rid of our heading and yeah, uh, in the last episode when we pulled in this package, we gained access to all of these various, uh, instant search components, right? And one of them is called refinementList. And yet this is just their name for uh, faceting or categories. So the attributes, which one do we wanna do here? authors, right? So let's say attribute is authors. Alright, so check this out.

Authors, right? So let's say the attribute is authors. Alright, so check this out. If I now switch back to the browser, there we go. It just works with one line of code. We can now filter by the author. Let's give it a shot. Once again, Taylor Ott Well's favorite book. And then this is the one we care about and it further filters it down. We don't have to implement that logic manually, which is really cool.

We don't have to implement that logic manually, which is really cool. Okay? But I do see maybe some of the default styling isn't great here. So let's do this, let's inspect the elements and maybe once again we can sort of fake it. So it looks like we have a label that wraps the checkbox and then the author name and then the count. Yeah, so once again, I'm just gonna add a little gap in between them.

Yeah, so once again, I'm just gonna add a little gap in between them. Maybe like this, let's just add some manual CSS at the bottom here. So I will reference that class and say display: flex; and maybe gap: 2rem;, but you know, and that's probably too much, isn't it? So let's do 0.5rem, uh, basically a little space in between the checkbox and the label and then the label and the count.

between the checkbox and the label and then the label and the count. Close this out. Refresh. Yeah. And now we have a little spacing, but maybe I'd like some padding as well. So maybe on the top and bottom we'll do, I don't know, very little maybe 0.1rem and then zero on the left and right. And this is good enough, uh, for my needs. Okay?

and then zero on the left and right. And this is good enough, uh, for my needs. Okay? Now typically, uh, we would want this in a panel of sorts. We might want a heading. And as it turns out, there is a panel component we could reference. So I could do something like this, a is-panel and I'm not sure if they have styling for this, but it gives you some consistent class names that you can then reference, which is cool. So if I give this a refresh, yeah,

that you can then reference, which is cool. So if I give this a refresh, yeah, we're not gonna see any difference here. However, if we scroll up, you can see it does create this diff with a class of panel-body. Now, as part of this we can also reference things like headings. So let's see, yeah, right here. So if we have a slot for header, then we can spit

So let's see, yeah, right here. So if we have a slot for header, then we can spit that out right here. Okay, let's do that now. So within our panel we're gonna have a slot for our header and we'll say authors. And in fact, let's just put that all on its own line. Alright, so if I come back and refresh, yeah, now we have a little section there, which is great.

and refresh, yeah, now we have a little section there, which is great. Now you'll notice that this line is going all the way to the edge and that's because we created a grid, but we didn't have any gap in between. So once again, this is arbitrary for now I'm just adding a gap of 8 and that looks good. Okay, so if nothing else, this is pretty amazing. Most of our energy in this video is just basic CSS, but the actual functionality you almost get for free.

Most of our energy in this video is just basic CSS, but the actual functionality you almost get for free. And it's so awesome that we have a typeSense adapter so that we could use it with Algolia, but we can just as easily use it with typeSense. So let's look for darkMatter and it instantly filters everything down to what we want. This is exactly what we want. Alright, so let's finish up by doing one more. Maybe I'm searching for something like Wizard,

Alright, so let's finish up by doing one more. Maybe I'm searching for something like Wizard, but I'm not sure who wrote it, but I have a general idea of when it was written. So maybe we could add a facet for the, uh, publication year. Let's see how, let's come back and I'll show you two steps. We could do something like this publication year, but well, if I come back and refresh, uh, that's not gonna do what we want. Let's inspect and have a look.

and refresh, uh, that's not gonna do what we want. Let's inspect and have a look. We can see, could not find a facet field named publication_year in the schema. And that makes sense, right? When we defined the schema, I didn't set the publication_year as a facet. Now if you think about it, even if we did, we would just have a massive list of years. You know, if we search for something generic like the, well,

we would just have a massive list of years. You know, if we search for something generic like the, well, like there's, there's a book with the, in the title in every single year, so it's not very useful. So instead I, I'd like to have more of like a range, more of like a numbered range books between 1950 to 1970 or 1980 to 2000. You get the idea. So in those cases, here's what we can do instead. So I'm gonna reference Algolia InstantSearch,

here's what we can do instead. So I'm gonna reference Algolia instant search, numericMenu in this case. All right, so check this out, let's reverse these. The attribute of course is publicationYear, but the items is going to be or are going to be an array that we build up on our own. So for example, if I did something like this, if we start with label all and I don't specify a range, well it's gonna give me, all right,

with label all and I don't specify a range, well it's gonna give me, all right, it's gonna gimme everything. So if I switch back, sure enough, we have this, but yeah, we have the same situation again where there's no space in between them. So let's see how we might clean this up. If we hover over it, we have our aside and it's split into these panels, right? So maybe once again, on the aside itself, why don't we just

and it's split into these panels, right? So maybe once again, on the aside itself, why don't we just say space Y4, something like that, just to give a little breathing room. And that's good enough for me. Okay, let's add another one here. So let's do this. So why don't we do 2000s, uh, to begin. So our label will be anything 2000 to now. All right, so our start will be the year 2000, and that's all we have to do in this

All right, so our start will be the year 2000, and that's all we have to do in this case, come back and refresh. And now if I filter it down to books released in the two thousands, yeah, this is what we want. We're not gonna find any book released in, um, the fifties or something like this. So notice I'm searching for Wizard of Clearly Wizard of Oz, and you can see whatever is here is, um, not the,

So notice I'm searching for Wizard of Clearly Wizard of Oz, and you can see whatever is here is, um, not the, not the original book, but if I switch back, here we go. That's the one, uh, we would normally expect that was in 1900. Very cool. Okay, so let's do a little more. What about things like 19 nine or how about 1980 to 2000? All right, well now we could say 1980, but we also need an end date as well.

All right, well now we could say 1980, but we also need an end date as well. So with that in mind, we would do maybe to 1999 since the next one is up here at 2000. All right, and is 1999. And then let's just do one more. I think you get the basic idea, 1900 to 1979 in real life. Maybe you'd expand this a little more, but this is good enough and we're losing any books in the 18 hundreds as well,

but this is good enough and we're losing any books in the 18 hundreds as well, but you get the idea. Um, yeah, so let's switch back. Here's books in the two thousands, books in the eighties books, uh, before that time, which is great. So now, yeah, actually just one more. If you wanna handle all of the old books, you know, if you want just for fun, you could say ancient books.

If you wanna handle all of the old books, you know, if you want just for fun, you could say ancient books. And in this case, we're not gonna specify a start date, we're just going to specify an end date. So in this case, it would be the year before the previous start, which would be, um, 1899. So the ancient books, yeah, of course this is gonna give you pride and prejudice and the little women, and of course, don't call it ancient, you're gonna get people mad, but um, you get the idea.

and the little women, and of course, don't call it ancient, you're gonna get people mad, but um, you get the idea. Very cool. Let's look for Shakespeare books. And this is in 1595. Very cool. You get the idea. Alright, so here's the thing. Notice this entire video was mostly just writing kind of a cheap CSS. The actual implementation is wild. All we had to do is just add the single refinementList component.

All we had to do is just add the single refinement list component. And notice if I scroll up, I didn't have to, uh, be explicit about, uh, adding facetBuy like we might have done on the server side a few episodes ago. Uh, the presence of this component is enough for it to know, oh, okay, you're trying to facet, so let's just make sure that we update the API call to take that into account, which is really cool.

so let's just make sure that we update the API call to take that into account, which is really cool. And the same is going to be true for, uh, nuMe menus and things like this. Uh, it really is incredible, and trust me, if you were just writing this out by hand, it would take you a very long time. All right, tell me what you think. Otherwise onward in the next episode.

Otherwise onward in the next episode.