hello everyone and welcome to this video which i am super excited about as we are going to
learn how to build an airbnb clone complete with a content management system for this video we're
going to be building it with next js we are going to be using xjs in order to help us build
server side rendering and static web applications with react and we are also going to be using sanity
and sanity is the content management system that i was talking about sanity is pretty cool as it's used by
all the major players such as nike or nike however you want to say it national geographic
what else conna sonos figma netlify and literally so so many more it's crazy and just quickly
for those of you who perhaps have not used a content management system before where you are in for a treat okay so quickly what do
we need to build this airbnb clone well in this airbnb clone i want to have like a main
page in which it's going to display all my properties as well as provide you with a
map so we are actually going to be using google map api for this as well i'm going to show you how to do that
in order to show multiple properties on the dashboard and then of course if we
click into each property it's going to display a lot more information about that particular
property so this is going to be fun we're going to be building a lot of schemas we're going to be doing that
in sanity io it's going to be painless i promise like this is the easiest content
management system i think i've ever used so you're in safe hands this is what the final project will
look like so there is a lot to learn i'm not gonna lie this is gonna be a long tutorial by by no means is it gonna be
hard because i'm gonna take you through everything step by step the whole way through and of course
explain concepts and things that perhaps you might not have seen before throughout i mean i am really excited
it's gonna be so much fun so please come and code along with me by the end you will have your own
airbnb clone also of course using a content management system and once you have that knowledge
you can apply the knowledge that we learn here today to build any app that you want okay
so i hope you're excited i obviously am please of course i have to ask please do
like and subscribe to my channel if you do like my content as it really does allow me to keep
creating more content for you guys okay so
what are we waiting for let's do it okay so first things first i want to
start off with making our content management system with sanity now we are doing this because
we're going to start off by building our back end first so the back end of our airbnb app which
is going to involve us making schemas and types in order to view what our database
relationships are going to look like thanks to sanity io which is going to show them for us visually and a
beautiful ui so it's really user friendly i'm going to show you show you how to
do that in part one and then in part two we're going to use that data and everything we built on the
back end in order to build out our front end okay so let's do it here we are on
sanity i o um the first thing i'm going to do is obviously sign up so i'm just going to use my
email to do that and there we go now this is free to use up
to a certain point it's perfect for projects like this and they do have a lot of
template projects that you can use to get started but as you are following me on my tutorial i'm going to show you how to
do it from scratch okay so let's go ahead and click here
now this will take us to the sanity documentation including
getting started with sanity cl i now the first thing we want to do
uh is actually install the command line interface or cli or cli as i like to call it and we can do
that by simply going to our terminal and then anywhere as we're going to be installing this globally
i'm literally just going to copy this line the dash g is for installing it globally on your
machine so i'm just going to paste that install globally
g is globally sanity command line interface and there we go we have now installed it
so now if i write sanity you'll see all the commands that
i have available to me we want to initialize so init is the command we
need we want to initialize a new sanity project so i'm just going to
clear that and write sanity in it like so it really is that simple now i
just follow the prompt so what i want to do i want to create a new project yes my project name is going to be
let's call it air let's just call it airbnb right because that's what we are
building we are building an air bnb clone enter
okay do we want to use the default data configuration i'm going to put yes
and we are creating a data set project output path this is going to
this is going to be our output part i'm okay with that what do we want to do do we want to build a movie project an e-commerce
platform no a blog no clean project with no predefined schemas
yes so that is what we are doing of course if you wanted to build a movie app or a
blog then they do have those templates for you i do suggest that you click those in your spare time but not
now because we are building an airbnb project okay so this is going to take a while
because it's actually doing a lot for us it's configuring everything it's getting the right files set up it's
literally doing all the heavy lifting for us sort of similarly to when you use create react app
and it gets all the configuration and files set up for you there too so it's very it's very similar
i'm just going to speed this up for us so look
okay so we have done that now what it's very i like the prompts that it
gives us um well we can do a few things
we can run sign to start to run our studio but i'm just going to open up the code first so i'm going to do that with a shortcut
code dot as i am using vs code ah i need to actually make sure
i am in the project first so cdf bnb don't forget to be on the project
and code dots okay so here we have everything that the
command sanity in it has created for us essentially it has provided us
with a package.json file which has all the dependencies that we are
going to need for this project as well as some script that we are going to use
we also have a schemas folder with some boilerplate essentially for
uh where we're gonna put our created document types so we're gonna put them in here and then
a sanity json file okay which we're gonna go into a little bit later okay but essentially
this is all important information for us that we're gonna need so thank you sanity for whipping
this up for us okay now if i go back to my terminal i'm just
going to clear these and run sanity start like that
and just wait a little bit well we're going to essentially start our sanity studio so once again
it's just doing its thing i'm gonna speed this up for us
okay so content studio successfully compiled i am literally just gonna take this url
go to my browser and just put it in
and i'm just gonna log in again using the same credentials as last time
and there we go here we have our sanity studio um we can see it's our sani
studio we've named this airbnb and we can see that on our left we don't have a schema does not contain
any document types yet if those if it did then those types will be listed here we're going to be adding that
throughout the project so this is essentially we're going to be doing by the end of this section we are gonna have
essentially something that looks like this okay so let's get going now the first thing i'm gonna
do is actually go into here okay so now let's have a look at our
schema.js file so if you open this up this file in the schemas folder
the schema defines our content models okay so we're gonna start
modeling out our content logically um let's not really worry about
how it's gonna be presented we just need to think about how everything's going to essentially work together and what kind
of relationships it's going to have
so i know that i want to have a property right and that property is going to have a geolocation
because we're going to be using google maps because that's what um airbnb has it has a map uh displaying
where the property is exactly by longitude and latitude you want to give the property a title so for
example my lovely london flat a price per night
how many beds it has and then of course the host which is going to be a person which can
always use also shared by a traveler because both the host and the traveler are a person so we can
use that to our advantage to make our repo just look a little bit neater and then we also want to have
reviews that are linked to a traveler okay so that's one relationship
that we're gonna have to have and of course we want images of the property itself so in a nutshell
that is what i want and that's what we're gonna build so let's get to it starting with the property
so i'm going to create a document type called property with one string field called
name and then we are also going to have a title and a
type okay so the title is that's going to be the display
name for the type uh the name is going to be i the identifier for the document type
and the type itself um but we can go into that a little bit
later on that's just all you need to know so let's get to it
so in my schemas folder i'm just going to make a new file and call it property js
and in here i'm going to export default default if i can spell that correctly
and now as we said i need a name name is a string i need a title
also as a string and i need a type as i said those are the three
things that i need and then this is going to be a document type okay so the property is going to be
a document type and then everything that we discussed is going to be
a field so field
like so and i'm going to have an array of fields okay so maybe i should just put
that as a field that's probably makes more sense okay so the first thing that we discussed is
actually giving our property a title right so once again i
am just going to i'm so just going to copy this because that's what we are going to be doing
this is not going to be a document type this time so this field well i'm going to name this field title
and i'm actually going to give the title it's going to be title as well uh not to be confusing but this is going
to be the properties title that i discussed and the type of this is going to be a string because that's all
i want to be i want it to be a string so okay let's just see let's just see
how this works for now okay i'm just gonna save this and then go into the schema
and now all i'm gonna do is import the object and document
schema okay so right down here we import
object and document schema scheme schema
and our property is a document type type document uh not that that's
important for now i just want to reiterate that and i'm going to import property from
well it's in the same folder so it's just going to be property like so so i've imported the
property and now in here
i am going to put my document type of property in here and i'm simply going
to do it like so because our boilerplate here is going to concatenate it with anything
else that we put in here so now if i click save and then
go to here well isn't that handy it's saying we're missing the type name so let's go back here
we know that this is a property and let's just give it the title of
property with a capital p so now if i go here and refresh
we have made our first document type document we've made a property with
the type of document but it doesn't really have anything here at the moment because we
haven't actually added one if i wanted to add one to our content management system now i would
just click here and it says oh create new property because we have named it a property
and ta-da i can now add a property and the only field is requesting is a
title so i can now put a lovely
learn done flat and publish and there we go we have our
first property all we really needed from it is a title so that's all that we have done we
filled it out and we published it and now we have our first property it's a london flat if we want to add a new one
well we can do just that i just simply have to click here and add something else and it will get added
here amazing but of course this is really basic we really want to build out this
property with everything that we've said so i'm just going to leave this for now and carry
on so the next thing i actually want to do so we have our title let's actually also
give it perhaps a location so this time i'm going to make this location
title location and this is going to be a geo point this time
geo point um we'll go into this type later for now i'm just going to finish
typing out everything we need for this file so once again perhaps i should just make
a few of these uh this time let's delete that and
delete this this time i'm going to actually have a property type because
you know how on um airbnb it asks you know would you rather have a bungalow or
just one room or the whole house or something so that's what property type is going to cover for us
property type and i'm actually going to make it like a radio selection where you can just pick one so the type for this
um it's not going to have a type this time i'm actually just going to say options
and be very strict about what we can choose for this
uh so i'm going to have a list like this and then the list is going to be an
array and that array is going to have a title so once
again with the title i'm just going to put house and then
value so there's our first one we've got a
house and then what else can we have well i guess we can have a flat
so that's going to go on our radio button flat uh what else a
i don't know a bed and break fast and then let's put the value
here as bed and break fast
and then let's just have maybe one one more sure why not i'm gonna have a boutique hotel because
that's quite fun boutique
and this is going to say boutique hotel okay so that's
four i think that's fine i'm happy with that and let's just say it's i want it to be radio right
so i need to say layout radio um let's just see if that's working
without giving us errors type is missing a type
okay let's go back oh yes type this is going to be a string
because the value that we choose is a string so save that refresh
okay so now you can see when we uh want to add a new property we are
asked for all these other things too so the locations latitude and longitude
altitude these are optional and then the property type which is a radio um
option okay a radio select you can only pick one okay let's
carry on hopefully you can see how uh this works once you get it it is
quite it's quite easy to get the hang of um i know it can seem intimidating at first
but as long as you stick to the rules name title type then you should be
fine so once again just as i've said it name title type
so next thing we want is um we want a main image because you know
airbnb has that one main image and then a few supporting images and this is actually going to be
a type image and then i'm going to say options
hot spots true so we've done our main image and now i
want to do the supporting images so um once again
i wish i should just really keep that i might as well just keep that
um copied at all times i'm just going to copy that for later um and what should we call this let's
just call it images title images and type well this isn't
going to be more than one image so this is type array and in that array this is how you do
arrays so array of and then let's open up our array and then
type and then i'm gonna actually create a property image so
yeah i'm gonna do that um so i'm just gonna comment this out for
now actually because we actually need to create this type
which i'll show you how to do just like we created the property type we need to create uh sorry just like we created the
property type we're going to have to create a property image type so for now i'm just commenting that out
and then once a whoops once again
okay so now we've got the images next perhaps let's do let's do price
per night because then we can derive the monthly price from that if we wish
so i think price per night is a good one to have price per night
type and this is going to be a number right so we need to actually say that
next i want to have the beds i want to know what the bed situation is before i decide to stay
out to this bmb and this is going to be a number as well as the uh let's say bedrooms
because they usually have that too they have the beds and the bedrooms separately because you know that makes
sense perhaps you have more than one bed in a bedroom because i have stayed in
places like that sure why not okay
so now that we have all that we actually need to get a slug which is going to help us out if we need
to go specifically to that property so i'm going to go into
this later i think this is something that's better off explained visually so when we use it you will see what i
mean by a slug because i mean it's not exactly the animal so type slug that is an
actual type and once again options we're gonna have options for this and we can get the uh
source for this title and then the max length of the slug
let's just put a hundred okay so we've actually like hard coded that the max length
uh for that and then um i'm also going to give this
an i d so once again id title id
and that's going to be a number okay i think that's it what else did we say um
oh yeah we need to give a description don't we because all these airbnbs have a description so
description description and this is going to be a
string okay so i'm just going to see what that looks like before carrying on
so we here we can see here we now have a main image which we can upload or drop an image to we have
somewhere to put the price for night beds bedrooms slugs so we can generate a slug
the slug is generated off the title an id and a description great now it's
time for maybe the slightly more complicated stuff even though it's not that complicated really we're gonna have
to make our own types so as you can see here i've been using like types that are sort of generic i guess
string number um slug and so on uh and we commented this out because this
uses a type that i need to make right so let's go ahead and do that i'm gonna uncomment the sound now
and this will break uh this will break right because the type property image does not exist
i'm going to make it so in my schema i'm just going to put property image
js and let's create our first type okay custom type here we go even though we did already create one
we created a document type this is to this is slightly uh different i guess because we're going to be using it in
the property type itself once again export default so
this is how this is sort of like standard and you guessed it name title type
the name of this is going to be property image as we previously decided property image
for the title and this is going to be a type of image okay because this will put it into the array the array of images
this is an image um once again we can give it fields if we want let's go let's do it
why not we can always decide we don't want it later but it's nice to have the knowledge of how to do this and
once again name title type i want each image to have a caption
so a caption and this is of course a string
and then you can also do something like this is high
lighted true i'll show you what that is later and then
uh i'm just gonna put options
hot spot true so you would have seen me use this hot
spot uh twice now i'm just going to show you the difference of having a hot spot and not having a hot spot just give me
one second let's save this and then go into the schema and i'm just going to
add property image in here as well and import it so that was of course done
automatically for me but make sure that you actually import the property image to if yours doesn't automatically uh
show up okay now so if you go into here and go to the place where you can
add images you will see i will be able to add more than one image okay so it's not like this up here we can add more than
one image because we made a property image type and we stuck it in an array that
lives on the property itself the property type so now i can
actually drag images in here let's go ahead and just use one that i have um
let me see this probably it's not a property so there we go and i can actually edit
stuff in here too i can do whatever i really want that is what the hot spot
means you would have seen that i'm using hotspot quite a lot hotspot true that allows me to do all this type of stuff so if
you want that keep the hot spot on as true and of course i mean
let's just let's just save this for now um
so if i exit out of it you will see that is saved i can also delete it if i wish so i'm going to
delete it for now because i don't want in that in my property it's a piece of fluff it's not really a property so let's move
on until we fully make our property okay so we have made our property image
type remember we had to put it in here so that it could be concatenated
with the others the next thing i want to do so let's go back to our property
is actually provide a host for this so similarly to how we made a property
image type i'm gonna have to make some custom types here too so once again
name i'm going to put a host i'm going to put title host and i'm going to put type
host which we are yet to make don't forget a comma and then perhaps while i'm here already
i'm just going to um okay let's make uh
yeah let's make some reviews too so i'm going to make an array of reviews so just move that up for us
name view title review sorry plural because it's going to be an
array isn't it type array and then array of so we need of uh open up our array
and then let's make a review type um so yeah type of review which we are
also yet to make just like the host type great so
let's make the um let's make the review first i think it'll actually be easier
and then we'll move on to the host now i'm just going to start this off again so once again export
defaults um i mean this is really good for muscle memory right because there is a
lot of repetition but it's all important name title type so the name of this
is going to be a review a singular review title review type uh this is going to be
an object so we haven't used an object type before um let's put fields that will make up our
review so i'm going to have the once again
just to make our lives easier let's have a review description
description review description and this is going to be a string um
and then let's also have the person that left the review which is going to be the traveler which we are going to have to
make uh traveler that's why i want to leave
host last because traveler and host are going to have something in common so type we're going to make a traveler
type and then i am just going to have a rating as oops rating as well
so name rating title rating and then
um yeah let's have options now so options
uh it's going to be a list and then the list of arrays an array of things
um i'm gonna have a title of five stars
and the value is gonna just have five stars like this if i could just
format everything correctly and spell five stars okay so we've got our first option i
think we'll make this a uh radio select as well so five four oops
nope four three two
one brilliant okay and now we have our layout which is
gonna be radio cool so there's our review
um let's stick it in here too so i'm just going to put the review and hopefully that will automatically
import it didn't the other one did though import
review from review let's have a look now
what's it not liking uh unknown type host unknown type traveler
well yes we know that the fields property must be an array of fields
let's go back i'm just going to comment this out for now get rid of the traveler and then get rid
of the host
so hopefully that should work now no the fields property must be an array of
fields instead so undefined on the rating so so that's quite handy
for debugging so on the review type object uh that should be a string
remember because the value is going to be used as true so save that wait for that to rebuild
and there we go so we can now add a review so we can
give a description so awesome place and a waiting cool
um here we go that's our one review but we now need to associate a uh
traveler with it right so let's get to it let's now make a uh let's start with the traveler first
traveler js once again export default name
traveler title
traveler and type so i'm just going to put capital t here
uh and the type is actually going to be a um it's going to be a reference
because i want the traveler and the host to share a type which is a person
so this is how you would do so you would write two and then i'm just gonna open up my array
um type person so obviously now we need to create a person but it's all going to
be worth it when you see how good it looks on our content management system
so there we go um okay so now we have created
our traveler let's first make our person type so once again i'm going
to go in here make a person js click enter export default
name person title person
type i'm going to make this a document type
and i'll show you the where this will show up if it's a document type
and then let's have some fields once again so fields
and what do we need to have for each person well we need each person to have a name so i'm just going
to put a name like so and this is going to be a string uh we can also give it a description if
we want something like please use um you know first
name last name format if we want we can do that
just to give like a sort of helper we also want each person to have a
slug titled slug and type
slug um we don't really want a description for this but once again we want to have options
source name and max length 100 because we don't want
it to be longer than 100 when it's generated 100 characters long
next we also want each person to have their own id so sort of like the
properties right oops name
id title i d and this is going to be the type
of number and then we also want each person to have you know an image so we
know what they look like so once again image image and this is the type image
because that exists great so we have our person we have our traveler and now let's do our
host js and then host well it's exactly the same as
traveler really apart from there is a difference only the travelers
uh are gonna have uh the ability to read reviews and the host is gonna be
attached to the property itself okay so now i'm actually going to
uncomment out the bit that says host
save that let's go to our schema and import everything we have just made so that is the traveler
the host and the person type so once again
wandy traveller
host and the person document type and i believe they should all have
capitals yes they should okay so now let's go back to
here there we go so now
the property document type and the person document type we can add a person so i can add
any kubo i can generate a slug for myself give myself an id so i'm gonna be the
first one uh add an image of myself so let's go ahead and do that now
upload um
just gonna use this headshot okay so there we are publish
there i am there i am as a little person okay so i've just created a
person i've not defined myself as a traveler or host yet but if i go into a
lovely flat i can select myself as a host okay so i am now the
host of this property great okay i am really excited about this
i believe we are now done building our back end let's actually go add some uh
properties to our database let's add some people which we can then decide if they are travelers or hosts of our
property okay let's do it
now there is actually an option to be able to change what is previewed in
here if you wish obviously i think sanity does a good job at guessing what is the best to preview
to you but if you don't like it you can override it so for example say instead of having my
image and my name i wanted to have an image and i an id so
i would use preview select and this of course is using the title name
so i am literally using my name to show me my name but if i wanted to
use my id and an image i could change this to id and then refresh this
and you'll see uh you are getting me by id so the person's id instead of
their name as an identifier so that is one thing you can do if you wish um i'm gonna leave this for you
here in case you want to use it so i'm going to upload that onto github
like i said it does a pretty good job of picking the most likely one you should
use but you know just in case you're not happy with it that's just something you can do okay so i think we
are now ready to actually start adding some data to our content management system so let's create some
properties let's create some people which we will then assign to the property as a host
or a traveler so that is going to be up to us let's do it so
in the property um i'm actually going to just delete these so
i'm just going to get rid of them delete
delete the london flat and delete this one too
oops why did i just do that i just duplicated it by mistake at least you know that's an option that
you can do i'm just going to delete that and i'm going to
delete this one too as soon as it lets me i'm just going to select it delete
okay so yes let's make our first property i'm going to call it a lovely
london flat again let's get the longitude and latitude
so this is the latitude of my flat and this is going to be the longitude
i'm going to leave the altitude this is going to be a flat as we said and now let's upload some images of the
flat so
just going to upload a main image and then i'm going to add some other properties too
so i can choose to upload or drop them in it is up to you i'm gonna do this one
so let's add that in there we can also edit the details if we wish
but i don't really want to so there's one flat
there we go let's add another one so once again i'm just going to
add a second image uh and then let's go ahead and add four let's make that be um sort of like
how many we want for each property so there's our there we go we've got
four images we've got one main image i think that's the same one but i mean it's fine for now we can always
change it if we wish let's say the price price per night for this flat is 230 i'm not going to use
um currency for this because i don't know what country you're doing it and so
i don't really want to just push wherever i am on you 230 whatever that's what the
price is uh let's say it has three beds two bedrooms let's generate a slug for it
give the idea of zero it's the first one give it a description so a lovely flat
situated in the heart of batter c
situated i hope i spot that right lovely flat surgeon how to see perfect for a mini
break and exploration of the city
the host i'm gonna add myself i am the host and then reviews well for reviews we
actually um let's just say it has no reviews for now this one okay we'll add some reviews
let's publish this now let's add some more people so i'm going to add
let's add omar um abdullah to generate a slug for him
give him id of one and so here we have omar abdullah
let's go ahead and publish him now let's go back to our property and add a review from
omar so add a review um great stay and lovely
flat five stars for me
great now ah why can't we select a host
that is strange let's go back to our review oh yes we didn't uncomment
this out so now let's go back let that rebuild
go back in here and then we add omar as the traveler from our person
list so great we have a review from omar this is looking good
um okay fantastic cool so i mean let's just make another
property while we are here let's have two properties to work with i'm gonna put a
spacious flat sorry house in hackney
give it a latitude give it a longitude say it's a house add
a main image so once again upload
house then
just add some images
for the house i'm just going to do four again don't forget we can also add a caption
as we did add that to it so i can put the pillows
the pillows you can touch i don't know there we go so we can
have captions on the images too if we want and if we want to display them in the front end that could be an
option as well um let's carry on adding some images
get a picture of the bedroom sure and then just one more
again of a couch just to show how comfy this place is so
we've got our four images now price per night let's say i don't know a thousand thirty because it's a huge
house that's probably a bit cheaper whatever five beds four bedrooms
generate a slug give an id got a description so a large
house situated or a large house in hackney
um heck me perfect for a large family
or i don't know celebrations
i hope you enjoy your stay here um and let's just say
i don't know let's say omar's the host it's a very small site we have at the moment uh and then again let's add a review i
have stadium so i say this place is lovely
of course ideally we'd have way more people in our daily race but you know i don't want you to sit here while i add
um loads of data i think this illustrates perfectly how we can add
data to our content management system so let's publish that and i think
we are now ready to start making our front end so i hope
you've enjoyed this section next we're gonna actually uh work on link it up to our front and i hope
you're excited i hope you've learned a lot in this section and if you feel like i didn't go
into something in enough detail please let me know in the description below and i will aim to answer all your
questions for you but for now let's carry on part two okay
so in part one we built our back end essentially we built our content management system
we added data we added two properties and we added two people which are interchangeably
hosts and travelers in this part we're going to build out our front end so let's do it now it's
important to actually note that for this part we actually need to keep
the back end running as that is where we're going to be getting our data from in order to populate our front
end so keep that running and then in a new tab so yeah you can do a new window if you
want but i like to keep it neat and keep a uh keep everything in one place i've just got a new tab
now in here make sure you are not in the airbnb project we have just
made um so i'm just going to go into the directory that i usually work in
the airbnb project is in there however i want to make a front end for it so i'm going to do this
with another command that command is mpx create
next app okay so similarly to create react app we can use it to essentially get started with next js
which is what we're going to be doing for this project to build our front end
so in our terminal in the directory of our choice i'm just going to create a next app and
i'm going to call it airbnb front and or you can call it whatever you want
just make sure to know that this is we're gonna be working on our front end so i'm just gonna click that and wait
for that to create a new next js app for me all configured all
nicely so i can get going once again i'm just going to speed this up and edit
now to run our app we already have some commands here but i just want to show you what this looks like so i'm going to
open it up using code dot which is a shortcut for anyone out there using
a vs coach so there we go i'm actually going to
just minimize the back end even though it is running i don't actually need it up anymore so
here is what create next app has made for us essentially we've got a
package.json file with some scripts and some dependencies as well as just some basic boilerplate
if we actually run this so npm
what were the commands again npn run dev
and then go to localhost 3000
you will see this is the boilerplate of our next js project i just want to delete all of this now so we can start
from scratch so i'm going to go into the pages
go into the index.js file and then all of this stuff that it's returning
i'm just going to get rid of it like so and then just return
nothing essentially um now we can call this home we can call it
whatever we want import styles uh i actually don't want to import any of
this so now if we look at this we have a blank canvas to start with this
is looking good it's going to make that bigger for us so we can read everything that is
happening um keep that out 100 though
okay great so for example if i was to now write
hello you will see that pop up in there
cool okay so before we get going let's actually check that we can actually get
the data in our front and right so i'm just going to delete this and i'm actually going
to create a client okay so i'm going to create a client i'm
going to call it sanity client let's do it
in the root of my project i'm actually just going to create a sanity js file and i'm going to paste just some
code that i want to share with you um i don't really feel the need to type this all out because there is a lot of
annotation and help there for you as a developer when you are doing this by yourself
so this is the code that you will need of course you will have my github so please go ahead and
take it this is essentially um what we're going to need to start off
our sanity client of course we do need to import next
sanity into our project as well so let's go ahead and do that in order
for us to be able to essentially use create client and create image url builder so i'm going to go in here
and just start a new tab and write npmi next sanity to uh import that package
the next thing we are going to have to do is get our project id which i showed
you at the beginning of this video and our data set
so we're gonna get that from the studio um and we're gonna have to create a dot env
file and notice we can store them secretly and then call them or get them
using this we're going to be going into the env file and getting our next public sanity data set and our project i
j um so i'm just going to create a file called.env for us and
let's get that and whack that in here and let's also get that and work that in here like so
i'm just gonna save this file because um this is looking good we don't need to change
anything here so now i'm just going to gravitate
actually back to our backend project and this is what the sanity file is for we need to get
the project id and the data set so i'm just going to grab that here
and put it in my front end so in the dot emv i'm just
going to paste that in here and also get the data set too
so once again let's get our
project and simply grab the data set
and put it in here and save that
great
now let's go back to our index.js file
now i'm just going to actually i mean you can keep it like this but i
personally prefer just to use um
functional expressions and then export default
you could have kept it it's just a total it's a preference thing it's just how i prefer to keep my code uh and now we actually have to
import the sanity client from our sanity.js
file so import sanity client
i can't spell today client from and then i'm going to go back one
and go into the sanity.js file great so we've imported our sanity gs our
sanity client now let's actually get to using it in order so we can get our data right so we're going to do it like this
we're going to export const get server
server side props equals async
um hopefully you guys are familiar with next js if you are not i i mean of course you
can carry along coding with me um but i do recommend that you look into next.js
in more detail because um that's just what we're using for this
tutorial so this is the uh i guess
syntax that you have to use in order to communicate with
sanity
sanity has its own query language called gro q or grok
graph relation object queries so that is exactly what we are using in order to
communicate with our database and make queries to it so our query um
essentially we're gonna be looking for the type property
so that's what we're doing and then we're gonna store so we're gonna use the sanity client await
sanity client to fetch sanity client to fetch our data so we're going to
fetch by passing through the query we're going to pass through that query we just made and save it as property
well actually let's call this properties as there's multiple of them now i'm quickly just going to write some
code if there's property let proper
t's if there's no properties by length so if there's nothing in there
then return
props properties
and just an empty array
else
return props
properties
okay and then of course we're getting the
server-side props and we're going to pass through the properties
and i'm just going to console.log out of the properties
and there we go we have our two properties okay so we've got them into
our project this is looking good let's carry on because we have a lot to
get through but we're getting the data so we've managed to sync up our back end and get the data to
appear in our front end so this is fantastic okay now
let's actually get to showing the properties uh let's actually first work on maybe
the one property itself and then work on the homepage where it shows all the properties
so i'm gonna do that by first off
i think we should
okay yeah okay fine let's in the pages i'm going to create a folder called uh property
and in the folder itself i'm going to make a file and then i'm going to put slug
js so like this and this is essentially going to represent the slug of each of our properties that we
generated in the first part um we're gonna have to actually
create a component for this so export const property
and then i'm gonna have some props
and for now i'm just going to return um well let's just return an h1
tag that's gonna have our property title but let's just see if this works now i'm just gonna use the word
title oops uh export
default property
title okay so the word title is showing up that is looking good um
we don't need to export this twice okay so we've got the title the word title
showing up but now actually let's go about getting our server slide props in order so we can use them
uh in our page so i'm going to have to use the client
for this we're going to do it the exact same way that we did before um when i export
const and then we need to once again get server side props
it's going to be an async function and then we're going to have to pass through the page
con text i'm going to show you what this does in a little bit so
okay so if you actually use the page context query slug
and i'm just gonna save this as const page slug for now and i'm gonna console log
it just so you can see that we are actually getting the page slug
okay so pleach page slug so context query slug
and then if i actually go to this page and refresh it and look in here i'm just going to
ignore that for now because it doesn't really matter i just want to make sure that we are getting the slug
and i am a lovely london flat so we're getting these slug that is looking good let's carry on
now we need to actually i'm going to delete this now because we don't need it we need to actually write our query so
just like we did before so this time i want to get the property based on the page slug
so i'm going to write const query and i'm going to use grok again so this is the uh query language
that we are using in the tutorial i'm going to use back ticks because we are actually going to have to put
in some variables in here i'm going to open up our brackets type
equals property
okay and slug current
equals page slug so that is
uh what our query is if the type is property and the the current slug is the page slug
uh and then we also actually need to get the title get the location
get the property type so i could have just copy pasted from above
property type get the main emerge get the images
get the price per night get the beds get
the bedrooms get the description
get the host but we don't just want the host okay we want everything that comes along with the host so this is how you
would do that if something is referenced get the id get the name so the arrow is
basically for anything that is referenced get the slug and get the image for the host and then
of course we also need the reviews and that is an array
um the reviews are made up of the traveler so
again we need this is referenced so we need this syntax and each traveler has an id
also a name oops just a dot there
ah a slug and an image okay cool
so i think that is it now we need to use this sanity client again so once again i'm
going to save whatever comes back as a property i'm going to await
i'm going to use the sanity client client to fetch the query but we also
need to pass through the slug the page slug
page slug like that okay so and one last thing
again if there is no property
oops if there's no property
let's return props just an empty array
and then actually maybe no props now and then not found
true
okay um else then i want to
else else i want to return
the props which are the title once again
oops which is the property title the location which is the property
location to the property objects location property type which is the property
objects property type
what else was that main image which is once again the property objects
main image the images which is property images
um price there's a lot of stuff we have on here so just bear with me then the property
objects price per night the beds
property beds bedrooms i think we're nearly done property
bed rooms description property objects
description at the host so the property objects
post and finally the reviews so the property
objects reviews okay i believe this
is it so now if i pass through
a title and let's just replace this with
title there we go we have our title showing up amazing
so we have done this let's get all the other props in so that we can work with them
so i'm just gonna uh de-structure them up here
so once again title i'm just gonna actually just copy this because i don't wanna type them all out
individually again a description and then we're just missing hosts and reviews and i believe that is
it that we need okay now let's get to using this for our app uh this next section is
basically gonna be me just styling things up i'm making things look good so let's do it and after that
we're gonna actually use the google uh maps api okay so that we can visualize where the
property is on a map so
okay so we have um i'm just gonna get rid of this and then let's put this in a container
so i'm just going to put class name container
[Music] and now i'm going to put in the title so like title like so
and then let's also make the title bold actually i'm just going to work that in here um
yeah let's just get everything in for now so we've got our title in the next thing i want to do is maybe use
an h2 tag let's also make this bold and in
here i just want to put the property [Music]
type so that's going to say it's a flat or a house
property type hosted by and then if there is a host
uh i want to get the name of the host so just like that um cool
nice next let's use an h4 tag and i'm just gonna put
bedrooms so the number of bedrooms so that is a number don't forget so that's the number of bedrooms so i'm
just going to put the word bedroom uh and then let's also put
the beds so the number of beds and beds or bed we're gonna have to make
this multiple um because we obviously want to deal prop to type not to find
property type not defined cool so obviously because we have two
bedrooms we probably want that to be an s so i'm just going to quickly make a utils
uh file in the root my project utils dot js and then i'm just going to
write a quick helper function for us to essentially turn things uh
to have an s like make things multiple by adding an s to the word so i'm gonna do so like
this uh export the cons so we can use it
const is mole to pull
s is multiple and then i'm going to pass through a value and whatever value i pass through we are going to
essentially um return so we're gonna get the value and if the value deeply
equals zero uh or
the value is larger than one so i'm gonna actually put this
in value than one um if that is
is that true question mark if it is then please return an s otherwise just return an empty string
otherwise just return an empty string okay so if the value equals zero or is
larger than one return s otherwise return an empty string now let's import this into our slug
so import is multiple from the utils
cool um and i'm literally just gonna
do this so bedroom and then i'm just gonna do is multiple and then pass through the
value of bedrooms and do it again for beds so is
mul to pull and pass through the value of beds because that is a number and
whatever that number is um it's going to return an s or not so now both should come back with s's
and they have great let's carry on what else do we need in
here well
i'm just going to do a little line so that we can carry on
i know that okay let's actually just make it look a little bit more like the
actual website itself so i know that they have some text
like this so i'm just gonna go enhanced clean
here this host is committed
two air b and b's five step
enhanced cleaning process okay so we've got one
i mean this is just me just like being pedantic i guess trying to make it look exactly like the website
what else do we have we have amenities oh i can't spell
amenities amenities for
everyday living
um the host has equipped this
place for long stairs kitchen
champ conditioner
hair dryer included i mean you could have if you wanted to
you know had an amenities section in your uh content management system so
then you can get this data up if you didn't want it to be hard coded like i am doing now that would actually make a lot of sense
so please do also consider that and house rules i think i'm just gonna i think all of them have
the same house rules maybe they don't i'm not sure but i'm obviously just gonna hard code this for this project this
place isn't suitable for pets
and the host does not allow parties or smoking so maybe it's not
hard coded but there we go okay so
this is looking good we have some um text
the next thing i want to do is perhaps add a price box uh
so i'm going to add a div let's actually just call it price
box okay after this let's do some styling because at the moment i've just been putting in you know like words and
stuff but this is going to be the first thing that we properly style and in the price box let's just have
a price per night so here i'm gonna put in my um
so i've used the pound however please feel free to use whatever you want i didn't really want to you know give it
a uh currency in the back end but you can use dollars uh polish zwarte
whatever you wish okay um now i've got the price per night i also need to get a review
in here so let actually let's just do the review amount and once again
uh let's use review uh let's use is multiple again and then
pass through the reviews view amount like
so um and then
let's just have a button here as well in the price box um so let's style i like to use divs
because then you can really style up the button how you wish class name button
and let's just write that okay so the one is to change the dates and let's just
write that if you click on the button it'll just take you to the um to the main page
so on click uh oops on click
for now i'm just going to leave it empty and not do anything ah stop on click
why is it doing this to me why is it all red okay there we go so yeah i'm just going
to leave that for now and then we'll decide what to do i just want to take it back to the main page i think
okay so let's take a break here and style up the price button review amount is not defined
oh yes okay uh const review amount is just going to be the reviews
the view arrays length um we could have just put in the review
it's length in there but i don't know i didn't okay so there's all our information of course
we have to start adding images and stuff but let's just do a lot of styling first so all of my styling i'm just gonna put
it all all of it for the whole project in one page um i think that should be fine
so i'm going to go into the styles css global css sorry i'm actually going to
delete this because we don't need it um so i'm just going to have the global css
uh shall we delete all of this yeah let's go ahead and start let's start fresh okay so the first
thing i actually want to do is um for my html
and my body uh let's just put padding zero i like to keep
padding and margin zero to start with you know just so you can really um
make everything uh custom now i'm gonna actually import
a font uh from google fonts because i don't really like these so if you don't know how to do this i'm gonna show you
how google fonts just simply go in here and i'm gonna search for a font called
notto notto sans uh jp this is the one i quite
like and i'm just gonna select all of these because i think that were quite nice um maybe and i go let's go on
so i've just got all of them i'm going to import them so i can use this in my
project i'm going to put it out to the top like so
and now that just means that all i need to do really is get the font family
okay and now let's go into our project and ta-da the new font has
been applied i think that's a lot more air b and b ish
okay cool so we've got our new font um that's going to be
global now let's go ahead and do the let's
do the price box shall we okay so the price box
um let's just give it a width that is 35 uh of its parent container and then
height so that's the container itself the height let's make it 250 pixels
and now for now i'm just going to give it a border that is one pixel solid
and um rgb this is a color that i picked out
earlier
cool and a border radius because i like border radiuses uh let's give a border radius of 12
pixels and actually let's give it a box shadow as well box
let's make the box shadow rgb
um um zero six pixels
i actually inspected the airbnb page and this is pretty much what i got
nearly as was close enough to what um what i got for
the price box so there we go we've already got a sort of like nice price box um
showing up for us let's actually style the container it is in as well um
[Music] cool let's actually align everything
center to align items
center now we need to do display flex don't we
so display flex
flex direction column and i think that should be it okay so
that is now centered now let's do the container
so i'm just going to do that above here container uh display flex
flex direction column and now i'm going to give it a
margin maybe so top 20 and to the sides 50 top and bottom 20 that is
okay so we have a little padding around the container so that is good
um that's really the only things that we have oh we could do the button as well so let's maybe do that
let's make our button 90 of its parent give it a padding
of 15 pixels a border radius of let's say 10 pixels
a color now i actually inspected the uh airbnb page for this so this is the
exact color they're going to use they're going to use a gradient too that is the color of the text
and then the gradient we're going to use is this so we need background not
background color but just background and then linear gradient
i'm gonna have 135 degrees and then rgb two five five
five six nine two at twenty percent
and then rgb 189 30
89. so there we go there is our button
so yes it is very similar to mmb yes i did inspect airbnb's page for that button
okay let's carry on
okay so we have all of that we have a price box
let's go back up here so we've got the title let's actually also put in just a
smaller review amount because that's what the website has so i'm just going to put that in there
like so and then let's put in some images so to put in the images well the
main image is going to be easy so i'm just going to make a div um and perhaps maybe
actually let's make an images section so class name equals images
section and in here let's actually i'm going to create a
image component um so let's do that uh and then in
here i'm gonna have the a div that says it's gonna have the
sub images section cool
so i have that and now i'm gonna map on once again i'm just going to make an
image component and let's actually go make it fast why
not okay so once again in the root of my project i'm
just going to make components and in here i'm going to add image
js
const image equals and then i don't know what i'm going to pass
through yet but i'm going to return
a div with the class name
now i either want this to be a main image or an image so i'm going to have an identifier that
i'm going to pass through i then identify and if that identifier
is a main image um well then just keep main
image otherwise oops otherwise it's just an image
okay otherwise it's just an image so that is what the class is gonna class
name is going to be uh and then image is just gonna be well the source of the
image which i'm gonna leave um i'm gonna leave just blank for now cool so like i said i'm gonna have to
pass through an identifier and the image itself um okay so
i think that is fine for now it's going to save this file and then go
back to the slug so like i said we need to pass through two things an identifier and
an image for it to uh attach to the image source
so the first one well we know that an identifier
for the first one we want that to be main image okay
um and then the image we want to pass through is the main image from our data
uh and for these sub images well i'm gonna have to map onto here so the
identifier for this is just gonna be an image and then let's actually map so we're
gonna get our images from our data i'm gonna map um and for each
thing i am actually going to want to have a let's have
a key and the image oops
okay wrap that round
our function so i'm going to pass through an image
okay so i'm getting the images that we have that we have okay so i'm
getting the images that we have from our data and then i'm using map to
map the image onto each one of my image components uh so that should work i'm literally
going to pass through each of those images so i'm just going to click save for now it won't work because we
still have quite a lot of things to do image is not defined and we also
have an imported image into here so import
image from components
components there we go image now
we are gonna have to use uh a url for from sanity in order to essentially
get our images to show up so i'm gonna pass through the image
and i'm actually gonna import so let's go ahead and do that import uh
url4 from sanity so
if you don't remember that is from
here that is the code that i gave you and
we're just using this we are using create image url builder
that we have imported from next sanity and we have done some configuration and
saved as url4 now in my images js i've imported it and
i'm going to use it right here and what i'm going to do is get our image
that we have passed through but wrap um url4 around it like so
let's save does not complain to all right oops
um we need to export it export default
image
so there we go we have now got our image and of course
you can do a bunch of stuff with this um if i really uh there's a lot of like
cool stuff you can do like i could do auto for matt uh yeah like
the um sonic documentation will provide you with a bunch of stuff that is quite fun for you to do
as well so if you want to do that go ahead and have a read more about this right here
so the create image url builder okay cool so we've got our main image uh
now we just need to work on the little images too so let's do that
hmm i don't know why our images or small images aren't working
let's have a look console log images and let's see console log
main image it's very strange
so those are images each image has an asset a key and a
property type and this one just has the asset and type it's because we gave this a key
we've mapped on a key but this looks exactly the same as
this was essentially what is giving us the image
very strange very strange indeed
okay well you know what i'm going to come back to this um let's i'll read up on the
documentation because that's really weird i don't understand because all i'm doing is just passing on an
image into this image component that i made and it should work the same as the
main image but for some reason it is not
okay well i'll go back to it um what else can we do maybe let's do some
styling let's style it up so let's style up the images section the main image
and the sub images section so
images section images section i'm going to use display
flex and i'm also going to use flex wrap which we don't need to do that
i'm just going to do display flex and um make the
border radius of the whole section how will this look the same let's make
it like around 10 pixels i think that should be fine and hide any overflow so overflow hidden
so you can see we already have a [Music]
you can see now we have a little rounded edge and then these have moved over here so
now let's actually maybe do the sub section so sub images section
and just make sure that they also once we have the images that they are display flex but wrap over
themselves so i'm going to do flex wrap wrap like that and also overflow hidden
call overflow hidden do we want to start the main image yes
main image
let's give it a width of 50 pixels 50 sorry so it's always 50
of the apparent component and a height of 270 pixels
and also overflow hidden
maybe that's a bit too small
or we could just make it let's make the image
yeah maybe let's shrink it down a little bit i think maybe that would be wise so
any images in the image class or even the main class
uh
main image because we don't know about the other ones yet so the image within that let's give it a width of a hundred
percent cool so that looks better i'm just making sure that we can see the whole image
based on its width okay um i think i'm now ready to carry on
obviously it's a bit annoying about these but we'll fix those later now what else do we want to do
we obviously have all our information i am actually perhaps let's actually make a div that
is a section so we can start making this look even more like the airbnb website
section and then in it first i'm gonna have a
div with the class of information for the first half of our
section which has all the writing that we did so there we go and i'm just literally
going to i think take all of this and put it in here and then of course
make sure it's formatted correctly for readability
so one more there we go so there we go and now we have a section which has
information um
let's perhaps style those up too so i'll do this up here we've got a container we also have a reusable section
and we have a class m4 mason 2.
margin 20 pixels uh let's have zero so 20 pixels on the
top then i want zero on everywhere else and then i also want
display flex but uh oh yeah and justify content
uh space between so that's what all our sections are gonna be like and then the information
well i'm just going to give it a width of 60 pixels because we have the information box that i want
appear to appear on the right
great so now i think i need to move my price box so it's in the section but not
in the information section okay cool so this is looking a lot
better and of course more and more like our airbnb site should
okay so i feel like we're done with the top part now um let's just make another
line here and right under that let's
actually start with um i'm gonna put the description
so they just script churn of the property itself
followed by a another break or line uh and then because it is literally a
line or break really sorry and then under that
um once again i'm going to have an h2 tag
because that's what the website looks like and i'm just going to use my review amount again they like their
review amounts review amount of view
and then is multiple and pass through the review amount like
so now if review amount
exists or is larger than zero in actual fact and we'll actually know
just if it exists then we want to show the following then we want to essentially get our
reviews and map so similarly like the images
we're going to map our review onto each review component that we are
about to make so there we go
we're going to map it out like so
so for each review so we're getting the reviews array we're then uh gonna get a individual
review and we're gonna get the review component that we are of course yet to make
why is this not liking that
okay um and then to each review component well let's actually
pass through the review itself key
and the actual review cool
so now let's go into components and make a review js component so similarly to
uh the image const review equals no props to pass in for now
and then just return uh something so let's just put a div there for now and let's not forget to export
default re view now how do i want my review to
look well i know that i need to pass through the review itself um and then what do i want to
return well let's actually make this a class name
review box so that's something i'm going to style up and in my review box i want to add let's put an h1
tag the review rating
let's put another h2 tag and the traveler who did it so reviews traveler
that's attached to the review and then an image so i'm going to put an image of
the traveler so let's close that off the image i want to put through we're
going to have to use a url again so let's get the review
traveler image because i know the traveler has one i'm going to use url4 to wrap around
the review traveler image so i think that's it what else can we
have from the review i'm going to console log view just so you can see
yes i know review is not defined that's because we have not imported it at the top so i'm just going to import
that import review from review
url for is not defined uh so let's do that we need to import it
don't we so we need to import from sanity or sanity file import url for
from uh let's find some oops we went back too far
sanity okay
okay let's do some more debugging so we are passing through our review we're obviously not
passing through something correctly here
okay so let's go back here
let's just try console logging the review itself
okay so we are getting the review we're getting the review rating
so let's put that back in
oops
so there's one review that says five at stars let's also perhaps try the review
traveler
hmm the review traveler does not work okay
review traveler so that's it review traveler name okay that's why
because we can't actually have an object can we so review traveler name
i thought i remembered everything correctly but i did not so we've got our rating we've got our name oh my abdullah has given us a rating now
let's get his image
and then we have his image of course it is really big but if you remember what i told you we can actually format the
image directly from here so i could do something like width 50
height 50
crop focal
point see if that has worked so that's a lot better as you can
see um nice uh of course feel free to you know like
make it look however you wish but i think for now i am fine with that image just there so this
is looking good we are getting our ratings we are getting all the information
what else is there let's have a look
okay and the last thing we are actually going to do is
so once again just going to put that on one line let's make a
line because the last thing we need to do is show the location of our property on a map so i'm just going to give a
title location and for this part i'm actually going to
need to create a map okay so we will do that in a bit
or actually should we do that now okay let's do that now so for this i am going to have to use a
google api key google maps api key so for those of you who don't
know where to get one from google maps api
this is where i got mine from you need to sign on to the google maps platform
get the maps javascript api and then you are essentially provided with
a bunch of documentation um i'm obviously not going to go into this in too much because this should probably be
like a separate tutorial of its own but however um i'll just quickly show
you how to get your api very quick lee
so you would go into here that is the url and then you would
essentially create an api key there is a bunch of other stuff but as long as you get here you
should be fine it will then take you to a credentials page you might need to do a bit of signing up but once you have
that you should get to this which will give you credentials and you can
create a new project i of course have already created a new project so this is my project for uh using
sanity and i have my api key right here so i would simply copy that api
key and then in a dot env file i'm going to put google
places ap i like so and i am just going to
paste my google's places api so that is really
it uh once again this is what the page looks like um and this
is how i got to get the token it's on the google maps platform
so make sure to get to this page and once you do have that well it is quite good because
there's a lot of um code for us
so for example i would simply react map google
map api okay so this is what we need i literally
just googled it and got my answer so i'm just gonna take this it really isn't very complicated
just go to the react google maps api package and i am going to take all of
this like so um and then in my components i'm going to
create a map js file and simply paste all that code
it really is that easy once again this is the package that you need react
google maps api so i've pasted all of that in here of
course you need your api key here so we go process env
dot google maps api key because that is what we saved it as
in here oh no we didn't google places api it's a good thing that i checked
okay great so i believe this is all we really need let's
have a closer look so we have the container
style we have the center i'm actually going to move this into the component itself
so i'm just going to put it um perhaps down here i'm also going to
rename this so let's make it make this const map
equals just to keep everything consistent and of course export default and rename this to
map 2. click save now i'm actually going to want to pass
through the location that we have from our data and the location if you remember had a latitude
and a longitude so instead of having a hard-coded lasting longitude i'm going
to use my location latitude and i'm going to use my location
longitude just just like that
okay
and i think that should be it okay
so let's click save so we've got our map now i'm going to import map from
map
and then let's use the map under location and of course let's pass through the
location click save
all right we didn't import the package whoops that is my fault so let's start a new tab make
sure it's the tab of the front end npm i and then just import that package so we
can use it
okay now i'm just going to restart this and
scroll down
now because we are using it in dev mode it can be a bit temperamental if you want to give in your payment
details i think that should clear it up but um let's just see if this is working
so we're passing through our location let's see the map okay
so let's just console.log girl console.log console.log
location
latitude um and then let's actually put something here so we know what we are looking at
so we are getting it ah there we go so we are getting our location so as you can see
a lovely flat situated in the heart of battersea and that's where it's taking us it is taking
us to battersea so we've done it we have successfully uh
got our map working we can of course change the uh container style that is
totally up to us for example i might want to put 100 pixel
100 width and i think that looks a little bit better i can of course also put a little ma
i can of course also put a little marker where i want um my location
to be all i would have to do for that is essentially uh add a marker
so instead of this here i would use marker
and then the marker actually i don't need a closing one because it's self-closing and then i would just pass
through a uh position because marker is actually also
from here right so i need to get it from there it's already like pre pre-made for us
and pre-decided that it takes a position that needs a
latitude and we're going to give it location latitude and longitude and of course
we're going to give it location longitude um and then we can of course
give it an icon too uh i'm just going to give it like the standard
icon that came with um the documentation from uh google
maps google spaces google places api cell image and the
image is going to be const image equals
oops image and then i'm going to make sure that the anchor
has google new google
maps point so once again i'm literally just getting this from the
documentation
so if we go back here and we look at markers so add a marker to your map
that's basically all i've done i've used these instructions um to do so essentially
so once again i'm literally just using the documentation and i'm just going to use this is what
i've used essentially um and i'm just going to use this url as the
image so let's copy that so that our marker can have a cool little flag like that
so of course you can personalize this it is totally up to you but if i put a
little beach flag then i should get a little
once again i don't know why like i said it is temperamental because
i'm using it in developer mode i believe as you can see it says for development purposes only but i find
that somehow if you just i'm just gonna console.log
this then that seems to work for development purposes i can't see the map
the little marker though why is that
ah and there we go we now have a little marker that is a beach flag on our property
cool okay i'm loving what this is looking like um i do want to go back to the images
but like i said i'm gonna have to do some research on that so let's move on to the main page first and
then i'll go back and tackle this okay
uh oh yeah we wanted to also link this back to the um
home page so perhaps let's do that uh i'm just going to so maybe we
don't have to use a on click maybe we can just link it
next link
so we can just use a next link uh i think i'm going to do that so i'm just going to import that
here import link from next link so instead of having on click i could just
wrap my um div my button div
in that link tag and make the edge ref go to the home page and that should um
that should work so let's have a look
and great that takes us to the home page so now let's do the home page right okay
let's do it so i just need to go back to this page right here so at the moment
we're not returning anything let's change that okay
so in here i guess if properties do exist well then we want to essentially
show a feed right so this is what we want to show if they do exist we want to
uh let's create a div with the class name of
main okay and this is going to have a it will have our feed in it so
class name let's call it a feed container
okay and in our feed container um before we do any mapping because i
want to map all the properties in here let's just put places uh to stay near
you
uh a div with the class name
of feed
properties map so this is where we're going to do some mapping and once
again so i'm going to get the uh property itself and its index and
for each property well let's actually create another div
so i'm going to map onto this and then once again i'm actually going to use the
link tag i think but let's just have a think about what's going to go in here
so i've got my div uh let's actually let's just keep it simple
includes the class name of card for now uh and the key
of property id
okay so i'm going to map each property to this um little card essentially so we've got
our opening div and then inside each of these i'm going
to get an image oops tag
so again it's self-closing and for each of these images well it needs a image and for this i'm simply going to
get the property so property main image and of course we need to use
the url4 um like so so we need to import that to
uh url4 because it's in the same place as the sanity client so let's see how that looks so
amazing we are getting the properties that is looking good maybe let's do some styling before we
carry on so we need to sell the card the feed the feed container and the main so let's do that here
uh main
feed container the feed itself and the
card okay so i'm just going to give it some like rough styling really for now
let's make the main well it's going to have to have both the feed and the maps so i'm going to put display flex uh in
there and flex direction row because i want them to appear next to each other side by side
um now let's have a look at the feed container where the feed container uh i want it to
be width uh a hundred percent
and take up the whole height of the uh windows so like so
um i'm going to give it a background color that's slightly darker than white so i'm going to use
f8f8f8 and it's giving padding 20 pixels because everyone likes a bit of padding
in their containers now the feed itself i'm just going to put display
flex uh flex wrap wrap so the anything that goes into the
feed wraps over each other and then finally the card itself
uh each card is just going to have a padding of 10 pixels so we've got the feed and on the other
side we want to have the maps so i'm just going to put well the map
with all our markers so map
once again let's start that next to the feed maybe
also give it with fifty percent and the feed container to width fifty percent two so that they are 50
50. and now let's make these card images a bit smaller so perhaps make sure that the uh
any image in the cards or card image
his max width
i don't know 100 pixels it's maybe a bit too small 200 pixels
okay so that's immediately looking like a lot better uh it would just mean that they
sort of wrap over each other i guess
you can even make them 250 pixels it is it's really up to you
i'm also going to give them a order radius of 20 pixels
cool so we've got our little places to stay next to us we can even display more
information about them too so let's go ahead and do that
so i guess we don't need the index anymore um we do however want to link the card so
i'm going to just put a link that we're going to import once again from uh next link and then
we actually need to put the reference of the um
href of the image of the property slug so i'm just gonna do this
property forward slash and then we're gonna use
the property slug current
[Music] okay that should work let's check it out
link is not defined it's because we did not import it import link how do we do it
here okay
so now if we click on one it will take us directly to the correct page and we can go
back to cool so we've done that uh let's actually also maybe show
some more information so here is the card itself um
let's also add a p tag that perhaps shows the uh reviews because we love
reviews
so i'm gonna get the property and get its review uh views sorry and their
length um so i'm just going to go that and then review and once again
is multiple and pass through whatever this is
so if that number is multiple we'll get an s review um let's also perhaps
put in the property title so property title
like so and then the price per night why not so again let's make
that an age of three tag and go property price
per night
cool so now when we look here amazing this is looking a heck of a lot better
uh and then let's just put her like it's like so awesome i mean
i'm really happy with this i think this is looking really really cool okay
perhaps we don't even need that in bold but hey whatever it is absolutely
fine so we've got our place to stay near you now finally
let's actually get all the locations of these places actually no let's make a header first
sure why not let's actually make a header um
so for this i'm going to just create a navbar oops nav bar js
now uh the navbar is something to be constant nav bar like so
and i want the navbar to well it's going to have the logo for one so i'm just going to have a div
class name nav i need div
so another damn div with the class name of logo this time
okay and of course we need to export default love
okay now what do we want to do with this nav bar hmm
in the underscore app js file now again i'm just going to change this
to const my app equals just to keep everything consistent
and here in the return instead of just returning this component like so i actually
want to return the component with all the page props but with a navbar above it meaning that
the navbar will be on every page that we have no matter what so i'm just going to import that
nav bar up here and it means that will be on our property page or our main page
just whichever really so that's going to be quite cool i'm going to import nav bar from
my components and that is really it obviously we
haven't really styled it up so maybe let's style up before we have a look at what this
looks like so let's put it at the top actually
now and then of course we also need our logo
so our nav is gonna have a position um sticky because we wanted to be at the
top the whole time um i'm also going to give it a
z index so it's always at the forefront of a hundred
let's also give it some box shadow so rgb uh same as last time
so over 12 percent um
zero six pixels 16 pixels so i think that should be okay
oops
and a padding of 30 pixels and then our logo
um i'm actually going to use a background image for this so background image
and i'm going to actually import a image so let's
create a another folder here called images and
i'm just going to use a logo that i have pre-made and put it into my images like so
and now this means that i can go into my images
and get to the airbnb logo um i'm also going to just make sure that
it's the right size so let's just say like uh 130 pixels
and then a height of 40 pixels
okay let's have a look
hmm so that's not looking great what is happening here a background size
maybe you need to give it
okay so that is looking better and you'll see if i click on any of these
that our logo is still up there because the navbar is still up there the box shading
hasn't been box shadow sorry hasn't been applied to our nav bar why is that
now we've got one zero extra there that we don't need
hmm still so nav all right dot enough because it was a class of nav
so now we have okay this is looking really good the last thing you want to do is
actually um the cluster maps so in the index.js
once again i'm actually going to have to create another component
because we're going to have to have multiple markers so we can't just you reuse this one sadly let's call this dashboard
map js uh and i am gonna copy all of this
actually into my dashboard however we're gonna have to
map out markers for however many properties we pass in essentially so just to make it
less confusing i'm gonna rename this we could have kept this the way it is uh but i think just for readability
let's rename dashboard map here and dashboard map here
cool so this time we're not passing through a location we're gonna pass through properties so multiple
properties okay uh and that means that the how are we going to
do this
so we no longer really need this i'm going to get rid of that
now we need to map on to the marker so for each uh so i'm going to go get
the properties and i am going to map
so let's make sure to do that at the end i'm going to map um
each property and its index so we probably don't even need index but
that means that for each position well if there is a property
uh and its location exists we want to get the latitude and then the same for the longitude
so just stick that in front of there you don't need that so we're going to
map onto each one each of the properties uh latitudes and longitudes okay
so now let's have a look at what this looks like we didn't import the
dash map dashboard so once again let's go here here is the map and then i'm simply
going to put the dashboard map and then we need to pass through
the properties like so properties and then we need to import it
ah which is already done for us thank you very much so now let's have a look at what this
looks like center is not defined i yes because we don't have a center anymore does it
need a center yes it does but we need to get the
average of all these properties which is uh because we can't really
do that but luckily they're all in london we can't do it easily we could but for now
i'm just going to use my center as the first locations
uh latitude and longitude okay so property
properties we're gonna go into the first one and get its location uh latitude and
we're gonna go into the first one again and get its location longitude
so now we have a center
why is it there i don't want it there
heights let's also make this 100
vh amazing so we've done it we have mapped on two of those properties like i said the
center is actually the first properties location if you really wanted to get an average
of the longitude and latitudes of each one you'd have to do that math in that component
i'm not going to do it here but if you do want to do it you need to do exactly that get
the average point of all of your properties longitudes and then the
latitudes so this is looking really cool i'm really pleased with how this has turned out
why is that appearing there i don't want it appearing there though let's fix
that i want it here um
let's just see what our map is doing let's just give a background color
of uh red for now
okay so it's there why why are you there
let's try and move it out one see if that helps no ah okay yes
and now i guess
main we'll just do
let's find me oh that's why i didn't okay ah my god i've been coding
for too long so now i can get rid of this red let's go back here i'm just going to
console.log something so it works console.log
let's just do this and then have a look here and there we
go how good is this we are getting our properties if we add a new property in our content
management system it will show up here and the little flag for it will show up on the right so the little marker
and then if we click in here we get the actual
flat or property so this is amazing we have now finished our
airbnb clone um i'm gonna finish this image problem now for sure but thank you so much for
coding with me i've really enjoyed this this has been a long one but hopefully you do have a very uh
well-rounded app complete with content management system complete with a google maps api i'm
going to put all the links to everything that we discussed in the description below as well as where to get your google maps
api uh where to get the sanity information and just in general
where to find my finished code which i'm going to tidy you up to but for now let's get to
fixing this image problem okay so what i would do is just this i would simply
change this a little bit around here um i'm not sure why this wasn't working
but this should be the best solution if you do ever get stuck by the way sanity does have a discord
channel that i'm aware of and the one time that i did ask something everyone was quite responsive
so that was good so please feel free to use that i don't have the link but i'm
sure you can find it on sanity io or i could actually find it and put in the description below
too so reminding me if it is not there but yes so this is how we would fix
that and ta-da okay so we are now officially completed
thanks so much again for watching please do share your finished products i'm gonna clean this code up a little
bit so while it will mostly be the same if i have maybe like changed some styling or
something uh then don't freak out i'll most likely just be changing the styling i do want
to keep this project as similar or exactly the same as this tutorial has
been so once again here's my finished product i hope you uh have enjoyed this
tutorial please do give me a thumbs up and a sub if you did
and i will see you again for another tutorial soon
No comments:
Post a Comment