Learn how to build and deploy a hotel management system with Next.js, React, Sanity.io, Tailwind CSS, and Stripe.

Features:
- Hotel Room Management CRUD with Sanity.IO
- Hotel Room Review
- Room Booking
- Checkout with Stripe
- Stripe webhook
- Light / Dark Mode with React Context
- Search (Room Type  / Name)
- Authentication with Auth.JS
- Typescript
- useSwr Hook
- Deployment to Vercel
- And lots more...

💻 Code: https://github.com/laribright/hotel-management

✏️ Course created by @codewithlari 

⭐️ Contents ⭐️
0:00:07 Intro and Demo
0:09:07 New Project
0:14:42 Layout
0:35:02 Dark / White Theme
0:47:37 Authentication Page Setup
1:02:01 Sanity CMS Integration
1:13:57 Environment Variables
1:16:47 Sanity Schemas (user, account, booking, hotelRoom, verificationToken)
1:52:37 Authentication with next auth (Github, Email, Google)
2:12:02 Toast Notification
2:14:18 Fixing Api folder error
2:15:35 Authentication Continued
2:20:29 Complete Schema
2:25:22 Authentication Test
2:31:07 Configuring jwt
2:40:37 Custom classnames using tailwind directives
2:42:07 Hero Section
3:07:35 Search Feature
3:23:52 Gallery Component
3:25:47 NewsLetter Component
3:27:22 Featured Room
3:56:37 Nextjs Loading Component
3:58:33 Nextjs Error Component
4:02:27 Rooms Page
4:31:07 Room Details Page
6:03:28 Create Booking API 
6:13:58 Middleware
6:16:07 Stripe Integration
6:38:45 Test Booking Payment
6:42:37 Webhooks 
7:25:37 User Details Page
8:37:10 Rate Hotel Room
9:28:22 Display Hotel Room Rating
9:54:26 Git / Vercel / Deployment

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan 
👾 Oscar Rahnama

--

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://freecodecamp.org/news

Learn how to create a fully functional hotel management site with Next.js 13, React, Sanity IO, Tailwind and Stripe.

He will help you understand how to fit all of these technologies together in a real world full stack project.

Hello friends and welcome to another project video where we are going to be building and deploying this hotel management system.

So let's have a demo of the application we are going to be building.

This application is going to be using the sanity CMS.

So if I copy over this URL and I open a new tab in my browser and I just go to slash studio you see that we load our CMS.

So our CMS is embedded inside of our front-end code here And we have this navigation section.

And we can also switch between the light and dark theme here.

And our application is fully responsive for mobile devices and also for desktop devices.

So over here, we can search through a room.

So let's actually start in our CMS here in our content management system.

So we can click on this hotel room section and here we click on this tab.

Alright, So we need to give this hotel room a name.

And for the description, I'm just going to copy and paste this description in here.

And for the price, we can give this hotel room a price of 1,000 and say we are currently on a 10% discount.

And for images I will click here and I will just fast forward and add some images from Unsplash here.

Okay so once we have added these images for the cover image I'm also going to copy this other URL from Unsplash or you can as well add a file and you see by default the room type is basic we can choose the different room types I'm just gonna choose luxury and we have the special notes I'll leave the dimension for number of beds I would just say 2 and for all 5 amenities we can choose an amenity for the icon the icon has to be a font or some icon so I'm just going to come here and add this icon FA bird and for the amenity I would just say king king sized bread like this and that should be it so it's saved we can obviously add more all right so after this I'm not gonna make this is not booked so by default a hotel room isn't booked and I'll not make it to be a featured hotel room.

And we can go on to publish this hotel room.

So we gave this hotel room name of test hotel.

And if we come over here to the application, we come over to our rooms section, we see that we have our hotel room here in real time.

So as we make changes to our sanity studio, You see it reflects in our application and we can go on to book this hotel room.

So I'm going to click on this book now and these are the images that I uploaded for this and we have this nice looking model over here for the different images so that the user can swipe and see it in full screen.

Alright, so you see what we chose here, the king-size bed, the city view, and the coffee maker with the respective icon.

I just happened to choose the wrong icon for that city view.

We see the description, we see here they offer the amenities, safety and hygiene and this hotel room doesn't have a review.

So let's go and book this hotel room and you have to be authenticated.

So if we click here you see this comes to the user profile page And we can obviously sign out of the application and we are redirected back to the home page.

So we can authenticate via email and password, or we can use GitHub.

I'm going to click on Google over here and I'll sign in with my Google account and I should be redirected back to the application.

So let's go on and book this our test hotel room that we just added.

So you see here we have this filter here and we can filter by luxury and we see the hotel room because this falls under that category and I'll just click on this book now and here I'll choose a check-in date so I can choose today as a check-in date and you see a later day as a checkout date and you say the price of dates accordingly because there's a 10% discount we see that the price here is 900 bucks and if we choose a date that is way ahead of our checkout date we have this error so that the user cannot book, you know, a date that is way ahead our checkout date.

Now I'm going to choose this check in date, and I'm going to go on and book this hotel room.

Now once this loads up Stripe, because we are going to have Stripe for payment.

If we come over here, so we see sessions that we have used now because this hotel room is following a payment first approach.

A booking is only going to be made if payment is successful.

So I'm going to fast forward through and fill out these details over here.

And once you fill out these details, you can go on and click on Pay.

Now on successful payment, we can just come back to our Stripe dashboard and let's reload these sessions that we have here.

Now this webhook is called because so this is our new webhook that we just triggered now.

Now because this event is called we go on to create a booking.

And if we come over here to our Sanity Studio, and we come over to our booking section, you will see here that we just booked this hotel room.

So this test hotel room here, the number of days, and all the details that we filled out while we were booking this.

Now, if we come back to our hotel application, you see here that we are redirected to the user profile page.

And here, the user can see the current bookings, and the user can also see the amount spent.

So this is the test hotel, which was the highest amount spent at 900 bucks.

So if we come back to the current bookings and we click on rate, we shall be able to leave a rating on this hotel room.

So we can say great experience like this and click on submit.

Now this is going to go on and submit the review and if we come back to the test hotel room we should see our review here we're just gonna reload this and our review should pop up.

So this review that we just gave on this hotel room and you see this hotel room is booked and the user cannot go on to book this hotel room.

So we can come back to the user profile page.

And here we have this hotel room we just booked.

If we want to leave another rating here, and we click on submit and we come back to the test hotel room.

So here I'm just going to reload this and you should see that the hotel room you know updates so we have this functionality to leave a review and to also update a review and only customers that have booked a hotel room can go on to leave reviews on the hotel room.

So this is the application we are going to be building and the application is fully responsive.

Now we have this crazy looking parentheses here because we didn't provide a dimension.

So if we come back here to the test hotel room and here, where is it, this test hotel, if we just leave a dimension over here, so we can just say 30 or whatever and publish.

And if we come back here, we should see here the updated just below this we should see here 13 so for the dimension so this is the application we have our review and all aspects of this application is fully much responsive as you would expect.

And to achieve this we are going to be using Tailwind CSS here.

So this is the application we are going to be building together.

If you like this project please do go on and leave a subscribe it helps the channel and don't forget to give it a thumbs up as well.

And I have already left timestamps in the description so in case you come back for later, you should be able to continue with the project.

And the source code is already in the description so you can get it on GitHub.

Now, let's get started building out this project together.

Let's start our project and I've navigated to my desktop from my terminal and I'm going to run the command to create a new Next.js project.

The command is mpx create-next-app, And I'm going to be using a template of TypeScript.

So I'll zoom out a bit so you see the entire command.

So npx create next app with a template of TypeScript.

We are prompted to give our application a name.

And for this project, I'll just give it the name of Hotel Management, like this.

So I'll just add the E, so Hotel Management.

And say yes to all these prompts and say no to customizing default inputs.

Now once Next.js CLI is done building our project, I'm going to cd into the created project which I called Hotel Management and go into Visual Studio Code.

This is the default files and folders that we get by default.

If we run npm run dev so that we can just preview the application that we get from Next.js.

As you can see, we are running on Next.js 13.5.4.

This is the current version of Next.js we are working with.

If we come over to the browser and we just go to localhost 3000, you'll see the file or our home page, so localhost 3000.

So let's go on and make changes already to our application.

So our layout.tsx which controls the entire layout of our Next.js application.

And for the title, I'll give it the title of Hotel management app and also update the description.

You can give this any title or any description of your choice but in this case I'll just say discover the best hotel rooms like this And this is going to update our header title and description.

For the font, I'll be making use of font poppins.

So I'll import poppins from next font Google and use it over here.

But before we come to that, the intact variable here, I'll change it to poppins.

OK, so configurations we can pass to this poppins font is the font weight.

In this case, I'm going to pass an array of strings for the different font weights we are using in our application.

So we're going to make use of a font weight of 400, also a font weight of 500, And also a font weight of 700.

And lastly, we're going to make use of a font weight of 900.

And for the styling, I'm going to give this a style of italic, as well as a style of normal.

And lastly, we need to pass also a variable.

And the convention is to go with double hyphen like this, and then font on the hyphen.

And I'll just go with font poppins as the variable.

And to fix the error that we have in our body tag over here, right and go with interclass names, we're going to go with poppins dot class names like this.

And I'm going to cut these children here.

And I'm going to wrap our layout in a main tag, like this, in the main tag.

So here we have a main, which we can give className.

And the className I'm going to give to this main tag is font-normal, so font-normal like this.

Later in our application, we're going to have a header component as well as a footer component.

So this is a placeholder, and I'll comment it out.

Just after it, we're going to have children, and after which we are going to have our footer components.

But before we go on and have our header components, so before we go on and have the layout for our header components, I would just like us to discuss briefly about the meta description.

Here in the browser, if I just reload, and you see here we have Hotel Management app.

If I open the Elements tab over here, so here where we have the Elements tab, and I just collapse the head.

Here, if you check down, you see here that we have the meta, so the description, and we have the content, and the same for the title.

This object that we have over here, so this metadata, we just have the title and it renders it as we normally have in HTML in our head tag where we have the title, and there we just write out the title of our application.

We can pass these headings that we would normally have in HTML.

OK, so I'm just going to revert to the changes that I made here.

And we can go on and create a header component.

So in the source folder, I'll create a new folder, I'll call components and in here, so inside here, I'm going to create a folder, I'll call header and then another file, which I'll call header.tsx.

Okay, so I'm just going to bootstrap this header component and remove the React input.

We can already import this header component in our layout.

Header will be coming from components header, slash header like this, and I'll just rearrange the order of inputs here.

For HTML semantics, rather than use a div, I'll be making use of the header tag.

I'll give it a padding on the y-axis of 10, padding on the x-axis of 4, give it container, and to position the items in the center I would use mx-auto, text-xl, flex, flex-wrap, and on medium devices, I'm going to go with flex-null-wrap.

After that, we're also going to use position the items in center and justify between.

I'll zoom out a bit so hopefully you can see the entire class names, styles that we have applied here, and I'll zoom back in.

Inside this header tag, we're going to have a div.

I'm gonna have a div, and I'm also gonna have an unordered list.

And this div, I'll give it a class name of flex, give it item center, width full.

And on medium devices, we won't take the full width.

We're just going to take 2, 3 of the width, like this.

All right, and inside this div, we are going to have a link.

So this is where we are going to have a link that we point into our home page.

So this link component we are going to go and import it from next link.

Okay and for the href we are going to go to slash which is our home page.

And for the class name I'll give this a class name of font black and also text let's say this hex code this color.

I provided this hex code before now, so F27405, which is more like an orange color.

Here I'll just give you the name of hotels like this.

After this link, we are going to have another list where we will have the icon to take us to the authentication page and also another icon to toggle the theme.

So here I'll give this another list, a class name of flex, item, center, and margin left of 5.

For the icons, we are going to be using React icons.

So I'll wait for it to install, and I'll restart the application.

All right, so let's use the, Before we can apply the icon, we're actually going to have a link.

This link will take us to the user authentication page to the auth page and for the icon I'm just going to use fa-user-cycle.

So fa-user-cycle and for the href of this link I'll just take this off.

And for the href, this link is going to be pointing to slash auth.

So let me import the FAESA circle, and let me give it a class name.

So for the class name, I'm just going to give this a class name of course, a pointer.

So allow the IDE helping with this input.

So let's import, boot the structure FA user circle coming from react-icons for slash FA.

Actually, this link that we have here, we need to wrap it in the list item.

So in an ally and this ally needs some class names.

So I'm going to give this class name of flex-items-center.

And then we're going to have another list item.

And the idea is for this other list item to hold the toggle.

So I'll just give it the margin left of 2 to have some space from the user circle.

And for the icon, I'll use this MDDarkMode like this.

And I'm just going to duplicate this so that I will destructure this coming from React Icons MD, okay, for material design.

So I'm going to give this icon a class name of CursorPointer here.

All right, and for this other list items, which would hold links.

So I'll just give this a class name of flex over here.

Also give it a class name of item center, justify between, give it a width full and on medium devices, I'll give this a width of 1 slash 3, 1 third, and imagine top of 4.

And then we're going to have list items and for this li I'm also going to give this some animation on hover so I'm going to translate this on the y-axis so negative 8 pixels and I'm also going to give this an animation duration of 500 and I'm going to transition all like this.

Okay and inside this list item we are going to have a link so We already have this link components in Perfect which will go to home.

The href is going to be pointing to slash.

I'll bring this down, let's say 2 more times.

We are going to have a link going to slash rooms.

We have this rooms here, and the href will be pointing to slash rooms.

This will just go to the homepage is contact.

We don't have any contact page, so we'll just leave it to go back to the home page like this and we're going to save this file and then we can visit the browser and I will just quickly reload our application So that we can see our styling Take chain our changes take place already Yeah, so we see our changes we see our link and we see our different icons You know and you see the animation that we have on this section.

I'll just remove this so that we can take the full room.

I'll come over to Tailwind config.ts file.

I'm going to get rid of this background image.

We're not going to be configuring the background image.

We are going to configure first the different colors that we'll be using in our application.

Okay, so we are going to have our primary color and our primary color is going to be this hex code so F2C641 and then we are gonna have our tertiary color and our tertiary color we are gonna have different variants so I'm gonna have the dark variant and also the light variant and the dark variant is going to be this hex code so F27405 And the light variant is going to be this hex code, so F2C641.

And Apart from the color, we are also going to be configuring our font family.

We have this array, and this variable has to match the variable we define in our layout.tsx.

So this variable, I'm going to copy it, come over to our layout, it has to match this variable over here.

So come back to the table in config and we also need to spread out the font family.

So I'm going to import the font family using the require statement.

And this will come from the win CSS and default team.

So Here we are going to spread out the font family and access the sans property.

Great, so we can come back to our header.tsx and where we made use of the tertiary color.

So I'm just going to copy this and if we come over to our header.tsx I'll replace this so this is going to be you know text and now we can use text testiary dark and you see this yellowish color this icon or we can use text testiary light here we don't get the icon that means there should be you know a typo somewhere And we forgot to actually add the hash here.

So add this hash, and there we see the preview.

Great, but I will go back to the DAQ variant, which we are using in this case.

So up next after the header, we are going to be working on our footer component.

So I'm gonna create another folder, which I'll call footer, and then another file for our footer.csx.

Okay, so I'll get rid of the header and the tailwind.config.

So I'll bootstrap a footer component and remove the react input.

And rather than use a div, I'm going to make use of the footer tag.

And let me style this footer, give it a class name.

And the class name is going to be margin-top-16.

Okay and here we are going to have a div with the class name of container and mx-auto.

And for padding give it a padding of 4 on the x-axis.

And then we're gonna have a link which will import from next link and this link will still take us to the home page so the href is going to be slash and the class name is going to be Font Black.

And for the text, we're going to go with text, tertiary dark here, and we'll just have the makeup brand name, Hotels.

And then we're gonna have a h4 a h4 that will say contact like this and for the class name of this h4 I'm gonna give it a class name of font let's see font semi bold and a text let's see I'm actually looking for 40 pixels do we have no so I'm gonna use 40 PX like this and padding on the y-axis of 6 here.

OK, so after this h4, we're going to have a div.

And this div, I'll give it a class name of flex, and give it flex-wrap, and give it a gap of 16.

Position the items in the center and justify between as well.

Inside this div, we're going to have another div, which we're just going to give flex1 with different paragraphs for this made up address which I will give 123 road and then we are going to have this div with the class name of flex and item center give it a py of 4 and this div is going to have this icon so this icon BS field send field okay and after the icon we are gonna have a paragraph and This paragraph would have a margin left of 2, and I'll just say code with Larry here, and quickly import this BS send field, BS field send field from React icons, forward slash BS here.

OK, so after this, I'm actually going to copy and paste this 2 more times.

And for the icon, we are going to use in this case, another icon, which is bs-telphone-out-bond.

And I'll just have this made up phone number here and after this we are going to have this And we'll still keep the brand name code with Larry, but we are going to use a different icon.

So here we're going to use BI message detail.

And we need to import this from react icons for slash BI.

And I'll remove this bs send field send field okay and get rid of this py rather use a p padding top of 4 So after this div with this flex 1, we're gonna have another div.

And this other div, we are still gonna give flex 1, and we are gonna give for medium devices and above, we're going to position the text to the right.

See all freeCodeCamp.org transcripts on Youtube

Full Stack Tutorial – Hotel Management Site w/ Next.js, React, Sanity.io, Tailwind, Stripe