Проект "СКАН"

Компания СКАН разработала новый API для поиска публикаций о компании (юридическом лице) в средствах массовой информации по его ИНН. Задача данного проекта — разработать клиентскую часть в соответствии с макетом.

Попробовать

Ссылка на доступы для проверки функцианала проекта

Используемый стек:

• HTML5,
• CSS3,
• JS,
• React, React-router-dom,
• Redux Toolkit (persist, thunk),
• Rest API (axios),

Функциональные требования

Клиентская часть сервиса состоит из:
• главной страницы,
• формы авторизации,
• формы для ввода параметров запроса,
• страницы с выводом результатов запроса.

Главная страница

1. Шапка:

Содержит: логотип, меню и панель управления учетной записью. Страницы "Тарифы" и "FAQ" выходят за рамки данного ТЗ, поэтому ссылки на них пустые.
Шапка сайта выглядит по-разному для авторизованного и неавторизованного пользователя:

для неавторизованного пользователя: доступны кнопки "Зарегистрироваться" и "Войти", которые ведут на страницу авторизации,

для авторизованного пользователя: аватар пользователя с именем и кнопкой "Выйти", которая сбрасывает авторизацию. Слева от аватара находится панель с информацией о лимите по компаниям в аккаунте и количестве уже используемых компаний. Эта информация подгружается не сразу, для её получения отправляется отдельный запрос.

2. Главная страница:

Главная страница содержит описание сервиса и доступна всем пользователям без авторизации.

Авторизованному пользователю доступна кнопка "Запросить данные", которая ведёт на страницу ввода параметров поиска.

Карточки в разделе "Почему именно мы" переключаются по принципу карусели: клик на стрелке слева или справа переключает карточки в соответствующем направлении.

В разделе "Наши тарифы" перечислены возможные тарифы. Кнопка "Подробнее" — заглушка, при клике на неё ничего не происходит. Если пользователь авторизован, карточка с используемым им тарифом выглядит иначе, чем остальные

Форма авторизации

Эта страница содержит форму с полями для ввода логина и пароля. При отсутствии одного из значений — логина или пароля — кнопка "Войти" неактивна, и при клике на неё ничего не происходит.

После ввода всех необходимых значений кнопка становится активной. При нажатии на неё отправляется запрос на авторизацию, результатом которого является токен и дата, до которой он действителен.

В рамках ТЗ следующие элементы формы нефункциональны:

вкладка "Зарегистрироваться",

ссылка "Восстановить пароль",

кнопки "Войти" через Google/Facebook/Яндекс.

Форма для ввода параметров запроса

Данная страница содержит основу функционала сервиса: форму, где пользователь задаёт параметры поиска.

Эта страница доступна только авторизованным пользователям. Если неавторизованный пользователь пытается её открыть, он перенаправляется на главную страницу сервиса.

Форма имеет обязательные поля, которые отмечены звездочками - если хотя бы одно из них не заполнено или заполнено неверно, кнопка "Поиск" неактивна.

Обязательные поля также имеют проверку на корректность вводимых значений - если значение не соответствует формату, выводится ошибка и выделяется поле ввода, в котором вызвана эта ошибка.

Если поисковый запрос введён корректно, по нажатии на кнопку "Поиск" выполняется запрос и открывается страница с результатами.

Вывод результатов поиска

Данная страница содержит результаты ранее введённого запроса и отображает:

общую сводку по количеству публикаций и рискам в виде слайдера с возможностью перелистывать по принципу карусели,

публикации в соответствии с параметрами поиска. В данном блоке реализована ленивая загрузка - сначала показано 10 первых результатов и добавлена кнопка "Показать больше", по нажатии на которую подгружаются следующие 10 результатов. Когда загружены последние из найденных публикаций, кнопка "Показать больше" скрыта.