Практика №14. Социальная сеть - Часть 3. Подключение к бэкэнду

Общее описание

Разработать одностраничное веб-приложение (SPA) на React с использованием Vite и JavaScript, имитирующее базовую социальную сеть. В отличие от предыдущей части, теперь приложение должно взаимодействовать с реальным RESTful API бэкенда. Структура проекта должна соответствовать стандартной архитектуре React + Vite. Репозиторий на GitHub должен называться: Group_LastName_task-12, Group_LastName_task-13 или Group_LastName_task-14.

Ресурсы

  • Заготовка проекта react-project.
    (Материалы/Заготовки под практики/react-project.zip)
  • Документация API — (по запросу)

Определение задачи

В рамках этой части необходимо заменить mock-данные из JSON на реальные запросы к бэкенду, реализовать полноценную авторизацию через API и обеспечить корректную работу всех функций, описанных в задании 12 (и 13), но уже с сохранением изменений на сервере.

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

Приложение должно поддерживать все функции из части 12 и 13, но теперь:

  • Все данные (посты, пользователи, комментарии, лайки, заявки в друзья) загружаются из бэкенда.
  • Любые действия пользователя (лайки, комментарии, редактирование профиля и т.д.) отправляются на сервер и сохраняются там.
  • Авторизация реализуется через логин/пароль, передаваемые на эндпоинт авторизации.
  • После успешной авторизации клиент получает access token, который используется во всех последующих запросах.
  • Токен должен храниться в localStorage.
  • При перезагрузке страницы приложение должно восстанавливать сессию, если токен ещё валиден.

Гость может:

  • Просматривать публичные посты;
  • Просматривать публичные профили пользователей;
  • Искать пользователей;
  • Переходить на страницу авторизации.

Авторизованный пользователь может:

  • Редактировать свой профиль;
  • Создавать, редактировать и удалять свои посты;
  • Писать и удалять комментарии (свои и чужие — в своих постах);
  • Лайкать/дизлайкать посты;
  • Отправлять, принимать и отклонять заявки в друзья;
  • Выходить из аккаунта (очистка токена).

Требования

  • Все HTTP-запросы должны выполняться через кастомные хуки (например, usePosts, useAuth).
  • Обработка ошибок обязательна: показывать пользователю понятные сообщения («Неверный логин», «Недостаточно прав» и т.д.).
  • Не использовать внешние библиотеки, кроме разрешённых в заготовке.
  • Все компоненты — в отдельных файлах, с соблюдением архитектуры (components/, pages/, hooks/, services/ и т.д.).
  • Должна быть страница 404.
  • UX/UI должен быть удобным и визуально качественным.
  • Обязательна история коммитов.

Время на выполнение

3 практических сессий

  • После сессии 1: 75% от максимального балла
  • После сессии 2: 50%
  • После сессии 3: 25%

Баллы

Статус выполнения Количество баллов
Не сдано -3
Базовая часть реализована 5–20