Просмотр списка сотрудников

Обзор

Этот проект представляет собой веб-приложение, созданное с помощью React, предназначенное для просмотра и управления списком сотрудников. Приложение имеет адаптивный дизайн, что обеспечивает его корректное отображение на различных устройствах.

Ссылка на приложение

• Ссылка на техническое задание.
• Ссылка на макет в Figma.

Функциональность

• Отображение списка сотрудников: Приложение отображает список всех сотрудников с базовой информацией, такой как имя, фамилия, фото и тег пользователя.
• Просмотр детальной информации: Пользователь может кликнуть на сотрудника, чтобы просмотреть его детальную информацию на отдельной странице.
• Поиск: Приложение предоставляет возможность поиска сотрудников по имени, фамилии или тегу.
• Фильтрация: Присутствует функциональность фильтрации списка сотрудников.
• Сортировка: Пользователи могут сортировать список по алфавиту или дате рождения.
• Обработка ошибок: Приложение обрабатывает ошибки, возникающие при взаимодействии с API.

Технологии

React, Redux Toolkit, Tailwind CSS, Axios, React Router DOM.

Структура проекта

• src/components: Содержит переиспользуемые компоненты React.
• src/pages: Содержит компоненты страниц приложения: главная страница, страница пользователя, страница ошибки.
• src/router: Определяет маршруты приложения и связывает их с соответствующими компонентами страниц.
• src/store: Содержит хранилище Redux, где хранится состояние приложения.
• src/slices: Содержит "срезы" Redux, которые представляют собой логические части состояния приложения и функции для работы с ними.
• src/services: Содержит функции для взаимодействия с API.
• public: Содержит статические файлы, такие как index.html, favicon.svg.

Работа проекта

1. Приложение загружается, отображая главную страницу.
2. С помощью Axios выполняются запросы к API для получения данных о сотрудниках.
3. Данные сохраняются в хранилище Redux.
4. Компоненты React отображают данные, полученные из хранилища Redux.
5. Пользователь может взаимодействовать с приложением, выполняя поиск, фильтрацию, сортировку и просмотр информации о сотрудниках.
6. Любые изменения данных обрабатываются с помощью Redux, что обновляет состояние приложения и, следовательно, пользовательский интерфейс.

Декомпозиция проекта

Подготовка проекта (30 мин.) (реальное время ~ 1 ч.)

• Удаление ненужных файлов
• Скачивание и установка необходимых библиотек
• Подготовка README файла

Вёрстка десктоп (4 ч.) (реальное время ~ 6 ч.)

• Главная страница
• Страница о пользователе
• Страница ошибки приложения

Вёрстка адаптивная (4 ч.) (реальное время ~ 3 ч.)

• Главная страница
• Страница о пользователе
• Страница ошибки приложения

Работа с API (6 ч.) (реальное время ~ 20 ч.)

• Получение и отображение всех пользователей
• Получение и отображение определенного пользователя
• Поиск
• Фильтр
• Обработка ошибок

Дополнительные задания

• Доп. задания если останется время

Ожидаемое время выполнения ~15ч (очень не точно)

---

Судя по тому, что показывает WakaTime - время проведенное над приложением - 31 ч., 43 мин.