«32 личности» — сайт-тест по соционике на React: тест из 64 вопросов, радар функций, матрица совместимости 16×16 и мини-приложение Telegram

Описание

Нужен был русскоязычный аналог 16personalities на базе соционики: тест, понятный результат и справочник по 32 профилям (16 типов × 2 подтипа).

Требования:
— без своего сервера и базы, чтобы сайт почти ничего не стоил в поддержке;
— нормальная индексация в поиске: у каждой страницы типа свои мета-теги и обложка для соцсетей;
— тот же код должен работать как мини-приложение Telegram;
— расчёты (модель А, отношения между типами) не должны заполняться вручную: 256 пар легко перепутать.

Решение

Сделал статический сайт на React 19 + TypeScript + Vite. Всё считается в браузере, результат хранится локально и открывается по ссылке.

• Тест на 64 вопроса: шкала −3…+3, веса и реверсы, автосохранение, управление с клавиатуры. На выходе тип, подтип, альтернативы и уверенность.
• Результат: радар 8 функций, проценты по осям, признаки Рейнина, экспорт в PNG и JSON, ссылка для шеринга.
• Модель А и матрица отношений 16×16 генерируются кодом. Дуальные пары, симметрию отношений и 32 эталонных результата теста проверяют 77 автотестов (Vitest).
• Матрица с разбором каждой пары, сравнение двух типов, каталог 32 профилей с фильтрами, светлая и тёмная тема.
• Пререндер 38 страниц в отдельные HTML, sitemap, robots, отдельная og-обложка на каждый тип.
• Режим мини-приложения Telegram с нативными кнопками, вебхук бота на Cloudflare Worker.
• Деплой на Cloudflare Pages через GitHub Actions, свой домен, Яндекс Метрика с целями воронки теста.

Результат

Сайт работает на 32personal.site, мини-приложение открывается из бота @thirtytwopers_bot.

— Lighthouse Accessibility: 100.
— Нагрузочный тест k6: 500 одновременных пользователей без ошибок.
— 38 страниц отдаются готовым HTML, поэтому поисковики видят контент без выполнения JS.
— Поддержка почти бесплатная: нет сервера и базы, только статика на Cloudflare.

Срок: около 3,5 недель, рабочая версия с тестом и профилями была готова в первый день, остальное время ушло на SEO, деплой, Telegram и правки по ревью.