Казань

Россия

Требуется frontend разработчик для создания SPA React app. Весь функционал бизнес логики реализован (создан API), нужно создать SPA React app (далее “Клиент”) на основе существующего API. 

Требования к исполнителю[list][*]Отличные знания react, redux, es6.[*]Опыт разработки SPA React app не менее 3 лет.[*]Опыт работы с bootstrap 4, webpack, git[/list]
Требования к дизайну[list][*]Строгих требований нет, но нужно придерживаться элементов, основанных на React шаблоне [url=https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383]https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383[/url][*]При использовании элементов шаблона должна быть сохранена поддержка responsive.[/list]
Описание элементов приложения. Первый этап.

Все операции, связанные с фильтрацией и поиском реализованы на стороне сервера. Нужно только указывать параметры и отправлять соответствующие API запросы.Все элементы, описанные ниже, есть в React шаблоне [url=https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383]https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383[/url].

Примеры общего расположения некоторых элементов (для понимания ниже описанного): [url=https://ibb.co/TgzJSqZ]https://ibb.co/TgzJSqZ

[/url]
[list=1][*]Авторизация. JWT токен. Клиент отправляет логин и пароль в ответ получает access_token и refresh_token (сохраняем их в браузере). При последующих запросах к апи используем access_token. Если время access_token истекает, то делаем запрос на refresh_token и обновляем оба токена. У пользователя может быть две роли “Преподаватель” и “Студент”.[*]Регистрация (ФИО, email, пароль)[*]Редактирование профиля. Форма редактирования профиля (ФИО, Смена пароля).[/list]
[list=1][*]Список материалов. Интерфейс включает в себя пагинацию и фильтры (“Поиск по названию”, “Категория”).[*]Создание и редактирование материалов. Форма редактирования/создания материала должна содержать: Название, тело материала (редактор [url=https://editorjs.io/]https://editorjs.io/[/url]), категория (выпадающий список). [/list]
[list=1][*]Список встреч. Интерфейс включает в себя пагинацию и фильтры (“Поиск по названию”, “Категория”). Сортировка по дате встречи.[*]Создание/редактирование встреч. Форма редактирования/создания встречи: Дата встречи, Студент (выпадающий список), Используемые материалы (выпадающий список с возможностью выбрать несколько).[/list]
[list=1][*]Поиск слова в словаре. Первоначальное состояние панели выглядит свернутым в правом нижнем углу. При написании слова в панель, эта панель раскрывается вверх на всю высоту экрана. 
При изменении текста в input (наборе текста) отправляется запрос на API поиск слова, и список слов выводится ниже в этой панели. По клику на слово отправляется запрос на API и выводится список всех значений слова в этой же панели ниже. 
У каждого значения слова рядом выводится кнопка “+” означающее добавление в персональный словарь (API запрос). 
Если у пользователя роль “Студент” то кнопка “+” в списке значений слова отправляет в API запрос с id текущего студента и id встречи (если на странице просмотра встречи) или id материала (если на странице просмотра материала).
Если у пользователя роль “Преподаватель” то кнопка “+” в списке значений слова доступна только на странице просмотра/редактирования встречи и при нажатии этой кнопки отправляет в API запрос с id студента данной встречи и id встречи.[*]Список слов в “моем” словаре. Список слов ранее добавленный через кнопку “+” в словаре. В списке слов присутствует само слово, определение и картинка (если есть). Фильтры по встреча, материал и студент (если текущий пользователь имеет роль “Преподаватель”.)[/list]
Редактирование и просмотр - совмещены на одной странице, т.е. при просмотре материала или встречи, есть возможность нажать рядом с заголовком или другим полем всплывающий карандаш и соответствующее поле данных перейдет в режим редактирования (для заголовка - это input, для тела материала - это редактор editor.js, для поле даты это выпадающая дата, для элемента из списка - это выпадающий список). 

После успешного выполнения поставленных задач рассмотрим дальнейшее сотрудничество.

Пожалуйста, распишите свои навыки в данной области, а также желаемую оплату.

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

Требования к исполнителю<ul><li>Отличные знания react, redux, es6.</li><li>Опыт разработки SPA React app не менее 3 лет.</li><li>Опыт работы с bootstrap 4, webpack, git</li></ul>Требования к дизайну<ul><li>Строгих требований нет, но нужно придерживаться элементов, основанных на React шаблоне <a href="https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383" rel="nofollow noopener noreferrer" target="_blank">https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383</a></li><li>При использовании элементов шаблона должна быть сохранена поддержка responsive.</li></ul>Описание элементов приложения. Первый этап.

Все операции, связанные с фильтрацией и поиском реализованы на стороне сервера. Нужно только указывать параметры и отправлять соответствующие API запросы.Все элементы, описанные ниже, есть в React шаблоне <a href="https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383" rel="nofollow noopener noreferrer" target="_blank">https://themeforest.net/item/gogo-react-bootstrap-4-admin-dashboard/22544383</a>.

Примеры общего расположения некоторых элементов (для понимания ниже описанного): <a href="https://ibb.co/TgzJSqZ" rel="nofollow noopener noreferrer" target="_blank">https://ibb.co/TgzJSqZ
</a>

<ul><li>Авторизация. JWT токен. Клиент отправляет логин и пароль в ответ получает access_token и refresh_token (сохраняем их в браузере). При последующих запросах к апи используем access_token. Если время access_token истекает, то делаем запрос на refresh_token и обновляем оба токена. У пользователя может быть две роли “Преподаватель” и “Студент”.</li><li>Регистрация (ФИО, email, пароль)</li><li>Редактирование профиля. Форма редактирования профиля (ФИО, Смена пароля).</li></ul><ul><li>Список материалов. Интерфейс включает в себя пагинацию и фильтры (“Поиск по названию”, “Категория”).</li><li>Создание и редактирование материалов. Форма редактирования/создания материала должна содержать: Название, тело материала (редактор <a href="https://editorjs.io/" rel="nofollow noopener noreferrer" target="_blank">https://editorjs.io/</a>), категория (выпадающий список).</li></ul><ul><li>Список встреч. Интерфейс включает в себя пагинацию и фильтры (“Поиск по названию”, “Категория”). Сортировка по дате встречи.</li><li>Создание/редактирование встреч. Форма редактирования/создания встречи: Дата встречи, Студент (выпадающий список), Используемые материалы (выпадающий список с возможностью выбрать несколько).</li></ul><ul><li>Поиск слова в словаре. Первоначальное состояние панели выглядит свернутым в правом нижнем углу. При написании слова в панель, эта панель раскрывается вверх на всю высоту экрана. 
При изменении текста в input (наборе текста) отправляется запрос на API поиск слова, и список слов выводится ниже в этой панели. По клику на слово отправляется запрос на API и выводится список всех значений слова в этой же панели ниже. 
У каждого значения слова рядом выводится кнопка “+” означающее добавление в персональный словарь (API запрос). 
Если у пользователя роль “Студент” то кнопка “+” в списке значений слова отправляет в API запрос с id текущего студента и id встречи (если на странице просмотра встречи) или id материала (если на странице просмотра материала).
Если у пользователя роль “Преподаватель” то кнопка “+” в списке значений слова доступна только на странице просмотра/редактирования встречи и при нажатии этой кнопки отправляет в API запрос с id студента данной встречи и id встречи.<li>Список слов в “моем” словаре. Список слов ранее добавленный через кнопку “+” в словаре. В списке слов присутствует само слово, определение и картинка (если есть). Фильтры по встреча, материал и студент (если текущий пользователь имеет роль “Преподаватель”.)</li></li></ul>Редактирование и просмотр - совмещены на одной странице, т.е. при просмотре материала или встречи, есть возможность нажать рядом с заголовком или другим полем всплывающий карандаш и соответствующее поле данных перейдет в режим редактирования (для заголовка - это input, для тела материала - это редактор editor.js, для поле даты это выпадающая дата, для элемента из списка - это выпадающий список). 

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

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

Александр arbuscula

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