Details

Данная работа посвящена проектированию и реализации клиентской части социальной сети с фокусом на публикацию и потребление коротких сообщений. Актуальность работы обусловлена тем, что современные крупные платформы отошли от первоначальной концепции микроблогинга в пользу перегруженных интерфейсов с множеством дополнительных сервисов, алгоритмическими лентами и высокой когнитивной нагрузкой на пользователя. В рамках работы был проведён анализ четырёх существующих платформ: VK, X, Mastodon и Пикабу. Для каждой платформы выделены достоинства и недостатки в контексте задачи микроблогинга. На основе полученных выводов был сформирован технологический стек, включающий TypeScript, React, Redux Toolkit, Vite и Tailwind CSS. Каждый инструмент выбран по результатам сравнения с актуальными альтернативами. Приложение построено по принципу SPA с централизованным управлением маршрутами через React Router. Глобальное состояние управляется через Redux Toolkit и разделено на слайсы auth и posts. Взаимодействие с сервером реализовано через Axios и createAsyncThunk. В архитектуре применено разделение компонентов на три уровня: атомарные, составные и страничные, что обеспечило переиспользование кода. Реализованы ключевые функции: бесконечная лента постов через Intersection Observer API с параметрами page и size, система поиска с поддержкой хэштегов и механизмом debounce, оптимистичные обновления для лайков, публикации и удаления постов, управление профилем с загрузкой аватара в формате base64 и функцией обрезания изображения. Оценка качества интерфейса проведена по десяти эвристикам Якоба Нильсена. Дополнительно выполнено модульное тестирование ключевых компонентов с покрытием около восьмидесяти процентов кода. Для достижения данных результатов в работе были использованы следующие информационные технологии: TypeScript, React, Redux Toolkit, Vite, Tailwind CSS, React Router, Axios, Jest, React Testing Library, Intersection Observer API, History API, Figma, GitHub.

The given work is devoted to the design and implementation of the client side of a social network focused on publishing and consuming short messages. The relevance of the work is driven by the fact that modern large platforms have moved away from the original concept of microblogging in favor of overloaded interfaces with numerous additional services, algorithmic feeds, and high cognitive load on users. The study includes an analysis of four existing platforms: VK, X, Mastodon, and Pikabu. Advantages and disadvantages of each platform were identified in the context of the microblogging task. Based on the findings, a technology stack was formed, including TypeScript, React, Redux Toolkit, Vite, and Tailwind CSS. Each tool was selected through comparison with current alternatives. The application is built as an SPA with centralized routing via React Router. Global state is managed through Redux Toolkit and divided into auth and posts slices. Server communication is implemented via Axios and createAsyncThunk. The architecture applies a three-level component structure: atomic, composite, and page components, which ensures code reusability. Key features implemented include infinite post feed using the Intersection Observer API with page and size parameters, a search system with hashtag support and a debounce mechanism, optimistic updates for likes, post publication, and deletion, and profile management with avatar upload in base64 format and image cropping functionality. The interface quality was evaluated using Jakob Nielsens ten heuristics. Additionally, module testing of key components was performed with approximately eighty percent code coverage. The following information technologies were used in the work: TypeScript, React, Redux Toolkit, Vite, Tailwind CSS, React Router, Axios, Jest, React Testing Library, Intersection Observer API, History API, Figma, GitHub.