Samurai social network - социальная сеть на базе api с сайта https://social-network.samuraijs.com

Развернутое приложение на Vercel

⚠️ Из-за отсутствия в API при запросах возвращаемого токена не проходит авторизация пользователей на iOS, macOS, ipadOS.

Что может приложение:

1. Просмотр всех зарегистрированных пользователей, добавление в друзья.
2. Просмотр профиля пользователей.
3. Редактирование своего профиля с дальнейшей передачей данных в api: изменение фото, статус пользователя, блок "обо мне", job статус, контакты.
4. Возможность общаться в чате с друзьями (отправка сообщений, получение сообщений, наличие даты отправки сообщений, время с последнего захода пользователя). Все данные проходят через API.
5. Страница логина с необходимостью ввода капчи при нескольких неправильных попытках.

Используемые подходы и инструмены:

1. React
2. Redux
3. Formik
4. Axios
5. Reselect
6. Классовые контейнерные компоненты для связью со стором и функциональные компоненты для рендера приложения.
7. Отдельно сформированный объект с асинхронными запросами api.js
8. Lazy loaded main components

Подробнее о реализации проекта:

Страница логина:

На странице логина присутствует fast login при помощи тестового аккаунта, а также возможность залогиниться в свой личный аккаунт. Форма логина сформирована при помощи пакета Formik. Настроена валидация полей.

При оправке неверных данных логина или пароля на сервер появляется информация об ошибочно введенных данных. При превышении количества попыток появляется капча для исключения возможности подбора пароля.

В хедере после логина появляется иконка пользователя с возможностью логаута.

Страница профиля (для авторизованных пользователей):

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

При просмотре чужого профиля кнопки изменения данных отсутствуют.

Изменение личных данных производится в отдельном модальном окне с валидацией полей контактов.

Страница друзей (для авторизованных пользователей):

На данной странице представлены пользователи, которые были добавлены в друзья. Каждого пользователя можно убрать из друзей, а также одной кнопкой перейти в чат с ним. Также на странице присутствует пагинация.

Страница личных чатов (для авторизованных пользователей):

Представлены все активные чаты. При открытии чата отображается логин, фото и последняя активность собеседника.

Реализована отправка сообщений. У каждого сообщения отображается время отправки. В зависимости от давности отправки может отображаться как дата, так и сколько секунд/минут назад было отправлено сообщение.

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

Страница всех пользователей:

На странице представлены все пользователи, зарегистрированные в сервисе. Из всего списка можно показать только друзей, а также подписаться на любого пользователя, т.е. добавить в друзья и перейти в его профиль. Также на странице присутствует пагинация.

Мобильная верстка:

Для мобильных устройств реализован удобный и интуитивно понятный интерфейс. Наличие бургер-меню. В сообщениях возврат к диалогам реализован в стиле telegram - нажатием на кнопку назад в текущем чате.

Для работы с приложением:

сборка приложения

npm run build

• сборка и оптимизация приложения в папке build для деплоя.

запуск приложения

npm start

• запуск осуществляется по адресу http://localhost:3000