My Team

Проект представяет из себя SPA с информацией о команде и страницей детального просмотра профиля члена команды.

Оглавление

• Обзор проекта
  • Задачи проекта
  • Функциональность проекта
  • Ограничения в функциональности связанные с использованием ReqRes API
  • Screenshot
  • Директории проекта
  • Запуск проекта
  • Ссылки
• Ход выполнения проекта
  • Используемые технологии
• Автор

Обзор проекта

Задачи проекта

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

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

Функционально проект представляет SPA-приложение которое отображает на главной странице список пользователей. По клику на карточку пользователя можно зайти на детальную страницу его профиля. Поскольку в проекте использовалось Fake API это наложило серьёзные ограничения на возможности некоторых действий пользователя. Более подробно смотри раздел Ограничения в функциональности связанные с использованием ReqRes API.

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

• Возможность регистрации пользователя
• Возможность аутентификации пользователя
• Возможность просмотра карточки пользователя
• Если пользователь является владельцем карточки, то у него есть возможность поменять свой аватар
• Возможность лайкнуть и снять лайк с карточки пользователя
• Пагинация карточек пользователей зависящая от разрешение экрана пользователя

Ограничения в функциональности связанные с использованием ReqRes API

• Регистрация и аутентификация пользователя возможно только с применением email-адреса уже имеющегося в базе ReqRes API, например eve.holt@reqres.in. Пароль можно указать произвольный.
• Поскольку в ReqRes API нельзя записать информацию, все действия пользователя связанные с отправкой данных (постановка и снятие лайка, редактирование аватара) лишь имитируют отправку данных. Все обновлённые данные записываются в localStorage, и доступны пока пользователь не вышел из аккаунта.
• Поскольку ReqRes API не предоставляет в данных пользователей информацию о них, то на странице детального просмотра профиля, информация о пользователе захардкодена (за исключением email)

Screenshot

Директории проекта

• src/assets — директория со статичными файлами
• src/components — директория с компонентами
• src/contexts — директория с элементами контекста
• src/hooks — директория с пользовательскими хуками
• src/lib — директория с файлами библиотек
• src/pages — директория с корневыми файлами страниц
• src/utils — директория со вспомогательными файлами

Запуск проекта

• npm run build — запуск проекта в режиме продакшн, с формированием файлов подготовленных к деплою в директории /build
• npm start — запуск проекта в режиме разработки

Ссылки

• Ссылка на демо-страницу проекта

Ход выполнения проекта

Используемые технологии

• HTML
• CSS
• JS
• React
• React Router
• react-hook-form
• validator
• Адаптивная вёрстка
• Семантическая вёрстка

Автор

Данила Легкобытов

• e-mail: legkobytov-danila@yandex.ru
• Telegram: @danila_legkobytov
• LinkedIn: in/danila-legkobytov