Создать SPA React App на основе существующего API

Александр15 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
23.02.2020

Требуется frontend разработчик для создания SPA React app. Весь функционал бизнес логики реализован (создан API), нужно создать SPA React app (далее “Клиент”) на основе существующего API. 

Требования к исполнителю

  • Отличные знания react, redux, es6.
  • Опыт разработки SPA React app не менее 3 лет.
  • Опыт работы с bootstrap 4, webpack, git
Требования к дизайнуОписание элементов приложения. Первый этап.

Все операции, связанные с фильтрацией и поиском реализованы на стороне сервера. Нужно только указывать параметры и отправлять соответствующие API запросы.Все элементы, описанные ниже, есть в React шаблоне https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383.

Примеры общего расположения некоторых элементов (для понимания ниже описанного): https://ibb.co/TgzJSqZ

  • Авторизация. JWT токен. Клиент отправляет логин и пароль в ответ получает access_token и refresh_token (сохраняем их в браузере). При последующих запросах к апи используем access_token. Если время access_token истекает, то делаем запрос на refresh_token и обновляем оба токена. У пользователя может быть две роли “Преподаватель” и “Студент”.
  • Регистрация (ФИО, email, пароль)
  • Редактирование профиля. Форма редактирования профиля (ФИО, Смена пароля).
  • Список материалов. Интерфейс включает в себя пагинацию и фильтры (“Поиск по названию”, “Категория”).
  • Создание и редактирование материалов. Форма редактирования/создания материала должна содержать: Название, тело материала (редактор https://editorjs.io/), категория (выпадающий список).
  • Список встреч. Интерфейс включает в себя пагинацию и фильтры (“Поиск по названию”, “Категория”). Сортировка по дате встречи.
  • Создание/редактирование встреч. Форма редактирования/создания встречи: Дата встречи, Студент (выпадающий список), Используемые материалы (выпадающий список с возможностью выбрать несколько).
  • Поиск слова в словаре. Первоначальное состояние панели выглядит свернутым в правом нижнем углу. При написании слова в панель, эта панель раскрывается вверх на всю высоту экрана.

    При изменении текста в input (наборе текста) отправляется запрос на API поиск слова, и список слов выводится ниже в этой панели. По клику на слово отправляется запрос на API и выводится список всех значений слова в этой же панели ниже.

    У каждого значения слова рядом выводится кнопка “+” означающее добавление в персональный словарь (API запрос).

    Если у пользователя роль “Студент” то кнопка “+” в списке значений слова отправляет в API запрос с id текущего студента и id встречи (если на странице просмотра встречи) или id материала (если на странице просмотра материала).

    Если у пользователя роль “Преподаватель” то кнопка “+” в списке значений слова доступна только на странице просмотра/редактирования встречи и при нажатии этой кнопки отправляет в API запрос с id студента данной встречи и id встречи.

  • Список слов в “моем” словаре. Список слов ранее добавленный через кнопку “+” в словаре. В списке слов присутствует само слово, определение и картинка (если есть). Фильтры по встреча, материал и студент (если текущий пользователь имеет роль “Преподаватель”.)

Редактирование и просмотр - совмещены на одной странице, т.е. при просмотре материала или встречи, есть возможность нажать рядом с заголовком или другим полем всплывающий карандаш и соответствующее поле данных перейдет в режим редактирования (для заголовка - это input, для тела материала - это редактор editor.js, для поле даты это выпадающая дата, для элемента из списка - это выпадающий список). 

После успешного выполнения поставленных задач рассмотрим дальнейшее сотрудничество.

Пожалуйста, распишите свои навыки в данной области, а также желаемую оплату.

BootstrapGit