The app consists of several pages: Main ( / ), Sign In ( /login ), Favorites ( /favorites ) (private), and Room ( /offer/:id ). The Favorites page is only available to authorized users.
The main page displays a list of cities for which rental offers can be requested: Paris, Cologne, Brussels, Amsterdam, Hamburg, and Dusseldorf. The server always returns information only for these six cities. Offers are displayed on the map as blue markers.
The map is implemented by the third-party library Leaflet.
All listings in the selected city are displayed on the map as blue markers. When you hover over a listing card, the marker corresponding to that listing turns orange.
Favorites button. Clicking the Favorites button adds the card to your favorites. If the user is not logged in, they are redirected to the Sign In page.
The offer page ( /offer ) provides detailed information about the property, as well as user reviews. The block header displays the total number of reviews. Authorized users see a form for submitting a new review. A map with nearby offers is displayed below the list of reviews. The map shows three nearby offers and a marker for the current offer (for a total of four markers).
The "Favorites" page is only accessible to authorized users. If the user is not authorized, they are redirected to the "Sign In" page. The "Favorites" page is accessed by clicking on the authorized user's email address.
The finished project is created in the -dist folder.
npm inpm run buildnpm start