All projects

Keksobooking

A service for posting advertisements for real estate rentals.Users are given the opportunity to post ads for their properties or view already posted ads.

Project description

The map is implemented using the third-party library Leaflet. When active, the page allows you to make changes to the form and submit it to the server. After loading data from the server, you can view similar listings on the map, filter them, and refine their details, displaying a card for each listing.

The address in the ad form is entered from the coordinates of the main marker on the map. Manual editing is disabled.

Form validation (using the setCustomValidity method). When attempting to submit a form with invalid data, it fails to submit, and the incorrectly filled fields are highlighted and provide information about what was entered incorrectly.

Фильтрация отображаемых объявлений.

Displaying an ad card when clicking on an ad pin.

Eliminate debounce by rendering ads when filters change no more frequently than a set interval (debounce using the setTimeout method).

The project is divided into modules.

The project is configured to build JavaScript modules using Webpack.

Project build

The finished project is generated in the - "dist" folder.

  • Before building and running the project, you need to install dependencies with the command: npm i
  • Build for development (Dev mode): npm run dev
  • Build for production (ready project for hosting): npm run build
  • Run the project locally: npm start