• Основная ссылка на готовое веб-приложение
• Ссылка на превью

npm install

npm run dev

Чтобы поменять на локальный стенд достаточно раскомментировать строку с localhost в файле src/constants/common.constants.ts и закомментировать стркоу с продакшен стендом

В Воронеже есть некоммерческая организация "Наша Природа". Ребята занимаются благим делом – спасением и реабилитацией диких животных, птиц и летучих мышей. Их часто приглашают на различные мероприятия, да и они зачастую являются организаторами и чтобы не запутаться, им нужен календарь-планировщик.

1. Next.js
2. TypeScript
3. React Aria
4. SCSS

1. Все модальные окна соотвествуют спецификации ARIA
2. Реализация или на JavaScript, или на React, возможность подключения библиотек (в частности для реализации календаря)
3. При вёрстке ориентироваться на разрешение от 1280px и выше
4. На production-сборке приложение должно выдавать 85+ по всем показателям в Chrome Lighthouse (без PWA)

Требуется реализовать календарь событий с возможность отображения событий и переключения по месяцам. Календарь должен корректно отображаться для граничных состояний января-декабря (предыдущего-текущего года) месяца.

Требования:

• На главной странице отображается календарь событий.
• Управление месяцем календаря осуществляется с помощью кнопок-стрелок "<" и ">". При клике на кнопку "<" – отображается предыдущий месяц, при клике на кнопку ">" – отображается следующий месяц.
• В заголовке отображается выбранный месяц, если текущий год отличается от выбранного – отображается год.
• В каждом дне календаря отображается события, которые произойдут в этот день, отсортированные по дате(времени).
• События, участником которых является текущий пользователь, отображаются в календаре с другим цветом.

Требуется реализовать функционал аутентификации и регистрации.

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

Требования:

• При клике на кнопку "Войти" в правом верхнем углу сайта либо на "Войдите" в модальном окне просмотра событий открывается форма "Вход".
• Поле email в модальном окне "Вход" является обязательным для заполнения и должно быть валидным email адресом.
• После ввода email и нажатия на кнопку "Далее" проверяется наличие пользователя с таким email, если пользователь существует – переходим к шагу ввода пароля, если пользователя нет в системе - переходим к шагу "Регистрация".
• На шаге ввода пароля в модальном окне "Вход" поле пароля является обязательным для заполнения, валидация осуществляется по клику на кнопку "Войти". Если поле не заполнено – выводится сообщение об ошибке ("Обязательное поле").
• При успешной аутентификации в модальном окне "Вход" - закрывается модальное окно, в правом верхнем углу сайта отображается кнопка добавления события и изображение пользователя.
• При неуспешной аутентификации в модальном окне "Вход" – выводится сообщение об ошибке ("Неверный пароль").
• При ошибке сервера (статус код 5XX), отображаем сообщение "Что-то пошло не так, попробуйте позже".
• В модальном окне "Регистрация" отображается поля для ввода пароля, подтверждения пароля и кнопка "Зарегистрироваться".
• Для полей ввода пароля реализована функциональность предпросмотра пароля. Для паролей применяется правило "Используйте от 8 до 32 символов: строчные и прописные латинские буквы (A-z), цифры (0-9) и спецсимволы ( . , : ; ? ! * + % - < > @ [ ] { } / \ _ {} $ # )".
• При нажатии на кнопку "Зарегистрироваться" происходит валидация полей формы. Поля проверяются на заполненность, совпадение паролей и соответствие правилу ввода паролей. В случае ошибки выводится сообщение об ошибке ("Обязательное поле", "Пароли не совпадают", "Используйте латинские буквы, цифры и спец символы").
• При успешной регистрации в модальном окне "Регистрация" – закрывается модальное окно, в правом верхнем углу сайта отображается кнопка добавления события и изображение пользователя.
• При неуспешной регистрации (статус код отличный от 2XX), отображаем сообщение "Что-то пошло не так, попробуйте позже".

Требуется реализовать функционал добавления события. Для добавления события в приложении требуется кликнуть на кнопку (+) в правом верхнем углу сайта. В модальном окне добавления события возможны для заполнить поля "Название", "Начало", "Конец", "Время", "Описание", "Место проведения", есть функционал добавления фотографий и выбора участников.

Требования:

• При клике на кнопку (+) в правом верхнем углу сайта открывается модальное окно "Создать событие".
• В модальном окне "Создать событие" отображается поля для ввода названия, даты начала, даты окончания, времени, описания, места проведения, поля добавления фотографий и выбора участников и кнопка "Создать".
• Поля "Название" (лимит 140 символов), "Начало", "Время", "Описание" (лимит 1000 символов), "Место проведения"(лимит 140 символов) являются обязательными для заполнения.
• Дата конца события не может быть раньше даты начала события. Даты начала (+ Время) и конца события передаются в формате ISO 8601.
• Список возможных участников события получается с сервера при открытии формы.
• Загрузка фотографий доступна как через DnD так и по клику на поле загрузки. Необходима валидация на максимальный размер одной фотографии в 5мб
• При клике на кнопку "Создать", все обязательные поля валидируются, если поля не заполнены - выводится сообщение об ошибке ("Обязательное поле"). При успешной валидации формы, происходит отправка данных на сервер. При успешном ответе от сервера, модальное окно закрывается, на странице отображается модальное окно "Ура!", в противном случае отображается сообщение "Что-то пошло не так, попробуйте позже".
• При попытке закрытия заполненной формы добавления события отображается модальное окно с подтверждением действия "Передумали создавать событие?"

Требуется реализовать функционал просмотра события. Для просмотра события в приложении требуется кликнуть на событие в календаре. В модальном окне просмотра события возможны для просмотра поля "Название", "Начало", "Конец", "Время", "Описание", "Место проведения", есть функционал просмотра фотографий, участников и возможность присоединиться к событию.

Требования:

• При клике на событие в календаре открывается модальное окно "Название события".
• В модальном окне "Название события" отображаются "Название" в качестве заголовка модального окна, поля для просмотра названия, даты начала, даты окончания, времени, описания, места проведения, галерея, список участников и кнопка "Присоединиться" (для аутентифицированного пользователя) / "Войдите" / "Отменить участие" (если пользователь подписан на событие).
• Для управления слайдами галереи используются кнопки "<" и ">". (опционально: добавить возможность пролистывания слайдов с помощью тач ивентов и жестов)
• При клике на кнопку "Присоединиться" происходит отправка запроса на сервер. При успешном ответе от сервера, кнопка "Присоединиться" отображается модальное окно "Поздравляем!", в противном случае отображается сообщение "Что-то пошло не так, попробуйте позже".