Katia-Toboleva / react-resizable-input-with-filters

Hotel search engine with price filter (resizable input range) built with React and async code

Hotel search engine with price filter (resizable input range) built with React and async code.

Description:

The app mimics a hotel search engine with a price filter. First, all the hotel options are fetched from a mock API. Then the user can filter the options by either moving toggles of the price range or changing values in the input fields. Any time the values are changed inputs, range input bar and filters are updated accordingly showing the hotels by the requested price range. It's also possible to move the bar to filter for a specific price range.

Note: The range is currently set up with "sticky" values (e.g. 10 steps) but the functionality of the app allows to switch to "non-sticky" values (by deleting "sticky" props) to offer precise price options.

Technologies:

React, JavaScript (JS mouse events), Async promises and fetch, Lifecycle events, TDD testing (Jest), GitHub branches, SCSS and CSS modules, Webpack, Babel, Eslint, Stylelint.

Demo:

1. Getting started:

2. Managing price range filter with toggles

3. Managing price range filter with inputs

4. Managing price range filter both with toggles and inputs

5. Moving the range bar and filtering hotel options