Карточки пользователей

Оглавление

1. Краткое описание проекта
2. Стек технологий
3. Установка и запуск приложения
4. Особенности работы приложения

1. Краткое описание проекта

Проект представляет собой отзывчиво-адаптивный интерфейс двухстраничного приложения с карточками пользователей, которые приходят со стороннего api. Карточки возможно редактировать, скрывать и переносить в архив (без сохранения состояния после перезагрузки страницы)

Ссылки на проект:
Макет: https://www.figma.com/file/ZUhwEwudliE4AF3JMDEDkj/%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-At-Work?type=design&node-id=0-1&mode=design
Деплой: https://elrouss.github.io/at-work/

(к оглавлению)

2. Стек технологий

(к оглавлению)

3. Установка и запуск приложения

1. https://github.com/elrouss/at-work.git - клонировать репозиторий (HTTPS)
2. npm i - установить зависимости
3. Добавить в корне проекта файл .env и скопировать в него содержимое .env.example
4. npm run dev - запустить приложение и перейти по ссылке http://localhost:5173/at-work/

(к оглавлению)

4. Особенности работы приложения

• На странице выводится 6 карточек с информацией о пользователях (все фотографии - моковые данные). При клике на иконку их возможно скрыть, архивировать и отредактировать на отдельной странице по динамическому роуту. На странице редактирования добавлена кастомная валидация данных, которая отрисовывает ошибку под текстовым полем в случае невалидности формы. После сохранения открывается модальное окно, которое автоматически закрывается через 4 секунды. Данные обновляются на стороне клиента, но не сохраняются после перезагрузки приложения
• Для корректной работы роутов при деплое на GH Pages используется Hash Router
• Отзывчиво-адаптивный интерфейс, рассчитанный на мобильные устройства (от 320px), планшеты и настольные компьютеры

(к оглавлению)