Требуется 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, для поле даты это выпадающая дата, для элемента из списка - это выпадающий список). 

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

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

5 лет назад
arbuscula
35 лет
15 лет в сервисе
Был
5 лет назад

Заявки фрилансеров

Нет заявок фрилансеров