- Техническое задание
- API
- Используемые технологии
- Необходимый функционал
- Дополнительный функционал
- Описание экранов
- Тестирование
- Полезные ссылки
Необходимо реализовать React приложение "Modsen Doggy Spa" по предоставленному дизайну из Figma с использование server-side rendering(NextJS) и GraphQl.
Список API для использования(если представленные API не удовлетворяют каким-либо условиям задания, можно использовать любые другие открытые API для поиска информации о собаках):
- API DOGS - данные о собаках.
- yarn - менеджер пакетов.
- TS - инструмент строгой типизации
- react-router-dom - инструмент управления состоянием.
- email-js - библиотека позволяющая отправлять электронные письма на почту
- styled-components - система стилизации react компонентов.
- cypress — e2e тестирование для web-приложений
- jest — unit-тестирование
- yup - библиотека для валидации форм
- nextJS - фреймворк на JavaScript, использующий React для построения server-side render
- GraphQL - язык запросов для взаимодействия клиента и сервера, а также среда исполнения этих запросов.
- Apollo - открытый соответствующий спецификации GraphQL-сервер.
- paypal-js - библиотека для подключения PayPal
Приложение должно предоставлять возможность:
- отправки писем на электронную почту
- просмотр интерактивной карты
- смены языка (продумать самостоятельно)
- поиск информации о собаке с реализацией elastic search
- Настроить CI/CD, используя GitHub Actions.
- Собрать проект с нуля(с настройками всех конфигов: webpack, eslint, prettier, husky и тд.)
Ссылка на макет: Макет "Modsen Doggy Spa".
- Организацию файловой структуры описанной в structure.
- Создание своего сервера на GraphQL.
- Обработку ошибок через паттерн "Error Boundaries".
- Использование TypeScript для типизирования и уменьшения количества потенциальных багов.
- Использование алиасов для импортирования файлов.
- Реализация должна быть выполнена без использования UI библиотек.
- Обязательная валидация всех текстовых полей с использованием yup.
- Оптимизацию дизайна под мобильные устройства.
- Покрытие тестами всего приложения (cypress, jest, ...).
- Создание UI библиотеки компонентов, используя storybook.
- Обязательную анимацию при наведения, нажатии на кнопки, прокрутки карусели и слайдеров, появлении элементов на странице при рендере и скролле.
- Творчество в контексте анимации, помимо обязательной выше, приветствуется.
Каждая страница содержит в шапке профиля навигацию по страницам сайта, а также в подвале сайта должна быть реализована форма отправки сообщения на электронную почту выполняющего.
-
Главная Home. В блоке "Your dog running amok in the dirt?" при нажатии на кнопку "Book Appointment" происходит переход на страницу Book Appointment. В блоке "Sign Up to Bark Newsletter" должна бытьреализована форма отправки сообщения на выбранную почту.
-
Главная Shop Products. На странице должна быть возможность поиска информации о собаке, которую ввел пользователь. Поиск должен быт реализован с помощью elastic search. При некорректном поиске должна отображаться ошибка или запасной UI.
-
Главная Spa Packages. На данной странице должна отображаться информация об услугах салона.
-
Главная Book Appt Page. На данной странице должна отображаться интерактивная карта, она является интерактивной, на которой отображаются точки (минимум 3) удаленные друг от друга (точки определяет выполняющий). В блоке "Enter your information here" должна быть реализована отправка формы со своим шаблоном. В блоке "Choose a timeslot on Dec." можно выбрать удобное время для услуг и добавить календарь для отображения и выбора даты. В блоке "Enter your payment information" должно открываться модальное окно с введенными пользователям данными о банковской карте с возможность оплаты с помощью PayPal. При нажатии на кнопку "Book Appointment", которая отвечает за букинг, должно открывать модальное окно, где будет отображаться вся выбранная пользователем информация о времени, дате, комментарии и после успешного подтверждения данные сохраняется в LocalStorage.
-
Главная Contact Us На данной странице должна быть возможность реализации отправки письма с введенными данными на выбранную почту.
Реализовать e2e тестирование c полным покрытием функционала приложения:
- Модуль навигации
- Модуль поиска
- Моуль оплаты
- Модуль введенных данных для букинга