https://github.com/nougatcat/test-app
[2024 Frontend] Приложение на React.js, которое отображает данные из JSON. Имеется поиск по данным, сортировка, три вида отображения и стартовая страница
https://github.com/nougatcat/test-app
css-modules formik javascript react18 redux
Last synced: 5 months ago
JSON representation
[2024 Frontend] Приложение на React.js, которое отображает данные из JSON. Имеется поиск по данным, сортировка, три вида отображения и стартовая страница
- Host: GitHub
- URL: https://github.com/nougatcat/test-app
- Owner: nougatcat
- Created: 2024-05-19T23:36:15.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-10-29T21:17:20.000Z (about 1 year ago)
- Last Synced: 2025-08-20T04:08:34.494Z (5 months ago)
- Topics: css-modules, formik, javascript, react18, redux
- Language: JavaScript
- Homepage: https://nougatcat.github.io/test-app/
- Size: 952 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Github pages: https://nougatcat.github.io/test-app/
# Что делает это приложение?
Приложение имеет 2 роута. «Сотрудники» - страница, где выводится список пользователей и «Приветствие» - страница приветствия.
Приложение с помощью axios загружает c моего удаленного репозитория json (300 записей ) со списком пользователей, а для случая, если сервер недоступен, я прописал catch, который загрузит локальную копию файла.
Группы: Managers, Accountants, HR, QA, Ungrouped
Я сделал три варианта отображения. Каждый вариант содержит четыре параметра. По умолчанию отрисовывается вариант «Таблица». Выбор осуществляется через взаимодействие с формой.
Есть возможность сортировки по ID и сортировки по имени пользователя, и поиск по всем столбцам.
# Как сделано это приложение?
Приложение написано на React. Для управления состоянием используется Redux. Для запросов на сервер – Axios. Для работы с формами – Formik.
Я разделил файлы приложения так, что есть отдельно UI, BLL и DAL. Функции для поиска и сортировки лежат в utilities.
В стейте хранится массив полученных данных сотрудников (employees) и выбранный способ отображения (design). Работа с этими данными реализована через редюсер и Redux.
# Видеодемонстрация
[](https://youtu.be/ybQKwgIMCqc)
https://youtu.be/ybQKwgIMCqc
# Запуск клонированного приложения
Установить модули: npm install
Запустить приложение: npm start