SPA-приложение Data Item Tree (тестовое задание)

Описание

Рендер данных из JSON с разбивкой на разделы и вкладки и возможностью скачивания / загрузки. Подробнее: ./test_task.md.
Задание реализовано так, чтобы его можно было использовать в моем проекте сайта для стоматолога (в разработке).

Технологии

• React (Create React App)
• React Router
• Redux

Загрузка

• Если в localStorage есть данные, то они загружаются в Redux-стейт оттуда, а если нет – то из JSON-файла.
• Данные так же можно загрузить в приложение из JSON-файла вручную.

Рендер

• В меню слева отображаются категории пользователей (для этого нормализуются значения соответствующего поля в данных) и под каждой из них перечисляются пользователи.
• По клику на категории открывается таблица.
• К данным о пользователе можно перейти как из меню, так и из таблицы категории.
• Данные пользователя разбиваются на две вкладки.
• В данных пользователя можно изменять некоторые поля. Изменения автоматически вносятся в стейт и в localStorage.
• Можно внести в данные изменения, а затем скачать их в JSON-формате.

Просмотр и запуск

Проект задеплоен по адресу: https://vitalytikhonov.github.io/data-item-tree/ Чтобы запустить его локально, скачайте код, установите зависимости и используйте команду npm start (откроется автоматически).

Возможный рефакторинг

• Сделать валидацию данных и JSON-файлов.
• Оптимизировать реализацию Реакт-приложения (useCallback и т. п. по необходимости).
• Улучшить UX и дизайн, адаптировать для разных устройств.

Примечания

• При просмотре на GitHub Pages перед обновлением страницы лучше возвращаться на главную в связи с особенностями роутинга.
• Из папке ./src/data используются только файлы data.json и constants.js. Остальные сохранены как наработка по генерации данных.