Социальная сеть на чистом JavaScript: можно ли обойтись без React : SnapThought

Представьте: вам нужно сделать полноценную социальную сеть — с постами, лайками, репостами, опросами, короткими видео, сообществами и личными сообщениями. Современный подход подсказывает: берём React (или Vue, или Svelte), подключаем Supabase или Firebase, через три дня имеем рабочий прототип. Но что если попробовать иначе? Что если написать всё на чистом JavaScript, без единого фреймворка, используя только нативные возможности браузера?

Именно это я и сделал. Проект называется SnapThought — это гибрид Instagram и X (Twitter), работающий как PWA и установленный на телефон как полноценное приложение. В этой статье расскажу, как устроена архитектура, с какими проблемами столкнулся и что из этого получилось.

Что такое SnapThought и зачем это нужно

SnapThought — это открытая социальная сеть, написанная на vanilla HTML, CSS и JavaScript. Бэкенд обеспечивается Supabase (PostgreSQL, Auth, Storage, Realtime). Никаких серверных фреймворков, никаких сборщиков, никаких виртуальных DOM.

Проект задумывался как исследование: на что способен современный браузер без посторонней помощи? Оказалось — на большее, чем я думал.

Функциональность: что умеет приложение

Прежде чем погружаться в технические детали, опишу, что реализовано. Функционал обширен — проект далеко выходит за рамки «Hello World».

Посты и контент

Пользователи публикуют текстовые посты с изображениями и видео. Посты бывают трёх типов: оригинальный, репост и ответ. Внутри постов автоматически парсятся хэштеги и упоминания (@mentions) — они превращаются в кликабельные ссылки. Посты можно редактировать в течение пятнадцати минут после публикации, прикреплять геолокацию, считать просмотры.

Подсчёт просмотров реализован через отдельную таблицу post_views, где для каждого просмотра записывается идентификатор пользователя (или хеш IP для анонимных) и временная метка. Это позволяет строить аналитику по engagement.

Опросы

Внутри постов можно создавать опросы с произвольным количеством вариантов. Голосование привязано к пользователю — один голос на опрос. Результаты обновляются в реальном времени благодаря Supabase Realtime.

Короткие видео

Отдельный формат контента — короткие видео в стиле Instagram Reels. Пользователи загружают видео, к ним ставят лайки и оставляют комментарии. Видео отображаются в отдельной ленте с вертикальной прокруткой.

Сообщества

Аналог Reddit communities. Пользователи создают сообщества по интересам, публикуют в них посты, приглашают участников. Внутри действует система ролей: создатель, модератор и участник.

Личные сообщения

Двусторонняя переписка с индикацией прочтения. Оба собеседника видят статус каждого сообщения.

Социальные механики

Подписки и отписки, лайки, репосты, комментарии, закладки (с организацией по папкам и заметками), пользовательские списки для кастомных лент. Система блокировок и заглушений — заблокированный пользователь не видит контент блокирующего и наоборот.

Безопасность и модерация

Ролевая модель с четырьмя уровнями: пользователь, модератор, модератор расширенных прав и администратор. Админ-панель позволяет управлять ролями, банить пользователей и обрабатывать жалобы. Есть система отчётов со статусами обработки.

Дополнительно

Горячие клавиши (N — новый пост, слэш — поиск, J/K — навигация), экспорт данных в JSON и CSV, страница трендов, автоматическое сохранение черновиков, тёмная и светлая темы, геолокация в постах, Web Share API для шаринга.

Архитектура: как всё устроено

Стек технологий

Интерфейс: Vanilla HTML + CSS + JS (ES Modules)

Бэкенд: Supabase (PostgreSQL, Auth, Storage, Realtime)

Роутинг: Кастомный hash-based SPA-роутер

PWA: Service Worker + Web App Manifest

Стили: CSS Custom Properties

Почему без фреймворков

Это не принципиальная позиция. Это исследовательский вопрос: что из коробки может предложить современный браузер?

Нативные ES-модули решают проблему разделения кода. CSS Custom Properties решают проблему динамических тем. Intersection Observer решает бесконечную прокрутку. Web Share API обеспечивает шаринг на

Она имеет подержку PWA и потестировать вы можете прямо сейчас