Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mlutfullaev/tables-task


https://github.com/mlutfullaev/tables-task

react task test-task typescript

Last synced: about 1 month ago
JSON representation

Awesome Lists containing this project

README

        

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

## ТЕСТОВОЕ ЗАДАНИЕ ДЛЯ СОИСКАТЕЛЯ НА ДОЛЖНОСТЬ FRONTEND РАЗРАБОТЧИК.

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

ОБЩИЕ ТРЕБОВАНИЯ:

Приложение должно работать в chrome и firefox.
Разрешается использовать UI фреймворки по типу bootstrap.
Код должен быть чистым и читабельным.
Не должно быть необоснованного дублирования, всё должно распределяться по компонентам.
Код должен быть отформатирован в едином стиле.
Вёрстка должна совпадать с макетами figma.
Приложение должно быть написано на react.
Плюсом будет использование глобального state менеджера redux.
Приложение должно быть адаптировано под различные устройства.

ОПИСАНИЕ API:
Список данных : https://jsonplaceholder.typicode.com/posts

ОПИСАНИЕ ПРИЛОЖЕНИЯ:
При входе на страницу отображается таблица с данными.
На одной странице таблицы показывается только 10 записей.
Под таблицей располагаются элементы, показывающие количество страниц таблицы.
Кнопки “Назад” и “Далее” переключают страницы таблицы.
Переключение между страницами происходит без перезагрузки.
При нажатии на заголовки столбцов происходит сортировка записей (от большего к меньшему или по алфавиту).
В строке поиска можно ввести любое значение, и в таблице отобразится запись, в которой данное значение присутствует. Поиск по всем столбцам.
Страница таблицы должна отображаться в URL браузера.

Макет Figma:
https://www.figma.com/file/amcWeZhjaZ0eSyYiSNG6vN/%D0%9C%D0%B0%D0%BA%D0%B5%D1%82-%D1%82%D0%B0%D0%B1%D0%BB%D0%B8%D1%86%D1%8B?node-id=0%3A1
Результат выполнения:

Результат выполнения нужно будет залить на любой хостинг (можно бесплатный) и в git. Чтобы мы могли проверить твоё тестовое задание, все необходимые ссылки и комментарии оставь в Google-форме.