API Endpoints

/api/currencies - Returns a list of all the available currencies in the database

/api/reservations - Returns a list of all the available reservations in the databse

/api/currencies/exchangeRates?from=USD&to=EUR - Returns the convertion rate from the given currency from to the wanted one to

{
    "base":"USD",
    "to":"EUR",
    "value":0.8933357156
}

Reservation Feed

Welcome to UpStay! 💃💃
this repo contains a boilerplate for your UpStay exercise.

Project aim

In this project you will create a web service, displaying a live feed of hotel reservations.

You will be provided with a stream of reservations, which you should keep track of in the server and insert it to the database. After successful insertion, you should broadcast the new reservation to the client using web sockets. When a user opens the web-app, he should see the live feed of all reservations from the database:

This is how it should look like:

The web app should be fully responsive and from small breakpoint down (@media (min-width: 576px)) the layout should be look like this:

Establishment

Fork this project to your local machine.
Create a Postgres database using your favorite tools (we recommend DataGrip IDE) and execute the ddl.sql provided in the project to generate your initial database structure.
create .env file and put there your Database Connection String in the format: postgres://[USER]:[PASSWORD]@[HOST]:[PORT]/[DATABASE_NAME] under DATABASE_URL key as shown in .env.example
You're all set! Start the project using npm install and npm start. you will see a web page opened with a beautiful "Welcome to UpStay" message 🤗

Instructions [Back-End]

Create a reservation route that returns all the reservations from the database.
Use the code provided and attach a callback to new reservation events in the generator stream.
Insert new reservations to the database and broadcast them to the client using the socket provided from socket.io implementation. The broadcast to the client should only occur on successfully insertion!
Create a route that returns live exchange rates for currencies using an external public API of your choice.

Instructions [Front-End]

Create the feed page displaying all the reservations from the database on application load, as describe in the preview mocks above. No need for pagination! All the data should be rendered endlessly onto the page.
Activate the filter input by uuid: on every keystroke the feed should refresh to display any matches to the reservation's uuid. This filter should be dynamic client-side only.
Activate the select box change currency: on page load and every onChange event, all the reservation prices should be converted to the new selected currency (you can assume default value is USD). Use your previously created currencies route to populate the ComboBox and make the conversion by their actual current values from your chosen external API. you should render the page only when all the data is ready.
Subscribe your socket.io client to the corresponding event your chose in the server and listen to new reservation events. Add any new reservations to the live feed.

Notes

To make your (and our 🙃) life easier, we already made a pretty solid code infrastructure for the Server and the Client. Before your begin coding, please take 10-15 minutes to evaluate the existing implementation and make sure you understand the project structure and design architecture. If you have any questions before you start you can reach out to us any time!
Some of the libraries used in the project are not opinionative, please use them:
- axios - HTTP Client for Node & Browser
- pg - Postgres Databse Client
- socket.io - Real Time engine based on web sockets
If you are not familiar with those technologies please find the time to go through them and understand the basic use API. This is part of the test. Besides those, you may use any other tool you know and love for the job.
In the Front-End, we are using a custom webpack config that supports all the new javascript goodies implementations.
This setup supports:
- React & JSX (of course 😝)
- hooks
- css
- scss (sass)
- styled-components.
You can add whatever tool or babel plugin your like if you need extra compile assets (no need to use create-react-app - everything is already working for you!).

Dev server and hot reload are also in, so you can work on the same url in the client and the server (no need to complicate yourself with proxy for your ajax calls and other annoying stuff from CRA 😵).
Please use any UI library you want (or any css framework) to make our project more shiny.
We look for clean and organized code. Keep it DRY!
We recommend using VSCode IDE with those extensions:
For better development experience with fully eslint and prettier IDE support
Submit your solution by committing & pushing all your code and send us the forked repo URL.

Good Luck!
We hope you will learn a lot and also have fun 😉✌️