63 подписчика

Идеи pet-проектов на Vue.js

12 августа 202212 авг 2022

503

3 мин

Оглавление

Интернет-магазин
Кнопка заказа товара
Многоязычный блог

Всем привет! По просьбе моего подписчика сегодняшняя статья будет посвящена 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.

Требования к проекту: