lorrik2/DATA-TABLE-TEST

A test case in React + Redux Toolkit , TypesScript. Data table with pagination, adding new contacts and filtering

DATA-TABLE-TEST

Это тестовое задание: Целью было разработать React приложение для отображения данных в таблице с загрузкой с сервера(API). По функционалу: сортировка по столбцам(от меньшего к большому и наоборот), клиентская пагинация с максимальным отображением - 50 элементов на страницу, фильтрация(поиск по таблице), по клике на строку таблицы значения полей выводятся в дополнительном блоке под таблицей, есть возможность добавлять новые контакты(данные). Так же была подключен СSS фреймворк Materialize CSS и из доп. пакетов: react-modal и uuid4(для уникальных id). Дополнительно реализовал докеризацию нашего React приложения :)

Содержание

• Технологии
• Начало работы
• Тестирование
• Contributing
• To do

Технологии

• React
• TypeScript
• Redux
• Redux Toolkit
• [HTML CSS]

Использование

Что бы запустить проект локально, после клонирования проекта, откройте терминал: Зайдите в папку frontend

$ cd frontend

Установите npm-пакет с помощью команды:

$ npm ci 

Запустите проект

$ npm start

Docker: Для запуска контейнера image-react-app на основе образа image-react-app:

$ docker run -d --name image-react-app -d -p 
4000:3000 image-react-app:latest

Разработка

Требования

Для установки и запуска проекта, необходим NodeJS v8+.

Установка зависимостей

Для установки зависимостей, выполните команду:

$ npm i

Запуск Development сервера

Чтобы запустить сервер для разработки, выполните команду:

npm start

Создание билда

Чтобы выполнить production сборку, выполните команду:

npm run build

Тестирование

Так как проект был небольшой, было принято решение не покрывать юнит-тестами на Jest. Засчет того что проект написан на TypeScript, позволяет минимизировать колличество юнит-тестов, так как код затипизирован, что нам дает возможность найти ряд ошибок ещё на этапе написания кода. Тем не менее были проведены небольшие тесты через devTools и Redux devTools на скорость http запросов на сервер API и функционал вокруг этого, так же шла проверка ответов с сервера через Postman

Обо всем по чуть-чуть

Задание понравилось, интересное, со вмесно с TS становиться еще веселее) В целом рад за предоставленное задание, по максимуму попытался реализовать требования. Были идеи реализовать серверную часть на Node.js с сервером на Express, но мо итогу подумал что это будет лишние, по этому данные с "Добавления" храняться в Store Redux.

Команда проекта

• Матвей Королев — Frontend-разработчик