Toxin

Цель данного проекта: Изучить React, Redux, Mobx

Описание проекта Toxin: сайт отеля с возможностью выбора и бронирования определенного номера. Макеты можно посмотреть вот тут https://www.figma.com/file/MumYcKVk9RkKZEG6dR5E3A/FSD-frontend-education-program.-The-2nd-task?node-id=0%3A1

Проект будет состоять из 3 модулей:

Модуль Guide. Состоит из страницы с ui элементами и с ui компонентами. Должны быть доступны по адресам /guide/elements и /guide/components соответственно
Модуль Main. В нем всего 1 страница - главная. Адрес - /
Модуль Rooms. Состоит из 3 страниц. Страница с выбором номера и фильтрами и страница конкретного номера, страница мои номера
Модуль Auth. Состоит из 3 страниц: вход, регистрация, забыли пароль.

Для выполнения проекта был создан беклог задач. Но список не конечный, возможно чтото добавится, что не учли на старте или если появятся каки-либо баги при приемке проекта :)

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

Перед началом работы над проектом скопируйте данный репозиторий. Скопировать репозиторий должен ктото один из команды, которая планирует работать над проектом. Работать нужно будет не в этом репозитории а в копии.

Как работать с задачами

Базовая ветка - Master.
Коммиты в мастер строго запрещены, все изменения по проекту в мастер должны попадать через пулреквесты(ПР).
Ниже приведен флоу по работе в проекте:
Каждая задача должна быть оформлена через ишью(issues).
После создания ишью ему автоматически присваивается номер. Даже если ишью ни на кого не назначена, необходимо спросить у команды (либо у менеджера проекта), не работает ли уже кто-то над этой задачей. В случае получения одобрения необходимо назначить ишью на себя.
После этого создаете ветку для выполнения ишью в формате issueNumber-short-task-description.
В ходе работы над задачей делаете коммиты с содержательными пояснениями на англйском языке.

Пример плохого коментария к коммиту: "fix".
Пример хорошего комментария к комиту: "create profile service".

После завершения все коммиты пушатся в текущую ветку.
Затем создается ПР в мастер. После создания ПРа в первую очередь небходимо проверить его самостоятельно. Обращаем внимание не запушили ли закомментированный код, работает ли весь функционал в соответствии с задачей, описанной в ишью. Плюс проверить работоспособность хотябы в двух браузерах, к примеру хром и файрфокс. И только после этого уже просить других смотреть ПР.
Все участники проекта смотрят новый код и оставляют замечания(дискашены).
ПР принимается только после исправления всех дискашенов.
Закрытием задачи является мерж ветки в мастер. Мержить позволяется только в случае получения одобрения ПРа всеми участниками команды (гитхаб позволяет ставить апрувы, нужно попросить всех участников поставить их, если замечаний больше нет).

Про тех. требования

Приложение нужно сделать на базе react https://reactjs.org/ и next.js https://nextjs.org/. Для статической типизации использовать typescript

Для управления данными приложения есть библиотеки redux https://redux.js.org/ и mobx https://mobx.js.org. Мы бы хотели чтобы вы поработали и с обоими подходами для расширения кругозора :) Поэтому первую версию нужно будет сделать на redux, а после выполнения бизнес-задач сделать отдельную ветку "mobx" и поменять redux на mobx. Времени это много не займет, ведь вся верстка и реакт компоненты останутся такими же.

Для альтернативы серверу предлагаем использовать сервис firebase. Про то как с ним работать и настроить снизу будет отдельная инструкция Для управления сайд эффектами в redux приложении рекомендуем использовать redux-saga https://redux-saga.js.org/ Для работы с формами рекомендуем использовать библиотеку react-final-form Для инпута с маской react-text-mask

Про доп. требования

не забывайте при разработке проекта следовать стандартам fsd https://github.com/fullstack-development/front-end-best-practices

Также при отправке форм на сервер неободимо блокировать кнопку пока идет запрос

Про firebase

подсказки как работать с firebase