.post-detail-layout__StyledBackgroundImage-sc-gl55w6-0.jHsswc.gbi-1253747367-aB6zBHehiaiqZUuQoysMEa:before { opacity: 1; background-image: url('/static/50519b533f5f2abc36bd16a2ce6f4548/5ac2b/hotel-project-cover.png'); }

7 min read

React Hotel Project For Beginners

Last Update: 4 May, 2022

A great website project for the beginners. After creating this project you will know how to use the react router, create dynamic routes and handle forms in react. You can add this project to your portfolio (after personalizing and improving upon some parts of course).

Well I assume that you have at least some knowledge of how react works. So I won't be explaining all the little things that we will be doing. Otherwise this post would be too boring and too long. Believe me even if you don't know much about react you will still be able to follow up and understand the code. Let's begin!

§Create the Project Folder

We will create our project with the:

npx create-react-app my-hotel-app

When it's done downloading, run the:

npx start

command to start your project. If everything is ok until this point, go to localhost:3000 and you will see a slowly rotating react logo.

Our project will require a bunch of images. You can go on unsplash to download free images. Or you can just visit the repository and grab the images I used in my project. We need images for our banner, rooms, facilities etc.

Now let's add tailwindcss to our project. I like using tailwindcss in my projects but if you prefer some other way of handling styling in your projects just go with that. But if you don't know much about tailwindcss this might be a good opportunity for you to challenge yourself a little bit.

Run these commands in console to download tailwindcss postcss and autoprefixer as dev dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

These commands will create a "tailwind.config.js" file in the root of your project. Now change the configs as the following:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

In src/index.css file add the following lines at the top:

@tailwind base;
@tailwind components;
@tailwind utilities;

Now we can use tailwindcss in our project. You can check the official page yourself here if you want to.

Clear everything inside the src/App.js file and start creating yours. I'm gonna be creating a functional component here. I find functional components a little faster to create and I like working with hooks. This file will be used for handling the routing. Some developers keep the routing in index.js file but I like separating them this way. If you do not like them you can go with classes. Go ahead and delete the src/app.css file as well.

Now let's handle the basic css I always like to add before I start a project. Such as "padding: 0, margin: 0, box-sizing: border-box" etc. As we won't need to change any css properties here for the rest of the post we can use the final code here:

@tailwind base;
@tailwind components;
@tailwind utilities;

html, body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  max-width: 100vw;
  min-height: 100vh;
}
#root {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
img {
  width:100%;
}

Making the root flex helps us position our layout easily in our pages. For example, this way we could just use "margin-top: auto" for our footer and our footer would always appear at the bottom of our page.

Rest of the styling in our project is handled using tailwindcss so there won't be any more css files. Again, my personal choice, you can go on with your own way of handling css.

We can create the basic pages for testing the router and navbar we will be creating shortly. Now let's create a "pages" folder in src. Here we need to create 5 files. contact.jsx for the contact information of the hotel. facilities.jsx for all the cool things our hotel has to offer. home.jsx to greet our guests of course. rooms.jsx file showing the guests the room options. room.jsx for the price calculation and reservation.

As we don't have backend for this project, we will just mimic the behaviour.

§Routing With react-router-dom

As you projects grow you end up using dozens of components (if not hundreds). This keeps your projects clean, easy to read and makes it a lot easier to make small changes in parts of your projects.

We can install router package that we will use to handle routing in our project with this command:

npm install react-router-dom

Let's create our navbar now. In our src folder create a "components" folder. We will create all the necessary components we want to use in our project here. Here create a "Navbar.js" file. In our navbar instead of a tags we need to use "Link" for internal links. The link for documentation is here. It's definitely worth reading if want to work using react in the future. As I want to style the links here I created another component called NavLink.js in the components folder. It's very basic and takes "to" as prop. to value will determine where the link will send the user that clicks on it. It replaces the href value in a tag.

Full code for NavLink.js is here:

import React from 'react'
import { Link } from 'react-router-dom'

const NavLink = ({to}) => {
  return (
    <Link className='font-bold m-1 text-xl uppercase' to={`/${to}`} >{to}</Link>
  )
}

export default NavLink

As you can see nothing too complicated, just added some styling. The prop will appear uppercase in text section this way, thanks to the styling.

Our code for Navbar.js is here:

import React from 'react'
import { Link } from 'react-router-dom'
import NavLink from './NavLink'

const Navbar = () => {
  return (
    <nav className='text-white px-8 py-6 bg-cyan-500 flex flex-row justify-between'>
      <Link className='font-bold text-2xl' to="/">HOME</Link>
      <div>
        <NavLink to="rooms"/>
        <NavLink to="facilities"/>
        <NavLink to="contact"/>
      </div>
    </nav>
  )
}

export default Navbar

Looks very clean and easy to read. Every page needs a proper footer. We will also add one to ours. No matter how basic. And after creating our footer we will create a we will use a layout component and wrap our pages with it.

For our footer, in components folder create a Footer.js file. What we will have in this file is just our name really, we are keeping it basic. The full code is here for the footer component:

import React from 'react'

const Footer = () => {
  return (<>
    <footer className='mt-auto p-10 bg-gray-400'>
      <p className='text-center text-white'>Ilker AKBIYIK</p>
    </footer>
  
  </>)
}

export default Footer

Feel free to replace my name ;).

After creating the footer, create a Layout.js file in components folder and, import both footer and navbar. We will also be using "Outlet" from react-router-dom package. The Outlet will determine where the wrapped components or pages will appear in our layout. In this example we want to wrap our pages with our layout (pages will be under the navbar and above the footer). The code for the Layout.js file is here:

import React from 'react'
import { Outlet } from 'react-router-dom'
import Navbar from './Navbar'
import Footer from './Footer'

const Layout = () => {
  return (<>
    <Navbar />
    <Outlet />
    <Footer />
  </>)
}

export default Layout

Now let's create the routes in our App.js file, which is located in src folder. Instead of explaining it here I will try to explain the functionality of the code in comments below. You should know that there are multiple ways to handle routing in our react projects. This is the way I did:

import { BrowserRouter, Route, Routes } from 'react-router-dom';

import Layout from './components/Layout';

import Home from './pages/home';
import Facilities from './pages/facilities';
import Contact from './pages/contact';
import Rooms from './pages/rooms';
import Room from './pages/room';


function App() {
  return (
    // we need to wrap our routing with BrowserRouter
    <BrowserRouter>
      <Routes>
        {/* First of all we are wrapping all our pages with our layout this way */}
        <Route path="/" element={<Layout/>}>
          {/* Home page will appear as index for path "/" */}
          {/* the index property is important determining what to serve */}
          {/* in path with sharing the same name */}
          <Route index element={<Home />} />
          <Route path="contact" element={<Contact/>} />
          <Route path="facilities" element={<Facilities/>} />
          <Route path="rooms">
            {/* The detailed looks and reservation will be handled in the  */}
            {/* page called room and the url for this page will be created */}
            {/* dynamically for each room, for example, room with the id of 1 */}
            {/* will be found in the url rooms/1 */}
            <Route path=":id" element={<Room/>} />
            {/* and lastly rendering rooms as index for /rooms */}
            <Route index element={<Rooms/>}/>
        </Route>
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

If everything had gone right until this point you should be able to navigate using the buttons in your navbar or writing the url you wanna go directly.

§Now In The Home Page

We can start making our app look a little better now. We will start with downloading some images.

We need images for rooms, facilities and some view pictures. Go download some images and get back to the project. If you are feeling too lazy just grab the images I have in my project from the repository.

Ok now inside the src folder create "images" folder and add the images here.

If we had a database for our project we would be getting our information about the rooms from there. But for this project we will just mimic this behaviour by creating a file and exporting all the data from there. Create a folder named "db" inside src folder. Inside db create "index.js". Inside this file we can create our rooms now. Full code is here:

// Feel free to change information here as well
import room1pic from '../images/room1.jpg'
import room2pic from '../images/room2.jpg'
import room3pic from '../images/room3.jpg'
import room4pic from '../images/room4.jpg'
import room5pic from '../images/room5.jpg'
import room6pic from '../images/room6.jpg'

const rooms = [
  { id:1, src: room1pic, info:"A cozy room for 2", name:"Twin", people: 2, dailyPrice:100, availableFor: 7 },
  { id:2, src: room2pic, info:"A cozy room for 2", name:"Desert", people: 4, dailyPrice:150,  availableFor: 10 },
  { id:3, src: room3pic, info:"A cozy room for 2", name:"Standard", people: 2, dailyPrice:200,  availableFor: 20 },
  { id:4, src: room4pic, info:"A cozy room for 2", name:"Villa", people: 4, dailyPrice:100,  availableFor: 5 },
  { id:5, src: room5pic, info:"A cozy room for 2", name:"Open", people: 2, dailyPrice:50,  availableFor: 30 },
  { id:6, src: room6pic, info:"A cozy room for 2", name:"Suite", people: 2, dailyPrice:250,  availableFor: 14 },
];

export default rooms

I wanted to add a cool and a simple carousel that shows the rooms inside our home page. I created the carousel with "react-responsive-carousel" package. Install that package and inside the components folder create a "Carousel.js" file. In this file we will handle our carousel. The data we will use in the carousel will be acquired from the home page as prop.

/* eslint-disable jsx-a11y/alt-text */
import React from 'react'
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
// Had to change the name as I named my component Carousel as well
import { Carousel as C } from 'react-responsive-carousel';
import { Link } from 'react-router-dom';

// Data will be passed down to this components
const Carousel = ({rooms}) => {
  return (<>
    <C className='m-auto md:w-3/5 sm:w-4/5'>
      {/* we will map through and create our carousel */}
      {rooms.map(i => {
        return <div>
        <img src={i.src} />
        <p className="legend">{i.name}</p>
    </div>
      })}
    </C>
    <Link className='m-auto text-2xl text-cyan-500' to="/rooms">
      Choose your room and make your reservation  
    </Link>
  </>)
}

export default Carousel

Now that this is done let's create a component to show our facilities in our home page. Inside the component folder create the "HomeFacilities.js" file. The code for this component is very basic. Just some html and styling with tailwindcss. I turned the whole component into a link so whenever a user clicks on it they will be sent to the /facilities, so they can get more information. Of course all the information we have here is in Latin, therefore not very helpful:

import React from 'react'
import { Link } from 'react-router-dom'

const HomeFacilities = () => {
  return (
    <Link to="/facilities">
    <div className='text-white grid grid-cols-2 gap-4 m-auto mb-6 w-11/12'>
      <h2 className='col-span-full text-center text-4xl my-8 underline font-bold text-cyan-500'>Explore the facilities</h2>
      <div class="rounded p-8 bg-gradient-to-r from-cyan-500 to-blue-500">
        <h3 className='font-bold text-2xl'>POOL</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati error corrupti exercitationem possimus expedita inventore, dolores amet repellat veniam mollitia, est iure praesentium fuga sit architecto quam neque facilis dolorum!</p>
      </div>
      <div class="rounded p-8 bg-gradient-to-r from-sky-500 to-indigo-500">
        <h3 className='font-bold text-2xl'>GYM</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati error corrupti exercitationem possimus expedita inventore, dolores amet repellat veniam mollitia, est iure praesentium fuga sit architecto quam neque facilis dolorum!</p>
      </div>
      <div class="rounded p-8 bg-gradient-to-r from-violet-500 to-fuchsia-500">
        <h3 className='font-bold text-2xl'>RESTAURANT</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati error corrupti exercitationem possimus expedita inventore, dolores amet repellat veniam mollitia, est iure praesentium fuga sit architecto quam neque facilis dolorum!</p>
      </div>
      <div class="rounded p-8 bg-gradient-to-r from-purple-500 to-pink-500">
        <h3 className='font-bold text-2xl'>PRIVATE BEACH</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati error corrupti exercitationem possimus expedita inventore, dolores amet repellat veniam mollitia, est iure praesentium fuga sit architecto quam neque facilis dolorum!</p>
      </div>
    </div>
    </Link>
  )
}

export default HomeFacilities

Finally our home.jsx page will look like this:

import React from 'react'
import Carousel from '../components/Carousel'
import HomeFacilities from '../components/HomeFacilities'
import beach from '../images/beach.jpg'
import { Link } from 'react-router-dom'
import rooms from '../db/index';

const Home = () => {

  return (<>
    <h1 className='text-center text-6xl font-bold text-cyan-500 underline'>Welcome to Our Super Awesome Hotel</h1> 
    <img className='mt-10 object-cover h-96' src={beach} alt="A beautiful beach" />
    <Link to="/rooms"><h2 className='text-center text-4xl my-8 underline font-bold text-cyan-500'>Available Rooms</h2></Link>
    <Carousel images={rooms} />
    <HomeFacilities />
  </>)
}

export default Home

If everything had gone right until this point you should be seeing a half decent home page with a working carousel of room images and a component for facilities.

§Dazzle Our Guests With Facilities

This page will be very simple. Just some html. Styling is done using tailwidgcss here. If you have something in mind that you think will make the page a lot more useful, add it. I believe it's very good practice to improve upon all the projects or tutorials you see online. It will accelerate your learning.

Full code is here:

import React from 'react'
import pBeach from '../images/pbeach.jpg';
import pool from '../images/pool3.jpg';
import restaurant from '../images/restaurant.jpg';
import spa from '../images/spa.jpg';
import gym from '../images/gym.jpg';

const Facilities = () => {
  return (<>
    <div className='text-cyan-500 flex flex-col items-center'>
      <div className='border-b-2 border-cyan-500 p-2 m-4 w-4/5 gap-4 grid grid-cols-3'>
        <h2 className='font-bold col-span-3 text-center text-4xl'>POOL</h2>
        <img className='col-span-3  lg:col-span-2' src={pool} alt="pool pic" />
        <p className='text-4xl col-span-3 lg:col-span-1'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cupiditate quia dolor perferendis, magnam quod rerum reprehenderit, nostrum temporibus sequi suscipit veniam, ea iste ipsum qui delectus enim autem incidunt.</p>
      </div>
      <div className='border-b-2 border-cyan-500 p-2 m-4 w-4/5 gap-4 grid grid-cols-3'>
        <h2 className='font-bold col-span-3 text-center text-4xl'>GYM</h2>
        <p className='text-4xl col-span-3 lg:col-span-1'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cupiditate quia dolor perferendis, magnam quod rerum reprehenderit, nostrum temporibus sequi suscipit veniam, ea iste ipsum qui delectus enim autem incidunt.</p>
        <img className='lg:col-span-2 col-span-3' src={gym} alt="" />
      </div>
      <div className='border-b-2 border-cyan-500 p-2 m-4 w-4/5 gap-4 grid grid-cols-3'>
        <h2 className='font-bold col-span-3 text-center text-4xl'>RESTAURANT</h2>
        <img className='lg:col-span-2 col-span-3' src={restaurant} alt="pool pic" />
        <p className='text-4xl col-span-3 lg:col-span-1'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cupiditate quia dolor perferendis, magnam quod rerum reprehenderit, nostrum temporibus sequi suscipit veniam, ea iste ipsum qui delectus enim autem incidunt.</p>
      </div>
      <div className='border-b-2 border-cyan-500 p-2 m-4 w-4/5 gap-4 grid grid-cols-3'>
        <h2 className='font-bold col-span-3 text-center text-4xl'>PRIVATE BEACH</h2>
        <p className='text-4xl col-span-3 lg:col-span-1'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cupiditate quia dolor perferendis, magnam quod rerum reprehenderit, nostrum temporibus sequi suscipit veniam, ea iste ipsum qui delectus enim autem incidunt.</p>
        <img className='col-span-3 lg:col-span-2' src={pBeach} alt="" />
      </div>
      <div className='border-b-2 border-cyan-500 p-2 m-4 w-4/5 gap-4 grid grid-cols-3'>
        <h2 className='font-bold col-span-3 text-center text-4xl'>SPA</h2>
        <img className='col-span-3 lg:col-span-2' src={spa} alt="pool pic" />
        <p className='text-4xl col-span-3 lg:col-span-1'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cupiditate quia dolor perferendis, magnam quod rerum reprehenderit, nostrum temporibus sequi suscipit veniam, ea iste ipsum qui delectus enim autem incidunt.</p>
      </div>
    </div>
  </>)
}

export default Facilities

Yep, that was all for the facilities page.

§Allow Your Guests to Contact You

We want our guests to feel comfortable communicating with us. So we will add a nice looking form. As we don't have any backend logic to handle mailing for us (nor a database), we will only log the info sent to us and alert the guest with a thank you message. If you wanna go ahead create a backend, you can send a confirmation email thank the guests for contacting you automatically.

The comments will be explaining the parts I think might seem a little tricky if you are beginner. The code and it's explanation is here for the full contact.jsx (inside src/pages) page:

import React, { useState } from 'react'

const Contact = () => {

  // This is how the state is managed in functional components
  // We are initializing the values we will use as empty strings
  // and the second keywords in the arrays will be used to set them
  // seeing it in action below will be more explanatory
  const [email, setEmail] = useState("");
  const [subject, setSubject] = useState("");
  const [text, setText] = useState("");

  const handleSubmit = (e) => {
    // default behaviour is to refresh the page, we don't want that
    e.preventDefault()
    // alerting the guest and logging the information sent to us
    alert("thank you for contacting us, we will get back to you as soon as we can.");
    console.log(email, subject, text)

  }

  return (<>
  {/* when the user hits submit (or enter) */}
  {/* run handleSubmit function with event as it's argument */}
  <form onSubmit={e => handleSubmit(e)} className='m-auto mb-6 sm:w-4/5 lg:w-3/5'>
    <div className='mt-2 flex flex-col'>
      <label htmlFor="f-email" >
        Your email address:
      </label>
      <input 
        // whenever the input changes, update the state
        onChange={(e) => setEmail(e.target.value)}
        className='rounded p-4 bg-cyan-100' 
        type="email" 
        name="f-email" 
      />
    </div>
    <div className='mt-2 flex flex-col'>
      <label htmlFor="f-subject">
        Subject
      </label>
      <input 
        // whenever the input changes, update the state
        onChange={(e) => setSubject(e.target.value)}
        className='rounded bg-cyan-100 p-4'
        type="text" 
        name="f-subject" 
      />
    </div>
    <div className='mt-2 flex flex-col'>
      <label htmlFor="f-text">
        What would you like to tell us
      </label>
      <textarea 
        // whenever the input changes, update the state
        onChange={(e) => setText(e.target.value)}
        className='rounded bg-cyan-100 p-4'
        name="f-text" 
        id="" 
        cols="30" 
        rows="10"
      ></textarea>
    </div>
    <input className='p-4 rounded mt-4 font-bold text-white text-2xl cursor-pointer hover:bg-cyan-700 w-full m-auto bg-cyan-800' type="submit" value="SUBMIT" />
  </form>
  </>)
}

export default Contact

§Our Rooms

Our page that contains the rooms will include a basic form for filtering the rooms according to the form input and all the rooms details. Users can choose to view only the rooms that they wanna see. We will render all the rooms when there is no criteria. The full code and the explanations of the fucntions is here:

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import rooms from '../db';


const Rooms = () => {

  // nog is short for number of guests
  const [nog, setNog] = useState();
  const [budget, setBudget] = useState();
  const [days, setDays] = useState();

  // When the component is mounted we will render all the rooms
  // and when filtered is undefined as well
  const [allRooms, setAllRooms] = useState();

  // filtered will include the paramaters we want to filter the 
  // existing rooms by
  const [filtered, setFiltered] = useState(undefined)
  
  useEffect(() => {
    // When components mounts
    // This is the equivalent of componentDidMount in classes
    setAllRooms(rooms);
  })

  const filterRooms = (e) => {
    // again prevent the refresh
    e.preventDefault();
    
    // filtering the rooms
    const result = allRooms.filter(room => room.dailyPrice <= budget && room.people >= nog && room.availableFor >= days )

    // Set the filtered, these are the ones we want to see
    setFiltered([...result]);
  }
  const clearFilter = () => {
    // Showing all the rooms
    setAllRooms(rooms);
    setFiltered(undefined)
  }

  
  return (<>
    <div className='flex flex-col items-center'>
      <form onSubmit={filterRooms} className='min-w-[300px] bg-purple-50 p-4 mt-6' >
        <div className='flex flex-col'>
          <label htmlFor="nog">Number of Guests (Max)</label>
          <input 
            className='bg-cyan-100 p-2'
            type="number" 
            onChange={(e) => setNog(e.target.value)}
            name='nog' 
            placeholder="1"
            max={4}
            min={1} 
          />
        </div>
        <div className='flex flex-col'>
          <label htmlFor="price">Budget (Daily Max)</label>
          <input 
            className='bg-cyan-100 p-2'
            type="number" 
            name='price' 
            onChange={(e) => setBudget(e.target.value)}
            placeholder="100" 
            min={100}
            max={250}
          />
        </div>
        <div className='flex flex-col'>
          <label htmlFor="days">Days</label>
          <input 
            className='bg-cyan-100 p-2'
            type="number" 
            name='days' 
            onChange={(e) => setDays(e.target.value)}
            placeholder="2" 
            min={1}
            max={30}
          />
        </div>
        <input 
          type="submit" 
          value="FILTER" 
          className='bg-cyan-700 text-white p-2 mt-2 rounded w-full cursor-pointer hover:bg-cyan-600'
        />
      </form>
        <button onClick={clearFilter} className='bg-purple-700 text-white p-2 mt-2 rounded w-full cursor-pointer hover:bg-purple-600 max-w-[300px]'>CLEAR FILTER</button>
      <div className='grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-5/6 my-4'>
        {/* if there are no filtered, render all the rooms */}
        {allRooms && !filtered ? allRooms.map(r => <Link key={r.id} to={`${r.id}`}>
          <div >
            <img src={r.src} alt="" />
            <p className='text-2xl'>{r.name}</p>
            <p>Daily Price: {r.dailyPrice} Money Units</p>
            <p>Capacity: {r.people} People</p>
            <p>Available For: {r.availableFor} Days</p>
          </div>
          {/* if there are filtered render filtered */}
        </Link>): filtered ? filtered.map(r => <Link key={r.id} to={`${r.id}`}>
          <div >
            <img src={r.src} alt="" />
            <p className='text-2xl'>{r.name}</p>
            <p>Daily Price: {r.dailyPrice} Money Units</p>
            <p>Capacity: {r.people} People</p>
            <p>Available For: {r.availableFor} Days</p>
          </div>
        </Link>): ""}
      </div>
    </div>
    
  </>)
}

export default Rooms

§Rendering The Selected Room Dynamically

The url for the room object will be created dynamically with the id value we set when we created the rooms. This id value will appear in the url (for example /rooms/2). This id value in the url will be used to find the room we want in the "database". We will use the useParams hook to get the id value from the url in order to filter the rooms.

We need to calculate the cost of the stay for the guest before the reservation. As we don't have a backend, we will only log the sent to us again. The full code is here:

import React, { useState } from 'react'
import { useParams } from 'react-router-dom';
import rooms from '../db';

const getRoomData = (roomId) => {
  const data = rooms.filter(r => parseInt(r.id) === parseInt(roomId))
  return data;
}



const Room = () => {
  const roomId = useParams().id;
  const [days, setDays] = useState();
  const [fullName, setFullName] = useState();
  const [amountToPay, setAmountToPay] = useState()
  const [roomInfo, setRoomInfo] = useState(getRoomData(roomId));

  const calculate = (e) => {
    e.preventDefault();
    
    // just an extra measure
    if(days>roomInfo[0].availableFor || days<=0){
      alert("invalid input for days")
      return
    }
    const result = parseInt(days) * parseInt(roomInfo[0].dailyPrice) 
    setAmountToPay(result);
  }

  const makeReservations = () => {
    window.confirm("Your reservation is done, enjoy your stay")
  }

  return (<>
    <div className='font-bold w-5/6 text-cyan-500 flex flex-col items-center m-auto'>
      <h1 className='text-6xl text-center m-4 uppercase'>{roomInfo[0].name}</h1>
      <img src={roomInfo[0].src} alt="" />
      <p className='text-2xl'>{roomInfo[0].info}</p>
      <p className='text-2xl'>Daily Price is: {roomInfo[0].dailyPrice} Money Units</p>
      <p className='text-2xl'>For: {roomInfo[0].people}</p>
      <p className='text-2xl mb-4'>Available For: {roomInfo[0].availableFor} Days</p>
      <div className='mb-10'>
        <form onSubmit={calculate} className='bg-purple-50 p-5 '>
          <div className='flex flex-col min-w-[300px]'>
            <label htmlFor="full-name">Full Name</label>
            <input 
              placeholder='John Doe' 
              className='p-4' 
              name='full-name' 
              type="text" 
              onChange={(e) => setFullName(e.target.value)}
            />
          </div>
          <div className='flex flex-col min-w-[300px]'>
            <label htmlFor="days">Days</label>
            <input 
              placeholder='1' 
              className='p-4' 
              name='days' 
              type="number" 
              min={1}
              max={roomInfo[0].availableFor}
              onChange={(e) => setDays(e.target.value)}
            />
          </div>
          <input className='w-full mt-4 hover:bg-cyan-600 cursor-pointer rounded p-4 text-white text-2xl bg-cyan-700' type="submit" value="CALCULATE" />
        </form>
    </div>
    <div className='my-6'>
      {amountToPay ? <div className='mt-6 flex flex-col items-center'><p className='text-2xl'>Make reservation with the following information:</p><p className='text-xl'>Name: {fullName}</p><p>Amount To Pay: {amountToPay} Money</p><button className='w-full bg-purple-700 text-white p-4 rounded text-2xl mt-2' onClick={makeReservations}>Make Reservation</button></div> : ""}
    </div>
  </div>
  </>)
}

export default Room

Well the code is very self explanatory but if there are parts of it that you have trouble understanding, play with it a little. Change some values to see how it will change the project. I'm sure you can find a lot of things that can be improved in the project.

§Conclusion

This project was definitely very fun for me to create. If you want to become a web developer you need websites like this in your portfolio. I want this project to be simple enough so the beginners would be able to understand. Yet it is complicated enough to learn from. We have worked with react-router-dom (even though we didn't use a Navlink from react-router-dom) and we have filtered dynamically by setting our states. You have also seen how to handle forms in react.js.

Feel free to improve upon the project. Make your own design, add more rooms, create a backend, etc. You can always make it better, there is always room for improvement. I hope you have learned a couple of things from this post and it wasn't a total waste of time for you.

The code of the project (and the images) can be found here.

Ilker Akbiyik

Table of Contents

Create the Project Folder Routing With react-router-dom Now In The Home Page Dazzle Our Guests With Facilities Allow Your Guests to Contact You Our Rooms Rendering The Selected Room Dynamically Conclusion

A picture of the home page of the finished project

project - 25 April, 2022

Node JWT Authentication Process

Handling authentication and authorisation can be very daunting especially if you are a beginner. I know it was for me. With this post you can get a basic understanding of the jwt auth process with passport.js. We won't be using any frontend framework, gonna keep it nice and simple.

Ilker Akbiyik

project - 1 June, 2022

Marketing Company Website with React, Styled Components and Typescript

You will be able to follow along if you have minimal reactjs and typescript knowledge. We will use intersection observer and add a functional map with mapbox-gl. You can use this website as a template for your future projects and add it to your personal portfolio. Let's begin!

Ilker Akbiyik

§Create the Project Folder

§Routing With react-router-dom

§Now In The Home Page

§Dazzle Our Guests With Facilities

§Allow Your Guests to Contact You

§Our Rooms

§Rendering The Selected Room Dynamically

§Conclusion

Related Posts