🛑 3hrs to code ClassPass - take PAYMENTS + MANAGE BOOKINGS ! Next.js, Wix SDK (super simple)

Hey everyone, after many requests I decided to make a fully functioning app that will actually

take bookings. So we're going to be building this clone of class boss in order to do that.

So what I mean by this we're of course going to have this cool landing page and if we click

on the browse option we'll be able to browse all the classes that are available to us. Of course

when you click on a class you'll be able to then select and time slot that you want and once

select you we take into a booking page where you can make an actual booking. That's why

actually purchase it because all of the management of the bookings is going to be done via the

Wix website. So Wix provides you with this dashboard where you can see all the bookings that

have been made you can cancel them you can email the clients you can do a lot of stuff okay including

adding new classes and then new schedules. So this is going to be fully functional you can deploy

it you can actually use it and in addition to this you're going to be using the map box

API as well so if you're interested in learning how to do that we're going to be covering that too.

This project is going to be built in next year as using the map box API as well as the Wix SDK

so that we can manage all the back and stuff thanks to this cool dashboard powered by Wix okay

so what are we waiting for let's do it. Okay so let's create a project I'm going to go ahead

and select new project this is going to be a next JS project so here we go next JS and I'm

just going to call this next JS class pass okay so here is the command we're going to be using

if you aren't using webstorm you can just go ahead I'm going to show you how to do this navigate

to a directory so for me it would be webstorm projects and use npx create next app here npx create

next app and then whatever you want to call this so next JS class pass just like that and hit enter

but as we're using webstorm I'm not going to do that I'm simply going to use this

we can actually do at latest as well according to the documentation we probably should

and I'm going to click create so that is now spinning up my next JS app would you like to use

typescript with this project no would you know or should we do yes fine yes tail and no would you

like to create a source directory I think we will so yes do we want to use app browser yes would you

like to customize default import alias no and there we go so that is installing these dependencies

for me based on the options that we chose we're just going to wait for that to do its thing

so let's wait and done okay so that is now done and you should see all the files in here in a

source directory because we did ask it to do that as well as all this other stuff so that is pretty

cool I'm just going to go ahead and do a few things I'm just going to delete the things that we

do not want so I actually don't want the favicon so I'm going to delete this the page CSS module

I think we should actually just keep all our styling in one file to be honest so I'm actually

going to maybe should we delete this I think let's just go ahead and delete this and make our

own one so delete silly anyway we'll have page we'll have we'll get rid of layout actually so

I'm just going to delete layer CSS page j s okay so I think this is essentially going to be our

index j s file you know in fact I'm just going to get rid of everything so we can solve fresh so

delete okay do factor and global CSS I'm just going to delete all of this too okay so really

going for it with these starting fresh great so now that in our source directory we have this

app file in fact I'm just going to move this out global CSS I'm going to put in the source

directory and it's delete this app so I'm just going to go ahead and delete that too

so one item in our source directory is as global CSS file which has nothing in it great and for

those wondering why package adjacent file looks like those are the dependencies that I have

along with their versions so something is not working it could be down to the version that you

are using just make sure you have the same version as me right here it's going to increase that

font size for you a little bit so everyone can see wonderful so let's carry on okay so here

we have our global CSS next all I'm going to do is actually head over to Wix and sign up for an

account so I'm just going to log in and I'm just going to continue with Google so it's just going

to ask me to use an email address I'm just going to use my work on for this and continue to Wix

okay so I'm just signing up as if I've never signed up before really and then we're going to

carry on so I'm going to say that I'm building this for myself continue I'm going to put book vent

and I'm just going to click next because essentially we are wanting to book events right and

what should we call this I'm going to call it Anir's plus and next okay that week so great let's

continue to the dashboard so this is essentially what our dashboard is going to look like and on the

left you should be able to see once this loads all the options that we have available to us so

we're going to be using the booking services and the booking calendar for our site so wonderful

first off however we're going to create some classes such as you go in here so I'm going to go

into booking services and under booking services I'm going to use one of these so essentially

we're going to create classes so it's going to be one of these or we can start from scratch

so I want to choose to start from scratch the service type well I'm just going to call each one

of these by essentially what the venue is called for the class so the first one's going to be the

platform next I'm just going to give a short tagline so I'm going to go ahead and put the

platform studio DFC is located in index more level R1 DFC and as a short description I'm just going

to go ahead and put something that I pre-written the platform studio in index DFC is the public

place for a workout come join us and have fun as well as meet like mine did people just make

sure that's for correctly while doing a fun workout for your entire body okay I think that's good

we can even change the max participants per class I'm going to put 20 and then we can also choose

one of these so I'm going to say per session the fixed price is going to be 200 derms and they can

pay the entire amount online that's what I'm going to choose of course there is a dropdown if

you want them to pay in person or other stuff like that but I'm going to be very strict and say

that I want it to be all paid online so that we can manage it better as a business next I'm just

going to choose the business address so let's go ahead and do it I'm just going to search for it

add a location and now and then I can actually search for the platform studios there we go

this is going to be optional I'm just going to use the tagline for this in case we want to use

it so great let's save those changes just like that and save it like so wonderful okay so there

we go I'm just going to have an image for platform studios so I'm going to choose a main image

I'm simply just going to upload media from my computer I'm going to pick the one I need so you

can just drag and drop it if you wish we're going to have like a main image and then a sub main

image so this one looks good I'm going to add to the page and then also down here we can add

more images if we want so I can add a cover image too so for my cover image let's go ahead and just

upload some more media so once again this time I'm going to choose a picture of

inside platform studios so just like so that's what I'm doing now and add to page great

so we now have two images for this I'm going to click save next we're going to add a schedule

so that has been saved for us okay here we have one service we have no sessions so I can choose

to add it from here or I can choose to go in here to where we were before before I click the save

button and I can add sessions here okay so here we go we'll really have one recurring session I

have that Thursday at 2 p.m let's just pick a staff member I'm going to rename the first start

number to be Ronnie okay and this is recurring I'm going to click save so essentially what we are

doing is essentially just let's add some more sessions adding data to this so we can use it in our

app when we build out the front end so let's add some more I'm going to go Friday let's go 3 p.m

we can add Ronnie or we can have a new staff member let's go ahead and add a new one I'm going to

call the new one Sarah and there we go let's add a few more just so we have a lot of data to work

Ronnie can do that one and let's do another one maybe on Monday let's do it at 3 okay great so nice

now we'll be able to see all the upcoming sessions that are available to book at the platform

so let's go ahead and click save okay wonderful so this is looking good we can of course come back

and change us at any point if we are going to add more then we can do that from this dashboard

we're also going to be able to manage all the bookings on this calendar which is quite cool

you'll already see the classes here and you'll be able to see how many participants are here you

can change your participants and also email customers from here yeah it's really fully functional to

actually be able to you know actually run a class boss if you want so I just wanted to show you that

because I think this is a pretty powerful tool you can see all the classes available as well as

how many people have books under staff you will be able to see Ronnie and Sarah that I made and

you can also add images and add their details of course I'm not going to do this now but you can do

that I'm showing you how to do that here and you can even get them calendar access if you wish

when I mean this is like next level it really is like it's got so much functionality it's really

crazy and we of course have like a work schedule where you can manage Ronnie and Sarah's work schedule

and see which classes them and to be in charge of as well as this booking apps so this is kind of

I guess third party apps and you can connect to this dashboard as well to really get the most out

of it as well as orders and a lot more stuff so let's just go back here I'm just going to add one

more service so that we have enough data to work with let's go ahead and call this so I'm going

to start from scratch again this time this is going to be for yoga so let's call this

trans yoga I'll put a customized fusion of different forms of yoga that will inviguate the seven

major chakras or or just put chakras because I think we've run out of space and as the description

I'll put explore the types of classes and different solutions we offer within it you're about to

start the journey to nudge and better you for the strength positivity and vibrancy max class I'm

going to put 10 let's get an image so once again I'm just going to upload some media I'm going to

upload it from my computer I'm just going to take these two this time and then I'm going to

just pick one and then one for the cover image so let's choose this one for this image right here

and then let's pick a price I'm going to put 150 Durham and then also edit the location

so let's save the service before let's meet edit the location so that is now saved let's go back

into it however so we'll just wait for that to do its thing trans yoga and then we're going to scroll

once that has loaded so down here let's edit this as a location and I'm just going to put onyx

tower because that's where it is in Dubai you ready location with the same name choose another name

let's put onyx tower

Dubai located on the ninth floor okay and add location so let's save that and let's also add

another image here if we want so I'm going to add a cover image it's going to be the second image

that I have here so add to page and let's add some sessions so let's go here save and continue

and once again we have let's have different staff members this time I'm going to have

Gerald so I'm going to add that it's have one on Friday also reoccurring maybe at like 9 p.m.

with emojin and new staff emojin or gen add and then let's have just a few more of these

so just kind of spread out at random high amps great and let's maybe change these as well

let's make Gerald take these and save okay cool so this shouldn't be too location selected we're

just going to have onyx tower for this one keep the current location okay so there's

above the onyx tower this is looking great I'm just going to go back and make sure that the other

location has a different name just so it's not confusing so the platform here as the location I'm going

edit this it's add a new location actually let's put platform studios

to buy platform studios there we go and then located on the bottom floor great so I think let's

just keep it there's that if I can only spell it correctly once again platform studios

platform studios to buy located on the bottom floor great so nice let's unselect this one and

keep that one and just save that like so so I think we've got enough data now in order to start

populating our app let's just use these two and at the end we'll populate it more so that it has

like a final finished look with loads of classes but sure it's good for now so great that is it

for now let's go ahead and start actually feeding in this data into our app so let's build our app

now we need to do one more thing and that is actually allow for our app to communicate with this

Wix website so let's go to headless settings we're going to have to create an OAuth app so let's

just call this class pass auth and I'm going to create it because we're going to be needing this

code right here in order to communicate with our app so save this client ID I'm just going to put

it in my notes for now and as the URLs we haven't actually built this out yet but I'm going to have

to allow for a certain redirect URI and we're going to be running our next year's app on

HTTP local history thousand and I'm going to create a root called login call back so make sure to

add that and make sure when it comes to creating the pages that you could use exactly the same

as mine otherwise this will not work and then if you already have a domain in mind then please go

and add that here so for example say you were just going to launch it on whatever website

Wix gave you so for example mine is this just make sure to add

the redirect as well okay so that is something you're going to have to do otherwise you might get

some funky messages or not found pages if you try visit the login callback page on your app

so that's all you have to do please go ahead and hit save and we should now be ready to go

great okay so that is now say it's the same as your wix domain here the moment just with a

different endpoint added instead and then if you need to edit it again just go here and it should be

there great cool so let's go back to our apps so before we forget about that client ID I'm just

going to create a dot env file in the root of our project so go ahead and call it dot env because

in here I want you to essentially save that client ID so I'm going to go next public

and let's call this wix client ID and then just go ahead and paste the ID that client ID that

we saved from the OAuth app so if you need a reminder it's this one right just paste that in here

and then we're also going to need the map box token but for now I think it's fine of

course let's leave map box to the very end so cool let's get the page structure right next

so in fact I know I keep changing my mind but let's not have a source directory what I'm going

to do is create another directory called pages just like that and I'm going to move the global

CSS out of here and then create a styles directory so once again I'm going to create a new

directory called styles and I'm just going to move global CSS into here is delete the

source directory so this is what your file structure should look like at the moment and then I'm

also going to create a components directory so let's create one more new directory called components

so just like so

this just means that on here I'm just going to delete that source just like that and save this file

okay so we got rid of the source directory just make sure that is removed from that too wonderful

let's carry on next I'm going to actually create some pages so let's go ahead and start with

the actual app itself so let's create a new file and I'm going to call it app.js just like so

and then here I'm going to define the actual app let's write make it a little bit bigger for you

going to make this smaller and then we're going to do export default app okay and here's going

to be the app is actually going to hold all our components all our pages and a header that is

visible on all the pages no matter which page we go to so next I'm going to import some stuff so I'm

going to import head from next head import link from next link and that is it and import the styles

right so import out styles from the global CSS file which other moment has nothing in it

and now like I said this app well we're going to use it to display all the pages right so this is

how you would do it we're going to pass through these two things and now I'm just going to return

just a wrapping element you can show that is not curly braces so there we go and we're going to

get that component I'm going to pass through the page props so that will allow us to essentially see

all the pages in our app and if we want a header to show up I'm going to create a header just like

so I'm creating in here I'm not going to make a new component out of it because honestly this is

not going to hold much here is our header and it's going to hold a link that is going to

essentially wrap a h3 element for now that just says class pass okay and if we click on this it's just

going to take us back to the home page so that's how you would do at cool I'm also going to actually

add a head to pass through some metadata so for example what we want to call our site let's call it

class part let's call it anions class pass so this will show up in the browser tag as remember this

is metadata you can also have a meta tag that is for mobile view even though we're not going to

be doing it for mobile view for this tutorial that is simply just you know too much to cover but of

course if you want to then later do it for mobile view that will be useful and next I'm also going

well we're not going to have a favicon so I'm just going to leave that for now great but if you

want to have a icon that was the piece of code that you would use so maybe let's make this a little

bit smaller so we've got our head that will hold our metadata we've got a header that will simply

for now link a h3 element to the home page if we click on it and I'm also going to have a login bar

here so this is a component let's go ahead and create it next so in our components I'm going to

create a new file I'm going to call this well let's call it I think we should call it login bar

login bar.js okay and once again const login bar equals here is the syntax for making a component

this should hopefully be familiar to you and now we're going to do export default login bar

and for now I'm just going to return the word again this should be in parenthesis a return

I'm going to do it in wrapping element and for now I'm just going to put login bar so the word

login bar because I want to show you what this looks like so cool I think it's time for us to spin

this up I'm just going to make this a bit smaller so you can kind of see everything that is going

on so that is my whole app at the moment let's spin this up so here you will be able to see

that we use the command dev so what I'm going to do is just what we can do it in here so let's

get up our terminal just make sure you're in the project next year's class bar so not somewhere else

new npm run dev and that's it and I should spin it up on localhost 3000 so here we go

okay and there we go we get class pass here showing up because we create a header and if we inspect

this we should be able to see the tools that are provided to us and we're not displaying any

page here because we haven't actually created any pages but this is the header as you can see here

it's an issue element right in a link and if we click on it it takes us back to localhost 3000

even though that did show me an error why is that let's go back

it's because we don't actually have an index page yet so there's nothing to go back to so let's

create that page for us so like I said let's go into pages and create our first page so I'm going to

create a file called index JS so just like that and this is going to be essentially the home page

so what we see when we visit localhost 3000 or you'll domain URL without a slash and then a page

afterwards good before we move on though I just want to show you another way to put in that head

I'm going to create a new file I'm going to call it document JS and in here once again I'm going

to export document so const document equals export default document and this time I'm going to put

a few things from next so import HTML head main and next script from next document and this time I'm

just going to return and put out the full kind of HTML document information that we need for

the meta information so language English and then let's have a closing HTML tag and in here I'm

actually just going to grab the head from here so we don't actually need it in here anymore

I think it's just I'm going to make it a little bit more readable for us and kind of keep all

this kind of stuff separate so here we have the head and then we're going to have the body of

the HTML document I'm going to have the main element that we've imported and then also the next

script so essentially all the stuff that we need or essentially all the stuff that is in here

it's going to be fed through here okay so I think that just makes it a little bit neater to keep

everything kind of separate and it just means that our app.js file just is a bit shorter now

and it just has all the kind of elements that are visual in here great so I'm just going to get rid

of that document for now let's just check that still works and this class was is showing in here

so it is being picked up this is looking good let's go back okay let's build out our first actual page

so the home page I'm actually going to call this home so please feel free to call it whatever you

want so let's create another component I'm just going to make it a bit bigger export default

home just make sure that the syntax for that is correct great so what do we want for here

well again there's just going to be very visual actually I'm just going to be creating a page

that essentially has a kind of image and then holds all the information for us about class pass

so I'm going to create a div I'm going to give this the class name of main

and in here I'm going to create an article let's give this the class name I'm just going to

close that article this is going to be for the information so I'm going to go main info container

and close that off so make sure that is a closing tag that matches that one

so minimize this for now so once again this is on the index j s page that we are working on so

let's get rid of these and in my main info container I'm going to have an h1 element it's going

to say one out for all the fitness wellness and beauty so I've already prepared this then we're

going to have a p element that's again gonna just I'm just taking this from the class pass site

right because we are making a clone so this is going to have all of this text so in between two

paragraph tags which make up an element next I'm going to have a button so I'm going to create a

div and this is indeed going to be button container I wonder how I knew that that is pretty creepy

class name button container right because this is going to hold a button so I'm going to have

two buttons in here actually I'll have one thanks tab nine for all the suggestions I'm going to

have one button another button and this button is going to say try for free so try for free

and this button is going to say tell me more about class pass okay and we're going to give

this this styling of a primary button so this is going to be kind of a global styling that I'm

going to apply primary and this is going to be secondary so class name sequender re for the

button another thing I'm going to do so maybe let's also just space these out a little bit so

it's a little bit more readable is give this one and on click on click what do I want to happen

well I want to essentially log in so we're going to write a function to log in if this is clicked

so essentially we're going to define log in and do the same for if we actually click on this one

so they're both going to take us to log in okay great nearly done we just have a few more things

to do I'm actually just going to comment this out because of course we haven't written that

function at all so after our buttons after actually the whole button container right so just down

here I'm then going to add a link and this link is going to take us to browse classes

and appointment and if we click on it it's going to take us to a page which is going to be a

such page which we are yet to write but of course we need to import this link from next to s

so I can actually just go ahead and do that and import link from next to s for me up here

so we really have one link just make sure that is spelled correctly and next I'm just going to have

one more paragraph element it's going to actually be a disclaimer so again I'm just taking this

from the actual website itself it says offer is available to new trailers only

spa and salon appointments are available after trial and I'm going to start this up a bit

different I'm going to put disclaimer just so we can start up the element a little bit differently

so that is now our index jspage as you will see it's all showing up here how cool is that

we've done the html now let's get to styling it up so great that is all on the index jspage right

because we essentially have put it in pages and it's being fed into here right here so this

head will be like I said visible no matter how many pages we put in here cool let's get to styling

this up next so let's get our global CSS file and let's do it so first up I'm just going to leave

the whole document so everything in here the same phone family again this is just the one that I found

is kind of the closest but please feel free to you know just use whichever one you wish especially

for when you are perhaps doing this you know not to copy class possible to build your own booking

up next to the html and body I'm going to apply these two things apart from I'm going to spell

body correctly so just to kind of start fresh with the margin and padding and I'm also going to not

allow any scrolling to to the bottom so over x is going to be hidden and the max width I'm going

to put as a hundred viewport width okay great now let's actually start the header so the thing

that's going to hold the class box word as well as the login bar I want to essentially make sure

that everything is aligned from left to right so I'm going to initialize flex box I'm also going

to give a border bottom of one pixel solid and we do RGB this is a gray that I picked out earlier

just a very light gray so as you will see here that line has now been applied to the header because

that is the whole header and that's carry on the next thing I'm going to do is just make sure

everything is spaced out evenly and for this I'm going to do justify content after putting in a

semi colon here justify content space between so now everything I put in is going to have the

same spacing in between each one and next I wanted to be stuck to the top so I'm going to do

position fixed top zero pixels okay we actually don't need to use the pixel we could just put

zero let's also make sure that the background is white so that you know if stuff's behind it while

we are moving around that it will always be white so you know if we want to put a map behind it

that will essentially cover the map if the map is placed behind it with the z index next I will

also want to make sure it's always a hundred of the viewport width and let's also give it a box

shadow so the box shadow I have is zero x axis 12 pixels y axis 24 pixels blur and then I'm going

to make it transparent black with 0.06 so at the moment it looks like this kind of cool I'm really

into it okay and now what I'm going to do is also make sure that it's always on top which is why

I'm going to give a z index of three okay cool now let's start a button if it has a primary class

so I'm going to grab any button anyone or all and if it has so the class so that's what that

means has this element of button has the class of primary let's all like stuck together

where then the background color I'm going to have a blue so this is stolen from the class

website this is the blue they use now it's also get rid of the border so I'm going to go

none let's also make sure that the font is white so RGB 255 255

padding is going to be 10 pixels let's actually make it 10 pixels on top and bottom and 20

pixels on the left and right and there's round of so I'm going to put border radius

let's go 30 pixels to make it look more like a pill so that's what it looks like let's do

the secondary styling next which is essentially very similar to the primary just I'm going to

switch a few things around so I'm going to copy that and put secondary just like so

and this time instead of a background color I'm going to put the border as this color

we're going to put one pixel solid as well so it means that we don't have this border here

anymore and the color of the text is going to be the same it's going to be blue and yeah I think

we're okay with that let's also add a font size so we could have just start a button and

essentially reuse some of these but you know I've done it this way now so I'm just going to go

ahead and add it there too go so there we have our buttons maybe let's also let's actually give

this a background color of white so background color RGB 255 255 and wonderful so that is looking

good I'm happy with that so far let's move on the other thing that we need to do so

let's go ahead and pick out the main info container or maybe just main anything right

so in fact those are all kind of reusable let's put main page now because

that's this is specific to the main page whereas these buttons can be used anywhere

so first off I'm just going to pick out the wrapping element so the wrapping element is this

divider class of main and what I'm going to do is actually just assign a height of a hundred

viewport height I'm also going to make sure that anything in it so initialize flex boxes in the

center so justify content center and align items center and this would not work without the height

which is why I added that I'm also actually gonna add an image so background um yeah let's go with

image and this is gonna take a URL and I'm simply just gonna steal it from class boss

so there we go everything is centered and if I visit class pass what I want to do is just take

this image which is hosted online so this one right here so I'm gonna inspect this of course

this is you know if you don't want to use your own right like please replace this with your own

if you want to so I'm just gonna find where it is background image

so here's a URL I believe it's this one

let's check it out

okay that's a small one let's try this one

okay and this one this one we want so I'm just gonna literally take that URL

I'm put it in my own site so da da da da

just pasted it in like so make sure that is closed off and make sure to put HTTPS

and now there it is okay so there it is it is showing let's also maybe now style the

main info container so let's grab that

and let's give this a background color of white background color RGB 255 255 255

so then it looks like that and we can style it up further okay so let's do it next up I'm just

gonna add a border radius to round off so border radius 30 pixels and now I'm gonna also add some

padding so the pattern is gonna be 60 pixels so quite a lot to essentially pad out the text

from the actual container itself great I'm also gonna hardcode the width so I'm gonna make

sure that the width is 140 pixels as I think that will look good and then I'm also gonna do

text align center cool so that's what it should look like let's also style up a little bit more

I'm gonna say that any h1 elements that live inside the main info container so any h1 element

that lives inside of it I'm gonna say that I want the font size of this to be 40 pixels

and I'm gonna get rid of any margin and padding so actually I believe that's

yeah let's get rid of it so margin 0 padding 0 so that's what it should look like and let's

also now style the disclaimer so again what I'm gonna do is just make sure that the element lives

inside of the main info container and it has the class of disclaimer right so make sure

this will exactly the same as you have here disclaimer and I'm gonna choose the font size to be

it's going 12 pixels and I'm just gonna make it gray so the color of the text is gonna be

RGB 126 126 126 so that's what it should look like at the moment cool I'm also gonna start the

button container so the container that holds these two buttons so again just make sure that button

container is inside this one so button container and what I want the button container to do is I'm

gonna use display flex I'm gonna make sure that the two things are on top of each other so I'm

gonna go flex direction column and I'm actually gonna add some margin to the bottom so margin

bottom 20 pixels okay so already is looking a lot better now let's actually also add just a little

bit of styling to space out the buttons to any button that lives inside the button container inside

the main info container I'm just gonna give it a margin of five pixels okay and great so there we go

I'm just gonna make this a little bit smaller for you so you can see because I'm doing this on a

smaller screen than you and wonderful so for now I'm happy with that this is looking good I think

let's start the search page next so the page here which we have not created yet let's go ahead

and create it so let's do it let's get rid of the global CSS and I think we're now good for the

index JS page I think we've got everything done we'll come back to these on clicks later

and let's create a search page so in the pages directory all I'm gonna do is create a new file

literally called search JS okay so we're creating this search page great and how do we want to

define this I think let's just go with const search so const search equals and let's make a component

and then export default search so other moment it will just return an H1 heading that says search

and that will be done there is it's behind the header as we fixed that header but there it is so

that is on the search page for such search now goes to search.js which lives inside the pages

directory pretty cool right so let's actually fast I think get the data back to us from wicks so

this is going to be a fun way to learn how to use the SDK let's do it okay so up here first

off I'm gonna have to import a few things so let's go ahead and import I'm gonna import use

effects use state from the act I also use context we're gonna be using that I'm also gonna

import link from next link I'm also going to import a few things from wicks so let's go up our

terminals I'm just gonna create a new tab make sure you're in that project I'm gonna install a few

packages I'm actually going to install the wicks APA client so it looks like this I'm also going to

install wicks bookings which looks like this I'm also going to install jas quickly so we can

store cookies and I think that is it for now I'm just going to press enter and wait for those three

things to install okay great so while that's doing its thing that should populate in here I'm also

going to create some middleware so this is just from the wicks documentation right middleware jas

so as you can see those things have now been installed with these versions make sure your versions

are the same as somebody who's not working and you're using this in the future just revert back to these

and now the middleware well from API client from wicks I'm going to import create client

and I'm also going to import O of strategy from wicks API client so import those two things and we're

also going to import next response from next server okay cool now we're going to export essentially

a sync function middleware however we can rewrite this to be a function expression later I just

want to get this done so we're actually going to generate a session for the visitor if no session

exists as in like you know you're not logged in so if request cookies get we're going to look

in the cookies and get session so if none of that exists in our cookies we know we are not logged

in then I'm going to response new next get a next response

and I'm going to generate that cookie so we're going to use my wicks client

so I'm going to define it and I'm going to get create client and let's create that client

so I'm going to get off and I'm going to pass through let's get the O of strategy

and then I'm going to pass through my client ID which essentially is going to be

in the ENV file so this thing right here next public wicks client is what I should be

using here and now I'm going to get the response get the cookie and set session right because

none existed before and now we have it I'm going to use JSON stringify await my client

await my wicks client.auth.generate visitors tokens okay so just make sure that's a comment there

we're essentially setting a cookie under session and then storing the generator token with it

and then I'm just going to return the response not sure why that imported so let's get rid of it

and this is what the whole file should look like great we will clean this up later on

whoops that should just be just make sure that is request so that's our middle where Js file

let's shut that down shut down the package JSON shut down the dot unv and let's work on the search

page okay so let's carry on importing I'm going to import once again create client and also

our strategy from wicks a client and also going to import services is that's what we need to get

services are essentially the thing that we are searching for right because here under booking

services these are my services right these classes are my services so that's what I'm getting

import services from our wicks bookings I'm also going to import cookies from Js cookie

because we're going to need to grab those cookies you know from that we are saving so the tokens

that we just looked at I'm going to import card from I'm going to create a card that we're going

to loop over so actually we will maybe just leave that out for now and then we're going to

also import a map which we have not done yet so for now let's just work with this so to get those

services again I'm going to just define my wicks client I'm going to create a client and I'm going

to pause through modules what I want to get back is these services right so that's what I need

and as the auth I'm going to use capital O of strategy and then I'm going to pause through the

client ID which is let's get rid of that process.env next public wicks client ID and then the tokens

so I'm going to send you check if I am logged in or not if there's a session so I'm going to use

JSON parse and I'm going to use cookies get session as that's what I saved it out in my cookies

or if none exists just no okay great so we can either be logged in or not logged in cool so that

is essentially us communicating with our wicks dashboard now let's fetch those services so in here

what I'm going to do is save them to state so const service list you state it's going to be

empty or eight to start with and let's fetch services okay so this is going to be an async function

and all I'm going to do is essentially const service list await my wicks client services

and then I'm going to do query services this is all from the wicks documentation find and call it

okay so that's all I'm going to do and then I'm going to use set service list and pass through

the service list items so now in my use effect I'm going to that's right fetch services and

that just means here if I console log the service list so up here let's see what we saved this

state so right in here today you will see my service list you see two objects okay this one is

the platform and this second one is for trans yoga so we're getting the information we're

essentially getting these two services showing up here we're getting all that data so we can now

use it let's use it to map onto little cards next so let's do it I'm going to create a card so

let's go back in here and in components I'm going to create new file this is going to be a card

JS and that's to find it so const card equals new export default card return so in the card

we're going to make it from the article element the article element I'm going to get the class name

of card because that's how we're going to pick it out because we have multiple articles in here

let's create one div and this div is going to hold the info so I'm going to give it the class

name of info container just like so and then in here I'm going to have another div this is

going to be for the image container which is why I'm going to have an image here so let's give this

the class name of image container and this image works I'm going to take a source which I'm going

to leave blank for now and also some alternative text for the visually impaired cool so that is

one thing the next I'm going to have in my info container is a text container sure why not thank

you tab nine so that is going to go here and I'm going to use an h3 element to show the service

name and then p element here to also show the service tagline so the tagline is the kind of secondary

thing that we have with these service now outside of this info container so where this finishes

right here I'm going to have another div and this is just going to have a p element and it's just

going to hold the description so I'm just going to put description for now and let's give this the class

name of this encryption container cool so that is my card shall we feed stuff into here I think

we can if we want or for now I'm just going to actually comment out so let's go ahead this is

going to be for the name of the service this is going to be for the tagline this is going to be

for the descriptions so that we go and I think that's all we're going to be feeding in here for now

so let's now import the card import card from components card and I'm going to map it out so

I'm going to so instead of maybe having this h1 element I'm going to have an h2 element as

this is not the most important thing on here I'm going to say choose class right because we

want to choose a class and this is actually going to just going to get rid of now the wrapping

element for this is going to be the search container and in the search container we're going to

have a results container so let's create a div class name results container and in the results

container I'm going to choose your class and then I'm going to have an unordered list and now I'm

going to use the link let's get a closing link and I'm going to just simply wrap each of these

in a or actually maybe let's see any speed in the list items each list item is going to have

a link inside of it which is actually going to wrap over our card element that we just made and

imported so that is of course what our unordered list is going to look like whoever we want to map

the service list onto each list item so let's get the service list and I'm going to use map

to map each service onto that's right this list item right here so just like that so now I can

get each service that we don't really need this I can get each service and I could just pass it

through into the cards I'm going to get the service pass through into the card which means here we

need to de-structure it and I'm just going to console log it out for now so console log each of

service okay cool now this we will do eventually we're going to use it from these service

main slug name I also want to actually let's yeah let's give this a class name

and I'm going to give it the class name of card link just like so and then after the unordered

list I'm actually going to so actually after the results container make another div and this is

going to be for the map or we can just put in the map here so I'm going to just put in the whole

element we don't have it yet so I'm just going to comment it out cool and we are done so there we go

at the moment we have two service lists that's why it's mapping out to two things however

so here's the first one here's the second one let's actually use this right because this is

what's being this whole object is being what's console logged out here and I'm going to use that

information in order to pass through certain things right so the name of this is the

we're going to the service and get the name so we're going to use dot notation so I'm going

to go into the service that we are passing through into here right it's been console logged out

and get the name of that service which means this is the platform and this is transyoga

next let's get the what else can we use that we fund the tagline right so I'm going to go ahead

and get that here is the tagline so once again let's get the service object and get its tagline

so there we go what else can we get well let's get the image so the image is in

media I believe we're looking at the color image on the main image I think we should get the

main image and then we're going to get the image so a lot of dot notation going on here but

also we're going to have to import something from wicks so we're going to import some of the wicks

API client do we have that one yes we have the API client that's good so let's import it in

here so you can work with images from wicks so import media is what we're going to have to get

from at wicks API client and now I'm going to have to do a defined image I'm going to have to

get media that we just supported up there I'm going to use get image URL and I'm going to pass

through that URL so I'm going to get the service and then I'm going to order zix service dot media

dot main image dot image so let's do it service media dot cover image dot image you can use

the cover image or you can use the main image it is up to you and one was we have that

I'm coming this out get that image right and get it URL right because oops what is happening

here this doesn't need to be there's also pass through some text and maybe just use the service

name for this and great so once again we're going into media we're getting the cover image getting

the image and then getting as URL from that once we pass it through into get image URL the method

that comes with media that we've imported from up here wonderful so this is looking good we're getting

images we're getting text showing up let's actually style these cards up next so let's do it

so I believe we are done with everything in here now oh let's also get the service description

so I'm going to get the service and get the description from it as that exists on the object

if you go in here to to to to to to to to description is there so that's showing up now too

and now let's start everything up so maybe I'm just going to format this before

shut in this down but let's code for my code wonderful and now let's get the global CSS and

let's style everything to do with the card component so card component well of course we need to

actually style the card itself so I'm going to go dot card we're going to display flex to initialize

flex box and make sure everything goes from left to right I'm going to add a border on the bottom

only and it's going to be solid it's going to be one pixel it's going to be RGB two one four two

one four two one four let's give it a padding of 10 pixels all around so at the moment I mean

it won't look like much it's carrying styling once again I'm going to get the card and see any

peak element that lives inside of it I'm going to give it the font size of 13 just to make

that little bit smaller so 13 pixels let's maybe also get the actual image itself so I'm actually

say that any image container we can show this bullet exactly the same as here

that lives inside the card element with a class of card I'm just going to say that I'm going to

hard code the height of it to be 100 pixels and the width of it to be 150 pixels okay let's

also round it off of it so I'm going to use border radius five pixels on it and I'm going to

hide everything that's overflowing overflowing that 10150 I'm also going to give a margin of 10

pixels all around just make sure that is a class name as well so that should do that of course

it just cutting off our image right which means that the image that lives inside of it so this

element right here I'm also going to change so I'm going to say that any image that lives inside

that particular image container lives inside an element with a class of card I'm just going to

make sure that the height of it's 130% so it's kind of a bit larger behind the scenes but just to

make sure that there's no weird funky behavior happening if it's a square image and so on that's

what I have done wonderful so this is looking pretty good let's carry on the next thing I'm actually

going to do is just perhaps get rid of any kind of link looking stuff so I'm going to get the

card links of element I gave the class of card link to and give it text equation none and I'm

also going to change the color of the font to RGB242424 okay cool so that is looking much better

there is a bunch more things to do however so this time I think I want to also get the description

container so this right here and the text container just make sure that they are the same width so

I'm going to just make sure that the text container lives inside so text container that lives inside

the element the class of card as well as the description container so I'm going to give them both

the same styling and I'm going to make sure that they both have a width of 200 pixels and

a margin of 10 pixels okay so that's already looking a lot better next let's grab the info container

so let's grab the info container and the info container I just want to make sure that everything

is also from left to right so the info container holds the image and the text container I'm going

to actually give it a width of 400 pixels and a border right it's time so a border right I'm going

to get solid one pixel and then RGB this is a gray that I picked out I really that used it somewhere

else already but it just means that this will look like that wonderful I think this is looking

so much better already let's just get rid of this list item I'm actually going to make this

generic because I don't want any list items to have this I'm going to go any list item it's going

to have a list style type none so that's got rid of that dot great this is looking cool of course

we click on it it won't do we'll just go back to the home page because we haven't defined a route

for this to go to but I love this so far let's actually work on the search bar next so that we can

filter these out okay I'm going to be filtering based on a query thanks to wicks so let's do it

before we move on however I'm just going to actually get rid of any margin from the h3 element

that lives inside the card as well as any margin that the p elements have so I'm just going to

go and watch it zero and let's move on okay so we are now done with the card let's get rid of

that console log this is what everything in here looks like I'm just going to make a tiny bit

smaller for you so you can see everything right here okay and let's carry on so we've got the card

let's do the search next so essentially the search bar so all I'm going to do is create a new

component I'm going to create a new file I'm going to call this search bar dot j s and let's

define it so const search bar equals let's write I'm going to get these syntax up for a search bar

and let's return a div for now in fact I'm just going to make it an empty wrapping element

and I'm going to do export default such part so the search bar let's actually create it right

so what I'm going to do is create a in fact we can't make this a div sorry I'm being so indecisive

I'm going to give this the class name of item container as this is going to be tackling an item

in the nav bar which is why I'm going to do that and that's going to be reusable and now I'm

going to create a div and this div is going to be the actual search plus I'm going to give

this the class name of search bar container okay and let's create that search bar so it's going to be

an input and this input well it's going to have a few things my input is first off let's

give this the class name of search input the placeholder I'm going to give it is yoga

the lattes massage and on a change I'm going to set the search time but the search I might

actually want to be global which is why we're going to use context for this so e set search term

e target value and then I'm just going to place the value as the eventual search term okay so

a quick crash course in use context here hopefully you have used it let's actually save up here

so search term set such and you state apart from instead of you state we're going to use context

as we're going to be in this from the context of the app so we're going to save this as such

context and let's actually import use context as well so import use context from react and we're

also going to import port search context import search context from and I'm going to store it

so we're going to go back out of here we're going to go into pages and we're going to go into app

make sure that says pages and in app what I'm going to do I'm going to make this a little bit bigger

for you or let's get create context right because here as well we're going to be creating that

context we're going to use everywhere else you create context use state from react and now we're

going to define such context that we imported into here right so we're going to have to export it

as well export console you can use it in here and let's define it so I'm going to create context

and I actually want the context to be no because I want to change the context from these such

well so that's what I've done I've exported it and I've imported it in here so you can use it

here and we can therefore use it here and change it here too so that's how that is all linked

and the next thing I need to do is just use this search context and wrap the whole app in it

so that you can use that context anywhere in the app so let's do it I'm going to use search context

provider and the value I'm going to pass through is essentially this okay so that we go if this

was really rushed please do check out my full-stack developer course where I go into this in a

lot more detail of course I'm assuming you have the knowledge part use context already but I could

not be accurate in thinking that cool and just yeah close that off so that is wrapped just going to

be format this a little bit better and here is the whole code for that amazing the last thing we

need to do is just save that up here as well so yeah that's right use state and use state starting

off again now okay so now we should be able to use the search time anywhere in the app I'm just

going to console up that search time is working of course we need to actually import this search

for somewhere so we're exporting it let's import it in here from component search bar and I'm actually

going to put it here right so in the header the second item in the header because this is the first

this is the second item okay so there is and now if I search for something it's going to put console log

I'm going to say SS the search time is indeed SS so that is looking good each child in a list

should have a unique key okay so we also need to go back to the search and it's give each one of

these a key so that is fine key I'm just going to go with service ID as that believe that exists

on the service and they do have an ID so that gets rid of that error and also I'm going to use

this slug so that we can now go to each one of these items too so just while we are here so let's

go ahead and maybe go to forward slash services I'm going to use back six for this as we are

going to have to put code in here because we're going to be looking for the slug so back tick

forward slash services and then I'm going to use the dollar sign so we can put in some code

so it's a little bit bigger for you so you can perhaps see I'm going to use encode URI component

and pass through the service not main slug

dot name okay because I'm just simply going into here getting the service getting the main slug

name right so if we save that now so that is on the link itself if I click on here it goes to

services and then the slug name of course we don't have a page for that yet but pretty cool

that is going to that unique slug right amazing so cool the search bar is working the clicks are

working I think let's carry on working on the search bar though because we want to be able to filter

out and I want to style it up too so let's style it up a bit first this should say value as well

make sure that says value and let's carry on one other thing I'm actually going to do

is import and I'm going to import a search icon and this is a component I'm going to make so let's

create a new file I'm going to go to search icon dot to s const search icon equals

then export default search icon and I'm simply just going to turn an SVG that I found on the

internet so here it is please feel free to take my code for this I'm just going to show you where

I found this so here is one you can copy the path for it here okay and simply just paste it in

like I have right here so that is the search icon that's all I've done yeah the code will be

available to in the description and now I've imported it so import from search icon and I'm just

going to put it right here so of course at the moment I just looks like here let's style all of

this up and change is positioning to so let's get rid of that now let's go to the app.js file

let's keep the search let's get the global CSS up and let's work on the search well okay great

okay so first off maybe let's grab the search import itself

so let's grab that I'm going to give up position of absolute and actually it lives in the

search bar container and I want this to be its parent so I'm going to give this the position of

relative so that it sticks to the search bar container okay so other moments over there somewhere

let's maybe add another item in here so in the header so where's the app so that these

things are spaced out evenly with the third item being in here and that third item is essentially

going to be the login bar so I'm going to create a login bar which actually we already have

created right we've just got some text so cool that should space all these three things

are equally now wonderful and we can just see these search bar a little bit better so given that

the position of relative so that search input is now positioned according to the search bar container

next I'm also just going to give this a well actually maybe let's define the width of the

parent with I'm going to go with 400 pixels height 40 pixels and then I'm going to give it a margin

right of 400 pixels as well and then the search for itself I'm going to give it a 100% so it

fills the parent I'm going to give it a padding 10 pixels on the top and bottom and 30 pixels

on the left and right this round of so I'm going to do border radius 20 pixels

outline I'm going to say none border I want to give it a solid border of maybe not this maybe

292929 and finally I'm just going to give a box shadow of zero x axis 12 y axis 24 pixels

blur and the color for this is going to be RGB a 0 0 0 0 0 0 6 okay so that's what it looks like

at the moment next I'm going to also position this and also you know I don't know why it's like

all the way up there it's in an item container which I think we will use now let's get the SVG

that lives inside the search bar we'll look for the SVG so the search icon and again I'm going

to give a position of absolute this time however I'm going to give it a z index of 1 so that it

goes here and I'm going to position it from the top and from the left so all I'm going to do is go

top 10 pixels left 10 pixels and there we go there it is this is looking great cool now I think

we should perhaps style the item container so the item container I'm just going to stick that

here and the item container what do I want that to be like well I just want you initialize

flexbox and then I'm just going to align item so from top to bottom center okay so they look

like this so that one right here I'm going to wrap this in an item container and this an item

container too and finally I think let's just give it a margin so I'm going to give it a margin 0 from

the top and bottom and 10 pixels from the left and right okay great so I'm loving how this is

looking now let's hook up the search bar next so back on the search page is where we're going

to do this logic I'm just going to minimize that let's import such context from pages app so once

again we're just importing the context here and now let's get it so we're going to get this

this let's go ahead and do that down here so const search time set such time we're going to use

context and the context that we're going to use is such context so that's all I'm doing so that

we're able to get the search time in this file or in this component or in this page to be more

precise okay so there we have it so now the search time can be used in the search component and

I'm going to say that if as such time exists well then we're going to want to search find the

service list but also based on a query so I think what we should do is use if the search time exists

we're going to do something else so if the search time exists we're going to do that and if it

doesn't we're just going to find all the services whether if it does exist we're going to do query

services starts with and then we're going to look for the services by the name and then we're

going to decode URI component I'm going to pass through the search time and then we're going to

find okay so that is a long one this should be starts with

and then once we have it so we can't define the constant twice so I'm just going to

set it up here but as nothing and then assign either that or that to it and then I'm going to

just set these services so this just means that we're going to fetch the services each time the

search time changes as well so add that as a dependency to the use effects and now I can search

so how cool is that amazing we have linked up these such but let's move on okay so next I want

to actually handle what we see when we visit one of these pages so let's do that next

so let's just get rid of some of these again and now in pages I'm going to create a services

directory make sure to name it services as this is the path we're creating services and then

the slug so to create the slug all I'm going to do is create a new file and then I'm going

to use square brackets right slug because that's what's going to be replaced j s so there we go

now in the slug essentially it's going to be the service page right so I want to show the service page

so just like that and we're going to do export default service page once again we're going

to import a bunch of stuff into here this time I'm going to import use router from next router

so next router I'm also going to import use effects from yaks as well as use state so let's get

those two things in there let's also import create client and oh or strategy from wicks API

client I'm going to import the availability calendar from wicks redirect so actually we need to

actually import this as well because we don't have this as a dependency so let's get a

terminal and pmi wicks redirects so that will do its thing but we've got the availability calendar

we also need to get these services so this is all going to be for getting the right information

from our wicks client I'm also going to import cookies so import cookies from j s cookie

and I'll show you how these cookies work in a bit import and then I think we are also well we're

going to have to create a few things I'm going to create like a mini card as well to actually show

all the slots available for the service but let's get to building out the service page first

so let's get the data in right so I'm going to define this as fetch service singular this time

as we're going to be fetching one service and if a slug exists so we can find that out

const router equals use router okay so we're just using router from next router if router

query slug exists I'm going to await and then we need to define my wicks client again so

in fact we can just get it from here so the search page I'm just going to copy this we should

probably put this in another file I will do that in a bit and I'm just going to paste that up here

and this time we need services we need availability calendar and we also need redirects from here

okay so that's what we need redirects and we imported redirects oh no okay so we need this from

bookings and then we're going to import redirects from wicks redirects we just literally

installed so we've got those three that's the three that we want

so let's await my wicks client services query services and then we're going to look in our

services for something that equals and then we're going to find the main slug name

let's make this smaller and do decode your i component and then we're going to pass through

essentially the router query slug so we're going to literally pass through

this and search for it in here by its slug because that's the unique identifier so that's the

wisest thing too such by and then of course we're going to do finds and call it go so great and

let's save this under something so I'm going to save this as service item singular because we

can only expect one because the slug is unique and then I'm simply going to set service

so we're going to save this in state service item so let's actually define that here const service

set service use state I want to solve with the state being no go so hopefully that makes sense

and it's passed through that service item so we can save it to the state great so that's how we

would fetch a service I'm going to put this in a use effect so here we go use effect

fetch service and every time I guess these slug changes we want to call that so let's just check

this works right I'm going to console log service singular I'm just going to put the word service

here in front in case we have any other console logs there now if I refresh this you should see

the one service showing up here and in items that it is so we are indeed getting that service

that is good I'm going to go into items however so let's go into items so all I'm going to do

is go items and get that first item because we are just going to get one so there we go there is our

one item nice and now from here we want to get the availability too so let's do it I'm going to

write another function here so const fetch availability and we're going to have to search for

availability essentially we can do it by the let's say last week let's see we only want to show

the week so obviously in your dashboard you can have loads and loads of days but we just want to show

for the week so one week I guess starting today so let's define today const today equals the new date

object and const one week in the future it's going to be new date let's pass through today

but then let's also grab one week or can we do it here set date

one week dot get date plus seven so if we cancel log it's right one week I'm just going to

put this in a use effect as well so to leave that use effect we're going to essentially if

service exists we are going to fetch availability and then we're going to actually rerun this

every time these service changes so let's check it out for now we should just be getting one

week so one week from today is this date that is good so I just want to check if I just

chain this on if this will work still now that does not seem to work I guess because we

define it here so fair enough okay we'll just keep it like that cool so now once we already

defined today and one week ahead we can pass through those dates so this time I'm going to await

my wicks client services do we want services this time we want no we don't we want the availability

calendar this time query availability

the tea

availability and then availability I'm going to not pass through this

let's open this up and I'm going to pass through I'm going to filter right so I'm going to get

the service ID and just pass through whatever the service ID is right because we got the service

up here we're then going to filter availability by this service right so we're going to look

for the ID so that we know which class we are looking for we're going to pass through the start

date which is going to be today and we're going to do it to ISO string you will let's put this on

separate lines and then we're also going to pass through the end date which is one week to ISO

string and the other thing we need to pass through is the time zone I'm just going to do UTC

so great that is looking good and once the all of that is done I'm going to set availability

entries so let's actually maybe define that up here too so I'm going to do const

available ability entries set availability entries I'm going to keep as an empty array and then

we're going to override that so down here set availability entries and I'm going to get the availability

if I can only spell it let's actually also define that up here so whatever comes back here will

save us a very little ability so I'm going to grab that pass up through and get the availability

entries cool so that should now give us the availability entries let's check it out I'm just going to

do console log availability entries again I'm just going to make that a string so it's obvious

and now down here today we get all the availability entries for the platform okay so however

that makes sense we've got the service got the service essentially get the ID and then we're

using the ID to get the availability entries for the platform so that we can now map our out

little cards so let's get to styling this page next let's do it so what I'm going to do is just

return and then I'm going to essentially let's make a empty wrapping container and

if service exists I am going to then

show an article let's give this the class name service singular container

I'm going to make a div let's give this the class name info container

this is going to have a main image which I'm going to actually make as a component this time

so I'm just comment that out because we need to actually create that and then I'm going to just

use the information that we have so the service name so once again the service name I'm going to

create a p element that has the service tag line now the p element that has the service

description so again we're just using stuff from that object then I'm going to make a hairline

element for a line and then I'm going to put h3 and this is going to show these schedule right

and the schedule we want to map that out we want to map out essentially the availability entries

so available in G's map thank you very much and each availability let's go with entry

I'm going to map out onto a card so in fact I'm going to create a let's put this on a new line

schedule card component and we're going to pass through the availability entry entry into that

right so we're going to get that we're just going to pass it through like so and then I'm also

actually going to get the key from this so whereas the here's the availability entry I want to get

this so there's zero and use that as a key and to do that I'm going to use object keys

so key equals I'm going to get object keys availability entry and that should get me the object

key and just assign it to the key so that's all I am going to do on the scheduled card in fact

we should probably comment all of this out now until we get the scheduled card made

and next actually after this whole info container I'm going to create a address container

so I'm going to give this the class name of address container

and I am also going to have a mini map here and she passed through the longitude and latitude

so mini map again I will be creating this later and apart from that I'm going to just have a

P element that is essentially going to show the location so we need to essentially

let's get up the service again

go into here go into locations and then get the business address

formatted we'll get the city and the country too so let's go ahead and do that so what was it it

was service okay chance go into the first item

get business address for mattered

so that is one I'm just going to put this cool font icon here too

you can get it up from my code and then I'm going to let's just copy this because this is essentially

the same we're just going to change this to be city and then do it again so in a P element

and change this to be country okay good so it won't look like much now but we're getting all

the information next it's style up let's put an image and let's also put in a map as well

as map out all the things onto little cards so let's maybe create the cards first so in the

components I'm going to create a new file this is going to be a schedule card j s

const schedule card let's make it bigger

export default schedule card and this is going to return a button essentially because if you

click on it it should redirect you so it's going to be a button and in the button I'm going to have

the start day so what do we want what are we passing through into the schedule card again

passing through the whole availability entry okay

so all of these we're going to use the start date

so first off let's pass through the availability entry

you can show that as well relatively correctly

and now I'm actually going to use moment in order to format these a little bit better

so I'm just going to NPMI moment moment is a great library for formatting dates and a more

readable fashion so that's what I've chosen to do so now I'm just going to import moment from moment

okay now let's actually go ahead and import everything else we need to import here so in fact

we're going to have to import a few of these so I'm just going to get these paste them here

and delete the ones we don't need so we don't need the actually we need all of these okay

so let's just keep those we're passing through the availability entry we're also going to need

my Wix client so let's just paste that in up here we need to get all these three things as well

so that is fine and then let's use the availability entry start date and I'm going to

essentially define a start date that is more readable so I'm going to use moment

and pass through the availability entry slot start date because that's what it is it's slot

start date and it looks like this and I'm going to change the format of it

I'm just going to also pass through here for the time so h h m m s s okay so now I can

essentially define the start day and I'm going to use the start date up here

and reformat it so I'm going to format so that we get the day the first three letters of the day

like mon choose words then we get the month and then we get the yeah okay so console so in fact

let me just put it in here now I'm just going to do start date and you will see that we need

to actually map that out first so I'll start day sorry so onto the schedule card I'm just going

to uncomment this out now because we can officially map onto the scheduled card now let's just

import it up here import schedule card from schedule card

start date format is not a function let's go back in here

ah that's because we don't format this sorry tab nine you trip to stop okay there we go that is

what it should look like and that's how we reformat it to literally get the three letters of the day

we get the month and then we get the yeah how about from month it doesn't really seem to be working

why is that so that should be capital M maybe it's going to confuse with the minutes there

but otherwise I think this is looking good I'm quite happy with that

cool so those are our buttons let's add some more information here so we've got the start day

the next thing I want to do is get the start time so let's define the start time of the class

to start time and once again I'm going to get this start date format and then what do we want

we do actually want that tab nine so let's keep that and let's get the end time to so const

end time equals start date format and then we're going to pass through the availability

slot end date from our data and let's pass through this again and this time I'm just going to format

again yeah like that so that is looking good to me let's check out if it looks right so start time

end time whoops make sure that is positive moment okay cool that is looking good okay that was

oh amazing so we've done it we've created those three buttons let's start them up a little bit more

well actually maybe let's get the yeah okay let's start this up and now let's work on the main

image and the map I think we've done a lot let's take a quick break with some styling

so in here let's work on the service individual service page

so what do we need to get well let's work on the service container first that wraps everything

I'm going to actually space it out from the top so that it's away from the header that is covering

some information and also going to initialize flexbox right so that we can center everything so

justify content center so at the moment it will kind of look like this and everything's from left

to right so the two containers now I'm going to say that the info container that lives inside

this service container so dot info container it's going to have a width of 700 pixels max and a

padding of five pixels so there we go that's the info container and also let's get the address

container this time so the thing on the right so dot address container and this one let's give

it a width of 300 pixels and a padding of five pixels too next we're going to grab these service

container and we will have a main image so maybe let's deal with that when we get to it though

I think the other thing that we need to do is yeah maybe add a class to these buttons

so let's give this the class name of schedule card button let's pick out the schedule card button

and I'm going to do display flex justify content I'm going to do space between so that everything

in these buttons is kind of spaced out but of course we need to also make the width 100% of the

parent for that to kind of take a fact so core this is already looking so much better what else

we want to do these buttons I think border none that's kind of cool right maybe let's add a

pointer so cursor pointer just so we know that we can actually click on them and let's also

give each one a border bottom solid one pixel RGB two three six two three six two three six

and yeah let's meet the background color why actually I've changed my mind RGB two five five two

five five two five five okay so already that is looking cool I quite like that I think it's obvious

that you can select them right and it looks kind of neat let's carry on so we've got the address

we've got the schedule now let's work on the redirect so if you click it it goes to the booking page

so back and here on this slug

well actually on the schedule card itself let's do it here I'm going to create a redirect

so let's define const create redirect it's an async function

and const yep that's correct const redirect await this is not quite so right not services just

my works client redirects and I'm going to create redirect session

and in here we're not going to pass through a URL we're going to create redirect session just make

sure that spoke correctly we are going to get a bookings check out slot availability

and pass through the time zone as UTC so to match what we did above coolbacks post flow URL

window location h ref cool and then once that is done we don't want to return redirect we just

want to get the window location and use redirect

redirect session

for URL so let's check it out so on click of the button

we are going to create redirects and pass through the availability entry that we are working with

right just make sure that says on click so now if I click on one of these slot availability not defined

that's because we need to pass it through into here as the availability entry and now if we

click on one of these it should take us to the login callback page so we need to create that

so once again this time where the search is I'm going to create a new file and this is going to be

login callback js let's import a bunch of stuff that we've been reporting everywhere and we

really should clean up but I'm just going to roll with it for now let's import this let's import

use state and use effect from react and import cookies from js cookie next I'm also going to

just take the wicks client so let's grab that and put it in here this time what we need we don't

need any modules actually so let's delete that and let's define a login callback so login

callback and in here I'm just going to save some stuff to state so const next page

set next page start off with it being null const error message set error message tab 9 is being

really helpful here const verify login

this is going to be an async function I'm going to use JSON parse because we're going to get the

local storage this time so let's get local storage get item we're going to get the oh

of redirect data and let's just save this as data and then I'm going to go to local storage

remove item or the redirect data so cool that is looking good and then we're going to try

again this part is going to be from the documentation when you use my wicks client I'm going to get

auth parse from URL let's also get code and state from this so just like that let's call this

and then let's get the tokens

oh wait my wicks client auth get member tokens that is the method that we need we're going to

get code state of we're going to post your data as well cool while there are no tokens

so we're checking if tokens exist we're also going to check if refresh token exists we're going

its values if the value does not exist we're going to overwrite tokens

again so just in case that is kind of just a quick fix

now I'm going to get the cookies and set the session

to be the token right so JSON stringify tokens let's not have an expire you can add that if you want

and then we're going to get the window location if data exists we're going to get the original

URI or just go to the homepage

and then we're going to catch any errors so catch error set next page to be essentially this

or the homepage and then set error message to be the error to string

amazing and then let's put this in a use effect just like so and then let's just return

I'm going to return an article that if an error message exists

then I'm going to yeah show the error message or if next page exists then we're going to show

continue href next page otherwise if it doesn't we just display the word loading dot dot

just like that just make sure use effect is spoke correctly there and now we click on

one of these and you will see it go to any three nine four one this is the login callback

that we wrote so essentially thanks to here so here we are on the headless settings

and then the settings for the auth so the auth app thanks to this right here that is what is allowing

us to essentially go to this page this is the login callback so just make sure to have your own URL

here forward slash login callback cool so hopefully you're seeing this now and now you can

literally make a booking okay you can give in your name your email your phone number and add

message and pay now you can also personalize this further if you want that's totally up to you

I'm just going to leave it as it is and then we can also choose to login as well so you can choose

to login I'm just going to choose to login with Anya at code with Anya.com so I'm just going to

create that login and then it will show my name we can also just go back so now I am back

and we can also choose to display my name if we are logged in if you actually look at application

you will see that here under cookies there is a session ID meaning that we are going logged in

as Anya okay so maybe let's work on that next I wanted to show my name up here just so that we

know we are logged in let's do that so I'm just going to delete this session token for now so I'm

just going to delete it delete that token so we named it session and added a token and we've added

it to the cookies these are our cookies thanks to essentially every time we set cookies

so cookies set session and then the token ID that we just deleted okay great let's move on

so on the app what we need to do is edit the login bar so this one right here which other

moment just as login bar it's minimized this it's going to move this down I'm going to import a

few things so in fact let's import this I'm also going to import members from at wicks members

let's also import use effect and use state from react and import cookies from

deus cookie cool once again we're going to need my wicks clients I'm just going to copy this

I'm going to paste it in here we're just going to get members and passes through here

and that's it so we just want to get the member name for when we are logged in and we want to

also be able to log in and log out so maybe let's just get rid of everything here I'm going to put

this in a div let's give this the class name I'm going to reuse the class name of item container

so this is the same class name that essentially holds everything in our header I'm going to have

a p tag that just says hello I'm going to pass through the user so we're going to actually set

the user to state so let's do that up here const user set user we don't need that so that was

added to me by tab nine but it's incorrect so I've just deleted that great so we have one item

container next I'm also going to show a button essentially so let's create a button and in fact we

need to put this in a wrapping div so I'm just going to put an empty element just like so for now

or maybe let's make a nav because we're going to have one element of buttons what's kind of a

navigation it's up to you you don't have to put a nav if you don't think it is and then I'm going

to have a third element here just making sure that it's only same correct formatting so I'm

going to do that and tab that out and this one also is going to have the class name of item

container just like so this one this item container is going to hold a button

and this button let's give it the class name of primary

and the text try for free just going to space that out because I want to also add an on

click to this and if we click on this I want to log in so I'm going to write a log in function

uh in fact we don't need that we can just do log in like that and let's write that function so

const log in it is going to be an async function so I'll accept that and then I'm just going to use

my wicks client so my wicks client here and I'm going to get a method from it that method is

auth and I'm going to generate auth data so that's correct and all I'm going to pass through

is whatever location we are in so I'm going to pass through the window

location origin forward slash log in

cool back making sure to select exactly the same as we did

so this is just from the documentation right and then I'm going to pass through the window

location h ref next I'm going to set something in local storage so I'm going to get local storage

I'm going to set item to be o auth redirect data and then JSON stringify data cool I'm also

going to save the return of this as just data so that whatever comes back here we are passing

through into here and saving it local storage under this property next we're again going to use

my wicks client this time to get auth and then the method of get auth URL and again pass through

the data and the return of this we're going to have to wait for this this is an async method

and we're going to just get the auth URL from here so auth URL okay cool and once we have that

auth URL I'm going to get the window location and just assign the auth URL to it so wicks auth will

listen to send the user back to the callback page so log in dash callback thanks to this so that

we can log in okay so that is our log in function let's also write a log out function so const log

out again this is an async method and I'm going to use my wicks client I'm going to use auth but

this time I'm going to get the log out method and then I'm going to pass through the window location

h ref and then the return of this we're going to have to await this as it's an async method

and we're going to get the log out URL this time from here and then we're going to go get the

cookies and we're going to remove all the cookies right because you're going to remove the session

so just like I deleted it manually we're now going to be deleting with code we're going to remove it

so that removes that token so our authentication token and then I'm going to do window location log out

URL go so that's how we log in and log out and now I'm just going to actually write another button

so we've got a button to try for free this button however we only want to show the login button

if there is no member right so first actually we have to define a member so let's fetch the member

so up here I'm going to write const fetch number again this is an async function I'm going to use

my wicks client auth logged in we're going to check we're going to call that and if this is true

we're going to await my wicks client dot members get my member singular so just like that

so if we're logged in we're going to get the member so since you want to get that member and

member name and everything otherwise we just have an empty object and then we're going to use set

member so in fact I'm going to define up here set member or sorry member set member use state

null and then we're going to use set member to change it from being null to whatever comes back from

here okay so let's actually get the member from this object so I'm going to go into that object

and get the member from it and then we're going to set member with member or undefined

okay cool so that's all we're going to do now I'm going to fetch the member and use effect

so let's pass that through into a use effect use effect fetch members or fetch member singular

let's make sure that is single as we're just fetching one and then pass you an empty dependency

great the other thing we need to do is set the username right so depending on if we are logged in

or logged out we want to either show the username or visitor and again I'm going to put this in a

use effect so use effect and I'm just going to write if my works client

off is logged in and that is true I'm going to set user to be well if member exists I'm going

to go and find the profile of that member so this is just the object member and get the

nickname that that member has set for it's him themselves or I can either use the member profile

slug or just an empty string so we're literally getting the nickname of the member and if that

doesn't just the slug and if that doesn't exist then we're just going to get the empty string

else if we are not logged in I'm going to set user back to be visitor okay great and I want

this to run essentially if this changes or if the user changes or if the member profile

nickname changes or if the member profile slug changes cool

this should be dot dot

so once again I'm just going to delete this cool so we've got hello visitor here

great just delete these as we don't need that and let's start off with the user being the string

visitor and then let's style it up a little bit more so all I am going to do

is on the globe we'll see us let's work on the nav I'm just going to comment that out and the nav

itself I'm just going to use display flex to make sure that flexbox is initiated and everything

kind of displays from left to right so there we go and then let's also finish off this button

so on here this button right here I'm actually going to display certain things based on if we are

logged in or not so I'm going to wrap this in some curly braces if member does not equal null

then we show the button and then depending on so we'll get my works client off logged in and call it

so if we are logged in we'll display the text log out otherwise let's display the text log in

okay and then also the on click as well that's going to change depending on if we are logged

in or not I'm going to format this a little bit better but for now here's the button so on click

I'm going to say that if my works client is logged in so question mark then I want to log out

otherwise I want to log in cool so it looks like this it's carrying on styling it up so back in here

I'm just going to say that any p element that lives inside my nav is going to have the font size

of 14 pixels

let's grab the nav I'm going to get the button and if the button has the class of log in

I'm going to say border non give a padding of 10 pixels give it a background color

of transparent

and now let's get the nav button log in on hover and just change that to be maybe a gray

so I'm going to post a two for one two for one two for one cool and now also

I'm going to grab each item containers everything with the class of item container

I'm going to initialize flex box I'm going to align items in the center so we'll use a line item

center from top to bottom and also add a margin of zero on the top and bottom and 10 pixels from

the left and right so great

we are nearly done we just need to make sure that this button also has the class name of log in

that we just start so class name log in just make sure this is installed so just go up your

terminal and do npm i wix members to make sure that is installed great so save that and that is

looking much better okay cool and if we click on here it should take us to this login page so that

we can log in and of course we if we are already logged in so log in with Google and because

that session token is there we should see our name also make sure to export this so export

default log in callback it should say hello and your kuber and I can log out this was simply

just clearly cookie so in application here you are essentially going to clear this session

so log out and there we go that is now deleted and it will say hello visitor again so that's

what we have done amazing this is looking good let's carry on so we can now log in log out we can

also actually purchase classes from here and that will be managed on the wix website the last thing

what to do is just put in some maps i'm not going to be doing that thanks to map box so let's go

ahead and do that i'm going to do that let's fast put in the little map into here so if you don't

have an account with map box already please go ahead and head over to map box and just sign up

and create a token so i'm just going to sign up with you i'm just going to click on sign up let's

go with ania kuber ania at code with ania.com let's just go ahead and do ania kuber and use a strong

password and just agree to this okay this is already taken so let's do one great wonderful and

let's create our account fresh this page and then we'll just ask you what industries you're in

so for this i guess i'm going to just put hobbyist primary goals add maps and i'll develop it

myself and then i'm going to put web great and there we go so we need to create a token so let's go

ahead and do tutorial i'm going to call it tutorial and it's going to delete all of those that is

correct and i'm just going to create that token okay once again i'll just ask if we will password

and we should be good to go with that token so yeah you can use your public D41 or you can use this

one it's up to you just go ahead and copy one and then in the dot env file i'm just going to add

it so i'm going to go next public map box equals and then just paste it like that go

so now let's use it i'm actually going to create a mini map in components i'm going to create

a new file i'm going to call it mini map dot j s and let's go ahead and just clear about which of

this stuff up so we just have the mini map now let's actually export our component so const mini map

equals and then we're going to do default export mini map and return

for now i'm just going to create a div this should of course say export default

and this div i'm going to give it the class name of

mini map container okay so there you go

now let's import a few things i'm going to import map box from and we're going to actually

have to install map box gl so let's go ahead and do that let's go to our terminals

and i'm just going to go in here and do empty in i map also yeah i'm making sure your next

j s class bar so make sure that is the case and i'm also going to import a style sheet

so i'm going to import in port map box gl this map box gl cs so that we have the styling for

our map there's loads of sizes you can choose from that's just the generic one and i'm also

going to import use effect and use ref from react okay now our mini map in order for this to work

we're going to have to create div and give this a reference so this reference is going to be

a map container and now let's use ref so i'm going to use ref to define the map container use ref

and that's essentially going to go in here so we referenced that and we used ref up here from react

next i'm just going to get map box that we have just got from map box gl and i'm going to

assign it access token we're going to go into process in v and we're going to get our next

next pub lick map box token okay so that's just what we called it in the dot envire the envire

if you want to make sure that it's incorrect and you're just copy and paste that so it's really

obvious great now let's use a use effect in order to actually get the map and

assign it a longitude and latitude as well as the zoom so we're going to use use effect this is

just from the documentation and we're essentially going to pass through a longitude and a latitude

so for now i'm just going to hard code it so const long equals and then let's just pick

something where we can just pick it from you know an existing service that we have so let's

go to booking services

let's go to the platform

okay and this will come back with a longitude and latitude that we're going to take

so in fact if we console log this out so on the service here you will see under the location

we get a longitude latitude so i'm just going to steal that for now so we can hard code it like i said

here we go there's a longitude and const lat equals

let's just swap the round long lat and it just means that now this is the code we need this is just

from the documentation every time long and lat change we're going to check if map current exists

so if there is a map we just return out of this and map is we're going to have to define as well

const map because use ref null and if a longitude exists we're just going to grab one of them

i'm going to get them up we're going to assign the current map and create a new map box

map and pass through some things so we're going to pass through the container which is just going

to be the container where we want to show the map so map container current these style of this

it's going to be sure we can have this one in fact i wouldn't change it to be 12 just because i

like that style the center is going to be the longitude and lastitude and zoom let's put us 15

cool so that's what we're going to do and i'm just going to start this up a little bit too

so down here let's go with mini map let's grab the mini map container so the thing that's going

to hold down map i'm going to assign a height of 300 pixels a width of 300 pixels let's round

it off a bit i'm going to go border radius five pixels and then hide any overflow so overflow

hidden which means that the div inside the mini map container

so essentially this div right here i'm just going to give it a hundred percent a height

a hundred percent so it takes up the whole thing so great so for now i'm just going to import that

mini container onto the slug so let's import mini map from components in fact i'm just going

you know write the path so components mini map and we're going to get that mini map

and just use it there so great there we have it just going to hide this as well as i don't like

it so to do that i'm just going to grab map box gl compact basically all i've done is inspect this

actual map and figure out what this component is called right so map box gl compact and i'm just going

to do display none so that's kind of a hack really okay so there we go there it is and i can also

put a little marker on it if i wish so to do this i'm just going to do that down here

let's define the marker so const marker equals new map box gl marker and it's also passed through

so i'm going to pause through the color that i want the marker to be i'm going to pause through

RGB it's just like the blue that we have in our theme and now i'm just going to set the long and

let and pause through the long and let i'm going to add to the map current okay however we imported it

up here this should probably be gl so change it to gl as well as here gl now let's have a look

great and there we have it there's our marker this is looking fantastic the next thing i want

to do is just put in a main image so let's do that i'm going to create that to be a component to

for each individual slug so let's do it once more i'm going to create a new file i'm going to

pull this main image dot j s and before moving on instead of hard coding the long and let i'm

going to pause it through as props so l and g l a t which means that on the slug i need to

pass them through as well so l and g equals i'm going to go into the services so i'll have this

put this on a new line we'll check if the service exists we're actually already wrapping it in

the service so it has to exist so we don't need to check if it exists which is going to get the

service we'll go into locations and then get the first item from there and then get the

business address location longer chute okay so just like we were doing previously this time we

just getting the long and chute and the latitude so in fact i'm just going to copy that changes to be

lat and then changes to be latitude just like that great so this is looking good and say that

so now the map should be different for each slug and let's continue working on the main image

so let's define main image cool let's do export default main image and let's return something

right so i'm just going to create a div and inside is going to be an image and you guessed it that's

actually going to show the main image perhaps as the alternative text yeah let's just have a main

image for now and then i'm going to actually import media from wix api client so import media

from at wix api client and now just like we did with the previous images let's define our image

i'm going to use media that we just got from up there get image URL and i'm going to pass through

we're going to pass through the service into here and then i'm going to get the media main media

image okay so let's pass through the actual whole service and now i can just get the image

and get its URL let's give this a class name to i'm going to give this a class name of main

image container so we can style up a little bit but on here of course we also need to actually

pass through that whole service into the main image so i'm just going to go serve this and pass

through the whole service so just like that and of course let's import it so import main

image from and then i'm just going to do the actual path components main image so great

let's style up a little bit so let's find the service container and i'm just going to say that

the element with a class name of main image container that lives inside of it it's going to

have the following style and i'm going to make sure that each one is 750 pixels with a height

of 500 pixels overflow hidden and let's round off a bit and do border radius five pixels okay

good and of course we also need to do whatever the image inside is going to look like so

the image inside i'm just going to give this a height of 90% great so now let's look at that

this is looking wonderful if you want we can even go bigger so perhaps let's go bigger

150% just to make sure that image always fits and actually we should probably make it

the same size as the info container so where is the main image container let's make it 700

okay so that is looking much better i'm happy with this final map is just on the home page so

let's go here to where we can see all of these and let's put a map in here so let's do it

so let's also create a component called map j s and i'm going to copy a bunch of stuff so in

fact i am going to just copy all of this and paste it in like so and let's define our maps of

const map equals like so and let's do export default map we are also going to take a bunch of

stuff from here so let's grab these these things i'm just going to paste them in like so

let's return a div give this the class name of map container so not mini map container and in

here i'm going to have another div and let's give this the ref of map container that we defined up

there i'm also just going to start this up now while we are at it so where all the map stuff is

so here's our mini map i'm also just going to do map and play it out now so let's grab the map

container i'm going to give this a height of 100 of the viewport height and a width of 50 of the

viewport width okay and any div that lives inside of it i'm just going to again just give it a

width of 100% and a height of 100% so let's carry on again we're going to have to write a use

effect so let's go ahead and do that just pass through the dependencies and this time we're going

to pass through some coordinates but we are also going to map a few so that's why i'm going to pass

a lot of coordinates right for all of my services so let's do that's codes and let's define

codes on the app page so let's get up this page so that's going to be on one of the pages it's

actually the search page so we can get rid of that and now let's define our code so let's

codes and i'm going to get the whole service list so service list this whole thing

all my services and i'm going to use map and i'm going to get each service it's called item

and for each service item it goes to locations get that first item back get the business get the

address and get the location okay so that's all i'm doing and now into the map i'm just going

to pass through those codes of codes equals codes okay and now let's import the map so import

map from components so now on the actual map itself if i console log those codes we should be able

to see see we're just getting two objects so those are the codes we want to essentially map onto

the map so once again if or map already exists i just want to return out of this and if codes

let's just go with first item exists longer chute and the latitude exists so latitude

then you want to get the map current new map box let's create a new map let's create the container

first i'm going to use map container current the style i'm going to change to 12 and the center

is indeed going to be the codes longitude and the latitude and zoom i'm going to put that to

so great and when are we going to change this i think we should change it every time the longitude

or latitude changes for the first item so great there is our map we just need to position it to the

right so what is the wrapping element for all of these so what's wrapping our map it's the such

container so here we have the such container we do not just going to probably do so let's just do

it up here you can do it whatever you want so let's just do it at the bottom actually so

search for our container display flex so that will ensure that they are next together

great now let's map some markers right so all i'm going to do is get those codes

so after this finishes so here

the code for each the code i'm going to create a marker so const marker new map box marker

i'm just going to pass through what the color once more so the color i want to do is RGB

two eighty six two five four you can show that is actually wrapped like so

and then i'm going to set long and lat and get each of the longitude and latitude and then i'm

going to add to my current okay cool so if we refresh this now those markers are added

great so there is one and i'm sure you can find the other okay wonderful this is looking so

so good i'm so happy with this of course we should probably make this 50% of the width as well

so what is that it's the results container when we get that results container and we give it

a width a 50 of the viewport width as well just so it's kind of like 50 50 this is looking great

maybe we can't even make this 60 40 as i think that looks better wonderful

one thing i'm going to do is just replace this log in it's just going to take me to the

main page i think instead so i'm just going to swap that out so i think it should take me here

and i'm just going to wrap both in a link

and i'm just like that's just going to go to the such page

just like so and i'm going to do the same for this one as well i'm just going to wrap it

in the link element and format it a bit better okay so that will just take you to the home page

now and let's maybe start this up so in fact maybe i'll give this link the class name of primary

and this link the class name of secondary and get rid of that button element which means we also

should probably free that class name so that it doesn't matter if it's on a button or not so i think

i did that up here let's just go with anything with the class of primary and anything with

the class of secondary and give them both a margin of five pixels okay great actually just change

a few things around just because that's the way i prefer them so i'm just going to write the path to

this and i'm also going to put this in a helper file so all i'm going to do is actually

perhaps let's do it on the same level as the dot unv file i'm going to create a new file

or let's help her as j s and i'm just going to literally add all of this

and we're going to import a bunch of other stuff

so that is the search page don't need a minimap don't need the main image on the slug

we're also going to pass through all these three things into here not just the services which

means we need to then import all of these things as well so that is already done for me let's do export

const which means i can delete that and i'm just going to import my exclients from back

help us check us great which means i think we can get rid of all that i'm just going to check

everything works so on the card doesn't see we need to do much the login bar members so let's

pass through members as well into here so members just getting everything

and so let that out and import my exclients from helpers

let's get these scheduled cards yeah i'm just going to comment these things out

and import my exclients from helpers such but doesn't need it

we search icon doesn't need need it and i feel you're now good nearly go

import my exclients from helpers

and on the search page two

import my exclients from helpers and we just need to import cookies into that helper file as well

okay great and everything seems to be working as it should

okay so now i'm just going to clean up that code essentially remove everything that i have

consulate out clean it up and share it with you as well so please check it out in the description

below for the final code if you want to use it just a final thing i want to do is our text

none to the by primary button as well as on the secondary button i also want to prevent scrolling

on the y-axis here of the actual app itself meaning you can't scroll up and down and then it's

at a scroll to this area once it has filled out so we can scroll through all the available services

so i'm going to add overflow scroll on this element so go all the way down here overflow

scroll and make it important as well as just a sina height as well so that knows what to scroll

to great so there we have it there it is all filled out icon of course type four services

let's go with transyoga this is looking wonderful and then we can actually see the class

let's also add a scroll to this so let's inspect this what this this in it's in a service container

so let's add this and find the service container

so there we go and there's two classes this is all looking wonderful i'm really happy with this

and that's it thank you so much for coding along with me i hope this was useful and i hope that

you've enjoyed building out a fully functioning booking site please take this to the next level this

of course like a very basic one there's so much styling you can do and there's so much more

functionality you can add like this will fully work and please go ahead and deploy it as well

i can't wait to hear what you think of it