Кейс 09 / 17 · Сайт · 2026
MXVI
Коллекция практических гайдов по серверному деплою, администрированию и backend-инструментам с интерактивными инструментами и обучающими квизами.
- Время разработки: 12 дней
- Статей в стартовом релизе: 15+
- Строк кода: 4 500+
- Квизы: Пер-статья (опционально)
Задача
Разработчикам и инженерам часто не хватает компактного, проверенного и обновляемого набора рецептов по настройке серверов, деплою и обеспечению безопасности — существующие материалы разрозненны или устарели.
Решение
Лёгкий контент-портал с рейтингом статей, поиском, категориями и встроенными интерактивными инструментами: статьи пишутся как React/TSX-модули, каждая статья может экспортировать квизы и полезные сниппеты; сайт оптимизирован под SEO и быстрый развёрт на Vite.
Ключевое
React + TypeScript + Vite · Articles-first · Interactive quizzes · SEO-ready
Что сделано
- Структурированные статьи в виде React/TSX-компонентов с автоматическим подсчётом времени чтения
- Интерактивные квизы внизу статьи: экспортируемые вопросы из самих модулей
- Главная с поиском, фильтрацией по категориям, закреплёнными (pinned) статьями и сохранением закладок
- Страница интерактивных инструментов (утилиты, команды, проверки)
- Поддержка заметок, сносок и блоков кода с подсветкой
- Адаптивный современный UI на Tailwind-like стилях и serif-шрифтах для заголовков
- SEO: мета-теги OpenGraph/Twitter + динамический favicon и theme-color
- Простая workflow для добавления статей: файл TSX → импорт в реестр → автоматическое появление в каталоге
- Почтовая ссылка для предложений: submit@mxvi.ru (футер)
- Лёгкая система тестирования контента и проверок (lint, типизация TypeScript)
Этапы
- Анализ и прототип (1 день) — Определили формат статей, структуру реестра и UX для квизов
- Контент и миграция (4 дня) — Написание первых 10–15 статей, перенос существующих заметок в TSX-модули
- Frontend и компоненты (4 дня) — Разработка layout, ArticleLayout, CodeBlock, Footnotes, полезных компонентов и главной страницы
- Интерактивные элементы (2 дня) — Квизы, полезные команды, проверка DNS/разделы, bookmark и поиск по сайту
- SEO, favicon и деплой (1 день) — Мета-теги, динамический SVG-фавикон, сборка Vite и конфиг хостинга
Следующий проект: Episodr