Личный проект «Шесть городов»

Проект Six-cities/Шесть-городов - это современный сервис для путешественников, которые не хотят переплачивать за аренду жилья.

В приложении можно получить актуальный список предложений по аренде в одном из шести популярных городов. Сортировка объектов и подробное описание каждого из них помогут быстро выбрать оптимальный вариант жилья. Авторизованные пользователи могут оставлять отзыв под каждым предложением.

Этот проект создовался во время обучения по React.

За время прохождения обучения я получил опыт работы со следующими инструментами:

• TypeScript;
• React Router;
• Redux;
• React Hooks;
• Axios;
• Redux-thunk;
• Redux Toolkit;
• Jest;
• React Testing Library.

К завершению периода обучения была проведена подготовка проекта к итоговой защите и его оценка проверяющим составом по критериям качества.

По окончанию обучения успешно защитил проект на 100 баллов и получил сертификат.

После прохождения курса могу выделить основные навыки, которые я приобрёл для себя:

• Поиск и анализ информации;
• Работа в команде;
• Hавыки планирования;
• Умение задавать вопросы;
• Работа с обратной связью;
• Самостоятельность.

---

- Скриншоты интерфейса сайта:

- Скринкасты взаимодействия с элементами сайта:

Рандомная смена города (при каждом открытии/перезагрузки страницы) для быстрого перехода к списку предложений по аренде

Авторизация и перенаправление на страницу предложений по городу

При смене города перерисовывается карта и список предложений

При наведении на карточку предложения, на карте подсвечивается его метка

Список предложений находится в своём отдельном сегменте страницы

Взаимодействие с картой

Возврат к изначальному масштабу карты при наведении на карточку с предложением

Сортировка списка предложений по критериям

Клик по карточке открывает страницу с полной информацией по этому предложению

Оставить отзыв могут только авторизованные пользователи

Процесс отправки отзыва и добавление его в общий список

Быстрый переход на главную страницу сайта

---

Открыть сайт можно по ссылке: six-cities-morozovcode.vercel.app

В моём личном блоге есть пост об этом проекте.

Инструкция как добавить этот проект на свой компьютер

1. Склонировать весь репозиторий:

$ git clone https://github.com/MOROZOVcode/six-cities.git
$ cd six-cities

В директории markup находятся вся вёрстка макета.

2. Перейти в папку project и далее продолжать работу из этой директории:

$ cd project

3. Установить проект:

$ npm instal

В директории public лежат статичные ресурсы приложения (шрифты, стили, изображения и так далее).

В директории src располагаются все ресурсы связанные с непосредственной разработкой, а именно: React компоненты, хуки, stor и так далее.

Чтобы получить больше информации и инструкций о проекте, можно перейтити по этой ссылке: github.com/MOROZOVcode/six-cities/tree/master/projec/Readme.md

---

Репозиторий создан для обучения на профессиональном онлайн‑курсе «React. Разработка сложных клиентских приложений» от HTML Academy.

• Студент: Даниил Морозов.
• Наставник: Андрей Повстьянко.