Modsen-doggy NPM

Tестовое задание Modsen Doggy Spa

Содержание

Техническое задание
API
Используемые технологии
Необходимый функционал
Дополнительный функционал
Описание экранов
Тестирование
Полезные ссылки

Техническое задание

Необходимо реализовать React приложение "Modsen Doggy Spa" по предоставленному дизайну из Figma с использование server-side rendering(NextJS) и GraphQl.

API

Список 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.