Skip to content

Sinead-CYF/cyf-hotel-react

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

79 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React - Hotel Bookings Display

hotel

Aims: 🎯

Create a React app to display hotel & booking data for various cities.

  • Extract the search button in its own component
  • Extract the header in its own component
  • Create and use a new component to show info cards
  • Display 3 info cards for gthree cities
  • Create a Footer component
  • Create a table to show hotel bookings
  • Show more bookings in the table
  • load src/data/fakeBookings.json and pass it as a prop to <SearchResults />
  • Calculate and show the number of nights for each booking
  • Render the Restaurant component
  • Preparing to add more pizzas
  • Add more pizzas
  • Extract the Add button to its own component
  • Extract pizza order to its own Order component
  • Render more orders
  • Passing bookings from a state variable
  • Highlight booking row when clicked

Tools: 🧰

  • React Props, useState, useEffect
  • Array.map
  • React JSX
  • Flexbox
  • CSS

Room for improvement: ⚖️

  • Load bookings remotely
  • Storing the search input in a state
  • Triggering search when submitting the form
  • Implement search functionality
  • Display a customer profile
  • Show a loading message
  • Show an error message
  • Create a new booking
  • Sort table columns

About

Hotel Bookings - React Practice

Topics

Resources

Stars

Watchers

Forks

Contributors

Languages

  • JavaScript 59.9%
  • HTML 21.1%
  • CSS 19.0%