rowaidsayyed / hotels-app-code-challenge

Home Page:hotels-app-code-chalenge.vercel.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hotels App Code Challenge

Live Demo

Hotels App Code Challenge

πŸ”¨ Requirement

You need NodeJs & NPM installed on your computer

πŸ’Ώ Installation

Clone the repositry

git clone https://github.com/rowaidsayyed/hotels-app-code-challenge.git
cd hotels-app-code-challenge

Install dependencies

npm install

Run development

npm run dev

Build for production

npm

npm run build

Requirements and Output

  • User select the date range to search hotels
  • Display all hotels whose availability dates lies between the search dates.
  • Display the total number of nights based on selected date range. (For example if user search from Aug 12, 2020 to Aug 17, 2020 than Total Number of Nights will be 5.)
  • Display hotel price based on number of nights. (Price x Number of Nights)

Dependencies & Technolgy

  • Nextjs version 12.1.0
  • Axios version 0.26.1
  • ReactJS version 17.0.2
  • Jest for Unit Testing version 27.4.5
  • testing-library for react version 12.1.2

Run Test

npm run test

Tests includes

  • test "Button" component if render text and fire on click event
  • test "getTotalNights" function
  • test "getSortedList" function
  • test "HotelCard" component if render hotel name and price

Folder Structure

β”œβ”€β”€ components
β”‚   β”œβ”€β”€ layouts
β”‚   β”‚   └── BasciLayout.js
β”‚   β”œβ”€β”€ hotelCard
β”‚   β”‚   └── HotelCard.js
β”‚   └── shared
β”‚       β”œβ”€β”€ Button.js
β”‚       β”œβ”€β”€ InputField.js
β”‚       └── RangeInput.js
β”œβ”€β”€ pages
β”‚   β”œβ”€β”€ _app.js
β”‚   β”œβ”€β”€ index.js
β”‚   └── listings.js
β”œβ”€β”€ services
β”‚   β”œβ”€β”€ api.js
β”‚   └── hotelsServices.js
β”œβ”€β”€ utils
β”‚   └── helperFunctions.js
β”œβ”€β”€ styles
β”‚   β”œβ”€β”€ globals.css
β”‚   β”œβ”€β”€ utils.css
β”‚   └── HotelCard.modul.css
β”œβ”€β”€ __tests__
β”‚   β”œβ”€β”€ button.test.jsx
β”‚   └── helpers.test.jsx
└── jsconfig.json

About

hotels-app-code-chalenge.vercel.app

License:MIT License


Languages

Language:JavaScript 89.6%Language:CSS 10.4%