Hotel Currencies & Price Competitiveness task
This projects is a frontend application that displays a list of hotels, it's prices (in 4 different currencies) and it's competitors prices.
Checkout the Website →
Getting Started
First, install all the npm packages using —
npm install
To start the development server, run the following command —
npm run dev
# or
yarn dev
Open http://localhost:3000 with your browser to see the applications running.
To run the tests, run the following —
npm run test
Design Considerations
Tech stack / Packages
- Next.js (React.js) for the frontend
- Jest & React Testing Library for the unit and integrations tests
- react-tooltip for hover over tooltips
- Vercel for hosting
- Vanilla CSS, but uses CSS Modules for file based scoping
Changelog
1.0
- Fetches hotels and pricing and displays it
- Currency conversion feature
- Competitor price listing feature
- Setup Jest & React Testing Library
- Unit / Integration tests for HotelCard component & utility functions
Future version enhancements
- When changing currencies, make only the prices API call instead of both hotels & prices
- Add animating skeletons for the initial load
- Fetch other currency prices asynchronously when the page has finished loading for one currency and store in state
- Setup and configure Cypress for E2E tests
- Automatically fetch prices for hotels after 'x' amount of time has passed or the user returns to this tab from another tab
Possible API changes for better performance
- Allow price API calls for individual hotels instead of loading all at once
- Cache frequently searched hotels to reduce initial load time