└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Тестовое задание для поступления в FrontCloudCamp 2 | 3 | Результаты выполнения тестового задания следует код опубликовать на GitHub и захостить на любой открытой платформе (например, Github Pages) и отправить на почту frontcloudcamp@cloud.ru. 4 | 5 | ## Разработка формы описания профиля 6 | 7 | Требуется разработать форму отправки данных по готовому макету. 8 | 9 | ### Технические требования: 10 | 11 | Для разработки приложения использовать [макет](https://www.figma.com/file/rzIp6awR6dGFVrcxcCEwzD/Untitled?type=design&node-id=0-1&t=90NCIZwzg7SIsdMb-0) 12 | 13 | В рамках дизайна формы реализовано 3 отдельных таба(шага) формы, которые можно переключать между собой. При переходе от таба к табу (в том числе возвращаясь на предыдущий) информация должна сохранятся. 14 | 15 | На первом экране необходимо добавить информацию о себе и по нажатию на кнопку будет происходить переход на форму. При переходе должен меняться роут. 16 | 17 | На каждом этапе формы нужно валидировать значения конкретного шага 18 | 19 | После отправки формы показывать модальное окно с success или error. Модалку нужно будет разработать самому, не используя сторонние библиотеки или ui-компоненты. 20 | 21 | Для отправки формы использовать api https://api.sbercloud.ru/content/v1/bootcamp/frontend 22 | 23 | Адаптивная версия обязательна, способ реализации по твоему выбору 24 | 25 | #### Валидация и описание полей 26 | 27 | - nickname - строковое значение, максимальная длина 30 символов, могут быть просто буквы и цифры (спец символы запрещены) 28 | - name - строковое значение, максимальная длина 50 символов, только буквы 29 | - sername - строковое значение, максимальная длина 50 символов, только буквы 30 | - phone - строковое значение, форма записи +7 (900) 000-00-00 - реализовать маску ввода, +7, (), -, уже подставленные символы, валидация - цифры 31 | - email - строковое значение, валидация на email стандартная @ и .домен 32 | - sex - enum 'man' | 'woman' реализовать как select 33 | - advantages - массив строк, основной критерий - массив строк. По нажатию на “Плюс” должно добавляться новое поле и так же валидироваться. 34 | - radio - number блок, в дизайне должна быть группа элементов RadioGroup 35 | - checkbox - массив number, в дизайне должна быть группа элементов CheckboxGroup 36 | - about - textarea блок максимальная длина 200 символов, в правом нижнем углу добавить счётчик символов без пробелов 37 | 38 | ### Рекомендуемый стек: 39 | - React 40 | - Typescript 41 | - Redux или Redux-Toolkit, RTK Query (A proposal for bundling reducers, action types and actions when using Redux) 42 | - Styled-components | scss modules | css modules 43 | - Formik | react final form | react hook form 44 | - Yup 45 | --------------------------------------------------------------------------------