Всем привет! По просьбе моего подписчика сегодняшняя статья будет посвящена pet-проектам и тестовым заданиям на Vue.js. Материал, который будет представлен в этой статье, используют крупные московские компании при найме сотрудников на позицию Frontend-developer Vue.js. Уверен, что эта статья будет полезна не только тем, кто пишет на Vue, но и всем остальным разработчикам.
Меня зовут Антон. Я занимаюсь front-end разработкой и сейчас я расскажу вам об идеях для ваших pet-проектов на Vue.js.
Интернет-магазин
В этом pet-проекте вам будет необходимо написать небольшой интернет магазин с возможностью добавления, удаления и фильтрации товаров в списке. При написании этого проекта вы приобретете или потренируете основные навыки, которые необходимы в работе любого Vue-разработчика.
Задачи рассчитаны для разработчиков разного уровня и поэтому требования к нему разделены на различные уровни сложности
Уровень 1
- Использование системы контроля версий.
- Настройка сборки проекта.
- Использование Vue фреймворка.
- Использование CSS препроцессора.
- Верстка задания согласно макету.
Плюсом будет
- Стилизация состояний взаимодействий (hover, active, focused) с элементами на свое усмотрение.
- Верстка адаптивной версии под мобильные устройства.
Уровень 2
- Добавить валидацию для формы добавления товара.
Название - обязательное поле.
Ссылка на изображение товара - обязательное поле.
Цена - обязательное полек.
- Кнопка добавления товара неактивна пока форма пуста или невалидна.
- Добавление маски разделения тысячных пробелом для поля цены.
- Разработка функционала добавления товара в общий список из формы.
Плюсом будет
- Верстка состояния удачного добавления товара в форме на свое усмотрение.
- Анимация перехода состояний.
- Анимация добавления товара в список.
Уровень 3
- Добавление функционала удаления товара из списка.
- Разработка функционала сохранения списка товаров при перезагрузке страницы.
- Разработка функционала сортировки списка товаров по следующим параметрам:
По цене min (от меньшего к большему).
По цене max (от большего к меньшему).
По наименованию.
Плюсом будет
- Анимация удаления товара.
- Анимация сортировки товара.
- Добавление прелодера на странице для плавной инициализации списка
Кнопка заказа товара
В этом тестовом задании вам необходимо сверстать две кнопки "Заказать в Москву" и "Заказать в Санкт-Петербург". При клике на любую из кнопок открывается поп-ап с формой. В форме должны быть поля "Имя", "Телефон", "Email" и селект "Город", а также кнопка "Отправить". При успешном заполнении формы, данные необходимо отправить на backend, а ответ вывести в новом попапе.
Требования к тестовому заданию:
- VueJS в качестве основного фреймворка (v2 или v3 - на ваше усмотрение);
- TailwindCSS в качестве CSS-фреймворка;
- Vuex для пробрасывания данных между компонентами;
- Использовать Axios для общения с backend.
Детальное описание тестового задания представлено ниже
Кнопки
- Кнопки необходимо положить в отдельный компонент. Напрямую к попапу кнопки обращаться не могут.
- При клике на кнопку "Заказать в Москву" в попапе в селекте "Город" должна автоматически выбираться "Москва".
- При клике на кнопку "Заказать в Санкт-Петербурге" в попапе в селекте "Город" должен автоматически выбираться "Санкт-Петербург".
Форма
- Все поля обязательные, если при клике на кнопку "Отправить" какое либо поле не заполнено либо наполнено неверно, то возле этих полей нужно вывести ошибку "Обязательно поле".
- На поле "Телефон" необходимо добавить маску номера в формате +7 (___) ___-__-__ .
Форму можно отправить только, если:
- Все обязательные поля заполнены
- Введен валидный номер телефона
- Введен валидный email
При клике на "Отправить" необходимо отправлять POST-запрос backend.
В качестве массива городов для селекта взять следующий:
Запрос
Запрос на backend должен уходить на адрес http://hh.autodrive-agency.ru/test-tasks/front/task-7/.
Названия ключей:
В ответ на запрос будет приходить HTML с информацией об успешной оправке, либо с информацией об ошибке, информацию необходимо отобразить в новом попап окне.
После успешной отправке необходимо очищать форму, чтобы при повторном клике на кнопку открывалась пустая форма.
Многоязычный блог
На примере этого проекта вы узнаете, как создать полноценный веб-сайт с использованием Nuxt.js от начальной настройки до окончательного развертывания. Вы используете множество интересных функций, которые Nuxt может предложить, например, страницы и компоненты, а также стилизацию с помощью SCSS.
Требования к проекту:
- Nuxt.js;
- Разделение проекта на страницы и компоненты;
- Storyblok module;
- Mixins;
- Vuex для работы со стейтом
- SCSS
- Nuxt middlewares;
- Дизайн блога на ваше усмотрение
#it #vue #code #proweb #web #frontend #программирование #pet-проекты #top
Делитесь в комментариях вашими впечатлениями и пожеланиями для будущих статей.