Все проекты

Six-cities

Cервис для путешественников. Подробная информация о жилье, показ объекта на карте, комментирование. Добавление в избранное для авторизованных пользователей.Выбирайте один из шести популярных городов для путешествий и получайте актуальный список предложений по аренде. Подробная информация о жилье, показ объекта на карте, а также лаконичный интерфейс сервиса помогут быстро выбрать оптимальное предложение.

Описание проекта

  • Приложение состоит из нескольких страниц: Main ( / ), Sign In ( /login ), Favorites ( /favorites ) (приватная), Room ( /offer/:id ). Страница Favorites доступна только авторизованным пользователям.
  • На главной странице отображается список городов, для которых возможно запросить предложения по аренде: Paris, Cologne, Brussels, Amsterdam, Hamburg, Dusseldorf. Сервер всегда возвращает информацию только для этих шести городов. На карте предложения отображаются в виде синих маркеров.
  • Карта реализуется сторонней библиотекой Leaflet.
  • Все предложения выбранного города отображаются на карте в виде синих маркеров. При наведении курсора на карточку предложения, маркер, соответствующий объявлению, становится оранжевым.
  • Кнопка «Избранное». Клик по кнопке «Избранное» добавляет карточку в избранное. Если пользователь не авторизован, то выполняется перенаправление на страницу Sign In.
  • На странице предложения ( /offer ) представлена расширенная информация об объекте, а также отзывы пользователей. В заголовке блока отображается общее количество отзывов. Для авторизованных пользователей отображается форма отправки нового отзыва. Под списком отзывов отображается карта с предложениями неподалёку. На карте отмечено 3 предложения неподалёку и маркер текущего предложения (итого 4 маркера).
  • Страница «Favorites» доступна только авторизованным пользователям. Если пользователь не авторизован, то выполняется перенаправление на страницу «Sign In». Переход на страницу «Favorites» осуществляется при клике на email авторизованного пользователя.

Сборка проекта

Готовый проект формируется в папку - dist.

  • Перед сборкой и запуском проекта необходимо установить зависимости командой: npm i
  • Сборка продакшн (готовый проект для размещения на хостинге): npm run build
  • Запуск проекта локальнов в Dev режиме: npm start