О проекте

Этот проект представляет собой тестовое задание для позиции Frontend разработчика. Он включает в себя страницу поиска сотрудников с предпросмотром профиля.

Тестовое задание

Необходимо реализовать страницу поиска сотрудников с предпросмотром профиля.

Приложение состоит из одной страницы. Слева осуществляется поиск и отображение результатов, справа — отображается карточка пользователя с личными данными.

Готовый проект выложите на GitHub.

Условия выполнения ТЗ:

1. Можно искать как одного пользователя, так и нескольких (например, Bret, Antonette).
2. Поиск должен работать по полю id и полю username либо name, на ваше усмотрение.
3. При выборе способа получения пользователя(пользователей) и фильтрации учитывать, что их может быть больше 2000 человек.
4. При изменении состояния в поиске, страница с профилем пользователя должна менять свое состояние, т.е. если открыт профиль пользователя и потом решили удалить все из строки поиска, очищается список найденных пользователей, и страница отображения профиля возвращается в исходное состояние.

Поиск

В строке поиска пользователя необходимо реализовать запрос к API для получения необходимых юзеров. В случае если результат вернул ошибку (параметры запроса неверные, либо ошибка сервера), необходимо отобразить эту ошибку пользователю. После успешно выполненного запроса, необходимо отобразить полученного пользователя или пользователей в интерфейсе.

Макет

• Ссылка на макет: Figma
• Шрифт: Montserrat

Обязательно:

1. SPA должно быть реализовано с использованием React.
2. Необходимо создать основные компоненты.
3. Использовать стейт менеджер.
4. Стили должны быть написаны с помощью препроцессора SCSS.
5. Во время всех запросов нужно сигнализировать пользователю через прелоадер, что происходит запрос.
6. Использовать изоляцию стилей.

Документация API

• Базовый URL: https://jsonplaceholder.typicode.com
• Получить пользователя по ID: GET /users?id=1
• Получить нескольких пользователей по ID: GET /users?id=1&id=2

Реализация

• Для изоляции стилей используется module.scss.
• Реализованы все условия ТЗ.
• Добавьте GIF или скриншот для наглядности.

Установка и запуск

1. Клонировать репозиторий:

   git clone https://github.com/your-repo-url.git
   cd your-repo-directory

2. Установить зависимости:

   npm install

3. Запустить сервер разработки:

   npm run dev

4. Собрать проект:

   npm run build

5. Проверить код:

   npm run lint

6. Отформатировать код:

   npm run format

Использованные технологии

1. Стейт менеджер: zustand
2. Библиотека компонентов: React
3. Компиляция и сборка: Vite
4. Язык программирования: TypeScript
5. Линтер: ESLint
6. Форматирование кода: Prettier
7. Предпроцессор CSS: Sass
8. Менеджер пакетов: npm

Демонстрация