Практика №12. Социальная сеть - Часть 1. Верстка

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

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

Ресурсы

  • Заготовка проекта react-project.
    (Материалы/Заготовки под практики/react-project.zip)
  • Для проектирования диаграмм: https://mermaid.live
  • Для создания дизайна: https://www.figma.com
  • Примеры данных:
    (`Материалы/Заготовки под практики/task_12-13_data_example.json)

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

Трилогия задания включает в себя разработку фронта упрощенной социальной сети используя React. В рамках этой части необходимо продумать и реализовать структуру сайта используя react-router-dom, ванильный JavaScript и React. Внешних подключений (в т.ч. к бэкэнду и БД) не предусмотрено, вместо этого необходимо использовать заготовленные заранее данные из JSON файлов (см. ресурсы/примеры данных).

Дизайн, название и структуру сайта необходимо придумать самостоятельно, ниже будет пример.

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

Написать хуки и набор утилит для реализации следующей функциональности для ролей:

Авторизованный_пользователь

Редактировать профиль

Создавать и редактировать посты

Удалять свои посты

Писать и удалять свои комментарии

Удалять чужие комментарии в своих постах

Лайкать посты

Отправлять заявки в друзья

Принимать/отклонять заявки

Выход из аккаунта

Гость

Просмотр главной ленты постов

Просмотр профиля пользователя:
Информация и посты

Просмотр поста и комментариев

Возможность авторизации

Поиск пользователей

Просмотр списка друзей пользователя

Гость может:

  • Просматривать список постов с главной страницы;
  • Просматривать страницу любого пользователя;
  • Просматривать список постов от конкретного пользователя (в рамках страницы пользователя);
  • Просматривать список друзей пользователя;
  • Просматривать посты (в т.ч. количество лайков, список комментариев и их общее количество).
  • Искать пользователей по имени и никнейму;
  • Авторизоваться (без регистрации!).

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

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

Пример возможной структуры сайта

Главная страница
лента постов

Пост с комментариями

Страница пользователя

Посты пользователя

Лайкнутые посты

Друзья

Авторизация

Заявки в друзья

Редактирование профиля

Создание поста

Поиск пользователей

Определение данных и принципы работы с ней

На стороне "предположительного" бэкенда данные хранятся в следующем виде:

USERstringusernamePKstringdisplay_namestringphoto_urlstringbioPOSTintidPKstringauthorFKtextcontentstringimage_urldatetimecreated_atdatetimeupdated_atCOMMENTintidPKintpost_idFKstringauthorFKtextcontentdatetimecreated_atLIKEintidPKintpost_idFKstringuser_idFKFRIENDSHIPintidPKstringrequesterFKstringaddresseeFKboolis_acceptedcreateswritesgivessends friend request to

Требования

  • Необходимо использовать данные из предоставленного JSON (их можно редактировать) с учётом того что настоящий бэкенд может предоставлять другие эндпоинты.
  • Веб-приложение не должно менять данные внутри JSON, "обновление" данных, например добавление лайка, должно происходить только в рамках компонента.
  • Авторизация в будущем будет реализовано при помощи бэкэнда, поэтому проверки пароля не должно быть. Сессия должна храниться в браузере при помощи cookie файлов.
  • Все мутированные данные и состояния, кроме изменения темы, должны сбрасываться при перезагрузке страницы
  • Навигация между страницами осуществляется без перезагрузки страницы при помощи react-router-dom
  • Запрещено использовать внешние библиотеки и API кроме тех которые предоставлены в заготовленном проекте. Ресурсы, такие как: изображения, шрифты, аудио - должны быть доступны при офлайн запуске (находится в папке public)
  • Запрещено использовать глобальные переменные вне компонентов.
  • UX/UI должен быть удобным и визуально качественно проработаны (использовать css)
  • Структура проекта должна находится в разделенных файлах и в соответствующих директориях (все компоненты в одном файле нельзя!)
  • При реализации должна быть история коммитов
  • Необходимо добавить страницы вроде 404

Дополнительная часть

  • Предоставление Figma макета сайта
  • Реализовать переключение темы (светлая/тёмная) в разделе «Настройки». Тема применяется ко всему приложению и сохраняется между перезагрузками страницы. Должны быть видны чёткие визуальные различия между темами (цвет фона, текста, карточек).

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

5 практические сессии

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

Баллы

Статус выполнения Количество баллов
Не сдано -15
Полностью реализовано 5-20
Дополнительная часть +5-10