Цель данного проекта: Изучить 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
не забывайте при разработке проекта следовать стандартам metalamp https://github.com/fullstack-development/front-end-best-practices
Также при отправке форм на сервер неободимо блокировать кнопку пока идет запрос
подсказки как работать с firebase fullstack-development/toxin-group-project#44