Profile Viewer - это веб-приложение, которое позволяет просматривать профили пользователей. Приложение позволяет выполнять поиск пользователей по их идентификатору или имени, а также просматривать дополнительные сведения о каждом пользователе. Организация state-менеджмента и запросов достигнута библиотекой Redux Toolkit, RTK Query. Во время запросов пользователю сигнализируется о том, что происходит запрос посредством прелоадера типа Skeleton. Изоляция стилей достигнута использованием css модулей. Также реализована адаптивная верстка. Обработка большого количества пользователей может быть достигнута пагинацией, однако она должна быть поддержана на сервере.
-
На главной странице приложения располагается боковая панель (SideBar), где можно выполнить поиск пользователей и просмотреть результаты.
-
Введите идентификатор или имя пользователя в поле ввода "Поиск сотрудников" и нажмите Enter или кнопку "Поиск". Поисковой ввод провалидирован таким образом, чтобы пользователь мог вводить только валидные символы - латиница, цифры, символы "," или " ", о чем уведомляет соответствующий тултип. Данное поведение позволит избежать ошибок с вводом неверных параметров запроса.
-
После ввода запроса в списке результатов отобразятся пользователи, соответствующие введенному запросу.
-
Выберите пользователя из списка, чтобы просмотреть его профиль. Полная информация о пользователе будет отображена в центральной части приложения.
Боковая панель, которая содержит поле ввода для поиска пользователей и список результатов.
Компонент, отображающий список пользователей на основе введенного запроса.
Компонент, отображающий полную информацию о выбранном пользователе.
Компонент для ввода текста для поиска пользователей.
- React.js
- ReduxTooklit, RTK Query
- SCSS
- TypeScript
- Vite
Михаил Фомин GitHub