React Booking | Reservation App UI Design for Beginners

hello my friends today we are gonna design a booking app using react and css this is the home page we will have some lists and here we are gonna have an awesome search bar i will write the destination i can choose any date range here and other options when i click this search button the result page shows up and i can change my search inputs or add other options let's choose any hotel here and this is the single hotel page we can see its details and finally we are gonna create this awesome gallery without using any library it's a decent project to improve your design skills and in the next video we are gonna create a back-end server and we will fetch all these data from adb by the way let me know which backhand technology you'd like to see for this application in the next tutorial i'm gonna check your comments ok if you are ready let's get started okay if you created your folder let's create a react app to do that of course you can write here mpx create react app but if you do that it's gonna create many unnecessary files here like icons css files test files to prevent this we are gonna use our github repository if you visit this page you can find here the minimal version of react as you can see and we are gonna clone this branch to do that let's come here and copy this url and after that i'm gonna say git clone but we are gonna clone only one branch so i will say single branch and i'm gonna write my branch name which is react mini and i'm gonna paste my url here and finally i want to download everything in this folder to do that i'm gonna say dot and enter as you can see all those files are here but we don't have our libraries to install them you can write npm install or if you are using yarn just right here yeah and that's all as you can see our library is here so let's start our application i will say yeah start or npm start and that's all let me zoom in okay perfect as you can see it's only one text here which is hello world and all folders are pretty clean so we can get started firstly what i want to do is creating react router drone that's because we are going to have multiple pages we are going to have home page hotel page and each individual hotels to do that we are going to use react radar let's install this library i'm going to copy so let's create another terminal here and i'm going to say yan add or npm install react router let's see how we can use it as you can see we should import those components and after that we are gonna create this router wrapper and inside we can create our routes let's do that i'm gonna import them and inside let's create our routes first one will be our homepage i will say root and path will be home page and here i'm gonna include my element and it's gonna be my home component of course we don't have yet let's create i'm gonna come here and create new folder it's gonna be pages and first one will be home page and inside this folder i'm going to create my js file i'll say home.js or jsx whatever you use and i'm going to create my function let's use it here i'm gonna say home and i'm gonna import my component and that's all let's close this route and let's see i'm gonna save and as you can see we are in the homepage right now let's create other routes to do that firstly i'm gonna create my other pages it's gonna be list let's create our js file is gonna be list.jsx and i'm gonna create my function okay i'm gonna create another route here and it's gonna be let's say hotels then we visit this page we are gonna see our list item like that let's try i'm gonna say hotels and as you can see list is here perfect let's create another one and it's gonna be our single hotel page you can say single or just maybe hotel i'm not good at naming these files or class names so you can do better ones so let's say hotel.js and this one will be hotels but this time i'm gonna give an id it's gonna be the unique id of the hotel so let's say here hotel and whenever i write here any id as you can see we are gonna see this page and after this tutorial of course we are gonna fetch data from any db and according to its unique id here we are going to fetch our items but for now for the design part it can stay like that so let's get started with the home page i'm gonna show in here and i'm going to create my style file of course if you are not a beginner if you want to use style components or sas or any other ui libraries you can use them but i want to make this tutorial for beginners as much as possible so i'm gonna create a css file so i will say home.css let's import this file instead of react i will say home.css we are not using react that because after react 17 we don't need that so i'm gonna open home page by the way we can close them okay firstly let's create another bar here it's going to be similar to booking.com as you can see we are going to add this nail bar and this part can be our header with this search button and we are going to add this maybe those these and this hotel list but anyway let's get started with this number i'm gonna close here and i'm gonna create components here components and first one will be never and inside quickly never jsx and css oops it should be inside this folder okay let's close our sidebar and i'm going to create my function let's import level.css and i'm going to use this component in my home page let's say network and let's see okay perfect it's here firstly i'm going to give a class name for this number it's going to be jazz nubber and inside i'm going to create a container it's going to be now container and first thing i'm going to add is my logo let's say spam and logo and it's gonna be normal booking and the second one is our navbar items which are login and register buttons to do that i'm gonna create new it's going to be now items and we are going to have two buttons here button and now button and first one will be register i'm going to create one more and it's gonna be login like that okay let's give some style i'm gonna open css and for the number i'm gonna give a height first let's say 50 pixels and i'm gonna give a background color it's gonna be this blue color let's see okay let's enter everything here to do that we are gonna use display flex and just by content center like that but as you remember we have a container here we have container so we can give any width for this container so i will say now container and i'm going to say with a hundred percent so it's going to cover all this nailbar class name but i want to give some limit for that i will say max width and it's going to be 10 24 like that let me give some background color and you can see better i will say red and as you can see its maximum width is 10 24. that's because if you are using a laptop or any small screen it's gonna look like this as you can see it's full screen right now but if you are using a monitor or any big screen we are gonna limit its width like that let me zoom in so if you are using a small screen you can see better and i'm gonna delay it here and i'm gonna give a font color here and it's gonna be white as you can see our logo is white right now and let's take care of our logo i'm just gonna increase font weight it's gonna be a little bit thicker like that and let's make this container horizontal i will say display flex like that let's enter them vertically align item center like that and i'm going to separate them i want to move the second item in the end of two container so i will say justify content space between like that perfect what about those buttons let's check okay class name i'm gonna copy this firstly i'm gonna give some margin between them let's say 20 and i want to delete border it's going to be known like that i can give some padding and i can change maybe this text color let's say padding 5 pixels from top and bottom 10 pixels from left and right and i'll say cursor pointer and finally font color will be our blue color like that so let's create another component here i'm going to open my sidebar and inside components i will say header and inside let's create jazz and css file header and css okay let's create function and import css file and its class name will be header let's use it under narrowbar i will say header and it's here let's see i'm gonna create here a header list it's gonna include hotels flights or any other options by the way let's close everything here and open up again okay so i will say header list and inside this list we are gonna have some items let's say header list item and inside we are gonna have an icon and text for icons you can download any image and use it here or you can use material ui icons but i want to show you something different i'm trying to teach you different options in every tutorial so we are gonna use font awesome okay it's an awesome library that we can use any free or premium icons let's say for example hotel as you can see for example we can use this one if you are using html you can directly add its javascript file and use it like that but if you are using react you are gonna need some libraries let's come here and for react and we are gonna need this core package if you are using ampium just copy here if you are using yarn copy here and i'm gonna paste it it's gonna install and after that we are gonna add our icon packages of course we are not gonna use premium we are gonna use for free let's copy them and paste and finally as you can see it's for pro version and lastly we are gonna use this component to do that we are gonna install this library there are a lot of libraries okay let's search for it again it was that okay this one i'm gonna come here and copy this one and let's check whether it works or not of course we are gonna need to import this let's see okay we cannot see it that because we should import our icon also like this as you can see we are going to import it and use it like that let's do that instead of this text i will say f a and bat and let's see okay perfect it's here and next to this icon i'm going to add here s pen and it's going to be space and i'm gonna add other items also i can just copy and paste you don't have to waste time as you can see plain icon flights car icon car rentals and finally taxi like that let's give some style for them i will say there's css and i'm gonna take this here and let's get started with header i'm going to say background color it's going to be our main color and font color will be white and again it's going to be display flags just by content center and we are gonna do the same thing remember we are creating here a container let's say header container and i'm gonna wrap them like that and i will say header container and again a hundred percent but maximum width will be 10 24 okay it starts from here let's give some padding from top and bottom we can do it in just one line to do that i'm gonna use margin from top from left bottom it's gonna be a little bit bigger and finally right left and right will be zero like that so let's make this list display flags so they can be horizontal i will say display flags i can give some gap between them so i will say gap let's say 40 for example okay perfect and for each item i can do the same thing flexbox and gap between this icon and text what was the name of this class name header list item i'm gonna come here quickly display flags align item center and cap will be 10 pixels oops gap okay so what i'm gonna do is adding additional class name for this first one so it's gonna be active so we can give some border let's come here and say active and i will say if it's active give some border it's gonna be one pixel solid and white i'm gonna give some padding oops it's not here that because i didn't save here okay perfect let's give some border radius it's going to be 20 pixels and that's all it looks pretty good and i'm gonna add here a title description button after this list view i'm gonna come and say header title it's gonna be exactly the same text in booking.com let's say p tag and it's going to be description header description and finally a button is going to be button header button like that sign in or register okay let's give some style for this description maybe i can give some margin header description i'll say margin 20 from top and bottom but 0 from left and right like that maybe some margin here i will say margin button and what about this button let's copy this class name obviously i'm going to say background color is going to be this blue color and font color will be white and i'm going to delete this border and i'm going to give some padding inside and maybe font wait a little bit thicker borderline and padding 10 pixels and finally let's say cursor pointer so we can click like that it looks pretty nice and finally we can handle one of the most important part and it's gonna be our search bar so i'm gonna create another div here and it's gonna be header search let's check again booking.com as you can see it's in the middle of the header component and it's gonna ask our destination and checking button here and we are gonna have some options and finally we are gonna have a button here of course it's gonna be a little bit different but the main component is like that let's do that i will say header search item and first item will be our input of course we are gonna need an icon and it's gonna be again this bad icon because we are gonna search for any hotels and after that i'm gonna say input it's gonna be text i'm gonna give some placeholder and it's gonna be where are you going and let's give class name maybe header search input i'm gonna close here for now so we can see better and we are gonna have two more one two and this is gonna be calendar icon calendar days and it's not gonna be an input instead i'm gonna put here a span i'll say span and we are gonna add some date checking date to check out date of course it's gonna be dynamic but we are gonna handle that later and i will say class name header search and text and i'm gonna do the same thing for other item it's gonna be spam but this time it's gonna be two adults two children and one room again we are gonna change it but for now it's okay and this icon will be person icon let's see okay as you can see inputs are rotates and options let's take care of this search bar i'm going to open again my css file and i will say header search and i'm going to give a high thrust background color will be white and i'm gonna give a border and it was yellow remember i would say three pixels solid and this yellow color and of course it's gonna be horizontal display flags align item center like that and i'm gonna give justify content it's gonna be space between or around let's try around it looks weird that because we don't have any button yet but when we add this it's going to be better and by the way we cannot see our icons let's give class name okay we already have i'm going to use it and it's going to be color light gray like that okay let's give some padding inside this search component padding 10 and from right and left and i'm going to give some border radius and it's going to be 5 pixels but how i'm gonna center this here of course we are gonna use positioning here and it's gonna be position absolute and i'm gonna give any position here to do that we are gonna use bottom it's gonna start from in the middle of this line to do that we are gonna use its height remember each side is 30 pixels but we should consider this padding also in total it's 50 pixels if i say button minus 25 pixels it's going to start from here but as you can see there is a mistake here that because we didn't give relative positioning for the parent so i will come here and for this header i'm going to say position relative as soon as we do that as you can see it's in the middle right now perfect and by the way i can give some bit for this search button search bar i'm gonna say with a hundred percent and maximum width of course by the way let's create our button also i'm gonna come here and another item and here we don't need any icon only thing we should do is writing here a button it's gonna be header button and i will say search like that okay it looks much better so let's take care of our items search item i'm gonna make this display flex align item center and i'm gonna give gap between these icons and other items like this input okay perfect so what about this icon header search input and it's going to be borderline we don't need any border and also i'm going to delete this outline so even if i click here we are not going to see any border or outline so what about spans remember header search text i'm going to say color light gray and i will say cursor pointer like that so when i click on this span we are gonna see here our date option to do that we are gonna use a library and it's gonna be react date range it's a pretty popular react library so we are gonna use it let's check this demo as you can see we can choose any date range here and also we can change our ui like this or this one as you can see it's minimal version let's use this of course we are going to import our library first so i'm going to come here yeah i'm at via date wrench and after that we are going to import this component and use it like that let's check here view code and as you can see firstly we are going to need a starting date and ending date and we are going to pass it as a probe here let's import first and you're gonna understand better i'm gonna import and firstly i'm gonna create a use date as you can see it takes new date which represents the current time and ending date will be null and after that we are gonna pass it here let's copy this i'm gonna paste here of course we can change its name i will say date and set date i'm gonna import use date and we are gonna use this component and after this span i'm gonna paste it here and it's gonna be set date as you can see our event is ready whenever we change any date it's gonna drag the update out date and this prop will be just late let's see okay there's a problem here that because we need one more library i forgot that it's going to be yarn add and date f and s and by the way we have to import those css files otherwise we are not going to see this ui so i'm going to come here and paste it like that okay perfect as you can see this is the beginning time and we can choose any date range here of course we are gonna handle this style to do that i'm gonna give class name here and it's gonna be let's say just date i'm gonna come here and what i'm gonna do is giving an absolute positioning in this case it's gonna start from here i will say position absolute and if i say top zero as you can see it starts from here but if i say 50 pixels it's gonna be much better okay right now instead of day to date let's give our actual date here it's gonna be 20th of april to whatever we choose here of course at the beginning remember it was null if we do that it's going to be an error to prevent this instead of null i can create new date here also in this case we can use those states of course their type is javascript date to transform them into readable strings we can use format function of date f and s let's say format of course from and let's copy this and here i'm gonna say format date first item that because remember it's an array and this object in this array so we are gonna write zero and start date and i'm gonna write here which type i want to see it it's gonna be month and then days and finally years you can change it for yourself or your country and after that i'm gonna say to and i will do the same thing for ending date i'm gonna copy here let's paste and it's going to be and date like that let's see april 20 20 22 but if i change here as you can see it's changing perfect but there's a problem here when we open our application we shouldn't see this component to prevent this i'm going to create one more use stature and that's right here i'll say const open date and set open date it's going to be your state and at the beginning it's going to be false we are not going to see it so we can write here our condition i'm going to wrap this and i will say open date is true like that it's going to be false so we are not going to see it but whenever i click on this pen we are going to change our state i will say on click method and i will say set open date and it's going to be the opposite of open date if it's true it's going to be false if it's false it's going to be true let's try i'm clicking and it's here clicking back and it's gone perfect it works so we are gonna do a similar thing here we are gonna create here a component and we will be able to increase adults children or room number i'm gonna come here and it's gonna be open let's say options set open options and again it's gonna be false and let's say const options set options and it's going to be use state and i'm going to give here my variables first one will be adult is going to be 1. let's say children is going to be zero at the beginning and room number will be one so let's use them again instead of this text i can use my state right now i'm gonna say options.adult adult and i'm gonna write here a separator it's gonna be taught and options dot children will be children and finally options dot room will be true let's see how it looks okay this is undefined okay there is a typo here okay perfect our state is here so when i click here i'm gonna open new component let's write after this span and i'm gonna create new div here i will say options and we are gonna have three items let's say option or option item and firstly we are going to create here s pen i will say option text and first one will be adult okay we have text right now and i can add increase and decrease buttons let's say button option corner button and first one will be minus and one more is gonna be plus and in the middle of them i'm gonna create another span and it's gonna be our number option counter and number let's say one let's see okay it's here of course we cannot see because it's white but as you can see it's here adult are buttons and one is here perfect so i will do the same thing for others i'm gonna create two more items and it's gonna be children at the beginning is going to be zero and true it's gonna be one let's put them somewhere here again it's going to be a position absolute actually i'm going to open this here okay let's come here and firstly we are gonna have our main div options and i'm gonna say position absolute and again top 50 i will give background color it's gonna be white but text color will be gray i will give some padding and border radius border radius will be 5 pixels if you want to you can give any border like 1 pixel solid and grey or if you want to you can give any box shadow if you want to create your own box shadow you can google box shadow generator and after that you are going to see how easy to create that okay perfect so for each item let's give some bits maybe option item i will say 200 pixels like that i will say display flags and i'm going to separate them just for content space between and i will give some much or if you want you can give some padding for this main container doesn't matter but it looks a little bit strange that because we forgot wrapping this component with another container let's do that for this minus button number and plus button i'm gonna create one more div and it's gonna be option counter i'm gonna wrap them and i'm gonna do the same thing for other items this one and this one okay it looks awesome so let's take care of this i'm going to copy this class name and i will say display flex align item center and i'm going to give some space it's going to recap that pixels like that and i can decrease this font size it's really big let's say 12 and let's change this color it's gonna be black okay perfect and those buttons let's copy this i'm gonna give some width and height i'm gonna give some border one pixel solid and our blue color and also text color will be the same and i will say cursor pointer like that maybe background color white it's gray right now it's gonna be white okay but hope i'm gonna change them when i click them those buttons nothing is changing let's close here and i'm gonna say on click event here i'm gonna create a new function handle option for example and i'm gonna pass inside my variable name which is adult and it's gonna be negative or decrease or just d and i'm gonna do the same thing for other buttons this time it's gonna be increased children again increase and of course children and finally group and increase of course if you don't want to write them again and again you can create your new component and you can pass this div in that component but i'm not gonna do that it's just two items let's create our function here i'll say const handle option and it's gonna get our name adult children or room and operation increasing or decreasing and i'm gonna set my state set options and i'm gonna take my previous state and i'm gonna return the previous state and i'm gonna write their name in this case if you write them inside an array it's going to find their name inside our object here of course we are going to need a condition here i will say if operation equals increase we are going to increase this number it's going to be options name in this case it's going to find our object value here and we are going to increase it plus 1. otherwise it's going to be -1 if you don't feel confident about javascript it might be confusing for you if you are confused just search for javascript objects and get more information but i'm gonna explain one more time i hope you'll understand let's say adult is one children zero room is one so whenever i click this button for example only adult is gonna run this function and it's gonna set our options it's gonna take the previous state which is adult one children zero room one it's not gonna change anything it's gonna be exactly the same object and after that it's gonna find our name it was adult in this case it's gonna change this one and it's gonna check our operation if it's increase it's gonna find our property value which is one and it's gonna add one if it's decrease it's gonna do exactly the same thing but this time it's gonna decrease its number it works like that let's try i'm gonna come here and click and as you can see it's two right now let's click here perfect it works but this one is not changing that's because we just gave numbers here instead we are gonna say options dot adult options dot children and true here okay perfect but there's a problem here as you can see i can go under zero to prevent this we can give disabled attributes for our buttons what i mean by that let's come here for this decrease button i'm gonna say disabled but if options.adult smaller than or equal one in this case if it's one i'm not able to click here anymore i'm trying as you can see it's not working anymore perfect i can do the same thing for others i wrote here one that because it should be at least one adult and for children it can be zero and for room again it's gonna be one of course we can give a style for this disabled attribute i'm going to open my css for this button i will say if it's disabled change the cursor and it's going to be not aloft and as you can see there's a not allowed sign here and i cannot click and here 1 0 and disabled of course it was -4 because i didn't refresh my page if i do that as you can see one and i cannot click perfect but we are not supposed to see this component and again we are gonna use open state issue i will come here and for this options let's cover this div and i'm gonna say if it's open you can show it if it's not it's gonna be closed and for this span i'm gonna write onclick method and it's gonna update our state set options sorry set open options and it's gonna be the opposite of open options i'm clicking and it's here clicking again and go perfect it works so we finished our header of course in hotels page let's come here and say hotels i'm gonna import this nail bar and header again let's open up list and i will say number and header why didn't import this okay interesting let's import like that but in this case if we are in this list i don't wanna see this search bar or those texts it's gonna be only this list how we are gonna do this it's really easy i can give here a prop i will say type and it's gonna be list and we are going to check its type if it's this we are going to delete those components let's come here i'm going to take type and here from this h1 to last item here i'm gonna wrap them and i'm gonna write my condition but before of course we cannot use them like that you should use any parenting or react fragments like that i'm going to open it here and close here and i will say if type is not list if it's home page we are gonna see them if it's not we are gonna see like that and of course this padding is too much if you use style components or something like that it's really easy to handle but if you are using css basically you can give here any condition for this container because remember in our container we have this margin but we are gonna have a condition here i'm gonna say if type is list it's going to be header container but list mode if it's not it's going to be just add a container right now i can arrange my other style here so i will say header container and if it's list mode i'm gonna delete this margin bottom and it's gonna be zero like that's perfect if i go to home page it's going to be this big one awesome of course you can use any inner style here also you can say style and margin and other things but it's easy writing using class name and that's all we finished our header let's create some lists so let's close everything here and i'm gonna open my home page and here after header i'm gonna write home container that because we are gonna have multiple lists and first list will be city list as you can see there are some cities here maybe we can create this one this one and one more let's see what we can do by the way i'm gonna close here and i'm going to create one more component and it's going to be featured it's this or just featured css and i'm gonna import my css i'm gonna save here and i'm gonna add my component here like that and it's here and again i can center this to do that i'm gonna open home css and here i will say home container firstly i'm gonna give margin top and i will say display flex it's going to be flex direction column that because all those components will be vertical i'll say align item center and i'm going to give some gap like that so if i create another list it's going to be a space but we don't have home container okay uppercase like that okay perfect let's delete this last one and i can close here and my sidebar and let's create our lists i will say class name is gonna be featured and we are gonna have let's say three items featured item and we are gonna have an image image i will just copy and paste from booking.com like that and some titles here feature titles i'm wrapping them that's because i'm gonna give position absolute so we are gonna see those titles on this image so first title will be let's say h1 and w and here we are gonna have property number let's say any number doesn't matter properties and i'm going to change here it's going to be h2 it's going to be smaller image and those titles will be somewhere here so i'm going to copy and paste my other items i don't want to write them again and again as you can see just st names and their images are different let's see okay perfect let's take care of them i will say featured with a hundred percent i'm going to give max width it's going to be 10 24 i will say display flex and just for content will be space between i'm going to separate them and finally i'm going to give some gap let's say 20 like this of course those images are really big featured image i will just save it 100 percent and i'll say object fit is going to be core so it's going to cover all components like that all this container so let's change those colors and i'm going to make this container position relative that because titles will be absolute so i will say featured item position relative and i can give color here it's going to be white let's give some for the radius let's say 10 but if i do that it's not gonna work that because it's overflowing this image to prevent this i'm gonna write here overflow hidden in this case it's gonna be like that by the way i can give some height for this let's say 250 okay perfect so what about titles feature titles position will be absolute let's say bottom 20 like that 20 pixels from bottom and let's say 24 ohm left left 20. but when i click here as you can see our model is under our images so if i come here and say the index and let's say one and if i go to header and where is our date here i will say the index is gonna be bigger than one let's say two and as you can see it's here so i will do the same thing for this component which is options i'm gonna copy this and paste here okay perfect there's no problem right now so we finished our first lists let's create other one so let's create something like that we are going to have property type and by the way we can use this title also and i will use those images image and its title and maybe subtitle we are gonna do like that but let's open home page and i'm gonna give a title here let's say home title i'm gonna move this here if i say where is our css home title i will save it 10 24 in this case it's gonna be here and i will reduce this font size it's gonna be just too many like this let me make this normal zoom it's gonna look like this in big screens and something like that in small screens let's create another component but first i'm going to close everything and i will say property list and css [Music] and jsx ref ce and property please dot css okay let's give class name i will say p list and inside let's say p list item it's going to be our first property and again image p list image i'm gonna copy and paste quickly like that p list titles and again h1 let's say hotels and h2 some number hotels it's exactly the same thing only difference is it's not going to be position absolute so quickly i'm gonna copy and paste other items if you understood here as you can see apartments results and i'm gonna use it in home page after this text i will say property list like that i'm gonna come here and for p list with a hundred percent i will give max width it's exactly the same thing actually i'm not going to explain this just why content space between and cap will be 20. and for each item p list item a game board radius 10 pixels overflow hidden and i'll say cursor pointers so we can click them and for each image i'm going to give some bit which is a hundred percent and i'm gonna give height let's say 150 pixels it's going to be small of course object fit cover let's see okay something is wrong with our class names i think okay they are going to be uppercase okay perfect of course those titles are really big titles and for h1 i'm going to say 18 pixels and i'm going to replicate this and this time it's going to be h2 and font size will be smaller and i will say font weight 300 it's going to be thinner like that but there's a problem item okay it's titles but others are title let's correct them like that okay perfect but as you can see all images are not in same size to prevent this for the parent which is item i'm gonna give any bit or as we gave here for the xbox we can use flex i will say flex just one and this time they are gonna be in the same size perfect and the other one is gonna be those items let's copy this title we are going to have image titles here it's going to be similar let's see okay now i'm going to close them and open my home page and again one more title here and it's gonna be this title and one more component here what can we say featured hotels or properties i don't know seriously anyway i'm not gonna think about them right now featured properties i'm going to create my function and here css and i'm going to pass it here featured properties i'm going to give class name let's say fp and again i'm gonna write the first one and for others i'm gonna copy paste again let's say fb image i'm gonna copy my source and i'm gonna have three spans here first one will be property name it's gonna be a part hotel miasto and of course it's gonna be spam and i'm gonna duplicate this and second one will be city and third one will be price let's say moderate and starting from 120. and one more thing we are gonna need and it's gonna be rating to do that i'm going to create one more div and let's say rating and i'm going to add here a button is going to be our rating let's say 8.9 it's a pretty high rating by the way and spam will be excellent and i'm gonna create three more like that copy and paste i didn't change any of them like that okay let's give our stars for the container it's gonna be exactly the same nothing has changed and for each item i will say again for x1 and i'm going to give some gap let's say 10 pixels like that but let's take care of those images and we can see better i will say we need a hundred percent so it's gonna cover our item and again i forgot giving here item container let's give i'm doing here really quick but because it's similar things and right now it looks pretty good this is our hotel name this is city and this is our price but they are in the same line to prevent this i'm going to make this item display flex and flex direction will be called like that and for this hotel name let's see fp name i'm just going to say front weight bolt like that and i'm going to decrease front weight of this t and increase front weight of this price so fpst is going to be font weight 300 and price will be let's say 500. it's not bold but thicker than this one okay awesome so what about this rating fb rating for button inside remember it's our number i'm gonna give a background color it's gonna be our main color and font color will be white like that let's lay these borders and let's give some padding maybe border non compelling three pixels and i'm gonna give margin right and i'm gonna separate this button and this text okay maybe font wait bolt okay it's better and let's increase this font size for this text fp rating and it was a span remember here and i will say font size 14. okay perfect it looks pretty nice and let's create one more component and it's going to be our email list i'm going to close them and let's come here for these components and i will say mail list jsx and css and my css file here let's put this inside home page on jsx after this list i will say mail list let's close here okay i will give class name it's gonna be mail and i'm gonna add here a title h1 mail title let's make this uppercase let's see here as you can see it's going to be our title and description we are going to have a container here which includes input and button and that's all and after that we are going to create our footer nothing special as you can see we have five lists here and maybe we can create this text so i'm gonna paste this text here and let's say span mail description and a container mail input container and inside an input let's give placeholder it's gonna be your email and a button it's gonna be subscribe and let's open our list here and firstly i'll say male and it's going to be with a hundred percent but this time i'm not gonna give any limit that's because it's gonna be full screen full width and i'm gonna give some margin oops okay i forgot here my folder okay as you can see it's full screen of course we are going to center this but before let's give our colors background color text color and i will say display flags flex direction column they are going to be vertical and align item center let's give some gap between them like that of course we can get padding okay perfect and as you can see it's really small let me zoom in again we can increase this input height i will take this class name and for inputs let's give some bit first and height will be 30 pixels and i'm going to use some padding i'm going to delete border like that and let's give some margin here margin right 10 pixels okay what about this button button and it will be 50 background color will be light blue and text color will be white let's increase this font weight like that and again let's let this border maybe put radius 5 pixels and cursor pointer like that i can give same border radius here for this input okay it looks perfect and one more thing for this home page and it's gonna be footer let's create quickly footer css i'm going to close here function and css let's give class name and inside i'm gonna write a wrapper let's say footer lists it's gonna wrap all lists remember they are horizontal and for each list let's say f list li f list item countries i'm gonna duplicate this and change regions cities districts airports hotels actually you can copy and paste from booking.com don't waste your time but basically i'm gonna create exactly the same list two three four five okay let's open our css part before let's go to home page and call our component here it's gonna be footer like that okay i will say footer hit a hundred percent 10 24 i'm gonna decrease font size and for wrapper i have lists i'll say display flex and let's save it 100 percent and i'm going to separate them like that let's give some margin here maybe but because we are going to add another text margin bottom 50 and here i will say f text and it's going to be copyright 2022 and whatever you write llama booking okay let's see okay but i don't want to do storage we can delete them at least i will say this style and it's going to be no but as you realize there is a default padding here let's delete this i'll say padding 0. now for each item i'm going to give some margin between them f list item margin button let's say 10 and for font color i'm going to use my blue color and finally cursor pointer like that perfect as i said you can just copy paste those link names i don't want to waste time you can find the original one in the github repository okay let's zoom out and see and it looks pretty nice and if i zoom in okay perfect so let's create a search list when i click this button we are gonna go to hotelslink and here we are gonna see our results to do that i'm gonna open my list and by the way let's create css and i'm gonna import okay let me show you what we are gonna create as you can see we are gonna have a search component here and after that we are going to create this hotel list i will come here and create my container and inside will have wrapper and first item will be list search and second will be list result it's gonna be our hotel list okay let's take care of this search firstly i will add a title let's say this search title and it's going to be search let me put this here and i will say list container display flags just by content center and i'm going to give some margin from here and after that so let's take this wrapper and i will say a hundred percent and i'm gonna give max width and it's gonna be display flex and cap will be 20. let's check here as you can see our search component is smaller let's say full x1 and for this result flex 3 i'm gonna come here flex one and result will be three like that and i'm gonna give a background color for this it's gonna be this yellow color and firstly let's create a title i will say h1 list search and title like that let's give some style font size 20 color will be gray like that and i'm gonna give margin bottom okay let's give a padding for this search component i will say padding 10 and i'm going to give border radius let's say 10 pixels and i'm going to make this position sticky that because let's check our example when i screw this page as you can see it sticks on top to do that i'm going to give my position let's say 10. it's gonna stay on the top so let's create our items first one will be destination second one will be this input and third one will be our options and finally we are gonna create this button i will come here and let's say list search item and i'm gonna give a label i will say destination and after that we are gonna have input and that's all for now let's create other one again list item this time it's gonna be checking date and instead of input again we are gonna use spell and we are gonna show our date like that but we don't have our destination or this date or any other options that because we didn't handle our search bar here when i click here nothing is happening let's handle that open my header let's close here by the way and what i'm gonna do is coming here and writing on click event i will say handle search so let's create our function i'll say const handle search and i'm going to use react router dom navigate to do that let's come here and say cost navigate is going to be use navigate hook here and right now we can redirect our users to any component any page and it's going to be hotels page and also we can pass any state here and right now we are able to send our destination date and options by the way i'm not sure that we create okay we didn't create destination let's do that quickly destination site destination and at the beginning is going to be an empty string but whenever i change my inputs here we are going to update our state so i will say on change method and it's going to be set destination event target and value okay let's send them right now we have destination we have dates and options we can send all of them date and options okay perfect but how we are gonna use them let's come here and again we are gonna use we are crowded on but this time we are gonna use location location is gonna be use location hook and let's see what we have inside i'm gonna open my console and let's write here something i'm gonna choose any date here like that and i'm gonna search and as you can see we have our state here and all our options so we can use them remember this is location and it's going to be location.state and after that we will be able to reach them let me zoom in like that okay i'm going to delete here and i'm gonna create my states const again destination new state and it's gonna be location state state.destination i will do the same thing for others date and options let's change them date set date and options okay in this case i can create my span here and again i'm gonna write my dates let's import format and let's see i'm gonna write again like that and i'm gonna search and it's here perfect we don't have a destination let's come here and put placeholder and it's gonna be destination okay awesome let's give some style i'm gonna open css and let's put this here i will say search item and it's gonna be display flex but flex direction will be column and i'm going to give gap between our items and margin bottom like that so what about those labels search item and label i'm going to say font size maybe 12 like that smaller and for the input i'm going to give some height it's going to be bigger and i'm gonna delete border and finally i'm gonna give a padding inside okay perfect so what about this pen i'm gonna duplicate this and this time it's going to be span and again 30 pixels padding and i'm going to give background color like that but let's enter this display flags align item center and i will say cursor pointer that because when we click this we are going to open our date component let's come here and let's say date range again we are going to create own change methods and we are going to take our items and we are going to set date again remember how we are doing this is going to be item dot selection let me show you this a little bit and after that i will say minimum date and it's going to be new date so in this case we are not able to choose any previous date did we do the same thing for here or not i don't remember okay we didn't let's do the same thing like that and finally we are going to pass our date like here let's see okay it's here perfect as you can see we cannot choose them why i forgot this in the homepage i don't know but anyway we fixed and i'm gonna write my condition i will say open date set open date and it's going to be false at the beginning and i'm going to write my condition here and it's going to be if it's open show me date range and i'm gonna write here my onclick method and it's gonna set our state set open date opposite of open date as you can see it's close i'm gonna click and it's here perfect let's create our options it's going to be another list search item and i'm going to give my label and it's gonna be options and after that we are gonna have couple of items like that each item will be list search option item so let's create that this search option item and i will say spam this search option text and it's going to be minimum price and here i'm going to use small tag and i will say per night let's see okay and after this span finally i can create my input this search option input it's gonna be a number like this of course we are gonna make this display flags and they're gonna be horizontal but for now let's create others two three four five and second one will be maximum price third one will be adult of course we don't need them anymore let's do eight them and second one will be children and room like that and we can give our placeholders that because we already have our values so i will say placeholder and it's going to be options.adult so i can copy this and for this input and this one children and room like that but again we have a problem i shouldn't go under one or zero it's really easy to handle that i will just say minimum number will be one for children minimum will be zero and for room again one in this case i'm gonna refresh and right now i can't go under one and here's zero and what perfect let's give our style i'm gonna come here the first one will be option item i'll say display flags justify content space between and i'm going to give margin bottom for each item and let's change text color it's going to be this gray color and font size will be a little bit smaller like that of course those inputs are really big option input and it's going to be let's say 50. okay by the way i can give some padding here for this container it looks i don't know a little bit strange so i can create here a div let's say list item options and i'm gonna wrap my items like that in this case i can use it i'm gonna come here please search options and i'll say padding time okay it's much better writing and finally i'm gonna add my button let's come here and inside my container i will say button and it's gonna be search and here list search and for my button i'm gonna give padding background color will be our blue color this light blue and text color i'm gonna delete border let's check first okay it's here let's give full width and i'm gonna increase font size sorry font weight so i will say with a hundred percent and font weight let's say 500 and finally cursor pointer like that okay perfect so right now i can create my items but i'm not gonna create this inside my component instead let's create another one i will come here and i'm gonna say search item search item js file and css i'm gonna import css file and we can use them here inside results let's say search item and i'm going to create around 8 10 items by the way there is something wrong with my css search item there is a typo here okay perfect so let's create our items let's check here as you can see we are gonna have a container and we are gonna have three sections first one will be image second one will be our description and third one will be our details so let's do that i'm gonna close my sidebar and list and this one so firstly i'm gonna give class name it's gonna be search item and inside firstly we are gonna have an image search item image and i'm gonna paste my image here i'm sorry for this url but i just copy and paste from booking it's pretty long but i'm not gonna change it because in the next tutorial we are gonna fetch from our db so second one will be search item description and details and inside this let's see what we have we have title distance taxi option subtitle other features cancellation option and cancel option subtitle i'm not gonna create them one by one i will just copy and paste there is nothing important here as you can see title distance taxi subtitle everything is here the important part is css i'm gonna save and let's check as you can see our image and other texts and here okay i'm not gonna copy paste them because they are not only text like that so let's give here a text for now and let's take care of our css i'm going to take this here and firstly our container let's give a border first i will say one pixel solid and it's gonna be light gray like that but i want to take care of this image otherwise it's gonna look really big and we cannot see any other styles so i will say 200 i 200 and object will be cover okay right now we can see better and for this container i can give some padding and border radius and it's going to be display flex they are going to be horizontal and i can give some gap and finally for each item i'm going to give some margin let's say padding 10 border radius 5 pixels it's gonna be flexbox justify content will be space between gap and my gene button that's all perfect so let's take care of our text for description it's our container i will say display flex but flex direction column and some gap like that by the way let's give it for this description and details description will be two times bigger than details so i will say flags too and for details it's gonna be flex one like that okay let's take care of our title font size 20 and color will be our blue color and for this distance font size will be smaller like that for this tax option it's going to be smaller again and i'm going to give a background it's going to be green and font color will be white of course hashtag here like that and as you can see its width is 100 to prevent this i will say with maximum content so its feeds will be where its content ends like that let's give some padding and radius three pixels and border radius will be five pixels like that awesome and this subtitle i'm gonna choose this font size and front way it will be bold like that so what about those features let's copy this it's going to be on the small and cancel option let's see how it looks okay they are green but this one is bolder font size color and font face will be bought and for the subtitle it's gonna be the same like this let's see okay perfect it's that easy guys so what about these details let's come here and firstly we are gonna have rating container it's gonna be flexbox it's gonna contain this span and this button and after that we are gonna create another container here and it's gonna include price tags option and this button i'm gonna close here for now and create my items let's say search item rating first one will be spam excellent and second one will be button and it's gonna say our rating and after that another do details texts sorry detailed texts and first one will be price price let's say some number here and second one will be includes taxes and fees and i love this option in any e-commerce website because when you buy something let's say a hundred dollars you're going to cut and suddenly it's 120 because of this tax i hate it okay button and it's gonna be c availability and let's say class name search item check button so let's give some style search item css and i'm going to say meetings it's going to be display flex justify content space between and for spam insight let me actually take this here so you can see better as you can see we have span and button and for spam i'm going to say font weight 500 and for button i'm going to give a background color it's going to be blue color will be white and i'm going to give some padding inside and frankly it will be bolt like this let's delete this border okay perfect so how i'm gonna separate them this waiting and those texts it's really easy we have details container here i'm gonna say display flex flex direction column and justify content that's all and for this container i'm gonna align my item to right side so let's come here and choose our container here and i will say text align right and again it's going to be display flex extraction gap will be five like that let's handle them quickly what we have we have price here font size 24 and tags option is going to be really small and color will be gray like that for this button finally and background color will be our blue color you already know what we are going to do front weight bolt padding 10 pixels from top and bottom 5 pixels from left and right and i'm gonna delete border you might say why we are doing same thing again and again that's because i want to teach you how to design a decent website you are right it's a react tutorial but as i said before if you cannot design a nice website nobody cares what you can do in react because if you're a react developer it means you're a front-end developer doesn't matter if you are a full stack or not it's really important guys don't underestimate design part it's really important of course you can create your own components like this button because we are using same background color same font color same border style here okay let's continue i'll say cursor pointer and finally border radius okay awesome but there's a problem here that because it's going to infinity let's come here and open up list and here as you can see we said sticky but we didn't give any height and it's going to be maximum content like that and right now it's sticky perfect it works of course we are gonna handle this search button but not in design part it's gonna be in the next tutorial so what we are gonna do is creating single hotel page when we visit any hotel site let's see what we are gonna have okay as you can see we are gonna have some titles here some texts booking button and some images and finally description and this box here and we are going to use our email and footer components let me zoom out it's gonna be like that okay let's close everything here and i'm gonna open hotel page by the way we don't have css i think okay let's create hotel.css and here i'm going to close my sidebar and again i'm going to add my navbar and header and type will be again list let's import them import number from components components and now bar and header like that and after that let's create container hotel container hotel wrapper and first one will be our title let's say hotel title and ground hotel and we are gonna have address container by the way let me make this bigger and here as you can see we have icon and text that's why we have a container here it's going to be address and first one will be pawn awesome and icon will be location dot and let's give s pen i'm gonna give an address here and what else we have as you can see distance and this highlight i think i can copy paste them like that distance and price highlight and finally we are gonna have a gallery let's say hotel images and inside we are gonna have six images to do that i'm gonna create here a temporary images array in the next tutorial we are gonna fetch them from our db but for now we can use it so let's say map for each image here i'm gonna create hotel image wrapper and inside we are gonna have our image hotel image and source will be photo and source let's see okay they are here and after that we are going to have details it's going to be display flags and first one will be the tail text and second one will be detail let's say price so i will come here and i'm gonna say hotel details and first one will be hotel details texts and second one will be price and we are going to have here a title and description i'm going to copy paste them like that as you can see h1 tag hotel title and p tag hotel description and inside this price this box we will have h1 tag maybe some span here our price and button there is nothing important h1 span h2 and this price will be bolt like here and finally a button okay let's give our style i'm gonna separate this and let's check okay let's quickly take our container here and display flags justify contact center and i'm gonna give margin top okay for my wrapper i'm going to give minimum width so they are going to be centered let's take this dropper 100 percent and maximum lift will be 10 24 and it's gonna be display flex flex direction will be column that because as you can see it's vertical but this part will be flex direction row i'm going to give cap and pixels and let's handle this image otherwise we are gonna have a problem to see it as you can see we have a wrapper here image dropper i'm gonna say bit 33 percent and for this image i'm gonna say with a hundred percent in this case it's gonna cover its wrapper and object fit will be as always code like that let's reduce this title there is our title here i'm gonna say font size 24 for this address all size will be smaller it's going to be display flex because remember we have an icon inside i will say align item center and i'm going to use space like this perfect what about this distance remember it was blue so i'm gonna come here color will be light blue and font weight will be 500 like this and this one will be green let's take this here color will be green and again font weight will be 500 okay perfect so what about this color let's come here hotel images i'm going to say display flags but if you do that they are going to be in the same line to prevent this i'm going to say flex wrap and it's going to be wrap so they are going to be in this size and if it's overflowing our container will move them into another line like that if we say for example 23 percent as you can see four images are here and others are here okay let's give just five content here so if there is a space between them it's gonna separate like this perfect by the way we have a button here as you can see let's create that and we can give position absolute so i can write it here after wrapper i'm gonna say button and book now and it's gonna be reserve or book now okay let's create this here after wrapper i can write it here it's gonna be position absolute but remember if you are using absolute make its parent position relative and i'm gonna give my position and it's gonna be top 10 right zero like this let's lay this border give background color font color and other things as we always do i will say border none padding time pixels 20 pixels i'm gonna give background color and normal color will be white i mean font color and it's gonna be bold like this let's give cursor pointer and maybe radius here it's going to be 5 pixels and cursor pointer okay perfect so what about them i'm going to make this flexbox and give some gap between them what was the name hotel details display flags justify content and gap will be let's say 20. okay i'm going to give margin here margin top and let's give feed for them for this part it's going to be 3 units and this one will be smaller it's going to be one unit to do that i'm gonna copy this one and i will say flags free and for other one what was the name details price it's going to be flex one like this so let's take care of this description i will say font size 14 and i'm gonna give margin like that if i zoom out as you can see it looks pretty nice and what about this box firstly i'm gonna give a background color it's gonna be this white color it's close to blue as you can see like that and i'm gonna give some padding and i'm going to make them display flex and full extraction call let's give 20 pixels flex direction and cap okay nice but it's really big let's take this roper again and i'm gonna choose h1 which is title and it's gonna be a little bit smaller and color will be our gray color 5x5 like this and for this pen here this one i'm going to make this span and font size will be 14. let's delete here and for this price let's see it's h2 attack i'm gonna duplicate this and i will say h2 and i'm just going to decrease its font weight it's going to be 300 and finally for this button i'll say button and i'm gonna copy paste my style there because we have already done this it's exactly the same button and it's here it's this button let me zoom out okay perfect so let's give our mail list a footer mail list what was the name let's check okay mail list and footer let's import them i'm gonna close here mail list footer okay there is a problem here that because let's open up hotel css and as you can see it's display flex that's a flex direction okay it's vertical but since we are using justify content it centers them vertically that because we are using column instead of just fire content i'm going to say align item center and this time it's going to be centered let's check here it's exactly the same but i didn't create any slider here if you want to we can create i don't know it's pretty big actually but as a user probably i want to see them bigger so when i click them we are gonna see the bigger version to do that let's create slider div here and inside we are gonna have okay let me design first because i didn't create before it's gonna be live okay we have some images here when i click on first one it's gonna open only this image so we can choose them looking at its index for example its index is 0 1 2 3 four five so it's gonna open only this one and inside slider container we are gonna have two arrows one of them will be on the left second one will be here and when we click them we are gonna just change index okay i get it firstly i'm going to create here a use state i will say slide number or slide index that's slide number use state and it's going to be zero so whenever we click on any image here where is our image here on click event and it's gonna update our state and it's gonna give here its index by the way we can use its index here and pass it here okay slide number zero one two three four five and also we should open our slider div here that because it's going to be like a model so i'm going to create one more use state here and let's say open set open at the beginning it's going gonna be false so i'm gonna write here my condition if it's open we are gonna see it if it's not it's gonna be disappear so in this case not only this we are gonna set one more use state so i'm gonna say handle open let's come here i'll say const handle open and we are gonna take its index here and we are gonna set it and after that we are gonna open our model so i will say set open it's gonna be true so if i write here something and if i click ok it's here perfect so let's create our buttons i'm going to use font awesome and i'm gonna search for arrows we can use this one or okay this is better writing left right and we are gonna have close button exit button okay this one is called circle x mark so let's import them font awesome icon and icon will be circle x mark okay this one i think circle arrow left and right okay and it's going to be position absolute don't worry about this and between left and right arrow i'm going to create slider wrapper and inside we are going to have our image slider image and its horse will be photos and which item is going to be it's going to be slight number so when i click the first one it's gonna be photo zero and it's gonna show the first item let's try i'm clicking here ah i forgot source okay something is wrong let's see here okay it cannot find source let's see here handle open of course we didn't give our index like that i'm gonna close here and let's try again okay perfect when i click this one it's gonna open the first one awesome so let's take care about them i'm going to open my css file hotel.css i'm going to take this here and let's come here i'm going to say slider it's going to be full screen and it's going to be let's say sticky so even if we scroll it's going to be stay there so i will say top 0 left 0 that because it's going to be full screen write 100 vh like that let's say background color okay but our items are still here let's say that index 999 okay perfect i'm scrolling and it's still here so what i'm gonna do i'm gonna change this background color it's gonna be black but we are gonna reduce the opacity let's say actually it's here i'll say black and let's say something like that and i'm gonna align everything align item center and for the wrapper slider wrapper i'm gonna say with a hundred percent height a hundred percent in this case it's gonna be full screen also and i'm gonna center my image just by content center align item center okay let's give it for our image slider image let's say 80 percent like that as you can see our background is much better right now maybe let's reduce height atvh okay perfect it's better than i thought and i'm gonna put this cancel button somewhere here let's give class name for this i'm gonna say class name is gonna be close and for right and left arrows i'm gonna say arrow and again okay let's take this and it's going to be position absolute and let's give top 20 right 20 somewhere here and i'm going to increase maybe 30. okay actually it's nice maybe color white or maybe gray let's say light gray okay and i'm gonna make this cursor pointer and when i click this button i'm gonna close my model so i'm gonna say on click event and set open is gonna be false let's try i'm clicking and it's gone let's open this bathroom i'm clicking it's here it's gone perfect so what about those arrows arrow i'm gonna say give some margin like that and font size again 30 or maybe bigger okay perfect and again it's gonna be light gray and pointer like that so what i'm going to do is when i click this button i'm going to decrease my slide number and when i click this one i'm going to increase my slide number but there's a problem here if it's the first item when i click again it's going to be -1 i should prevent this so let's handle that i'm going to take those arrows and on click method let's give arrow function that because we are gonna give parameter so i will say handle let's say move and this is gonna be left this is going to be right let's create this const and don't move it's going to take traction and i'm gonna decide a new slide number let's say new slide number or index and i'm gonna write here my condition if direction is left sides i'm gonna decrease number if it's one it's gonna be zero but if it's zero it's not gonna be minus one it's gonna be five that's because we have 6 items and last index will be 5. so i'm going to say new slider number and we are going to check our actual slide number and if it's 0 it's going to be 5 if it's not zero it's going to be slide number minus one so i'm gonna do the same thing for the right side so i will say as if slide number is five it means we are in the last image so in this case it's gonna be zero if it's not we are gonna increase this it's that easy and finally i'm gonna update my state set slide number and it's gonna be new slide number i hope everything is okay i'm clicking oh okay it works perfect so i'm gonna close here so let's choose this image okay it's opening what we want so it's gonna go to bathroom if i click here okay perfect and it's gonna come back awesome so it works and we've finished our ui design don't forget in the next tutorial we are gonna create our backend by the way let me know in the comments do you want to create a backhand using node.js and mongodb or firebase i'm gonna read them and in the next week we are gonna create our db and we are gonna fetch all those items using our backend server and that's all i hope you liked it if you learned something new today please like the video if you want to support lamadev you can use the link in the description below or you can join the channel and don't forget to follow lamadev's social media accounts i hope i will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 346,748

Keywords: react, react booking system, react reservation system, react booking clone, react design, react ui, react website, react hotel website, react app, react project, react tutorial, react html css, react calendar, react date range, web design, reservation website, lama dev, booking website

Id: RkWpJ4XUHuw

Length: 114min 4sec (6844 seconds)

Published: Mon Apr 25 2022