Skip to content
Build a hotel booking website with React, React Router and Axios.
JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public 📝 Update project info Oct 6, 2019
src 🎨 Improve scroll to top on navigation change Oct 7, 2019
.editorconfig Add HeroHeader Sep 10, 2019
.env.sample Add api file Sep 11, 2019
.eslintrc.json Add HeroHeader Sep 10, 2019
.gitignore 🙈 Add netlify.toml on gitignore Oct 6, 2019
.stylelintrc.json Add HeroHeader Sep 10, 2019
README.md 📝 Update README Oct 6, 2019
package-lock.json 📈 Add Sentry Oct 5, 2019
package.json 📈 Add Sentry Oct 5, 2019

README.md

Hotel Booking Site with React Netlify Status

The main purpose of this project is to implement API requests with React, so I create myself a mini hotel booking website like Airbnb. Visitor will be able to check room price and availability in the next 3 months, then fill out the simple form to book a room.

Demo

Live URL: https://react-hotel-booking.netlify.com/

Hotel Booking Site with React The hotel booking template designed and shared by edith.hsu

What I learned from this project

  • Making AJAX API calls (Get, Post) with Axios
  • Displaying Modal with success and error message from API response
  • Handling React Date Picker with response data
  • Form data validation
  • Formatting date in JS
  • Skeleton screen loading effect
  • CSS grid layout
  • CSS only slider

Installation

  1. Clone this repo
  2. Run npm install

Development

  1. npm start: Run the app in development mode.
  2. npm run build: Builds the app for production to the build folder.
You can’t perform that action at this time.